exceptions rework finished from UI perspective

SteamGridDB · Jun 11, 2024 · 00a052d · 00a052d
1 parent 167cb12
commit 00a052d
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/src/renderer/services/preview.service.ts b/src/renderer/services/preview.service.ts
@@ -305,9 +305,12 @@ export class PreviewService {
           const longId = steam.lengthenAppId(shortId);
           const artworkType = invertedArtworkIdDict[gridName.replace(/^\d+/,'')];
           const steamImageUrl = url.encodeFile(outcomes[steamDirectory][userId].successes[gridName]);
-          const app = this.previewData[steamDirectory][userId].apps[longId];
-          if(app && artworkType) {
-            this.previewData[steamDirectory][userId].apps[longId].images[artworkType].singleProviders.steam = {
+          const matchedApps = Object.entries(this.previewData[steamDirectory][userId].apps).filter(([appId, app]) => {
+            return app.changedId ? app.changedId == longId : appId == longId
+          });
+          if(matchedApps.length && artworkType) {
+            const [appId, app] = matchedApps[0];
+            this.previewData[steamDirectory][userId].apps[appId].images[artworkType].singleProviders.steam = {
               imageProvider: imageProviderNames.steam,
               imageUrl: steamImageUrl,
               imageRes: url.imageDimensions(steamImageUrl),

diff --git a/src/renderer/styles/nav-border.component.scss b/src/renderer/styles/nav-border.component.scss
@@ -1,7 +1,8 @@
+@import "mixins";
 :host{
     position: relative;
     width: 2px;
-    background: var(--color-nav-border);
+    background: var(--color-preview-menu-background);
     cursor: ew-resize;
     display: var(--display-nav-border);
     &.dragging{

diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss
@@ -25,7 +25,6 @@
   --list-images-width: 0%;
   --excludes-lower-width: 0%;
   --filters-width: 0%;
-  --details-options-height: 330px;
   grid-area: route;
   grid-template-areas:
     "upperMenu upperMenu upperMenu upperMenu upperMenu"
@@ -351,14 +350,14 @@
     grid-template-rows: auto 1fr;
     overflow-y: auto;
     &>.loadingSpinner {
-      margin-left: calc(var(--details-width) - 2.5em)
+      margin-left: calc(var(--details-width) - 3em)
     }
 
     .detailsOptions {
       position: fixed;
-      width: calc(var(--details-width) - 201px);
-      height: var(--details-options-height);
-      background-color: rgb(29,29,29);
+      width: var(--width-details-options);
+      height: var(--height-details-options);
+      background-color: var(--color-details-options-background);
       opacity: 1;
       padding: 1em 1em 0.5em 1em;
       grid-area: detailsOptions;
@@ -421,15 +420,15 @@
       }
     }
     .appResults {
-      margin-top: calc(var(--details-options-height) + 2em);
+      margin-top: calc(var(--height-details-options) + 2em);
       grid-area: detailsList;
       > .approw {
         display: flex;
         justify-content: left;
         align-items: center;
         background-color: var(--color-preview-user-background);
         color: var(--color-preview-text);
-        margin-bottom: 1em;
+        margin-bottom: 0em;
         &:hover,
         &.selected {
           background-color: var(--color-ng-select-option-background-hover);
@@ -439,8 +438,8 @@
           flex-shrink: 0;
           border: solid 2px var(--color-preview-image-border);
           margin: 0.75em;
-          width: calc(var(--preview-image-size) * var(--games-tall-width));
-          height: calc(var(--preview-image-size) * var(--games-tall-height));
+          width: calc(0.6 * var(--preview-image-size) * var(--games-tall-width));
+          height: calc(0.6 * var(--preview-image-size) * var(--games-tall-height));
           background-repeat: no-repeat;
           background-position: center center;
           background-size: 100%;
@@ -450,12 +449,15 @@
         }
       }
       .appButtons {
-        margin-top: 1em;
-        margin-bottom: 2.5em;
+        margin-top: 0.5em;
+        margin-bottom: 2em;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
         .button {
           @include button();
           @include clickButtonColor(click-button);
-          margin-left: 1em;
+          margin-right: 1em;
         }
       }
     }

diff --git a/src/renderer/styles/themes.global.scss b/src/renderer/styles/themes.global.scss
@@ -399,8 +399,11 @@
   --color-custom-variables-background: #050505;
   --color-custom-variables-text: #a0a0a0;
   --color-custom-variables-divider: #121212;
+  --color-details-options-background: var(--color-preview-background);
   --width-preview-select-cats: 9em;
   --width-preview-select-type: 8em;
+  --width-details-options: calc(0.5 * (100vw - var(--nav-width)) - 45px);
+  --height-details-options: 280px;
   --position-update-notifier-left: 0;
   --position-update-notifier-right: auto;
   --position-update-notifier-bottom: 0;
@@ -1226,8 +1229,12 @@
   --color-highlight-level-2-hover: rgba(214, 150, 39, 1);
   --color-highlight-level-2-active: rgba(214, 150, 39, 1);
   --color-custom-variables-background: #050505;
+  --color-details-options-background: rgb(0,0,0);
   --color-custom-variables-text: #a0a0a0;
   --color-custom-variables-divider: #121212;
+  --width-details-options: calc(50vw - 44px);
+  --height-details-options: 380px;
+
   --width-preview-select-cats: 12em;
   --width-preview-select-type: 10em;
   --position-update-notifier-left: 0;
@@ -1417,7 +1424,7 @@
   --color-parsers-user-instructions-item-title-text: #c8c8c8;
   --color-parsers-user-instructions-scrollbar-thumb: rgba(80, 80, 80, 0.5);
   --color-parsers-user-instructions-scrollbar-track: rgba(31, 31, 31, 0.45);
-  --color-preview-background: inherit;
+  --color-preview-background: #101424;
   --color-select-arrow-left: #fff;
   --color-select-arrow-left-active: #ffffff;
   --color-select-arrow-left-hover: #cccccc;
@@ -1596,10 +1603,13 @@
   --color-highlight-level-2-hover: rgba(214, 150, 39, 1);
   --color-highlight-level-2-active: rgba(214, 150, 39, 1);
   --color-custom-variables-background: #050505;
+  --color-details-options-background: var(--color-preview-background);
   --color-custom-variables-text: #a0a0a0;
   --color-custom-variables-divider: #121212;
   --width-preview-select-cats: 9em;
   --width-preview-select-type: 10em;
+  --width-details-options: calc(0.5 * (100vw - var(--nav-width)) - 45px);
+  --height-details-options: 330px;
   --position-update-notifier-left: 0;
   --position-update-notifier-right: 0;
   --position-update-notifier-bottom: 0;

diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -80,7 +80,7 @@ <h1>Add your games to Steam</h1>
         <div class="detailsOptions">
           <div class="detailsException">
             <div class="detailsExceptionSection">
-              <span>Exceptions</span>
+              <span>Per-App-Exceptions</span>
             </div>
             <div class="detailsExceptionField">
               <div class="detailsExceptionText">
@@ -114,6 +114,9 @@ <h1>Add your games to Steam</h1>
                 [(ngModel)]="detailsException.commandLineArguments"
               ></ng-text-input>
               </div>
+              <div class="detailsExceptionButton"
+              (click)="detailsException.commandLineArguments=''"
+              >Clear</div>
             </div>
             <div class="detailsExceptionField">
               <div class="detailsExceptionText">
@@ -131,7 +134,7 @@ <h1>Add your games to Steam</h1>
           <div class="detailsSearch">
             <ng-text-input
               class="ngTextInput"
-              placeholder="Search SteamGridDB"
+              placeholder="Game Title"
               [(ngModel)]="detailsSearchText"
             ></ng-text-input>
             <div class="clickButton2" (click)="searchForDetails()">Search</div>
@@ -142,12 +145,13 @@ <h1>Add your games to Steam</h1>
             <div class="approw" [class.selected]="matchFix == sgdbId" (click)="fixMatch(sgdbId)">
               <div class="app" [style.backgroundImage]="setDetailsBackgroundImage(sgdbId) | cssUrl | safeStyle"></div>
               <div class="apptitle">
-                <span>{{ matchFixDict[sgdbId].name }} <a class="button" href="https://www.steamgriddb.com/game/{{sgdbId}}">(SGDB)</a></span>
+                <span>{{ matchFixDict[sgdbId].name }}</span>
               </div>
             </div>
             <div class="appButtons">
-              <div class="button" (click)="fixMatchSearch(sgdbId)">Search Title Only</div>
-              <div class="button" (click)="fixMatchTitle(sgdbId)">Display Title Only</div>
+              <div class="button" (click)="fixMatchSearch(sgdbId)">Artwork Only</div>
+              <div class="button" (click)="fixMatchTitle(sgdbId)">Title Only</div>
+              <a class="button" href="https://www.steamgriddb.com/game/{{sgdbId}}" style="text-decoration: none;">View on SGDB</a>
             </div>
           </ng-container>
         </div>