From fd7229ddd723f63db96aae9bea6b795291e02d46 Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Mon, 7 Jul 2025 13:55:39 +0200 Subject: [PATCH 1/3] feat(ui): make sidebar resizable --- src/components/FlowFooter/FlowFooter.scss | 2 +- src/components/Sidebar/Sidebar.react.js | 29 ++++++++++++++++++- src/components/Sidebar/Sidebar.scss | 14 +++++++-- src/components/Toolbar/Toolbar.scss | 2 +- src/dashboard/Dashboard.scss | 2 +- src/dashboard/Data/Browser/Browser.scss | 4 +-- src/dashboard/Data/Browser/BrowserFooter.scss | 2 +- src/dashboard/TableView.scss | 2 +- src/parse-interface-guide/PIG.scss | 4 +-- src/stylesheets/base.scss | 4 +++ 10 files changed, 53 insertions(+), 12 deletions(-) diff --git a/src/components/FlowFooter/FlowFooter.scss b/src/components/FlowFooter/FlowFooter.scss index 98f670110e..4878ef7bd6 100644 --- a/src/components/FlowFooter/FlowFooter.scss +++ b/src/components/FlowFooter/FlowFooter.scss @@ -10,7 +10,7 @@ .footer { @include animation('footer-enter 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)'); position: fixed; - left: 300px; + left: var(--sidebar-width, 300px); right: 0; bottom: 0; background: #fbfbfc; diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js index 69dcecd78a..cc84352d1e 100644 --- a/src/components/Sidebar/Sidebar.react.js +++ b/src/components/Sidebar/Sidebar.react.js @@ -10,7 +10,7 @@ import AppsMenu from 'components/Sidebar/AppsMenu.react'; import AppName from 'components/Sidebar/AppName.react'; import isInsidePopover from 'lib/isInsidePopover'; import Pin from 'components/Sidebar/Pin.react'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useEffect, useState, useContext, useRef } from 'react'; import SidebarHeader from 'components/Sidebar/SidebarHeader.react'; import SidebarSection from 'components/Sidebar/SidebarSection.react'; import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react'; @@ -36,6 +36,9 @@ const Sidebar = ({ const [appsMenuOpen, setAppsMenuOpen] = useState(false); const [collapsed, setCollapsed] = useState(false); const [fixed, setFixed] = useState(true); + const initialWidth = parseInt(localStorage.getItem('sidebarWidth') || '300', 10); + const [width, setWidth] = useState(initialWidth); + const widthRef = useRef(initialWidth); const [dashboardUser, setDashboardUser] = useState(''); fetch(mountPath).then(response => { setDashboardUser(response.headers.get('username')); @@ -66,6 +69,11 @@ const Sidebar = ({ }; }); + useEffect(() => { + document.documentElement.style.setProperty('--sidebar-width', `${width}px`); + widthRef.current = width; + }, [width]); + const sidebarClasses = [styles.sidebar]; if (fixed) { document.body.className = document.body.className.replace(' expanded', ''); @@ -112,6 +120,24 @@ const Sidebar = ({ } }; + const startResize = e => { + e.preventDefault(); + const startX = e.clientX; + const startWidth = widthRef.current; + const doDrag = ev => { + const newWidth = Math.max(200, startWidth + ev.clientX - startX); + widthRef.current = newWidth; + setWidth(newWidth); + }; + const stopDrag = () => { + document.removeEventListener('mousemove', doDrag); + document.removeEventListener('mouseup', stopDrag); + localStorage.setItem('sidebarWidth', widthRef.current.toString()); + }; + document.addEventListener('mousemove', doDrag); + document.addEventListener('mouseup', stopDrag); + }; + let sidebarContent; if (appsMenuOpen) { const apps = [] @@ -192,6 +218,7 @@ const Sidebar = ({ )} +
); }; diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss index a051af435f..e95b2e8023 100644 --- a/src/components/Sidebar/Sidebar.scss +++ b/src/components/Sidebar/Sidebar.scss @@ -14,7 +14,7 @@ $footerHeight: 36px; .sidebar { position: fixed; - width: 300px; + width: var(--sidebar-width, 300px); top: 0; left: 0; bottom: 0; @@ -22,6 +22,16 @@ $footerHeight: 36px; color: #fff; z-index: 100; + .resizeHandle { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 5px; + cursor: col-resize; + user-select: none; + } + &.collapsed { left: 0; width: 54px; @@ -161,7 +171,7 @@ $footerHeight: 36px; .appsMenu { overflow: auto; background: #094162; - width: 300px; + width: var(--sidebar-width, 300px); .menuRow:hover { background: #0c5582; diff --git a/src/components/Toolbar/Toolbar.scss b/src/components/Toolbar/Toolbar.scss index 88f7261171..79b381ebfa 100644 --- a/src/components/Toolbar/Toolbar.scss +++ b/src/components/Toolbar/Toolbar.scss @@ -11,7 +11,7 @@ position: fixed; top: 0; right: 0; - left: 300px; + left: var(--sidebar-width, 300px); background: #353446; height: 96px; color: white; diff --git a/src/dashboard/Dashboard.scss b/src/dashboard/Dashboard.scss index c99ad86341..acb90adb48 100644 --- a/src/dashboard/Dashboard.scss +++ b/src/dashboard/Dashboard.scss @@ -8,7 +8,7 @@ @import 'stylesheets/globals.scss'; .content { - margin-left: 300px; + margin-left: var(--sidebar-width, 300px); overflow: auto; max-height: 100vh; } diff --git a/src/dashboard/Data/Browser/Browser.scss b/src/dashboard/Data/Browser/Browser.scss index 705580ce9d..dc8a6734dd 100644 --- a/src/dashboard/Data/Browser/Browser.scss +++ b/src/dashboard/Data/Browser/Browser.scss @@ -10,7 +10,7 @@ .browser { position: fixed; top: 96px; - left: 300px; + left: var(--sidebar-width, 300px); right: 0; bottom: 36px; overflow: auto; @@ -24,7 +24,7 @@ body:global(.expanded) { .empty { position: fixed; - left: 300px; + left: var(--sidebar-width, 300px); top: 0; bottom: 0; right: 0; diff --git a/src/dashboard/Data/Browser/BrowserFooter.scss b/src/dashboard/Data/Browser/BrowserFooter.scss index 23ff280523..59809517d5 100644 --- a/src/dashboard/Data/Browser/BrowserFooter.scss +++ b/src/dashboard/Data/Browser/BrowserFooter.scss @@ -2,7 +2,7 @@ .footer { position: absolute; - width: calc(100% - 300px); + width: calc(100% - var(--sidebar-width, 300px)); bottom: 0; gap: 10px; padding: 0px 15px; diff --git a/src/dashboard/TableView.scss b/src/dashboard/TableView.scss index 5027e6a89f..925d065bfa 100644 --- a/src/dashboard/TableView.scss +++ b/src/dashboard/TableView.scss @@ -10,7 +10,7 @@ .headers { position: fixed; top: 96px; - left: 300px; + left: var(--sidebar-width, 300px); right: 0; background: #66637A; height: 30px; diff --git a/src/parse-interface-guide/PIG.scss b/src/parse-interface-guide/PIG.scss index ddd30b9c83..1b8d5a858f 100644 --- a/src/parse-interface-guide/PIG.scss +++ b/src/parse-interface-guide/PIG.scss @@ -11,7 +11,7 @@ .sidebar { position: fixed; background: white; - width: 300px; + width: var(--sidebar-width, 300px); padding: 10px; border-right: 1px solid #b0b8bf; top: 0; @@ -53,7 +53,7 @@ } .content { - margin-left: 300px; + margin-left: var(--sidebar-width, 300px); padding: 20px 10px 10px 10px; min-height: 100vh; } diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss index a20965a316..ff847d301a 100644 --- a/src/stylesheets/base.scss +++ b/src/stylesheets/base.scss @@ -7,6 +7,10 @@ */ @import 'globals.scss'; +:root { + --sidebar-width: 300px; +} + html, body { min-height: 100vh; } From ef2f3d3a9101dec14642d5da20a198382b52292c Mon Sep 17 00:00:00 2001 From: Manuel <5673677+mtrezza@users.noreply.github.com> Date: Mon, 7 Jul 2025 15:23:12 +0200 Subject: [PATCH 2/3] Fix sidebar text overflow when resized --- src/components/CategoryList/CategoryList.scss | 9 ++++----- src/components/Sidebar/Sidebar.scss | 3 +++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/CategoryList/CategoryList.scss b/src/components/CategoryList/CategoryList.scss index 867f4fa04f..e3825096fd 100644 --- a/src/components/CategoryList/CategoryList.scss +++ b/src/components/CategoryList/CategoryList.scss @@ -13,10 +13,10 @@ border-left: 1px solid #3e87b2; a { - display: block; + display: flex; + align-items: center; padding-left: 12px; height: 20px; - line-height: 20px; color: #8fb9cf; font-size: 12px; @@ -33,12 +33,11 @@ &:first-of-type { @include DosisFont; - float: right; - width: 50px; + flex: 0 0 50px; text-align: right; } &:last-of-type { - margin-right: 50px; + flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss index e95b2e8023..e47bb5998b 100644 --- a/src/components/Sidebar/Sidebar.scss +++ b/src/components/Sidebar/Sidebar.scss @@ -330,6 +330,9 @@ a.subitem { color: white; > *:first-child { + overflow: hidden; + text-overflow: ellipsis; + width: 100%; position: absolute; letter-spacing: 2px; line-height: 12px; From bff87470f75a4d8e49ebb8ce02081456af30cd97 Mon Sep 17 00:00:00 2001 From: Manuel Trezza <5673677+mtrezza@users.noreply.github.com> Date: Mon, 7 Jul 2025 15:45:43 +0200 Subject: [PATCH 3/3] Revert "Fix sidebar text overflow when resized" This reverts commit ef2f3d3a9101dec14642d5da20a198382b52292c. --- src/components/CategoryList/CategoryList.scss | 9 +++++---- src/components/Sidebar/Sidebar.scss | 3 --- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/CategoryList/CategoryList.scss b/src/components/CategoryList/CategoryList.scss index e3825096fd..867f4fa04f 100644 --- a/src/components/CategoryList/CategoryList.scss +++ b/src/components/CategoryList/CategoryList.scss @@ -13,10 +13,10 @@ border-left: 1px solid #3e87b2; a { - display: flex; - align-items: center; + display: block; padding-left: 12px; height: 20px; + line-height: 20px; color: #8fb9cf; font-size: 12px; @@ -33,11 +33,12 @@ &:first-of-type { @include DosisFont; - flex: 0 0 50px; + float: right; + width: 50px; text-align: right; } &:last-of-type { - flex: 1 1 auto; + margin-right: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/Sidebar/Sidebar.scss b/src/components/Sidebar/Sidebar.scss index e47bb5998b..e95b2e8023 100644 --- a/src/components/Sidebar/Sidebar.scss +++ b/src/components/Sidebar/Sidebar.scss @@ -330,9 +330,6 @@ a.subitem { color: white; > *:first-child { - overflow: hidden; - text-overflow: ellipsis; - width: 100%; position: absolute; letter-spacing: 2px; line-height: 12px;