+ Log report + Exceptions on EmuDeck theme (#534)

* Easier Theme Selector * EmuDeck wip * Deck Theme * EmuDeck theme * Opacity * small fix setttings * font * Fix routing issue (#1) * added EmuDeck to themes * fixed routing * EmuDeck Theme + fixes Classic and Deck theme * new bg + fix navarea buttons * Preview Screen Text + Lens Icon * typo * streamlined button * add (bad) styling for required fields (#2) * comma * nicer colors * small fixie * Fix update alert * fix chunky boy * label switcharoo * + Log report + Exceptions --------- Co-authored-by: Chris Dock <[email protected]>
SteamGridDB · Apr 29, 2023 · 2d8d276 · 2d8d276
1 parent 11d363e
commit 2d8d276
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 25 deletions.
diff --git a/src/renderer/components/app.component.ts b/src/renderer/components/app.component.ts
@@ -39,7 +39,7 @@ export class AppComponent {
 
       // EmuDeck special navigation
       this.router.events.subscribe((val) => {
-        if (this.router.url === '/logger' && appSettings.theme === 'EmuDeck' || this.router.url === '/' && appSettings.theme === 'EmuDeck') {
+        if (this.router.url === '/logger' || this.router.url === '/user-exceptions' && appSettings.theme === 'EmuDeck' || this.router.url === '/' && appSettings.theme === 'EmuDeck') {
           this.shouldHideComponent = true;
         } else {
           this.shouldHideComponent = false;

diff --git a/src/renderer/styles/themes.global.scss b/src/renderer/styles/themes.global.scss
@@ -1,3 +1,5 @@
+@import "mixins";
+
 :root {
   --color-app-loading-spinner: #31a0f4
 
@@ -397,34 +399,20 @@
     background-size: cover;
   }
 
-  navarea nav{
+  &.EmuDeck.EmuDeck.EmuDeck.EmuDeck.EmuDeck navarea nav{
     justify-content: end;
     margin: 0 10px;
 
-    nav-link:nth-child(6),
-    nav-expand:nth-child(4),
+    nav-link:nth-child(6)
     {
       display: none;
     }
 
-    nav-link{
+    nav-link, nav-expand .items nav-link{
       display: inline-flex;
 
-      padding: var(--padding-click-button);
-      border-radius: var(--radius-click-button);
-      white-space: nowrap;
-      cursor: pointer;
-      border-width: 1px;
-      border-style: solid;
-
-      align-items: center;
-
-
-      color: var(--color-click-button-text);
-      border-color: var(--color-click-button-border);
-      background-color: #666666;
-
-      fill: var(--color-click-button-text);
+      @include button();
+      @include clickButtonColor(click-button);
 
 
       margin-left: 18px;
@@ -437,6 +425,7 @@
 
         fill: var(--color-click-button-text-hover);
       }
+
 
       &:active {
         color: var(--color-click-button-text-active);
@@ -450,8 +439,20 @@
       }
     }
 
+    nav-expand{
+      margin-left: 18px;
+      nav-link{
+        margin-left:0 !important;
+        &:before{
+          display: none !important;
+        }
+      }
+    }
+
   }
 
+
+
   navarea{
     background: transparent;
     display: flex;
@@ -563,10 +564,115 @@
     }
   }
 
+  &.EmuDeck.EmuDeck.EmuDeck.EmuDeck user-exceptions{
+    grid-template-areas: 
+    "description description"
+    "upperMenu upperMenu"
+    "exceptions exceptions"
+    "menu menu";
+
+    grid-template-rows: auto auto 1fr auto;
+
+    .upperMenu{
+      max-width: 94vw;
+      width: 100%;
+      margin: 0 auto;
+      .search{
+        justify-content: left;        
+      }
+      .searchExceptions,.searchExceptions:hover{
+        margin: 0;
+        background: #fff;
+        color: #444
+      }
+    }
+
+    .exception-entry{
+      background-color: rgb(255, 255, 255);
+      padding: 10px 14px;
+      margin-bottom: 10px;
+      margin-right: 10px;
+      border-radius: 4px;
+      transition: 0.8s;
+      .text{
+        color: #444;
+      }
+      .inputContainer{
+        margin-bottom: 0;
+        & > div:nth-child(4){
+          display: none
+        }
+      }
+    }
+
+    //Only Emudeck
+    .description{
+      grid-area: description;
+      color: #fff;
+      max-width: 94vw;
+      width: 100%;
+      margin: 0 auto;      
+      overflow: hidden;
+      h1{
+          line-height: 1.25;          
+          margin-top:0;
+          margin: var(--margin-markdown-hx);
+          padding-bottom: 0.3em;
+          font-size: var(--font-markdown-h1);
+          font-family: var(--font-family-markdown-h1);
+          color: var(--color-markdown-h1);
+        }
+      p{
+        color: var(--color-markdown-text);
+      }
+
+    }
+
+    markdown{
+      display: none
+    }
+
+    .userExceptions{
+      max-width: 94vw;
+      width: 100%;
+      margin: 0 auto;
+      .addItem{
+        display: none
+      }
+      label{
+        display: none;
+      }  
+      label + div{
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap
+      }
+      > div > div{
+        margin-bottom: 16px;
+        border-bottom: 1px solid var(--color-click-button-background);
+        max-width: 46vw;
+        width: 100%;
+      }
+    }
+
+    .menu{
+      display: flex;
+      justify-content: end;
+      padding: 28px;
+      background: transparent;
+      border: 0;
+      nav-link{
+        margin: 0 0.25em;
+        @include button();
+        @include clickButtonColor(click-button);
+      }
+    }
+  }
+
   &.EmuDeck.EmuDeck log{
     grid-template-areas:
-    "messages messages"
-    "messages messages"
+    "messages bugreport"
+    "messages bugreport"
     "menu menu";
     .menu{      
       margin: 0;
@@ -580,7 +686,7 @@
       background: rgba(0,0,0,.6)
     }
 
-    .bugreport, .bugreportdocs{
+    .bugreportdocs{
       display: none
     }
   }
@@ -797,7 +903,7 @@
   --color-ng-toggle-button-fill-active-hover: var(--color--accent);
   --color-ng-toggle-button-fill-hover: #2f2f2f;
   --color-ng-toggle-button-text: #a0a0a0;
-  --color-parsers-menu-background: #050505;
+  --color-parsers-menu-background: transparent;
   --color-parsers-user-form-background: rgba(29, 29, 29, 0.7);
   --color-parsers-user-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-parsers-user-form-scrollbar-track: rgba(80, 80, 80, 0.3);

diff --git a/src/renderer/styles/user-exceptions.component.scss b/src/renderer/styles/user-exceptions.component.scss
@@ -12,6 +12,7 @@
 
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto 1fr auto;
+
 
   .upperMenu {
     grid-area: upperMenu;

diff --git a/src/renderer/templates/user-exceptions.component.html b/src/renderer/templates/user-exceptions.component.html
@@ -1,3 +1,8 @@
+<div class="description only-emudeck">
+  <h1>Excluded Games & Exceptions</h1>
+  <p>Here you can see the games you've excluded on the Preview page in case you want to add them back</p>
+</div>
+
 <div class= "upperMenu">
   <div class="search">
     <ng-text-input class="searchExceptions" placeholder="Search Exceptions" [(ngModel)]="filterValue"></ng-text-input>
@@ -13,7 +18,7 @@
   <div [formGroup]="exceptionsForm">
     <div formArrayName="items"
          *ngFor="let item of exceptionsForm.get('items').controls; let i=index;">
-      <div [formGroupName]="i" *ngIf="(item.controls['oldTitle'].value | fuzzyTest: filterValue) ">
+      <div class="exception-entry" [formGroupName]="i" *ngIf="(item.controls['oldTitle'].value | fuzzyTest: filterValue) ">
         <div class="inputContainer">
           <div class="inlineLeft">
             <div class=text style="margin-right: 0.25em;">Extracted Title: </div>
@@ -50,5 +55,8 @@
     <div class="dangerousButton" (click)=deleteAll()>{{lang.buttons.deleteAll}}</div>
     <div (click)=save() *ngIf="exceptionsService.isUnsaved">{{lang.buttons.save}}</div>
     <div *ngIf="exceptionsService.isUnsaved" (click)="undo()">{{lang.buttons.undoChanges}}</div>
+    <div class='addItem' class="only-emudeck" (click)="addItem()">{{lang.buttons.addItem}}</div>
+    <nav-link [routerLink]="['/parsers-list']" class="only-emudeck" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
+    >Back</nav-link>
   </ng-container>
 </div>