feat: added tools modal

Tormak9970 · Sep 22, 2024 · db79bb8 · db79bb8
1 parent dc63f07
commit db79bb8
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 48 deletions.
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -1,26 +1,10 @@
 <script lang="ts">
-  import { AppController, DialogController } from "@controllers";
-  import { Clean, Cog, Export, GameTiles, GitHub, Import, Info, Plus, Refresh, Stack } from "@icons";
+  import { AppController } from "@controllers";
+  import { Cog, GitHub, Info, Refresh, Wrench } from "@icons";
   import { Button, IconButton } from "@interactables";
   import { canSave, isOnline } from "@stores/AppState";
-  import { showBatchApplyModal, showCleanGridsModal, showInfoModal, showManualGamesModal, showSettingsModal, showUpdateTilesModal } from "@stores/Modals";
+  import { showInfoModal, showSettingsModal, showToolsModal } from "@stores/Modals";
   import { open } from "@tauri-apps/plugin-shell";
-
-  /**
-   * Wrapper function for handling when the Clean Grids action is selected.
-   */
-  async function onCleanGridsClick(): Promise<void> {
-    if ($canSave) {
-      const shouldSaveAndOpen = await DialogController.ask("Found in Progress Changes", "WARNING", "You need to save your changes before cleaning. Would you like to save?", "Yes", "No");
-
-      if (shouldSaveAndOpen) {
-        await AppController.saveChanges();
-        $showCleanGridsModal = true;
-      }
-    } else {
-      $showCleanGridsModal = true;
-    }
-  }
 </script>
 
 <div class="footer">
@@ -46,23 +30,8 @@
     <IconButton label="Reload SARM" onClick={AppController.reload} width="auto" tooltipPosition="auto">
       <Refresh style="height: 12px; width: 12px;" />
     </IconButton>
-    <IconButton label="Update Game Tiles" onClick={() => { $showUpdateTilesModal = true; }} width="auto" tooltipPosition="auto">
-      <GameTiles style="height: 12px; width: 12px;" />
-    </IconButton>
-    <IconButton label="Clean Grids" onClick={onCleanGridsClick} width="auto" tooltipPosition="auto">
-      <Clean style="height: 12px; width: 12px;" />
-    </IconButton>
-    <IconButton label="Manage Manual Games" onClick={() => { $showManualGamesModal = true; }} width="auto" tooltipPosition="auto">
-      <Plus style="height: 12px; width: 12px;" />
-    </IconButton>
-    <IconButton label="Batch Apply" onClick={() => { $showBatchApplyModal = true; }} width="auto" tooltipPosition="auto">
-      <Stack style="height: 12px; width: 12px;" />
-    </IconButton>
-    <IconButton label="Import" onClick={AppController.importGrids} width="auto" tooltipPosition="auto">
-      <Import style="height: 12px; width: 12px;" />
-    </IconButton>
-    <IconButton label="Export" onClick={AppController.exportGrids} width="auto" tooltipPosition="auto">
-      <Export style="height: 12px; width: 12px;" />
+    <IconButton label="Tools" onClick={() => $showToolsModal = true} width="auto" tooltipPosition="auto">
+      <Wrench style="height: 12px; width: 12px;" />
     </IconButton>
     <IconButton label="Settings" onClick={() => { $showSettingsModal = true; }} width="auto">
       <Cog style="height: 12px; width: 12px;" />

diff --git a/src/components/icons/Wrench.svelte b/src/components/icons/Wrench.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { SVGAttributes } from "svelte/elements";
+
+  interface $$Props extends SVGAttributes<any> {};
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...$$restProps}>
+  <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7L336 192c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
+</svg>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
@@ -31,4 +31,5 @@ export { default as Stack } from "./Stack.svelte";
 export { default as Steam } from "./Steam.svelte";
 export { default as Tag } from "./Tag.svelte";
 export { default as Upload } from "./Upload.svelte";
+export { default as Wrench } from "./Wrench.svelte";
 
