feat: Add "Clear Cache" button to tab config modal

amanharwara · Nov 2, 2021 · 2b13831 · 2b13831
1 parent 8fe09cd
commit 2b13831
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/components/TabConfigModal.svelte b/src/components/TabConfigModal.svelte
@@ -9,6 +9,7 @@
   import Check from "./svg/Check.svelte";
   import ColorPicker from "./common/ColorPicker.svelte";
   import Modal from "./common/Modal.svelte";
+  const { ipcRenderer } = require("electron");
 
   export let visible = false;
   export let tabSettings: TabType;
@@ -68,6 +69,10 @@
       .getElementById(`webview-${tabSettings.id}`)
       .openDevTools();
   };
+
+  const clearTabCache = () => {
+    ipcRenderer.send("clear-cache", tabSettings.id);
+  };
 </script>
 
 <Modal
@@ -133,7 +138,7 @@
       />
     </div>
   </div>
-  <div class="controls">
+  <div class={`controls ${tabAlreadyExists ? "vertical-controls" : ""}`}>
     <button class="submit" on:click={submit}>
       <div class="icon">
         {#if tabAlreadyExists}
@@ -147,14 +152,17 @@
       </div>
     </button>
     {#if tabAlreadyExists}
-      <button class="open-devtools" on:click={openTabDevTools}
-        >Open DevTools</button
-      >
+      <div>
+        <button class="open-devtools" on:click={openTabDevTools}
+          >Open DevTools</button
+        >
+        <button on:click={clearTabCache}>Clear Cache</button>
+      </div>
     {/if}
   </div>
 </Modal>
 
-<style>
+<style lang="scss">
   .config {
     margin-bottom: 1.25rem;
   }
@@ -303,4 +311,13 @@
     width: 100%;
     height: 100%;
   }
+
+  .vertical-controls {
+    flex-flow: column;
+    align-items: flex-start;
+
+    & > :first-child {
+      margin-bottom: 0.5rem;
+    }
+  }
 </style>