diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte index 60574f73..90d396b4 100644 --- a/src/ext/extension-page/App.svelte +++ b/src/ext/extension-page/App.svelte @@ -58,6 +58,29 @@ window.location.reload(); } }); + + let splitterActive = false; + let sidebarHidden = false; + let sidebarWidth = "23svw"; + const sidebarMinWidth = "20rem"; + const editorMinWidth = "20rem"; + + function sidebarSwitch() { + sidebarHidden = !sidebarHidden; + } + + function handleSplitterDrag(event) { + if (event.type === "mouseup") { + splitterActive = false; + } else if (event.type === "mousedown") { + splitterActive = true; + } else if (event.type === "mousemove") { + const vw = window.innerWidth; + const sw = (event.x / vw) * 100; + sidebarWidth = `max(min(${sw}svw, 100svw - ${editorMinWidth}), ${sidebarMinWidth})`; + } + event.preventDefault(); + } @@ -72,10 +95,30 @@ {/if} {/if} -
- - +
+ {#if !sidebarHidden} + + {/if} +
+
+{#if splitterActive} +
+{/if}
    {#each $notifications as item (item.id)} notifications.remove(item.id)} {item} /> @@ -120,6 +163,34 @@ overflow: hidden; } + .resize-mask { + background-color: transparent; + cursor: col-resize; + position: fixed; + inset: 0; + z-index: 200; + } + + .splitter { + --splitter-width: 6px; + --splitter-offset: calc(var(--splitter-width) / 2); + --sidebar-fixed-width: max(var(--sidebar-min-width), var(--sidebar-width)); + + background-color: transparent; + cursor: col-resize; + position: fixed; + left: calc(var(--sidebar-fixed-width) - var(--splitter-offset)); + width: var(--splitter-width); + height: 100svh; + z-index: 201; + transition: background-color 0.2s ease-in-out; + + &:hover, + &.dragging { + background-color: var(--color-blue); + } + } + ul { bottom: 1rem; left: 50%; diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte index 0bdd3507..ef47d3b6 100644 --- a/src/ext/extension-page/Components/Editor/Editor.svelte +++ b/src/ext/extension-page/Components/Editor/Editor.svelte @@ -13,6 +13,10 @@ import iconDownload from "@shared/img/icon-download.svg?raw"; import iconTrash from "@shared/img/icon-trash.svg?raw"; import iconSync from "@shared/img/icon-sync.svg?raw"; + import iconSidebar from "@shared/img/icon-sidebar.svg?raw"; + + export let sidebarHidden; + export let sidebarSwitch; // the data the populates editor elements let canUpdate; @@ -167,13 +171,22 @@
    No Item Selected
    {/if}
    + {#if sidebarHidden} +
    + +
    + {/if}
    {name}
    -
    +
    {#if $v4state.includes("saving")} Saving... {:else if $v4state.includes("trashing")} @@ -233,6 +246,7 @@ flex-grow: 1; overflow: hidden; position: relative; + width: calc(100svw - var(--sidebar-width)); } .info { @@ -260,7 +274,12 @@ align-items: center; display: flex; flex-shrink: 0; - padding: 1rem 0.5rem 1rem 1.5rem; + padding: 1rem; + gap: 1rem; + } + + .sidebar-switch { + scale: 1.5; } .editor__header__content { diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index cbc62445..cc382adc 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -11,6 +11,7 @@ import Loader from "@shared/Components/Loader.svelte"; import iconPlus from "@shared/img/icon-plus.svg?raw"; import iconSettings from "@shared/img/icon-settings.svg?raw"; + import iconSidebar from "@shared/img/icon-sidebar.svg?raw"; import { cmChanged, cmGetInstance, @@ -18,6 +19,8 @@ cmSetSessionCode, } from "../Editor/CodeMirror.svelte"; + export let sidebarSwitch; + // disable buttons accordingly $: disabled = !$v4state.includes("ready"); @@ -30,6 +33,8 @@ $: if (list.find((a) => a.active)) { const active = list.find((a) => a.active); scrollToEl(active.filename); + } else { + activate(list[0]); } /** @@ -204,11 +209,17 @@
    +
    + +
    - + @@ -250,27 +261,27 @@ border-right: 1px solid var(--border-color); display: flex; flex-direction: column; - flex: 0 0 23rem; - max-width: 23rem; + width: var(--sidebar-width); + min-width: var(--sidebar-min-width); position: relative; } + .sidebar-switch { + scale: 1.5; + } + .sidebar__header { align-items: center; display: flex; flex-shrink: 0; - flex-wrap: wrap; padding: 1rem; + gap: 0.5rem; } .sidebar__filter { flex-grow: 1; } - :global(.sidebar__filter + button) { - margin: 0 0.5rem; - } - .sidebar__count { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); diff --git a/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte b/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte index 266d68bc..c7c27bc7 100644 --- a/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte +++ b/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte @@ -42,7 +42,10 @@
    {#if description} -
    +
    {description}
    {/if} diff --git a/src/shared/Components/IconButton.svelte b/src/shared/Components/IconButton.svelte index 99751f97..52ec42cc 100644 --- a/src/shared/Components/IconButton.svelte +++ b/src/shared/Components/IconButton.svelte @@ -28,6 +28,7 @@ color: inherit; cursor: pointer; display: flex; + flex-shrink: 0; height: 1.5rem; justify-content: center; overflow: visible; diff --git a/src/shared/img/icon-sidebar.svg b/src/shared/img/icon-sidebar.svg new file mode 100644 index 00000000..8fe91fb9 --- /dev/null +++ b/src/shared/img/icon-sidebar.svg @@ -0,0 +1 @@ + \ No newline at end of file