diff --git a/src/components/modals/Modals.svelte b/src/components/modals/Modals.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSettingsModal, showSteamPathModal, showUpdateModal, showUpdateTilesModal } from "@stores/Modals";
+  import { showBatchApplyModal, showBatchApplyProgress, showCleanConflictDialog, showCleanGridsModal, showCurrentGridsModal, showDialogModal, showGameSearchModal, showGridModal, showInfoModal, showLogoPositionModal, showManualGamesModal, showSettingsModal, showSteamPathModal, showToolsModal, showUpdateModal, showUpdateTilesModal } from "@stores/Modals";
   import BatchApplyModal from "./batch-apply/BatchApplyModal.svelte";
   import BatchApplyProgressModal from "./batch-apply/BatchApplyProgressModal.svelte";
   import CleanConflictDialog from "./clean-grids/CleanConflictDialog.svelte";
@@ -13,6 +13,7 @@
   import ManualGamesModal from "./manual-games/ManualGamesModal.svelte";
   import SettingsModal from "./settings/SettingsModal.svelte";
   import SteamPathModal from "./SteamPathModal.svelte";
+  import ToolsModal from "./ToolsModal.svelte";
   import UpdateModal from "./updates/UpdateModal.svelte";
   import UpdateTilesModal from "./UpdateTilesModal.svelte";
 
@@ -65,4 +66,7 @@
   {#if $showUpdateTilesModal}
     <UpdateTilesModal />
   {/if}
+  {#if $showToolsModal}
+    <ToolsModal />
+  {/if}
 {/if}
diff --git a/src/components/modals/ToolsModal.svelte b/src/components/modals/ToolsModal.svelte
@@ -1,17 +1,67 @@
 <script lang="ts">
-  import { showToolsModal } from "@stores/Modals";
+  import { AppController, DialogController } from "@controllers";
+  import { Clean, Export, GameTiles, Import, Plus, Stack } from "@icons";
+  import { IconButton } from "@interactables";
+  import { canSave } from "@stores/AppState";
+  import { showBatchApplyModal, showCleanGridsModal, showManualGamesModal, showToolsModal, showUpdateTilesModal } from "@stores/Modals";
   import ModalBody from "./modal-utils/ModalBody.svelte";
 
   let open = true;
 
   type Tool = {
     name: string;
-    icon: string;
-    onClick: () => Promise<void>;
+    icon: any;
+    onClick: () => Promise<void> | void;
+  }
+
+  
+  /**
+   * Wrapper function for handling when the Clean Grids action is selected.
+   */
+  async function onCleanGridsClick(): Promise<void> {
+    if ($canSave) {
+      const shouldSaveAndOpen = await DialogController.ask("Found in Progress Changes", "WARNING", "You need to save your changes before cleaning. Would you like to save?", "Yes", "No");
+
+      if (shouldSaveAndOpen) {
+        await AppController.saveChanges();
+        $showCleanGridsModal = true;
+      }
+    } else {
+      $showCleanGridsModal = true;
+    }
   }
 
   const toolsList: Tool[] = [
-    
+    {
+      name: "Export",
+      icon: Export,
+      onClick: AppController.exportGrids
+    },
+    {
+      name: "Import",
+      icon: Import,
+      onClick: AppController.importGrids
+    },
+    {
+      name: "Batch Apply",
+      icon: Stack,
+      onClick: () => { $showBatchApplyModal = true; }
+    },
+    {
+      name: "Manage Manual Games",
+      icon: Plus,
+      onClick: () => { $showManualGamesModal = true; }
+    },
+    {
+      name: "Clean Grids",
+      icon: Clean,
+      onClick: onCleanGridsClick
+    },
+    {
+      name: "Update Game Tiles",
+      icon: GameTiles,
+      onClick: () => { $showUpdateTilesModal = true; }
+    },
   ];
 
   /**
@@ -24,22 +74,28 @@
 
 <ModalBody title={"Tools"} open={open} on:close={() => open = false} on:closeEnd={onClose}>
   <div class="content">
-
+    {#each toolsList as tool}
+      <IconButton label={tool.name} onClick={tool.onClick} height="auto" width="auto" tooltipPosition="bottom">
+        <svelte:component this={tool.icon} style="height: 18px; width: 18px; padding: 32px;" />
+      </IconButton>
+    {/each}
   </div>
 </ModalBody>
 
 <style>
   .content {
-		width: 600px;
+		width: 400px;
+
+		display: grid;
+    gap: 14px;
+		grid-template-columns: repeat(4, 1fr);
+    grid-auto-flow: row;
+
 
-		display: flex;
-		flex-direction: column;
-		align-items: center;
     padding-top: 14px;
 
-    gap: 14px;
     
-		max-height: 73vh;
+		/* max-height: 73vh; */
     overflow-y: scroll;
 	}
 </style>