Add setting to change Tab Bar position

amanharwara · Aug 7, 2021 · bd74d9e · bd74d9e
1 parent f923bd4
commit bd74d9e
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 17 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -56,17 +56,25 @@
     <CustomTitlebar />
   {/if}
   <div class="container">
-    <TabBar
-      on:add-tab={() => {
-        $modals.tabConfigModalVisible = true;
-        tabSettings = defaultTabSettings();
-      }}
-      on:edit-tab={(e) => {
-        tabSettings = e.detail.tabToEdit;
-        $modals.tabConfigModalVisible = true;
-      }}
-    />
-    <TabContent />
+    <div
+      class={`flex ${
+        $settings["tabBarPosition"].value === "top"
+          ? "flex-col"
+          : "flex-col-reverse"
+      }`}
+    >
+      <TabBar
+        on:add-tab={() => {
+          $modals.tabConfigModalVisible = true;
+          tabSettings = defaultTabSettings();
+        }}
+        on:edit-tab={(e) => {
+          tabSettings = e.detail.tabToEdit;
+          $modals.tabConfigModalVisible = true;
+        }}
+      />
+      <TabContent />
+    </div>
     <SettingsManager
       visible={$modals.settingsManagerVisible}
       on:settings-changed={settingsChanged}
@@ -104,6 +112,16 @@
   .container {
     flex-grow: 1;
   }
+  .flex {
+    display: flex;
+    flex-grow: 1;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   :global(.hasTitlebar .modal-container) {
     top: auto;
     bottom: 0;

diff --git a/src/components/SettingsManager.svelte b/src/components/SettingsManager.svelte
@@ -112,6 +112,16 @@
                 bind:value={currentSettings[setting.id].value}
                 on:toggle={settingToggled}
               />
+            {:else if setting.options}
+              <select
+                id={setting.id}
+                name={setting.id}
+                bind:value={currentSettings[setting.id].value}
+              >
+                {#each setting.options as option}
+                  <option value={option}>{option}</option>
+                {/each}
+              </select>
             {:else}
               <input
                 type="text"

diff --git a/src/store/settings.ts b/src/store/settings.ts
@@ -4,9 +4,15 @@ const defaultSettings: () => Settings = () => {
   return {
     tabBar: {
       value: true,
-      name: "Tab Bar",
+      name: "Show Tab Bar",
       description: "Controls whether the tab bar is visible or not.",
     },
+    tabBarPosition: {
+      value: "top",
+      name: "Tab Bar Position",
+      description: "Controls the position of the tab bar.",
+      options: ["top", "bottom"],
+    },
     trayIcon: {
       value: true,
       name: "Tray Icon",

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -30,6 +30,7 @@ type SettingType = {
   value: boolean | string;
   name: string;
   description: string;
+  options?: string[];
 };
 
 type Settings = { [k: string]: SettingType };

diff --git a/yarn.lock b/yarn.lock
@@ -456,7 +456,7 @@ __metadata:
     auto-launch: ^5.0.5
     concurrently: ^6.2.0
     dragula: ^3.7.3
-    electron: ^13.0.0
+    electron: ^13.1.7
     electron-builder: ^22.11.7
     electron-context-menu: ^3.1.1
     electron-dl: ^3.2.1
@@ -1753,16 +1753,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron@npm:^13.0.0":
-  version: 13.1.7
-  resolution: "electron@npm:13.1.7"
+"electron@npm:^13.1.7":
+  version: 13.1.8
+  resolution: "electron@npm:13.1.8"
   dependencies:
     "@electron/get": ^1.0.1
     "@types/node": ^14.6.2
     extract-zip: ^1.0.3
   bin:
     electron: cli.js
-  checksum: 0d7bf9a3bf98730e2a2acac8531f0f5942afc9d584867f1a8a7d6198ba7d9861fe9e412ac62d0a7c924dbc85e40dae541000acfeefe28e6a0b840fda0ba2f8af
+  checksum: a20b49e752530fd75a9e0c5bc52ea19dcec21ef35c4bc03203155b1fa332ba09c588adeb1ef7b866c5c12f437cf5ede8bc4fccb497d45f4bcef44676cf8bb999
   languageName: node
   linkType: hard