♻️ Replace tab switcher on design tab

frontend/src/app/main/ui/viewer/inspect/attributes.cljs

@@ -41,7 +41,8 @@
         content (when (= (count shapes) 1)
                   (ctkl/get-component-annotation (first shapes) libraries))]
 
-    [:div {:class (stl/css :element-options)}
+    [:div {:class (stl/css-case :element-options true
+                                :workspace-element-options (= from :workspace))}
      (for [[idx option] (map-indexed vector options)]
        [:> (case option
              :geometry         geometry-panel

frontend/src/app/main/ui/viewer/inspect/attributes.scss

@@ -17,3 +17,7 @@
   overflow-x: hidden;
   scrollbar-gutter: stable;
 }
+
+.workspace-element-options {
+  height: calc(100vh - #{$s-164}); // TODO: Fix this hardcoded value
+}

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

@@ -171,7 +171,7 @@
               :id "right-sidebar-aside"
               :data-testid "right-sidebar"
               :data-size (str size)
-              :style #js {"--width" (if can-be-expanded? (dm/str size "px") 276)}}
+              :style #js {"--width" (if can-be-expanded? (dm/str size "px") "276px")}}
       (when can-be-expanded?
         [:div {:class (stl/css :resize-area)
                :on-pointer-down on-pointer-down

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

@@ -59,11 +59,11 @@ $width-settings-bar-max: $s-500;
 
 .right-settings-bar {
   grid-area: right-sidebar;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
   width: $width-settings-bar;
   background-color: var(--panel-background-color);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
   z-index: 0;
   &.not-expand {
     max-width: $width-settings-bar;

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

@@ -15,8 +15,8 @@
    [app.main.data.workspace :as udw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.context :as ctx]
+   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.viewer.inspect.right-sidebar :as hrs]
    [app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]]
    [app.main.ui.workspace.sidebar.options.menus.bool :refer [bool-options]]
@@ -72,102 +72,117 @@
   (when (= (:type panel) :component-swap)
     [:& component-menu {:shapes (:shapes panel) :swap-opened? true}]))
 
+(mf/defc design-menu
+  {::mf/wrap [mf/memo]}
+  [{:keys [selected objects page-id file-id selected-shapes shapes-with-children]}]
+  (let [sp-panel             (mf/deref refs/specialized-panel)
+        drawing              (mf/deref refs/workspace-drawing)
+        shared-libs          (mf/deref refs/workspace-libraries)
+        edition              (mf/deref refs/selected-edition)
+        edit-grid?           (ctl/grid-layout? objects edition)
+        grid-edition         (mf/deref refs/workspace-grid-edition)
+        selected-cells       (->> (dm/get-in grid-edition [edition :selected])
+                                  (map #(dm/get-in objects [edition :layout-grid-cells %])))]
+
+    [:div {:class (stl/css :element-options :design-options)}
+     [:& align-options]
+     [:& bool-options]
+
+     (cond
+       (and edit-grid? (d/not-empty? selected-cells))
+       [:& grid-cell/options
+        {:shape (get objects edition)
+         :cells selected-cells}]
+
+       edit-grid?
+       [:& layout-container/grid-layout-edition
+        {:ids [edition]
+         :values (get objects edition)}]
+
+       (not (nil? sp-panel))
+       [:& specialized-panel {:panel sp-panel}]
+
+       (d/not-empty? drawing)
+       [:& shape-options
+        {:shape (:object drawing)
+         :page-id page-id
+         :file-id file-id
+         :shared-libs shared-libs}]
+
+       (= 0 (count selected))
+       [:& page/options]
+
+       (= 1 (count selected))
+       [:& shape-options
+        {:shape (first selected-shapes)
+         :page-id page-id
+         :file-id file-id
+         :shared-libs shared-libs
+         :shapes-with-children shapes-with-children}]
+
+       :else
+       [:& multiple/options
+        {:shapes-with-children shapes-with-children
+         :shapes selected-shapes
+         :page-id page-id
+         :file-id file-id
+         :shared-libs shared-libs}])]))
 
 (mf/defc options-content
   {::mf/memo true
    ::mf/props :obj}
-  [{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}]
-  (let [drawing              (mf/deref refs/workspace-drawing)
-        objects              (mf/deref refs/workspace-page-objects)
-        shared-libs          (mf/deref refs/workspace-libraries)
-        edition              (mf/deref refs/selected-edition)
-        grid-edition         (mf/deref refs/workspace-grid-edition)
-        sp-panel             (mf/deref refs/specialized-panel)
+  [{:keys [selected shapes shapes-with-children page-id file-id on-change-section on-expand]}]
+  (let [objects              (mf/deref refs/workspace-page-objects)
 
         selected-shapes      (into [] (keep (d/getf objects)) selected)
         first-selected-shape (first selected-shapes)
         shape-parent-frame   (cfh/get-frame objects (:frame-id first-selected-shape))
 
-        edit-grid?           (ctl/grid-layout? objects edition)
-        selected-cells       (->> (dm/get-in grid-edition [edition :selected])
-                                  (map #(dm/get-in objects [edition :layout-grid-cells %])))
-
         on-change-tab
         (fn [options-mode]
-          (st/emit! (udw/set-options-mode options-mode))
-          (if (= options-mode :inspect)
-            (st/emit! :interrupt (udw/set-workspace-read-only true))
-            (st/emit! :interrupt (udw/set-workspace-read-only false))))]
+          (let [options-mode (keyword options-mode)]
+            (st/emit! (udw/set-options-mode options-mode))
+            (if (= options-mode :inspect)
+              (st/emit! :interrupt (udw/set-workspace-read-only true))
+              (st/emit! :interrupt (udw/set-workspace-read-only false)))))
+
+        design-content (mf/html [:& design-menu {:selected selected
+                                                 :objects objects
+                                                 :page-id page-id
+                                                 :file-id file-id
+                                                 :selected-shapes selected-shapes
+                                                 :shapes-with-children shapes-with-children}])
+
+        inspect-content (mf/html [:div {:class (stl/css :element-options :inspect-options)}
+                                  [:& hrs/right-sidebar {:page-id           page-id
+                                                         :objects           objects
+                                                         :file-id           file-id
+                                                         :frame             shape-parent-frame
+                                                         :shapes            selected-shapes
+                                                         :on-change-section on-change-section
+                                                         :on-expand         on-expand
+                                                         :from              :workspace}]])
+
+        interactions-content (mf/html [:div {:class (stl/css :element-options :interaction-options)}
+                                       [:& interactions-menu {:shape (first shapes)}]])
+        tabs
+        #js [#js {:label (tr "workspace.options.design")
+                  :id "design"
+                  :content design-content}
+
+             #js {:label (tr "workspace.options.prototype")
+                  :id "prototype"
+                  :content interactions-content}
+
+             #js {:label (tr "workspace.options.inspect")
+                  :id "inspect"
+                  :content inspect-content}]]
 
     [:div {:class (stl/css :tool-window)}
-     [:& tab-container
-      {:on-change-tab on-change-tab
-       :selected section
-       :collapsable false
-       :content-class (stl/css-case
-                       :content-class true
-                       :inspect (= section :inspect))
-       :header-class (stl/css :tab-spacing)}
-      [:& tab-element {:id :design
-                       :title (tr "workspace.options.design")}
-       [:div {:class (stl/css :element-options)}
-        [:& align-options]
-        [:& bool-options]
-
-        (cond
-          (and edit-grid? (d/not-empty? selected-cells))
-          [:& grid-cell/options
-           {:shape (get objects edition)
-            :cells selected-cells}]
-
-          edit-grid?
-          [:& layout-container/grid-layout-edition
-           {:ids [edition]
-            :values (get objects edition)}]
-
-          (not (nil? sp-panel))
-          [:& specialized-panel {:panel sp-panel}]
-
-          (d/not-empty? drawing)
-          [:& shape-options
-           {:shape (:object drawing)
-            :page-id page-id
-            :file-id file-id
-            :shared-libs shared-libs}]
-
-          (= 0 (count selected))
-          [:& page/options]
-
-          (= 1 (count selected))
-          [:& shape-options
-           {:shape (first selected-shapes)
-            :page-id page-id
-            :file-id file-id
-            :shared-libs shared-libs
-            :shapes-with-children shapes-with-children}]
-
-          :else
-          [:& multiple/options
-           {:shapes-with-children shapes-with-children
-            :shapes selected-shapes
-            :page-id page-id
-            :file-id file-id
-            :shared-libs shared-libs}])]]
-      [:& tab-element {:id :prototype
-                       :title (tr "workspace.options.prototype")}
-       [:div {:class (stl/css :element-options)}
-        [:& interactions-menu {:shape (first shapes)}]]]
-      [:& tab-element {:id :inspect
-                       :title (tr "workspace.options.inspect")}
-       [:div {:class (stl/css :element-options)}
-        [:& hrs/right-sidebar {:page-id           page-id
-                               :objects           objects
-                               :file-id           file-id
-                               :frame             shape-parent-frame
-                               :shapes            selected-shapes
-                               :on-change-section on-change-section
-                               :on-expand         on-expand
-                               :from              :workspace}]]]]]))
+     [:> tab-switcher* {:tabs tabs
+                        :default-selected "info"
+                        :on-change-tab on-change-tab
+                        :class (stl/css :options-tab-switcher)}]]))
 
 ;; TODO: this need optimizations, selected-objects and
 ;; selected-objects-with-children are derefed always but they only

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

@@ -8,8 +8,7 @@
 
 .tool-window {
   position: relative;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   width: 100%;
   height: 100%;
   padding-left: $s-12;
@@ -27,14 +26,23 @@
 }
 
 .element-options {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: $s-8;
+  width: 100%;
+  height: calc(100vh - $s-80);
   padding-top: $s-8;
 }
 
+.design-options,
+.interaction-options {
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
 .inspect {
   scrollbar-gutter: unset;
 }
+
+.options-tab-switcher {
+  --tabs-nav-padding-inline-end: 12px;
+}

frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss

@@ -8,44 +8,7 @@
 
 .stroke-data {
   @include flexColumn;
-  .stroke-options {
-    @include flexRow;
-    .stroke-width-input-element {
-      @extend .input-element;
-      @include bodySmallTypography;
-      width: $s-60;
-    }
-    .select-wrapper {
-      width: $s-124;
-    }
-  }
-  .stroke-caps-options {
-    @include flexRow;
-    .cap-select {
-      width: $s-124;
-    }
-    .stroke-cap-dropdown,
-    .stroke-cap-dropdown-start {
-      min-width: $s-124;
-      width: fit-content;
-      max-width: $s-252;
-      right: 0;
-      left: unset;
-    }
 
-    .stroke-cap-dropdown-start {
-      left: 0;
-      right: unset;
-    }
-    .swap-caps-btn {
-      @extend .button-secondary;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-    }
-  }
   &.dnd-over-top {
     border-top: $s-1 solid var(--layer-row-foreground-color-drag);
   }
@@ -53,3 +16,42 @@
     border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
   }
 }
+
+.stroke-options {
+  @include flexRow;
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr;
+
+  .stroke-width-input-element {
+    @extend .input-element;
+    @include bodySmallTypography;
+  }
+}
+.stroke-caps-options {
+  @include flexRow;
+}
+
+.cap-select {
+  width: $s-124;
+}
+.stroke-cap-dropdown,
+.stroke-cap-dropdown-start {
+  min-width: $s-124;
+  width: fit-content;
+  max-width: $s-252;
+  right: 0;
+  left: unset;
+}
+
+.stroke-cap-dropdown-start {
+  left: 0;
+  right: unset;
+}
+.swap-caps-btn {
+  @extend .button-secondary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+  }
+}