♻️ 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,45 +72,19 @@
   (when (= (:type panel) :component-swap)
     [:& component-menu {:shapes (:shapes panel) :swap-opened? true}]))
 
-
+(mf/defc design-menu
-(mf/defc options-content
+  {::mf/wrap [mf/memo]}
-  {::mf/memo true
+  [{:keys [selected objects page-id file-id selected-shapes shapes-with-children]}]
-   ::mf/props :obj}
+  (let [sp-panel             (mf/deref refs/specialized-panel)
-  [{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}]
+        drawing              (mf/deref refs/workspace-drawing)
-  (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)
-
-        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)
+        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 %])))
+                                  (map #(dm/get-in objects [edition :layout-grid-cells %])))]
 
-        on-change-tab
+    [:div {:class (stl/css :element-options :design-options)}
-        (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))))]
-
-    [: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]
 
@@ -152,14 +126,34 @@
          :shapes selected-shapes
          :page-id page-id
          :file-id file-id
-            :shared-libs shared-libs}])]]
+         :shared-libs shared-libs}])]))
-      [:& tab-element {:id :prototype
+
-                       :title (tr "workspace.options.prototype")}
+(mf/defc options-content
-       [:div {:class (stl/css :element-options)}
+  {::mf/memo true
-        [:& interactions-menu {:shape (first shapes)}]]]
+   ::mf/props :obj}
-      [:& tab-element {:id :inspect
+  [{:keys [selected shapes shapes-with-children page-id file-id on-change-section on-expand]}]
-                       :title (tr "workspace.options.inspect")}
+  (let [objects              (mf/deref refs/workspace-page-objects)
-       [:div {:class (stl/css :element-options)}
+
+        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))
+
+        on-change-tab
+        (fn [options-mode]
+          (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
@@ -167,7 +161,28 @@
                                                          :shapes            selected-shapes
                                                          :on-change-section on-change-section
                                                          :on-expand         on-expand
-                               :from              :workspace}]]]]]))
+                                                         :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-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;
+  display: grid;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   padding-left: $s-12;
@@ -27,14 +26,23 @@
 }
 
 .element-options {
-  width: 100%;
+  display: grid;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
   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,19 +8,29 @@
 
 .stroke-data {
   @include flexColumn;
+
+  &.dnd-over-top {
+    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
+  }
+  &.dnd-over-bot {
+    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;
-      width: $s-60;
-    }
-    .select-wrapper {
-      width: $s-124;
   }
 }
 .stroke-caps-options {
   @include flexRow;
+}
+
 .cap-select {
   width: $s-124;
 }
@@ -45,11 +55,3 @@
     @extend .button-icon;
   }
 }
-  }
-  &.dnd-over-top {
-    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
-  }
-  &.dnd-over-bot {
-    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
-  }
-}