From db0423fa39d20491986aa6db2915544668c68d36 Mon Sep 17 00:00:00 2001
From: Travis Lane <63308171+Tormak9970@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:15:56 -0400
Subject: [PATCH] chore: changed how grid icons are rendered

---
 .../core/games/grid-view/GridEntry.svelte     | 111 +++++++++---------
 src/components/core/grids/Grid.svelte         |  78 ++++++------
 src/windows/globalStyles.css                  |   1 +
 3 files changed, 91 insertions(+), 99 deletions(-)

diff --git a/src/components/core/games/grid-view/GridEntry.svelte b/src/components/core/games/grid-view/GridEntry.svelte
index e9c6923..345ed33 100644
--- a/src/components/core/games/grid-view/GridEntry.svelte
+++ b/src/components/core/games/grid-view/GridEntry.svelte
@@ -22,56 +22,53 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="game" class:selected={$selectedGameAppId === game.appid.toString()} on:click={selectGame}>
-  <div
-    class="image-control icon-2"
-    on:click|stopPropagation={() => showAllGrids(game.appid)}
-    use:AppController.tippy={{ content: "View Grids", placement: "right", onShow: AppController.onTippyShow }}
-  >
-    <AllGrids />
-  </div>
-  <div
-    class="image-control icon-30"
-    on:click|stopPropagation={() => toggleHidden(!isHidden)}
-    use:AppController.tippy={{ content: isHidden ? "Unhide" : "Hide", placement: "right", onShow: AppController.onTippyShow }}
-  >
-    {#if isHidden}
-      <Show />
-    {:else}
-      <Hide />
-    {/if}
-  </div>
-  {#if hasCustomName}
-    <div
-      class="image-control icon-58"
-      on:click|stopPropagation={() => { AppController.clearCustomNameForGame(game.appid.toString()); }}
-      use:AppController.tippy={{ content: "Clear Custom Name", placement: "right", onShow: AppController.onTippyShow }}
-    >
-      <Tag height="1em" />
-    </div>
-  {/if}
-  {#if hasCustomArt}
+  <div class="button-container">
     <div
       class="image-control"
-      class:icon-58={!hasCustomName}
-      class:icon-86={hasCustomName}
-      on:click|stopPropagation={() => { AppController.clearCustomArtForGame(game.appid.toString()); }}
-      use:AppController.tippy={{ content: "Clear Art", placement: "right", onShow: AppController.onTippyShow }}
+      on:click|stopPropagation={() => showAllGrids(game.appid)}
+      use:AppController.tippy={{ content: "Grids", placement: "right", onShow: AppController.onTippyShow }}
     >
-      <Ban />
+      <AllGrids />
     </div>
-  {/if}
-  {#if canDiscard}
     <div
       class="image-control"
-      class:icon-58={!hasCustomName && !hasCustomArt}
-      class:icon-86={(hasCustomName || hasCustomArt) && !(hasCustomName && hasCustomArt)}
-      class:icon-114={hasCustomName && hasCustomArt}
-      on:click|stopPropagation={() => { AppController.discardChangesForGame(game.appid.toString()); }}
-      use:AppController.tippy={{ content: "Discard Changes", placement: "right", onShow: AppController.onTippyShow }}
+      on:click|stopPropagation={() => toggleHidden(!isHidden)}
+      use:AppController.tippy={{ content: isHidden ? "Unhide" : "Hide", placement: "right", onShow: AppController.onTippyShow }}
     >
-      <Recycle />
+      {#if isHidden}
+        <Show />
+      {:else}
+        <Hide />
+      {/if}
     </div>
-  {/if}
+    {#if hasCustomName}
+      <div
+        class="image-control"
+        on:click|stopPropagation={() => { AppController.clearCustomNameForGame(game.appid.toString()); }}
+        use:AppController.tippy={{ content: "Clear Name", placement: "right", onShow: AppController.onTippyShow }}
+      >
+        <Tag height="1em" />
+      </div>
+    {/if}
+    {#if hasCustomArt}
+      <div
+        class="image-control"
+        on:click|stopPropagation={() => { AppController.clearCustomArtForGame(game.appid.toString()); }}
+        use:AppController.tippy={{ content: "Clear Art", placement: "right", onShow: AppController.onTippyShow }}
+      >
+        <Ban />
+      </div>
+    {/if}
+    {#if canDiscard}
+      <div
+        class="image-control"
+        on:click|stopPropagation={() => { AppController.discardChangesForGame(game.appid.toString()); }}
+        use:AppController.tippy={{ content: "Discard Changes", placement: "right", onShow: AppController.onTippyShow }}
+      >
+        <Recycle />
+      </div>
+    {/if}
+  </div>
   <GridImage imagePath={imagePath} altText="{game.name}'s {$gridType} image" showImage={showImage} missingMessage="No {$gridType} image for game" />
   <div class="name" use:AppController.tippy={{ content: game.name, placement: "right", onShow: AppController.onTippyShow }}>{game.name}</div>
 </div>
@@ -114,9 +111,23 @@
     text-align: center;
   }
 
-  .image-control {
+  .button-container {
     position: absolute;
 
+    top: 2px;
+    left: 2px;
+    
+    width: 14px;
+
+    z-index: 2;
+
+    flex-direction: column;
+    gap: 5px;
+
+    display: none;
+  }
+
+  .image-control {
     border-radius: 50%;
 
     width: 14px;
@@ -124,28 +135,16 @@
 
     padding: 5px;
 
-    left: 2px;
-
     fill: var(--font-color);
 
     background-color: var(--background);
 
     opacity: 0.8;
-
-    display: none;
-
-    z-index: 2;
   }
   .image-control:hover {
     cursor: pointer;
     opacity: 1;
   }
 
-  .icon-2 { top: 2px; }
-  .icon-30 { top: 30px; }
-  .icon-58 { top: 58px; }
-  .icon-86 { top: 86px; }
-  .icon-114 { top: 114px; }
-
-  .game:hover > .image-control { display: flex; }
+  .game:hover > .button-container { display: flex; }
 </style>
\ No newline at end of file
diff --git a/src/components/core/grids/Grid.svelte b/src/components/core/grids/Grid.svelte
index 044ce6b..8f1f12b 100644
--- a/src/components/core/grids/Grid.svelte
+++ b/src/components/core/grids/Grid.svelte
@@ -34,22 +34,24 @@
   <div class="loading-overlay" class:selected={$dowloadingGridId === grid.id.toString()}>
     <LoadingSpinner width="40px" height="40px" />
   </div>
-  <div class="image-control show-view" on:click|stopPropagation={() => { AppController.viewSteamGridImage(grid); }} use:AppController.tippy={{ content: "View Grid", placement: "right", onShow: AppController.onTippyShow }}>
-    <Expand />
-  </div>
-  <div class="image-control show-view-sgdb" on:click|stopPropagation={viewOnSteamGridDB} use:AppController.tippy={{ content: "View on SGDB", placement: "right", onShow: AppController.onTippyShow }}>
-    <Share />
-  </div>
-  {#if grid?.isAnimated}
-    <div class="image-control show-animated" use:AppController.tippy={{ content: "Animated", placement: "left", onShow: AppController.onTippyShow }}>
-      <Film />
+  <div class="button-container">
+    <div class="image-control" on:click|stopPropagation={() => { AppController.viewSteamGridImage(grid); }} use:AppController.tippy={{ content: "View Grid", placement: "right", onShow: AppController.onTippyShow }}>
+      <Expand />
     </div>
-  {/if}
-  {#if grid?.notes}
-    <div class="image-control show-notes" use:AppController.tippy={{ content: "Notes", placement: "right", onShow: AppController.onTippyShow }}>
-      <Edit />
+    <div class="image-control" on:click|stopPropagation={viewOnSteamGridDB} use:AppController.tippy={{ content: "View on SGDB", placement: "right", onShow: AppController.onTippyShow }}>
+      <Share />
     </div>
-  {/if}
+    {#if grid?.notes}
+      <div class="image-control non-interactable" use:AppController.tippy={{ content: "Notes", placement: "right", onShow: AppController.onTippyShow }}>
+        <Edit />
+      </div>
+    {/if}
+    {#if grid?.isAnimated}
+      <div class="image-control non-interactable" use:AppController.tippy={{ content: "Animated", placement: "right", onShow: AppController.onTippyShow }}>
+        <Film />
+      </div>
+    {/if}
+  </div>
   <GridImage imagePath={imagePath} altText="{grid.author.name}'s {$gridType} image" missingMessage="Unable to display grid" isVideo={grid.isAnimated} />
   <div class="author">By {grid.author.name}</div>
 </div>
@@ -114,9 +116,23 @@
     display: flex;
   }
 
-  .image-control {
+  .button-container {
     position: absolute;
 
+    top: 2px;
+    left: 2px;
+    
+    width: 14px;
+
+    z-index: 2;
+
+    flex-direction: column;
+    gap: 5px;
+
+    display: none;
+  }
+
+  .image-control {
     border-radius: 50%;
 
     width: 14px;
@@ -124,45 +140,21 @@
 
     padding: 5px;
 
-    left: 2px;
-
     fill: var(--font-color);
 
     background-color: var(--background);
 
     opacity: 0.8;
-
-    display: none;
-
-    z-index: 2;
   }
   .image-control:hover {
     cursor: pointer;
     opacity: 1;
   }
 
-  .show-view { top: 2px; }
-  
-  .show-view-sgdb { top: 30px; }
-
-  .show-notes { cursor: default; top: 58px; }
-  .show-notes:hover { cursor: default; opacity: 0.8; }
-
-  .show-animated {
-    display: flex;
-    cursor: default;
+  .grid:hover > .button-container { display: flex; }
 
-    top: 2px;
-    left: auto;
-    right: 2px;
-    
-    background-color: var(--background);
-    opacity: 0.8;
-  }
-  .show-animated:hover {
-    display: flex;
-    cursor: default;
+  .non-interactable,
+  .non-interactable:hover {
+    cursor: default; opacity: 0.8;
   }
-
-  .grid:hover > .image-control { display: flex; }
 </style>
\ No newline at end of file
diff --git a/src/windows/globalStyles.css b/src/windows/globalStyles.css
index 1d700a1..7cb181a 100644
--- a/src/windows/globalStyles.css
+++ b/src/windows/globalStyles.css
@@ -177,6 +177,7 @@ a:visited { color: var(--link-color-visited); }
   /* padding-bottom: 3px; */
   padding: 3px 5px;
   padding-bottom: 2px;
+  white-space: nowrap;
 }
 
 .tippy-box[data-theme~=sarm]>.tippy-backdrop {