enhance(settings): add vertical tabs

Author: ycnmhd

src/view/actions/settings/render-settings.ts

@@ -8,41 +8,43 @@ import { DefaultDocumentFormat } from 'src/view/actions/settings/components/defa
 import { CardsGap } from 'src/view/actions/settings/components/cards-gap';
 import { CardIndentationWidth } from 'src/view/actions/settings/components/card-indentation-width';
 import { MaintainEditMode } from 'src/view/actions/settings/components/maintain-edit-mode';
-import { Setting } from 'obsidian';
-import { lang } from 'src/lang/lang';
 import { InactiveCardOpacity } from 'src/view/actions/settings/components/inactive-card-opacity';
 import { ActiveBranchColor } from 'src/view/actions/settings/components/active-branch-color';
 import { AlwaysShowCardButtons } from 'src/view/actions/settings/components/always-show-card-buttons';
 import { ControlsBarButtons } from 'src/view/actions/settings/components/controls-bar-buttons/controls-bar-buttons';
 import { HeadingsFontSize } from 'src/view/actions/settings/components/headings-font-size';
 import { LinkPaneType } from 'src/view/actions/settings/components/link-pane-type';
 
-export const renderSettings = (element: HTMLElement) => {
+export type SettingsTab = 'General' | 'Appearance' | 'Layout';
+export const renderSettings = (element: HTMLElement, tab: SettingsTab) => {
     const view = getView();
     const settingsStore = view.plugin.settings;
-    const render = () => {
-        DefaultDocumentFormat(element, settingsStore);
-        LinkPaneType(element, settingsStore);
-        MaintainEditMode(element, settingsStore);
-        AlwaysShowCardButtons(element, settingsStore);
-        ControlsBarButtons(element, view);
-        new Setting(element).setHeading().setName(lang.settings_appearance);
-        BackgroundColor(element, settingsStore);
-        ActiveBranchBackground(element, settingsStore);
-        ActiveBranchColor(element, settingsStore);
-        InactiveCardOpacity(element, settingsStore);
-        FontSize(element, settingsStore);
-        HeadingsFontSize(element, settingsStore);
-        new Setting(element).setHeading().setName(lang.settings_layout);
-        CardWidth(element, settingsStore);
-        CardsGap(element, settingsStore);
-        CardIndentationWidth(element, settingsStore);
-        LimitCardHeight(element, settingsStore);
+    const render = (tab: SettingsTab) => {
+        element.empty();
+        if (tab === 'General') {
+            DefaultDocumentFormat(element, settingsStore);
+            LinkPaneType(element, settingsStore);
+            MaintainEditMode(element, settingsStore);
+            AlwaysShowCardButtons(element, settingsStore);
+            ControlsBarButtons(element, view);
+        } else if (tab === 'Appearance') {
+            BackgroundColor(element, settingsStore);
+            ActiveBranchBackground(element, settingsStore);
+            ActiveBranchColor(element, settingsStore);
+            InactiveCardOpacity(element, settingsStore);
+            FontSize(element, settingsStore);
+            HeadingsFontSize(element, settingsStore);
+        } else if (tab === 'Layout') {
+            CardWidth(element, settingsStore);
+            CardsGap(element, settingsStore);
+            CardIndentationWidth(element, settingsStore);
+            LimitCardHeight(element, settingsStore);
+        }
     };
-    render();
+    render(tab);
     return {
-        update: () => {
-            render();
+        update: (tab: SettingsTab) => {
+            render(tab);
         },
     };
 };

src/view/components/container/modals/settings/active-settings-tab-store.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+import { SettingsTab } from 'src/view/actions/settings/render-settings';
+
+export const ActiveSettingsTabStore = writable<SettingsTab>('General');

src/view/components/container/modals/settings/settings.svelte

@@ -1,50 +1,42 @@
 <script lang="ts">
-    import { renderSettings } from '../../../../actions/settings/render-settings';
+    import { renderSettings, SettingsTab } from '../../../../actions/settings/render-settings';
+    import VerticalTabHeader from './vertical-tab-header.svelte';
+    import { ActiveSettingsTabStore } from 'src/view/components/container/modals/settings/active-settings-tab-store';
+
+    const setActiveTab = (tab: SettingsTab) => {
+        ActiveSettingsTabStore.set(tab);
+    };
 </script>
 
 <div class="lineage-modal" id="lineage-view-settings" tabindex="0">
-    <div class="setting-items" use:renderSettings></div>
+    <div class="lineage-vertical-tabs-container">
+        <VerticalTabHeader {setActiveTab} activeTab={$ActiveSettingsTabStore} />
+        <div
+            class="lineage-vertical-tab-content"
+            use:renderSettings={$ActiveSettingsTabStore}
+        ></div>
+    </div>
 </div>
 
 <style>
-
-
-    .setting-items {
+    .lineage-vertical-tabs-container {
+        display: flex;
+    }
+    .lineage-vertical-tab-content {
         display: flex;
         flex-direction: column;
-        padding: 5px 20px;
         width: 500px;
-        overflow-y:auto;
-        & .setting-item {
-            padding: 10px 0;
-        }
-
-        & .setting-item-heading {
-            margin-top: 22px;
-
-            & .setting-item-name {
-                font-size: 17px;
-            }
-        }
-    }
-    @media (max-width: 720px) {
-        .setting-items{
-            width:initial;
-        }
+        overflow-y: auto;
+        height: 400px;
+        padding-top: var(--size-4-8);
+        padding-bottom: var(--size-4-12);
+        padding-inline-start: var(--size-4-12);
+        padding-inline-end: var(--size-4-12);
     }
-    :global(.is-mobile) {
 
-        & .setting-items {
-            padding: 5px 10px;
-        }
-        & :global(.setting-item) {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-        & :global(.setting-item-control) {
-            width: 100%;
-            justify-content: center;
+    :global(.is-mobile) {
+        & .lineage-vertical-tab-content {
+            height: 500px;
         }
     }
 </style>

src/view/components/container/modals/settings/vertical-tab-header.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { SettingsTab } from '../../../../actions/settings/render-settings';
+
+    export let setActiveTab : (tab: SettingsTab)=>void
+    export let activeTab: SettingsTab
+    const tabs: SettingsTab[] = ['General', 'Appearance', 'Layout']
+
+</script>
+
+<div class="lineage-vertical-tab-header">
+    <div class="vertical-tab-header-group">
+<!--        <div class="vertical-tab-header-group-title">Options</div>-->
+        <div class="vertical-tab-header-group-items">
+            {#each tabs as tab}
+                <div
+                    class={'vertical-tab-nav-item' +
+                        (tab === activeTab ? ' is-active' : '')}
+                    on:click={() => setActiveTab(tab)}
+                >
+                    {tab}
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
+
+<style>
+    .lineage-vertical-tab-header {
+        width: 250px;
+        padding: var(--size-4-3);
+        background-color: var(--background-secondary);
+    }
+</style>

src/view/components/container/toolbar-vertical/vertical-toolbar-buttons-list.ts

@@ -78,11 +78,6 @@ export const VerticalToolbarButtonsList = (view: LineageView) => {
                         icon: customIcons.alignV,
                         id: 'center-active-node-v',
                     },
-                ],
-            },
-            {
-                id: 'display',
-                buttons: [
                     {
                         label: lang.controls_single_column,
                         onClick: h.toggleOutlineMode,