From 2f99d1788591a259f3ee88d912b5cf3caffed9b3 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 19 Aug 2024 14:14:10 +0200 Subject: [PATCH] :recycle: Replace tab switcher on design tab --- .../main/ui/viewer/inspect/attributes.cljs | 3 +- .../main/ui/viewer/inspect/attributes.scss | 4 + .../src/app/main/ui/workspace/sidebar.cljs | 2 +- .../src/app/main/ui/workspace/sidebar.scss | 6 +- .../main/ui/workspace/sidebar/options.cljs | 183 ++++++++++-------- .../main/ui/workspace/sidebar/options.scss | 20 +- .../sidebar/options/rows/stroke_row.scss | 76 ++++---- 7 files changed, 162 insertions(+), 132 deletions(-) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs index 9798af677..af75e956b 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.scss b/frontend/src/app/main/ui/viewer/inspect/attributes.scss index 6975e304e..3ae51a85d 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.scss +++ b/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 +} diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index f83b56686..11a189d4b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index f70e37e5e..e73dc621a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index ea5414360..e77c504db 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index 80a122994..0f987be55 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/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; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss index 634075ea2..3a8a0f23c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss +++ b/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; + } +}