From feababe2a859c848c35654d6b4818b3226f32855 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 3 Dec 2025 09:56:14 +0100 Subject: [PATCH] :bug: Make workspace palette reposition on left sidebar collapse --- .../workspace/colorpicker/color_tokens.cljs | 2 +- .../src/app/main/ui/workspace/palette.cljs | 2 +- .../src/app/main/ui/workspace/sidebar.cljs | 27 ++++++++--- .../src/app/main/ui/workspace/sidebar.scss | 38 ++++++++++++++++ .../workspace/sidebar/collapsable_button.cljs | 29 ------------ .../workspace/sidebar/collapsable_button.scss | 45 ------------------- 6 files changed, 61 insertions(+), 82 deletions(-) delete mode 100644 frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs delete mode 100644 frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs index 78c9d7d884..61871dfcdd 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_tokens.cljs @@ -156,7 +156,7 @@ (let [{:keys [modal title]} (get dwta/token-properties :color) window-size (dom/get-window-size) left-sidebar (dom/get-element "left-sidebar-aside") - x-size (dom/get-data left-sidebar "left-sidebar-width") + x-size (dom/get-data left-sidebar "width") modal-height 392 x (- (int x-size) 30) y (- (/ (:height window-size) 2) (/ modal-height 2))] diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index da670897d4..80c396989e 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -39,7 +39,7 @@ (defn- calculate-palette-style [rulers?] (let [left-sidebar (dom/get-element "left-sidebar-aside") - left-sidebar-size (-> (dom/get-data left-sidebar "left-sidebar-width") + left-sidebar-size (-> (dom/get-data left-sidebar "width") (d/parse-integer)) rulers-width (if rulers? 22 0) min-left-sidebar-width left-sidebar-default-width diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index a9733567d7..58f299f666 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -27,7 +27,6 @@ [app.main.ui.workspace.left-header :refer [left-header*]] [app.main.ui.workspace.right-header :refer [right-header*]] [app.main.ui.workspace.sidebar.assets :refer [assets-toolbox*]] - [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button*]] [app.main.ui.workspace.sidebar.debug :refer [debug-panel*]] [app.main.ui.workspace.sidebar.debug-shape-info :refer [debug-shape-info*]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] @@ -44,19 +43,34 @@ ;; --- Left Sidebar (Component) -(defn- on-collapse-left-sidebar - [] - (st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) +(def ^:private toggle-collapse-left-sidebar + (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) (mf/defc collapse-button* + {::mf/private true} [] ;; NOTE: This custom button may be replace by an action button when this variant is designed [:button {:class (stl/css :collapse-sidebar-button) - :on-click on-collapse-left-sidebar} + :on-click toggle-collapse-left-sidebar} [:> icon* {:icon-id i/arrow :size "s" :aria-label (tr "workspace.sidebar.collapse")}]]) +(mf/defc collapsed-button* + {::mf/memo true + ::mf/private true} + [] + [:div {:id "left-sidebar-aside" + :data-width "0" + :class (stl/css :collapsed-sidebar)} + [:div {:class (stl/css :collapsed-title)} + [:button {:class (stl/css :collapsed-button) + :title (tr "workspace.sidebar.expand") + :on-click toggle-collapse-left-sidebar} + [:> icon* {:icon-id i/arrow + :size "s" + :aria-label (tr "workspace.sidebar.expand")}]]]]) + (mf/defc layers-content* {::mf/private true ::mf/memo true} @@ -97,6 +111,7 @@ [:> layers-toolbox* {:size-parent width}]])) + (mf/defc left-sidebar* {::mf/memo true} [{:keys [layout file page-id tokens-lib active-tokens resolved-active-tokens]}] @@ -161,7 +176,7 @@ [:aside {:ref parent-ref :id "left-sidebar-aside" :data-testid "left-sidebar" - :data-left-sidebar-width (str width) + :data-width (str width) :class aside-class :style {:--left-sidebar-width (dm/str width "px")}} diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 3c6871e784..acceaf4f7d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -116,6 +116,44 @@ } } +.collapsed-sidebar { + @include deprecated.flexCenter; + position: absolute; + top: deprecated.$s-48; + left: 0; + padding: deprecated.$s-4; + border-radius: deprecated.$br-8; + background: var(--color-background-primary); + margin-inline-start: var(--sp-m); +} +.collapsed-title { + @include deprecated.flexCenter; + height: deprecated.$s-36; + width: deprecated.$s-24; + border-radius: deprecated.$br-8; + background: var(--color-background-secondary); +} +.collapsed-button { + @include deprecated.buttonStyle; + height: deprecated.$s-24; + width: deprecated.$s-16; + padding: 0; + border-radius: deprecated.$br-5; + svg { + @include deprecated.flexCenter; + height: deprecated.$s-16; + width: deprecated.$s-16; + color: transparent; + fill: none; + stroke: var(--icon-foreground); + } + &:hover { + svg { + stroke: var(--icon-foreground-hover); + } + } +} + .versions-tab { width: 100%; overflow: hidden; diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs deleted file mode 100644 index 8d6160c147..0000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs +++ /dev/null @@ -1,29 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.workspace.sidebar.collapsable-button - (:require-macros [app.main.style :as stl]) - (:require - [app.main.data.workspace :as dw] - [app.main.store :as st] - [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] - [app.util.i18n :refer [tr]] - [rumext.v2 :as mf])) - -(mf/defc collapsed-button* - {::mf/memo true} - [] - (let [on-click (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))] - [:div {:id "left-sidebar-aside" - :data-size "0" - :class (stl/css :collapsed-sidebar)} - [:div {:class (stl/css :collapsed-title)} - [:button {:class (stl/css :collapsed-button) - :title (tr "workspace.sidebar.expand") - :on-click on-click} - [:> icon* {:icon-id i/arrow - :size "s" - :aria-label (tr "workspace.sidebar.expand")}]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss deleted file mode 100644 index 9d2f6156f5..0000000000 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss +++ /dev/null @@ -1,45 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -@use "refactor/common-refactor.scss" as deprecated; - -.collapsed-sidebar { - @include deprecated.flexCenter; - position: absolute; - top: deprecated.$s-48; - left: 0; - padding: deprecated.$s-4; - border-radius: deprecated.$br-8; - background: var(--color-background-primary); - margin-inline-start: var(--sp-m); -} -.collapsed-title { - @include deprecated.flexCenter; - height: deprecated.$s-36; - width: deprecated.$s-24; - border-radius: deprecated.$br-8; - background: var(--color-background-secondary); -} -.collapsed-button { - @include deprecated.buttonStyle; - height: deprecated.$s-24; - width: deprecated.$s-16; - padding: 0; - border-radius: deprecated.$br-5; - svg { - @include deprecated.flexCenter; - height: deprecated.$s-16; - width: deprecated.$s-16; - color: transparent; - fill: none; - stroke: var(--icon-foreground); - } - &:hover { - svg { - stroke: var(--icon-foreground-hover); - } - } -}