From 5ef06685fc5a4ab86953fe6900ea9390f2e05ae4 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 3 Dec 2025 09:38:23 +0100 Subject: [PATCH 1/2] :lipstick: Add cosmetic improvements to workspace palette component --- frontend/src/app/main/ui/workspace.cljs | 6 +- .../src/app/main/ui/workspace/palette.cljs | 71 +++++++++++-------- 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 4125e47b99..cec1ca975f 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -27,7 +27,7 @@ [app.main.ui.workspace.coordinates :as coordinates] [app.main.ui.workspace.libraries] [app.main.ui.workspace.nudge] - [app.main.ui.workspace.palette :refer [palette]] + [app.main.ui.workspace.palette :refer [palette*]] [app.main.ui.workspace.plugins] [app.main.ui.workspace.sidebar :refer [sidebar*]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox*]] @@ -84,8 +84,8 @@ node-ref (use-resize-observer on-resize)] [:* (when (not ^boolean hide-ui?) - [:& palette {:layout layout - :on-change-palette-size on-resize-palette}]) + [:> palette* {:layout layout + :on-change-size on-resize-palette}]) [:section {:key (dm/str "workspace-" page-id) diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 43f7b5e4e4..da670897d4 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -33,10 +33,11 @@ [okulary.core :as l] [rumext.v2 :as mf])) -(def viewport +(def ^:private ref:viewport (l/derived :vport refs/workspace-local)) -(defn calculate-palette-padding [rulers?] +(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") (d/parse-integer)) @@ -48,36 +49,46 @@ #js {"paddingLeft" (dm/str calculate-padding-left "px") "paddingRight" "322px"})) -(mf/defc palette - [{:keys [layout on-change-palette-size]}] - (let [color-palette? (:colorpalette layout) - text-palette? (:textpalette layout) - hide-palettes? (:hide-palettes layout) - workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) - container (mf/use-ref nil) - state* (mf/use-state {:show-menu false}) - state (deref state*) - show-menu? (:show-menu state) - selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent) - selected-text* (mf/use-state :file) - selected-text (deref selected-text*) - on-select (mf/use-fn #(reset! selected %)) - rulers? (mf/deref refs/rulers?) - {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} - (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size) +(mf/defc palette* + [{:keys [layout on-change-size]}] + (let [color-palette? (:colorpalette layout) + text-palette? (:textpalette layout) + hide-palettes? (:hide-palettes layout) - vport (mf/deref viewport) - vport-width (:width vport) + read-only? (mf/use-ctx ctx/workspace-read-only?) + container (mf/use-ref nil) + + state* (mf/use-state #(-> {:show-menu false})) + state (deref state*) + show-menu? (:show-menu state) + + selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent) + + selected-text* (mf/use-state :file) + selected-text (deref selected-text*) + + on-select (mf/use-fn #(reset! selected %)) + + rulers? (mf/deref refs/rulers?) + vport (mf/deref ref:viewport) + vport-width (get vport :width) + + {:keys [on-pointer-down + on-lost-pointer-capture + on-pointer-move + parent-ref + size]} + (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-size) on-resize - (mf/use-callback + (mf/use-fn (fn [_] (let [dom (mf/ref-val container) width (obj/get dom "clientWidth")] (swap! state* assoc :width width)))) on-close-menu - (mf/use-callback + (mf/use-fn (fn [_] (swap! state* assoc :show-menu false))) @@ -100,7 +111,7 @@ (reset! selected-text* (:id lib))))) toggle-palettes - (mf/use-callback + (mf/use-fn (fn [_] (r/set-resize-type! :top) (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down") @@ -131,7 +142,9 @@ (vary-meta assoc ::ev/origin "workspace-left-toolbar")))) (dom/blur! node)))) - any-palette? (or color-palette? text-palette?) + any-palette? + (or color-palette? text-palette?) + size-classname (cond (<= size 64) (stl/css :small-palette) @@ -142,16 +155,16 @@ (let [key1 (events/listen js/window "resize" on-resize)] #(events/unlistenByKey key1))) - (mf/use-layout-effect - #(let [dom (mf/ref-val parent-ref) + (mf/with-layout-effect [] + (let [dom (mf/ref-val parent-ref) width (obj/get dom "clientWidth")] (swap! state* assoc :width width))) [:div {:class (stl/css :palette-wrapper) :id "palette-wrapper" - :style (calculate-palette-padding rulers?) + :style (calculate-palette-style rulers?) :data-testid "palette"} - (when-not workspace-read-only? + (when-not ^boolean read-only? [:div {:ref parent-ref :class (dm/str size-classname " " (stl/css-case :palettes true :wide any-palette? From feababe2a859c848c35654d6b4818b3226f32855 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 3 Dec 2025 09:56:14 +0100 Subject: [PATCH 2/2] :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); - } - } -}