🐛 Make workspace palette reposition on left sidebar collapse

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))]

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

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
+(def ^:private toggle-collapse-left-sidebar
-  []
+  (partial st/emit! (dw/toggle-layout-flag :collapse-left-sidebar)))
-  (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")}}
 

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;

frontend/src/app/main/ui/workspace/sidebar/collapsable_button.cljs

@@ -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")}]]]]))

frontend/src/app/main/ui/workspace/sidebar/collapsable_button.scss

@@ -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);
-    }
-  }
-}