diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index e0433a176..27511a6d4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -158,7 +158,6 @@ ::mf/wrap [mf/memo]} [{:keys [layout section file page-id ] :as props}] (let [drawing-tool (:tool (mf/deref refs/workspace-drawing)) - new-css-system (mf/use-ctx ctx/new-css-system) is-comments? (= drawing-tool :comments) is-history? (contains? layout :document-history) @@ -195,10 +194,7 @@ (obj/set! "on-change-section" handle-change-section) (obj/set! "on-expand" handle-expand))] - [:aside {:class (stl/css-case new-css-system - :global/settings-bar (not new-css-system) - :global/settings-bar-right (not new-css-system) - :right-settings-bar true + [:aside {:class (stl/css-case :right-settings-bar true :not-expand (not can-be-expanded?) :expanded (> size 276)) @@ -206,14 +202,13 @@ :data-size size :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}} (when can-be-expanded? - [:div {:class (stl/css new-css-system :resize-area) + [:div {:class (stl/css :resize-area) :on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move}]) - (when new-css-system - [:& right-header {:file file :layout layout :page-id page-id}]) + [:& right-header {:file file :layout layout :page-id page-id}] - [:div {:class (stl/css new-css-system :settings-bar-inside)} + [:div {:class (stl/css :settings-bar-inside)} (cond (true? is-comments?) [:& comments-sidebar] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 76886baa4..763adb7fb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -16,7 +16,6 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.tab-container :refer [tab-container tab-element]] - [app.main.ui.components.tabs-container :refer [tabs-container tabs-element]] [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.right-sidebar :as hrs] [app.main.ui.workspace.sidebar.options.menus.align :refer [align-options]] @@ -78,8 +77,7 @@ (mf/defc options-content {::mf/wrap [mf/memo]} [{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - 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) @@ -100,144 +98,74 @@ (if (= options-mode :inspect) (st/emit! :interrupt (udw/set-workspace-read-only true)) (st/emit! :interrupt (udw/set-workspace-read-only false))))] - (if ^boolean new-css-system - [:div {:class (stl/css :tool-window)} - [:& tab-container - {:on-change-tab on-change-tab - :selected section - :collapsable? false - :content-class (stl/css :content-class) - :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}] + [:div {:class (stl/css :tool-window)} + [:& tab-container + {:on-change-tab on-change-tab + :selected section + :collapsable? false + :content-class (stl/css :content-class) + :class (stl/css :tab-spacing)} + [:& tab-element {:id :design + :title (tr "workspace.options.design")} + [:div {:class (stl/css :element-options)} + [:& align-options] + [:& bool-options] - edit-grid? - [:& layout-container/grid-layout-edition - {:ids [edition] - :values (get objects edition)}] + (cond + (and edit-grid? (d/not-empty? selected-cells)) + [:& grid-cell/options + {:shape (get objects edition) + :cells selected-cells}] - (not (nil? sp-panel)) - [:& specialized-panel {:panel sp-panel}] + edit-grid? + [:& layout-container/grid-layout-edition + {:ids [edition] + :values (get objects edition)}] - (d/not-empty? drawing) - [:& shape-options - {:shape (:object drawing) - :page-id page-id - :file-id file-id - :shared-libs shared-libs}] + (not (nil? sp-panel)) + [:& specialized-panel {:panel sp-panel}] - (= 0 (count selected)) - [:& page/options] + (d/not-empty? drawing) + [:& shape-options + {:shape (:object drawing) + :page-id page-id + :file-id file-id + :shared-libs shared-libs}] - (= 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}] + (= 0 (count selected)) + [:& page/options] - :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}]]]]] + (= 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}] - [:div.tool-window - [:div.tool-window-content - [:& tabs-container {:on-change-tab on-change-tab - :selected section} - [:& tabs-element {:id :design - :title (tr "workspace.options.design")} - [:div.element-options - [:& align-options] - [:& bool-options] - (cond - (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)}] - - 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}])]] - - [:& tabs-element - {:id :prototype - :title (tr "workspace.options.prototype")} - - [:div.element-options - [:& interactions-menu {:shape (first shapes)}]]] - - [:& tabs-element {:id :inspect - :title (tr "workspace.options.inspect")} - - [:div.element-options.element-options-inspect - [:& 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}]]]]]]))) + :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}]]]]])) ;; 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 46aeb7745..7b67bcf8c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -13,24 +13,24 @@ width: 100%; height: 100%; padding-left: $s-12; - - .tab-spacing { - margin-right: $s-12; - margin-bottom: $s-8; - } - - .content-class { - overflow-y: auto; - overflow-x: hidden; - height: calc(100vh - $s-96); - scrollbar-gutter: stable; - } - - .element-options { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - gap: $s-8; - } +} + +.tab-spacing { + margin-right: $s-12; + margin-bottom: $s-8; +} + +.content-class { + overflow-y: auto; + overflow-x: hidden; + height: calc(100vh - $s-96); + scrollbar-gutter: stable; +} + +.element-options { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + gap: $s-8; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs index dbe756c22..1efb38e5a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs @@ -8,27 +8,19 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] - [app.main.ui.context :as ctx] [app.util.dom :as dom] [rumext.v2 :as mf])) (mf/defc advanced-options [{:keys [visible? class children]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - ref (mf/use-ref nil)] + (let [ref (mf/use-ref nil)] (mf/use-effect (mf/deps visible?) (fn [] (when-let [node (mf/ref-val ref)] (when visible? (dom/scroll-into-view-if-needed! node))))) - (if new-css-system - (when visible? - [:div {:class (dm/str class " " (stl/css :advanced-options-wrapper)) - :ref ref} - children]) - - (when visible? - [:div.advanced-options-wrapper {:ref ref} - [:div.advanced-options {} - children]])))) + (when visible? + [:div {:class (dm/str class " " (stl/css :advanced-options-wrapper)) + :ref ref} + children]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs index 1632e7b51..fc7758d99 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs @@ -11,7 +11,6 @@ [app.main.data.workspace.shortcuts :as sc] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -19,9 +18,8 @@ (mf/defc align-options [] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - selected (mf/deref refs/selected-shapes) - ;; don't need to watch objects, only read the value + (let [selected (mf/deref refs/selected-shapes) + ;; don't need to watch objects, only read the value objects (deref refs/workspace-page-objects) disabled-align (not (dw/can-align? selected objects)) @@ -44,130 +42,70 @@ (st/emit! (dw/distribute-objects value)))))] (when (not (and disabled-align disabled-distribute)) - (if new-css-system - [:div {:class (stl/css :align-options)} - [:div {:class (stl/css :align-group)} - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) - :data-value :hleft - :on-click align-objects} - i/align-left-refactor] + [:div {:class (stl/css :align-options)} + [:div {:class (stl/css :align-group)} + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) + :data-value :hleft + :on-click align-objects} + i/align-left-refactor] - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) - :data-value :hcenter - :on-click align-objects} - i/align-horizontal-center-refactor] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) + :data-value :hcenter + :on-click align-objects} + i/align-horizontal-center-refactor] - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.hright" (sc/get-tooltip :align-right)) - :data-value :hright - :on-click align-objects} - i/align-right-refactor] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hright" (sc/get-tooltip :align-right)) + :data-value :hright + :on-click align-objects} + i/align-right-refactor] - [:button {:class (stl/css-case :align-button true - :disabled disabled-distribute) - :disabled disabled-distribute - :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) - :data-value :horizontal - :on-click distribute-objects} - i/distribute-horizontally-refactor]] + [:button {:class (stl/css-case :align-button true + :disabled disabled-distribute) + :disabled disabled-distribute + :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) + :data-value :horizontal + :on-click distribute-objects} + i/distribute-horizontally-refactor]] - [:div {:class (stl/css :align-group)} - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) - :data-value :vtop - :on-click align-objects} - i/align-top-refactor] + [:div {:class (stl/css :align-group)} + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) + :data-value :vtop + :on-click align-objects} + i/align-top-refactor] - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) - :data-value :vcenter - :on-click align-objects} - i/align-vertical-center-refactor] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) + :data-value :vcenter + :on-click align-objects} + i/align-vertical-center-refactor] - [:button {:class (stl/css-case :align-button true - :disabled disabled-align) - :disabled disabled-align - :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) - :data-value :vbottom - :on-click align-objects} - i/align-bottom-refactor] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) + :data-value :vbottom + :on-click align-objects} + i/align-bottom-refactor] - [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) - :class (stl/css-case :align-button true - :disabled disabled-distribute) - :disabled disabled-distribute - :data-value :vertical - :on-click distribute-objects} - i/distribute-vertical-spacing-refactor]]] - - [:div.align-options - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) - :class (when disabled-align "disabled") - :data-value :hleft - :on-click align-objects} - i/shape-halign-left] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) - :class (when disabled-align "disabled") - :data-value :hcenter - :on-click align-objects} - i/shape-halign-center] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hright" (sc/get-tooltip :align-right)) - :class (when disabled-align "disabled") - :data-value :hright - :on-click align-objects} - i/shape-halign-right] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) - :class (when disabled-distribute "disabled") - :data-value :horizontal - :on-click distribute-objects} - i/shape-hdistribute]] - - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) - :class (when disabled-align "disabled") - :data-value :vtop - :on-click align-objects} - i/shape-valign-top] - - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) - :class (when disabled-align "disabled") - :data-value :vcenter - :on-click align-objects} - i/shape-valign-center] - - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) - :class (when disabled-align "disabled") - :data-value :vbottom - :on-click align-objects} - i/shape-valign-bottom] - - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) - :class (when disabled-distribute "disabled") - :data-value :vertical - :on-click distribute-objects} - i/shape-vdistribute]]])))) + [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) + :class (stl/css-case :align-button true + :disabled disabled-distribute) + :disabled disabled-distribute + :data-value :vertical + :on-click distribute-objects} + i/distribute-vertical-spacing-refactor]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss index d141e7fd5..8294f1d8b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss @@ -11,29 +11,30 @@ gap: $s-4; height: $s-32; margin: 0 calc(-1 * $s-2); - .align-group { - @include flexRow; - .align-button { - @extend .button-tertiary; - height: $s-28; - width: $s-28; - padding: 0; - border-radius: $br-8; +} +.align-group { + @include flexRow; +} + +.align-button { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + padding: 0; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.disabled { + cursor: default; + svg { + stroke: var(--button-background-color-disabled); + } + &:hover { + background-color: var(--panel-background-color); svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - &.disabled { - cursor: default; - svg { - stroke: var(--button-background-color-disabled); - } - &:hover { - background-color: var(--panel-background-color); - svg { - stroke: var(--button-background-color-disabled); - } - } + stroke: var(--button-background-color-disabled); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index d24bce38a..989d262b1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -12,9 +12,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -28,10 +26,8 @@ :hidden false})) (mf/defc blur-menu [{:keys [ids type values]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - blur (:blur values) + (let [blur (:blur values) has-value? (not (nil? blur)) - multiple? (= blur :multiple) state* (mf/use-state {:show-content true :show-more-options false}) @@ -79,76 +75,47 @@ (fn [] (change! #(update-in % [:blur :hidden] not))))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-value? - :collapsed? (not open?) - :on-collapsed toggle-content - :title (case type - :multiple (tr "workspace.options.blur-options.title.multiple") - :group (tr "workspace.options.blur-options.title.group") - (tr "workspace.options.blur-options.title")) - :class (stl/css-case :title-spacing-blur (not has-value?))} - (when-not has-value? - [:button {:class (stl/css :add-blur) - :on-click handle-add} i/add-refactor])]] - (when (and open? has-value?) - [:div {:class (stl/css :element-set-content)} - [:div {:class (stl/css-case :first-row true - :hidden hidden?)} - [:div {:class (stl/css :blur-info)} - [:button {:class (stl/css-case :show-more true - :selected more-options?) - :on-click toggle-more-options} - i/menu-refactor] - [:span {:class (stl/css :label)} - (tr "workspace.options.blur-options.title")]] - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click handle-toggle-visibility} - (if hidden? - i/hide-refactor - i/shown-refactor)] - [:button {:class (stl/css :action-btn) - :on-click handle-delete} i/remove-refactor]]] - (when more-options? - [:div {:class (stl/css :second-row)} - [:label {:class (stl/css :label) - :for "blur-input-sidebar"} - (tr "inspect.attributes.blur.value")] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :id "blur-input-sidebar" - :min "0" - :on-change handle-change - :value (:value blur)}]])])] - - - [:div.element-set - [:div.element-set-title - [:span - (case type - :multiple (tr "workspace.options.blur-options.title.multiple") - :group (tr "workspace.options.blur-options.title.group") - (tr "workspace.options.blur-options.title"))] - - [:div.element-set-title-actions - (when (and has-value? (not multiple?)) - [:div.add-page {:on-click handle-toggle-visibility} - (if hidden? i/eye-closed i/eye)]) - - (if has-value? - [:div.add-page {:on-click handle-delete} i/minus] - [:div.add-page {:on-click handle-add} i/close])]] - - (cond - has-value? - [:div.element-set-content - [:& input-row {:label "Value" - :class "pixels" - :min "0" - :value (:value blur) - :placeholder (tr "settings.multiple") - :on-change handle-change}]])]))) + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-value? + :collapsed? (not open?) + :on-collapsed toggle-content + :title (case type + :multiple (tr "workspace.options.blur-options.title.multiple") + :group (tr "workspace.options.blur-options.title.group") + (tr "workspace.options.blur-options.title")) + :class (stl/css-case :title-spacing-blur (not has-value?))} + (when-not has-value? + [:button {:class (stl/css :add-blur) + :on-click handle-add} i/add-refactor])]] + (when (and open? has-value?) + [:div {:class (stl/css :element-set-content)} + [:div {:class (stl/css-case :first-row true + :hidden hidden?)} + [:div {:class (stl/css :blur-info)} + [:button {:class (stl/css-case :show-more true + :selected more-options?) + :on-click toggle-more-options} + i/menu-refactor] + [:span {:class (stl/css :label)} + (tr "workspace.options.blur-options.title")]] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click handle-toggle-visibility} + (if hidden? + i/hide-refactor + i/shown-refactor)] + [:button {:class (stl/css :action-btn) + :on-click handle-delete} i/remove-refactor]]] + (when more-options? + [:div {:class (stl/css :second-row)} + [:label {:class (stl/css :label) + :for "blur-input-sidebar"} + (tr "inspect.attributes.blur.value")] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :id "blur-input-sidebar" + :min "0" + :on-change handle-change + :value (:value blur)}]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index 6559fdd1d..87f3b39d8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -8,13 +8,74 @@ .element-set { margin: 0; - .element-title { - .title-spacing-blur { - padding-left: $s-2; - margin: 0; +} + +.title-spacing-blur { + padding-left: $s-2; + margin: 0; +} + +.add-blur { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.element-set-content { + @include flexColumn; + margin-bottom: $s-8; +} + +.first-row { + @include flexRow; + width: 100%; + .blur-info { + display: flex; + align-items: center; + gap: $s-1; + flex-grow: 1; + border-radius: $br-8; + background-color: var(--input-details-color); + .show-more { + @extend .button-secondary; + height: $s-32; + width: $s-28; + border-radius: $br-8 0 0 $br-8; + box-sizing: border-box; + border: $s-1 solid var(--button-secondary-background-color-rest); + svg { + @extend .button-icon; + } + &.selected { + background-color: var(--button-radio-background-color-active); + svg { + stroke: var(--button-radio-foreground-color-active); + } + } } - .add-blur { + .label { + @include titleTipography; + flex-grow: 1; + display: flex; + align-items: center; + height: $s-32; + padding: 0 $s-8; + border-radius: 0 $br-8 $br-8 0; + background-color: var(--input-background-color); + color: var(--menu-foreground-color); + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); + } + } + .actions { + @include flexRow; + .action-btn { @extend .button-tertiary; + box-sizing: border-box; + border: $s-1 solid var(--button-tertiary-background-color-rest); height: $s-32; width: $s-28; svg { @@ -22,85 +83,27 @@ } } } - .element-set-content { - @include flexColumn; - margin-bottom: $s-8; - .first-row { - @include flexRow; - width: 100%; - .blur-info { - display: flex; - align-items: center; - gap: $s-1; - flex-grow: 1; - border-radius: $br-8; - background-color: var(--input-details-color); - .show-more { - @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; - box-sizing: border-box; - border: $s-1 solid var(--button-secondary-background-color-rest); - svg { - @extend .button-icon; - } - &.selected { - background-color: var(--button-radio-background-color-active); - svg { - stroke: var(--button-radio-foreground-color-active); - } - } - } - .label { - @include titleTipography; - flex-grow: 1; - display: flex; - align-items: center; - height: $s-32; - padding: 0 $s-8; - border-radius: 0 $br-8 $br-8 0; - background-color: var(--input-background-color); - color: var(--menu-foreground-color); - box-sizing: border-box; - border: $s-1 solid var(--input-background-color); - } - } - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - box-sizing: border-box; - border: $s-1 solid var(--button-tertiary-background-color-rest); - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - &.hidden { - .blur-info { - @include hiddenElement; - .show-more { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - .label { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - } + &.hidden { + .blur-info { + @include hiddenElement; + .show-more { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); } - } - .second-row { - @extend .input-element; - width: $s-92; .label { - padding-left: $s-8; - width: $s-60; + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); } } } } + +.second-row { + @extend .input-element; + width: $s-92; + .label { + padding-left: $s-8; + width: $s-60; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index bae691940..7a25e1bf5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -13,19 +13,13 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) - - (mf/defc bool-options [] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - selected (mf/deref refs/selected-objects) + (let [selected (mf/deref refs/selected-objects) head (first selected) selected-with-children (mf/deref refs/selected-shapes-with-children) has-invalid-shapes? (->> selected-with-children @@ -42,39 +36,10 @@ disabled-flatten (or (empty? selected) has-invalid-shapes?) set-bool - (mf/use-fn - (mf/deps head head-bool-type selected) - (fn [event] - (let [bool-type (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (cond - (> (count selected) 1) - (st/emit! (dw/create-bool (if new-css-system - (keyword bool-type) - bool-type))) - - (and (= (count selected) 1) is-group?) - (st/emit! (dw/group-to-bool (:id head) (if new-css-system - (keyword bool-type) - bool-type))) - - (and (= (count selected) 1) is-bool?) - (if (= head-bool-type (if new-css-system - (keyword bool-type) - bool-type)) - (st/emit! (dw/bool-to-group (:id head))) - (st/emit! (dw/change-bool-type (:id head) (if new-css-system - (keyword bool-type) - bool-type)))))))) - - set-bool-refactor (mf/use-fn (mf/deps selected is-group? is-bool?) (fn [bool-type] - (let [bool-type (if new-css-system - (keyword bool-type) - bool-type)] + (let [bool-type (keyword bool-type)] (cond (> (count selected) 1) (st/emit! (dw/create-bool bool-type)) @@ -90,82 +55,40 @@ flatten-objects (mf/use-fn #(st/emit! (dw/convert-selected-to-path)))] (when (not (and disabled-bool-btns disabled-flatten)) - (if new-css-system - [:div {:class (stl/css :boolean-options)} - [:div {:class (stl/css :bool-group)} - [:& radio-buttons {:selected (d/name head-bool-type) - :class (stl/css :boolean-radio-btn) - :on-change set-bool-refactor - :name "bool-options"} - [:& radio-button {:icon i/boolean-union-refactor - :value "union" - :disabled disabled-bool-btns - :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") - :id "bool-opt-union"}] - [:& radio-button {:icon i/boolean-difference-refactor - :value "difference" - :disabled disabled-bool-btns - :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") - :id "bool-opt-differente"}] - [:& radio-button {:icon i/boolean-intersection-refactor - :value "intersection" - :disabled disabled-bool-btns - :title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")") - :id "bool-opt-intersection"}] - [:& radio-button {:icon i/boolean-exclude-refactor - :value "exclude" - :disabled disabled-bool-btns - :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") - :id "bool-opt-exclude"}]]] + [:div {:class (stl/css :boolean-options)} + [:div {:class (stl/css :bool-group)} + [:& radio-buttons {:selected (d/name head-bool-type) + :class (stl/css :boolean-radio-btn) + :on-change set-bool + :name "bool-options"} + [:& radio-button {:icon i/boolean-union-refactor + :value "union" + :disabled disabled-bool-btns + :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") + :id "bool-opt-union"}] + [:& radio-button {:icon i/boolean-difference-refactor + :value "difference" + :disabled disabled-bool-btns + :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") + :id "bool-opt-differente"}] + [:& radio-button {:icon i/boolean-intersection-refactor + :value "intersection" + :disabled disabled-bool-btns + :title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")") + :id "bool-opt-intersection"}] + [:& radio-button {:icon i/boolean-exclude-refactor + :value "exclude" + :disabled disabled-bool-btns + :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") + :id "bool-opt-exclude"}]]] - [:div {:class (stl/css :bool-group)} - [:button - {:title (tr "workspace.shape.menu.flatten") - :class (stl/css-case - :flatten true - :disabled disabled-flatten) - :disabled disabled-flatten - :on-click flatten-objects} - i/boolean-flatten-refactor]]] - - [:div.align-options - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :union)) - :data-value :union - :on-click set-bool} - i/bool-union] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :difference)) - :data-value :difference - :on-click set-bool} - i/bool-difference] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :intersection)) - :data-value :intersection - :on-click set-bool} - i/bool-intersection] - - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :exclude)) - :data-value :exclude - :on-click set-bool} - i/bool-exclude]] - - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.shape.menu.flatten") - :class (dom/classnames :disabled disabled-flatten) - :on-click flatten-objects} - i/bool-flatten]]])))) + [:div {:class (stl/css :bool-group)} + [:button + {:title (tr "workspace.shape.menu.flatten") + :class (stl/css-case + :flatten true + :disabled disabled-flatten) + :disabled disabled-flatten + :on-click flatten-objects} + i/boolean-flatten-refactor]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss index bf08806f5..3cf1fa8fe 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -11,33 +11,36 @@ gap: $s-4; height: $s-32; margin: 0 calc(-1 * $s-2); - .bool-group { - display: flex; - align-items: center; - .flatten { - @extend .button-tertiary; - height: $s-28; - width: $s-28; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - &.disabled { - cursor: default; - svg { - stroke: var(--button-background-color-disabled); - } - &:hover { - background-color: var(--panel-background-color); - svg { - stroke: var(--button-background-color-disabled); - } - } - } +} + +.bool-group { + display: flex; + align-items: center; +} + +.flatten { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.disabled { + cursor: default; + svg { + stroke: var(--button-background-color-disabled); } - .boolean-radio-btn { - background-color: transparent; + &:hover { + background-color: var(--panel-background-color); + svg { + stroke: var(--button-background-color-disabled); + } } } } + +.boolean-radio-btn { + background-color: transparent; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 47aac34fb..6dce1cc00 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -14,8 +14,6 @@ [app.main.data.workspace.selection :as dws] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] - [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [app.util.i18n :as i18n :refer [tr]] [cuerdas.core :as str] @@ -158,7 +156,6 @@ [{:keys [shapes file-id shared-libs] :as props}] (let [{:keys [grouped-colors library-colors colors]} (mf/with-memo [shapes file-id shared-libs] (prepare-colors shapes file-id shared-libs)) - new-css-system (mf/use-ctx ctx/new-css-system) state* (mf/use-state true) open? (deref state*) @@ -216,71 +213,17 @@ (mf/with-effect [grouped-colors] (reset! grouped-colors* grouped-colors)) - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-colors? - :collapsed? (not open?) - :on-collapsed toggle-content - :title (tr "workspace.options.selection-color") - :class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]] + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-colors? + :collapsed? (not open?) + :on-collapsed toggle-content + :title (tr "workspace.options.selection-color") + :class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]] - (when open? - [:div {:class (stl/css :element-content)} - [:div {:class (stl/css :selected-color-group)} - (for [[index color] (d/enumerate (take 3 library-colors))] - [:& color-row {:key (dm/str "library-color-" (:color color)) - :color color - :index index - :on-detach on-detach - :select-only select-only - :on-change #(on-change %1 color %2) - :on-open on-open - :on-close on-close}]) - (when (and (false? @expand-lib-color) (< 3 (count library-colors))) - [:button {:class (stl/css :more-colors-btn) - :on-click #(reset! expand-lib-color true)} - (tr "workspace.options.more-lib-colors")]) - (when @expand-lib-color - (for [[index color] (d/enumerate (drop 3 library-colors))] - [:& color-row {:key (dm/str "library-color-" (:color color)) - :color color - :index index - :on-detach on-detach - :select-only select-only - :on-change #(on-change %1 color %2) - :on-open on-open - :on-close on-close}]))] - [:div {:class (stl/css :selected-color-group)} - (for [[index color] (d/enumerate (take 3 colors))] - [:& color-row {:key (dm/str "color-" index) - :color color - :index index - :select-only select-only - :on-change #(on-change %1 color %2) - :on-open on-open - :on-close on-close}]) - (when (and (false? @expand-color) (< 3 (count colors))) - [:button {:class (stl/css :more-colors-btn) - :on-click #(reset! expand-color true)} - (tr "workspace.options.more-colors")]) - - (when @expand-color - (for [[index color] (d/enumerate (drop 3 colors))] - [:& color-row {:key (dm/str "color-" (:color color)) - :color color - :index index - :select-only select-only - :on-change #(on-change %1 color %2) - :on-open on-open - :on-close on-close}]))]])] - - - [:div.element-set - [:div.element-set-title - [:span (tr "workspace.options.selection-color")]] - [:div.element-set-content - [:div.selected-colors + (when open? + [:div {:class (stl/css :element-content)} + [:div {:class (stl/css :selected-color-group)} (for [[index color] (d/enumerate (take 3 library-colors))] [:& color-row {:key (dm/str "library-color-" (:color color)) :color color @@ -291,9 +234,9 @@ :on-open on-open :on-close on-close}]) (when (and (false? @expand-lib-color) (< 3 (count library-colors))) - [:div.expand-colors {:on-click #(reset! expand-lib-color true)} - [:span i/actions] - [:span.text (tr "workspace.options.more-lib-colors")]]) + [:button {:class (stl/css :more-colors-btn) + :on-click #(reset! expand-lib-color true)} + (tr "workspace.options.more-lib-colors")]) (when @expand-lib-color (for [[index color] (d/enumerate (drop 3 library-colors))] [:& color-row {:key (dm/str "library-color-" (:color color)) @@ -304,8 +247,7 @@ :on-change #(on-change %1 color %2) :on-open on-open :on-close on-close}]))] - - [:div.selected-colors + [:div {:class (stl/css :selected-color-group)} (for [[index color] (d/enumerate (take 3 colors))] [:& color-row {:key (dm/str "color-" index) :color color @@ -315,9 +257,10 @@ :on-open on-open :on-close on-close}]) (when (and (false? @expand-color) (< 3 (count colors))) - [:div.expand-colors {:on-click #(reset! expand-color true)} - [:span i/actions] - [:span.text (tr "workspace.options.more-colors")]]) + [:button {:class (stl/css :more-colors-btn) + :on-click #(reset! expand-color true)} + (tr "workspace.options.more-colors")]) + (when @expand-color (for [[index color] (d/enumerate (drop 3 colors))] [:& color-row {:key (dm/str "color-" (:color color)) @@ -326,4 +269,4 @@ :select-only select-only :on-change #(on-change %1 color %2) :on-open on-open - :on-close on-close}]))]]]))) + :on-close on-close}]))]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index eb8ca850c..56e096768 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -8,30 +8,33 @@ .element-set { margin: 0; - .element-title { - .title-spacing-selected-colors { - padding-left: $s-2; - margin: 0; - } - .add-fill { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .element-content { - @include flexColumn; - margin-bottom: $s-8; - .selected-color-group { - @include flexColumn; - .more-colors-btn { - @extend .button-secondary; - @include tabTitleTipography; - height: $s-32; - } - } +} + +.title-spacing-selected-colors { + padding-left: $s-2; + margin: 0; +} + +.add-fill { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } } + +.element-content { + @include flexColumn; + margin-bottom: $s-8; +} + +.selected-color-group { + @include flexColumn; +} + +.more-colors-btn { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index c000ac90c..40cef8642 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -147,7 +147,6 @@ (when (or @editing? creating?) [:div.counter (str @size "/300")])]]))) - (mf/defc component-swap-item {::mf/wrap-props false} [{:keys [item loop shapes file-id root-shape container component-id is-search listing-thumbs] :as props}] @@ -190,7 +189,6 @@ [:span {:class (stl/css :component-group-name)} (cfh/last-path group-name)]] [:span i/arrow-slide]])) - (mf/defc component-swap [{:keys [shapes] :as props}] (let [single? (= 1 (count shapes)) @@ -405,7 +403,6 @@ [:span {:class (stl/css :dropdown-label)} (tr (:msg entry))]])]])) - (mf/defc component-menu [{:keys [shapes swap-opened?] :as props}] (let [current-file-id (mf/use-ctx ctx/current-file-id) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs index a61c6314a..35b72810e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs @@ -16,7 +16,6 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -31,9 +30,7 @@ (mf/defc constraints-menu [{:keys [ids values] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - state* (mf/use-state true) + (let [state* (mf/use-state true) open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) @@ -109,19 +106,6 @@ ids #(assoc % constraint new-value)))))) - on-constraint-select-changed - (mf/use-fn - (mf/deps ids) - (fn [event] - (let [constraint (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword)) - value (-> (dom/get-target-val event) (keyword))] - (when-not (str/empty? value) - (st/emit! (dch/update-shapes - ids - #(assoc % constraint value))))))) - on-constraint-h-select-changed (mf/use-fn (mf/deps ids) @@ -171,154 +155,79 @@ ;; CONSTRAINTS (when in-frame? - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true - :collapsed? (not open?) - :on-collapsed toggle-content - :title (tr "workspace.options.constraints")}]] - (when open? - [:div {:class (stl/css :element-set-content)} - [:div {:class (stl/css :constraints-widget)} - [:div {:class (stl/css :constraints-top)} - [:button {:class (stl/css-case :constraint-btn true - :active (or (= constraints-v :top) - (= constraints-v :topbottom))) - :data-value :top - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]]] - [:div {:class (stl/css :constraints-left)} - [:button {:class (stl/css-case :constraint-btn true - :constraint-btn-rotated true - :active (or (= constraints-h :left) - (= constraints-h :leftright))) - :data-value :left - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]]] - [:div {:class (stl/css :constraints-center)} - [:button {:class (stl/css-case :constraint-btn true - :active (= constraints-h :center)) - :data-value :centerh - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]] - [:button {:class (stl/css-case :constraint-btn-special true - :constraint-btn-rotated true - :active (= constraints-v :center)) - :data-value :centerv - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]]] - [:div {:class (stl/css :constraints-right)} - [:button {:class (stl/css-case :constraint-btn true - :constraint-btn-rotated true - :active (or (= constraints-h :right) - (= constraints-h :leftright))) - :data-value :right - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]]] - [:div {:class (stl/css :constraints-bottom)} - [:button {:class (stl/css-case :constraint-btn true - :active (or (= constraints-v :bottom) - (= constraints-v :topbottom))) - :data-value :bottom - :on-click on-constraint-button-clicked} - [:span {:class (stl/css :resalted-area)}]]]] - [:div {:class (stl/css :contraints-selects)} - [:div {:class (stl/css :horizontal-select)} - [:& select - {:default-value (d/name constraints-h "scale") - :options options-h - :on-change on-constraint-h-select-changed}]] - [:div {:class (stl/css :vertical-select)} - [:& select - {:default-value (d/name constraints-v "scale") - :options options-v - :on-change on-constraint-v-select-changed}]] - (when first-level? - [:div {:class (stl/css :checkbox)} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? true + :collapsed? (not open?) + :on-collapsed toggle-content + :title (tr "workspace.options.constraints")}]] + (when open? + [:div {:class (stl/css :element-set-content)} + [:div {:class (stl/css :constraints-widget)} + [:div {:class (stl/css :constraints-top)} + [:button {:class (stl/css-case :constraint-btn true + :active (or (= constraints-v :top) + (= constraints-v :topbottom))) + :data-value :top + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]]] + [:div {:class (stl/css :constraints-left)} + [:button {:class (stl/css-case :constraint-btn true + :constraint-btn-rotated true + :active (or (= constraints-h :left) + (= constraints-h :leftright))) + :data-value :left + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]]] + [:div {:class (stl/css :constraints-center)} + [:button {:class (stl/css-case :constraint-btn true + :active (= constraints-h :center)) + :data-value :centerh + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]] + [:button {:class (stl/css-case :constraint-btn-special true + :constraint-btn-rotated true + :active (= constraints-v :center)) + :data-value :centerv + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]]] + [:div {:class (stl/css :constraints-right)} + [:button {:class (stl/css-case :constraint-btn true + :constraint-btn-rotated true + :active (or (= constraints-h :right) + (= constraints-h :leftright))) + :data-value :right + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]]] + [:div {:class (stl/css :constraints-bottom)} + [:button {:class (stl/css-case :constraint-btn true + :active (or (= constraints-v :bottom) + (= constraints-v :topbottom))) + :data-value :bottom + :on-click on-constraint-button-clicked} + [:span {:class (stl/css :resalted-area)}]]]] + [:div {:class (stl/css :contraints-selects)} + [:div {:class (stl/css :horizontal-select)} + [:& select + {:default-value (d/name constraints-h "scale") + :options options-h + :on-change on-constraint-h-select-changed}]] + [:div {:class (stl/css :vertical-select)} + [:& select + {:default-value (d/name constraints-v "scale") + :options options-v + :on-change on-constraint-v-select-changed}]] + (when first-level? + [:div {:class (stl/css :checkbox)} - [:label {:for "fixed-on-scroll" - :class (stl/css-case :checked (:fixed-scroll values))} - [:span {:class (stl/css-case :check-mark true - :checked (:fixed-scroll values))} - (when (:fixed-scroll values) - i/status-tick-refactor)] - (tr "workspace.options.constraints.fix-when-scrolling") - [:input {:type "checkbox" - :id "fixed-on-scroll" - :checked (:fixed-scroll values) - :on-change on-fixed-scroll-clicked}]]])]])] - - - [:div.element-set - [:div.element-set-title - [:span (tr "workspace.options.constraints")]] - - [:div.element-set-content - [:div.row-flex.align-top - [:div.constraints-widget - [:div.constraints-box] - [:div.constraint-button.top - {:class (dom/classnames :active (or (= constraints-v :top) - (= constraints-v :topbottom))) - :data-value :top - :on-click on-constraint-button-clicked}] - [:div.constraint-button.bottom - {:class (dom/classnames :active (or (= constraints-v :bottom) - (= constraints-v :topbottom))) - :data-value :bottom - :on-click on-constraint-button-clicked}] - [:div.constraint-button.left - {:class (dom/classnames :active (or (= constraints-h :left) - (= constraints-h :leftright))) - :data-value :left - :on-click on-constraint-button-clicked}] - [:div.constraint-button.right - {:class (dom/classnames :active (or (= constraints-h :right) - (= constraints-h :leftright))) - :data-value :right - :on-click on-constraint-button-clicked}] - [:div.constraint-button.centerv - {:class (dom/classnames :active (= constraints-v :center)) - :data-value :centerv - :on-click on-constraint-button-clicked}] - [:div.constraint-button.centerh - {:class (dom/classnames :active (= constraints-h :center)) - :data-value :centerh - :on-click on-constraint-button-clicked}]] - - [:div.constraints-form - [:div.row-flex - [:span.left-right i/full-screen] - [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :data-value :constraints-h - :on-change on-constraint-select-changed - :value (d/name constraints-h "scale")} - (when (= constraints-h :multiple) - [:option {:value ""} (tr "settings.multiple")]) - [:option {:value "left"} (tr "workspace.options.constraints.left")] - [:option {:value "right"} (tr "workspace.options.constraints.right")] - [:option {:value "leftright"} (tr "workspace.options.constraints.leftright")] - [:option {:value "center"} (tr "workspace.options.constraints.center")] - [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]] - [:div.row-flex - [:span.top-bottom i/full-screen] - [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :data-value :constraints-v - :on-change on-constraint-select-changed - :value (d/name constraints-v "scale")} - (when (= constraints-v :multiple) - [:option {:value ""} (tr "settings.multiple")]) - [:option {:value "top"} (tr "workspace.options.constraints.top")] - [:option {:value "bottom"} (tr "workspace.options.constraints.bottom")] - [:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")] - [:option {:value "center"} (tr "workspace.options.constraints.center")] - [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]] - (when first-level? - [:div.row-flex - [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values)) - :on-click on-fixed-scroll-clicked} - (if (:fixed-scroll values) - i/pin-fill - i/pin) - [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])]]]])))) + [:label {:for "fixed-on-scroll" + :class (stl/css-case :checked (:fixed-scroll values))} + [:span {:class (stl/css-case :check-mark true + :checked (:fixed-scroll values))} + (when (:fixed-scroll values) + i/status-tick-refactor)] + (tr "workspace.options.constraints.fix-when-scrolling") + [:input {:type "checkbox" + :id "fixed-on-scroll" + :checked (:fixed-scroll values) + :on-change on-fixed-scroll-clicked}]]])]])]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index 736bde4e4..cf275fba9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -8,149 +8,156 @@ .element-set { margin: 0; - .element-set-content { - display: flex; - gap: $s-4; - .constraints-widget { - background-color: var(--constraint-widget-background-color); - display: grid; - grid-template-columns: $s-24 $s-60 $s-24; - grid-template-rows: $s-24 $s-60 $s-24; - grid-template-areas: - "top top top" - "left center right" - "bottom bottom bottom"; - height: $s-108; - width: $s-108; +} + +.element-set-content { + display: flex; + gap: $s-4; +} + +.constraints-widget { + background-color: var(--constraint-widget-background-color); + display: grid; + grid-template-columns: $s-24 $s-60 $s-24; + grid-template-rows: $s-24 $s-60 $s-24; + grid-template-areas: + "top top top" + "left center right" + "bottom bottom bottom"; + height: $s-108; + width: $s-108; + border-radius: $br-8; +} + +.constraints-top, +.constraints-left, +.constraints-center, +.constraints-right, +.constraints-bottom { + @include flexCenter; + grid-area: top; + .constraint-btn, + .constraint-btn-special, + .constraint-btn-rotated { + @include buttonStyle; + @include flexCenter; + width: 100%; + height: 100%; + .resalted-area { + width: $s-32; + height: $s-3; border-radius: $br-8; - .constraints-top, - .constraints-left, - .constraints-center, - .constraints-right, - .constraints-bottom { - @include flexCenter; - grid-area: top; - .constraint-btn, - .constraint-btn-special, - .constraint-btn-rotated { - @include buttonStyle; - @include flexCenter; - width: 100%; - height: 100%; - .resalted-area { - width: $s-32; - height: $s-3; - border-radius: $br-8; - background-color: var(--button-constraint-background-color-rest); - padding: 0; - margin: 0; - } - &.active .resalted-area { - outline: $s-4 solid var(--button-constraint-border-color-hover); - background-color: var(--button-constraint-background-color-hover); - } - &:hover .resalted-area, - &:focus .resalted-area { - outline: $s-4 solid var(--button-constraint-border-color-hover); - background-color: var(--button-constraint-background-color-hover); - } - } - } - .constraints-left { - grid-area: left; - .constraint-btn-rotated { - height: $s-60; - width: $s-24; - .resalted-area { - height: $s-32; - width: $s-3; - } - } - } - .constraints-center { - grid-area: center; - position: relative; - background-color: var(--constraint-center-area-background-color); - border-radius: $br-8; - .constraint-btn { - width: $s-60; - height: $s-24; - .resalted-area { - width: $s-32; - height: $s-3; - } - } - .constraint-btn-special { - position: absolute; - height: $s-60; - width: $s-24; - .resalted-area { - height: $s-32; - width: $s-3; - } - } - } - .constraints-right { - grid-area: right; - .constraint-btn-rotated { - height: $s-72; - width: $s-24; - .resalted-area { - height: $s-32; - width: $s-3; - } - } - } - .constraints-bottom { - grid-area: bottom; - } + background-color: var(--button-constraint-background-color-rest); + padding: 0; + margin: 0; } - .contraints-selects { - @include flexColumn; + &.active .resalted-area { + outline: $s-4 solid var(--button-constraint-border-color-hover); + background-color: var(--button-constraint-background-color-hover); + } + &:hover .resalted-area, + &:focus .resalted-area { + outline: $s-4 solid var(--button-constraint-border-color-hover); + background-color: var(--button-constraint-background-color-hover); + } + } +} +.constraints-left { + grid-area: left; + .constraint-btn-rotated { + height: $s-60; + width: $s-24; + .resalted-area { + height: $s-32; + width: $s-3; + } + } +} +.constraints-center { + grid-area: center; + position: relative; + background-color: var(--constraint-center-area-background-color); + border-radius: $br-8; + .constraint-btn { + width: $s-60; + height: $s-24; + .resalted-area { + width: $s-32; + height: $s-3; + } + } + .constraint-btn-special { + position: absolute; + height: $s-60; + width: $s-24; + .resalted-area { + height: $s-32; + width: $s-3; + } + } +} - .horizontal-select, - .vertical-select { - width: $s-124; - padding: 0; +.constraints-right { + grid-area: right; + .constraint-btn-rotated { + height: $s-72; + width: $s-24; + .resalted-area { + height: $s-32; + width: $s-3; + } + } +} + +.constraints-bottom { + grid-area: bottom; +} + +.contraints-selects { + @include flexColumn; +} + +.horizontal-select, +.vertical-select { + width: $s-124; + padding: 0; +} + +.checkbox { + display: flex; + align-items: center; + margin-bottom: $s-8; + margin-top: $s-8; + padding-left: 0; + input { + margin: 0; + } + + label { + @include titleTipography; + display: flex; + align-items: center; + gap: $s-2; + cursor: pointer; + color: var(--input-checkbox-text-foreground-color); + .check-mark { + @include flexCenter; + width: $s-16; + height: $s-16; + border-radius: $br-6; + background-color: var(--input-checkbox-inactive-background-color); + &.checked { + background-color: var(--input-checkbox-active-background-color); + svg { + @extend .button-icon-small; + stroke: var(--input-details-color); + } } - - .checkbox { - display: flex; - align-items: center; - margin-bottom: $s-8; - margin-top: $s-8; - padding-left: 0; - input { - margin: 0; - } - label { - @include titleTipography; - display: flex; - align-items: center; - gap: $s-2; - cursor: pointer; - color: var(--input-checkbox-text-foreground-color); - .check-mark { - @include flexCenter; - width: $s-16; - height: $s-16; - border-radius: $br-6; - background-color: var(--input-checkbox-inactive-background-color); - &.checked { - background-color: var(--input-checkbox-active-background-color); - svg { - @extend .button-icon-small; - stroke: var(--input-details-color); - } - } - &:hover { - border-color: var(--input-checkbox-border-color-hover); - } - &:focus { - border-color: var(--input-checkbox-border-color-focus); - } - } - } + &:hover { + border-color: var(--input-checkbox-border-color-hover); + } + &:focus { + border-color: var(--input-checkbox-border-color-focus); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index f45dffb83..72556669d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -15,7 +15,6 @@ [app.main.store :as st] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.export] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -30,8 +29,7 @@ (mf/defc exports-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "page-id" "file-id"]))]} [{:keys [ids type values page-id file-id] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - exports (:exports values []) + (let [exports (:exports values []) has-exports? (or (= :multiple exports) (some? (seq exports))) comp-state* (mf/use-state true) @@ -118,11 +116,7 @@ (mf/use-fn (mf/deps ids) (fn [index event] - (let [scale (if new-css-system - (d/parse-double event) - (-> event - (dom/get-target-val) - (d/parse-double)))] + (let [scale (d/parse-double event)] (st/emit! (dch/update-shapes ids (fn [shape] (assoc-in shape [:exports index :scale] scale))))))) @@ -143,11 +137,7 @@ (mf/use-fn (mf/deps ids) (fn [index event] - (let [type (if new-css-system - (keyword event) - (-> event - (dom/get-target-val) - (keyword)))] + (let [type (keyword event)] (st/emit! (dch/update-shapes ids (fn [shape] (assoc-in shape [:exports index :type] type))))))) @@ -179,125 +169,68 @@ {:value "svg" :label "SVG"} {:value "pdf" :label "PDF"}]] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-exports? - :collapsed? (not open?) - :on-collapsed toggle-content - :title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export")) - :class (stl/css-case :title-spacing-export (not has-exports?))} - [:button {:class (stl/css :add-export) - :on-click add-export} i/add-refactor]]] - (when open? - [:div {:class (stl/css :element-set-content)} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-exports? + :collapsed? (not open?) + :on-collapsed toggle-content + :title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export")) + :class (stl/css-case :title-spacing-export (not has-exports?))} + [:button {:class (stl/css :add-export) + :on-click add-export} i/add-refactor]]] + (when open? + [:div {:class (stl/css :element-set-content)} - (cond - (= :multiple exports) - [:div {:class (stl/css :multiple-exports)} - [:div {:class (stl/css :label)} (tr "settings.multiple")] - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click on-remove-all} - i/remove-refactor]]] + (cond + (= :multiple exports) + [:div {:class (stl/css :multiple-exports)} + [:div {:class (stl/css :label)} (tr "settings.multiple")] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click on-remove-all} + i/remove-refactor]]] - (seq exports) - [:* - (for [[index export] (d/enumerate exports)] - [:div {:class (stl/css :element-group) - :key index} - [:div {:class (stl/css :input-wrapper)} - [:div {:class (stl/css :format-select)} + (seq exports) + [:* + (for [[index export] (d/enumerate exports)] + [:div {:class (stl/css :element-group) + :key index} + [:div {:class (stl/css :input-wrapper)} + [:div {:class (stl/css :format-select)} + [:& select + {:default-value (d/name (:type export)) + :options format-options + :dropdown-class (stl/css :dropdown-upwards) + :on-change (partial on-type-change index)}]] + (when (scale-enabled? export) + [:div {:class (stl/css :size-select)} [:& select - {:default-value (d/name (:type export)) - :options format-options + {:default-value (str (:scale export)) + :options size-options :dropdown-class (stl/css :dropdown-upwards) - :on-change (partial on-type-change index)}]] - (when (scale-enabled? export) - [:div {:class (stl/css :size-select)} - [:& select - {:default-value (str (:scale export)) - :options size-options - :dropdown-class (stl/css :dropdown-upwards) - :on-change (partial on-scale-change index)}]]) - [:label {:class (stl/css :suffix-input) - :for "suffix-export-input"} - [:input {:class (stl/css :type-input) - :id "suffix-export-input" - :type "text" - :value (:suffix export) - :placeholder (tr "workspace.options.export.suffix") - :data-value index - :on-change on-suffix-change - :on-key-down manage-key-down}]]] + :on-change (partial on-scale-change index)}]]) + [:label {:class (stl/css :suffix-input) + :for "suffix-export-input"} + [:input {:class (stl/css :type-input) + :id "suffix-export-input" + :type "text" + :value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") + :data-value index + :on-change on-suffix-change + :on-key-down manage-key-down}]]] - [:button {:class (stl/css :action-btn) - :on-click (partial delete-export index)} - i/remove-refactor]])]) + [:button {:class (stl/css :action-btn) + :on-click (partial delete-export index)} + i/remove-refactor]])]) - (when (or (= :multiple exports) (seq exports)) - [:button - {:on-click (when-not in-progress? on-download) - :class (stl/css-case - :export-btn true - :btn-disabled in-progress?) - :disabled in-progress?} - (if in-progress? - (tr "workspace.options.exporting-object") - (tr "workspace.options.export-object" (c (count shapes-with-exports))))])])] - - - [:div.element-set.exports-options - [:div.element-set-title - [:span (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))] - (when (not (= :multiple exports)) - [:div.add-page {:on-click add-export} i/close])] - - (cond - (= :multiple exports) - [:div.element-set-options-group - [:div.element-set-label (tr "settings.multiple")] - [:div.element-set-actions - [:div.element-set-actions-button {:on-click on-remove-all} - i/minus]]] - - (seq exports) - [:div.element-set-content - (for [[index export] (d/enumerate exports)] - [:div.element-set-options-group - {:key index} - (when (scale-enabled? export) - [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :on-change (partial on-scale-change index) - :value (:scale export)} - [:option {:value "0.5"} "0.5x"] - [:option {:value "0.75"} "0.75x"] - [:option {:value "1"} "1x"] - [:option {:value "1.5"} "1.5x"] - [:option {:value "2"} "2x"] - [:option {:value "4"} "4x"] - [:option {:value "6"} "6x"]]) - [:input.input-text {:value (:suffix export) - :placeholder (tr "workspace.options.export.suffix") - :data-value index - :on-change on-suffix-change - :on-key-down manage-key-down}] - [:select.input-select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (d/name (:type export)) - :on-change (partial on-type-change index)} - [:option {:value "png"} "PNG"] - [:option {:value "jpeg"} "JPEG"] - [:option {:value "svg"} "SVG"] - [:option {:value "pdf"} "PDF"]] - [:div.delete-icon {:on-click (partial delete-export index)} - i/minus]])]) - - (when (or (= :multiple exports) (seq exports)) - [:div.btn-icon-dark.download-button - {:on-click (when-not in-progress? on-download) - :class (dom/classnames - :btn-disabled in-progress?) - :disabled in-progress?} - (if in-progress? - (tr "workspace.options.exporting-object") - (tr "workspace.options.export-object" (c (count shapes-with-exports))))])]))) + (when (or (= :multiple exports) (seq exports)) + [:button + {:on-click (when-not in-progress? on-download) + :class (stl/css-case + :export-btn true + :btn-disabled in-progress?) + :disabled in-progress?} + (if in-progress? + (tr "workspace.options.exporting-object") + (tr "workspace.options.export-object" (c (count shapes-with-exports))))])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 414d9f7cb..42ecf713b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -8,12 +8,35 @@ .element-set { margin: 0; - .element-title { - .title-spacing-export { - padding-left: $s-2; - margin: 0; - } - .add-export { +} + +.title-spacing-export { + padding-left: $s-2; + margin: 0; +} + +.add-export { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.element-set-content { + @include flexColumn; + margin: $s-4 0 $s-8 0; +} + +.multiple-exports { + @include flexRow; + .label { + @extend .mixed-bar; + } + .actions { + @include flexRow; + .action-btn { @extend .button-tertiary; height: $s-32; width: $s-28; @@ -22,68 +45,49 @@ } } } - .element-set-content { - @include flexColumn; - margin: $s-4 0 $s-8 0; - .multiple-exports { - @include flexRow; - .label { - @extend .mixed-bar; - } - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } +} + +.element-group { + @include flexRow; + .input-wrapper { + @include flexRow; + .format-select { + width: $s-60; + padding: 0; + .dropdown-upwards { + bottom: $s-36; + width: $s-80; + top: unset; } } - .element-group { - @include flexRow; - .input-wrapper { - @include flexRow; - .format-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - width: $s-80; - top: unset; - } - } - .size-select { - width: $s-60; - padding: 0; - .dropdown-upwards { - bottom: $s-36; - top: unset; - width: $s-80; - } - } - .suffix-input { - @extend .input-element; - min-width: $s-92; - flex-grow: 1; - } - } - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } + .size-select { + width: $s-60; + padding: 0; + .dropdown-upwards { + bottom: $s-36; + top: unset; + width: $s-80; } } - .export-btn { - @extend .button-secondary; - @include tabTitleTipography; - height: $s-32; - width: $s-252; + .suffix-input { + @extend .input-element; + min-width: $s-92; + flex-grow: 1; + } + } + .action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } } } + +.export-btn { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + width: $s-252; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 948c5228f..58fe4f1e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -13,7 +13,6 @@ [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] @@ -44,8 +43,7 @@ (mf/defc fill-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]} [{:keys [ids type values disable-remove?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - label (case type + (let [label (case type :multiple (tr "workspace.options.selection-fill") :group (tr "workspace.options.group-fill") (tr "workspace.options.fill")) @@ -137,83 +135,28 @@ (dom/set-attribute! checkbox "indeterminate" true) (dom/remove-attribute! checkbox "indeterminate"))))) - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-fills? - :collapsed? (not open?) - :on-collapsed toggle-content - :title label - :class (stl/css-case :title-spacing-fill (not has-fills?))} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-fills? + :collapsed? (not open?) + :on-collapsed toggle-content + :title label + :class (stl/css-case :title-spacing-fill (not has-fills?))} - (when (and (not disable-remove?) (not (= :multiple fills))) - [:button {:class (stl/css :add-fill) - :on-click on-add} i/add-refactor])]] - - (when open? - [:div {:class (stl/css :element-content)} - (cond - (= :multiple fills) - [:div {:class (stl/css :element-set-options-group)} - [:div {:class (stl/css :group-label)} - (tr "settings.multiple")] - [:button {:on-click on-remove-all - :class (stl/css :remove-btn)} - i/remove-refactor]] - - (seq fills) - [:& h/sortable-container {} - (for [[index value] (d/enumerate (:fills values []))] - [:& color-row {:color {:color (:fill-color value) - :opacity (:fill-opacity value) - :id (:fill-color-ref-id value) - :file-id (:fill-color-ref-file value) - :gradient (:fill-color-gradient value) - :image (:fill-image value)} - :key index - :index index - :title (tr "workspace.options.fill") - :on-change (on-change index) - :on-reorder (on-reorder index) - :on-detach (on-detach index) - :on-remove (on-remove index) - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus (not @disable-drag) - :on-blur on-blur}])]) - - (when (or (= type :frame) - (and (= type :multiple) (some? (:hide-fill-on-export values)))) - [:div {:class (stl/css :checkbox)} - [:label {:for "show-fill-on-export" - :class (stl/css-case :global/checked (not hide-fill-on-export?))} - [:span {:class (stl/css-case :check-mark true - :checked (not hide-fill-on-export?))} - (when (not hide-fill-on-export?) - i/status-tick-refactor)] - (tr "workspace.options.show-fill-on-export") - [:input {:type "checkbox" - :id "show-fill-on-export" - :ref checkbox-ref - :checked (not hide-fill-on-export?) - :on-change on-change-show-fill-on-export}]]])])] - - ;; OLD - [:div.element-set - [:div.element-set-title - [:span label] - (when (and (not disable-remove?) (not (= :multiple fills))) - [:div.add-page {:on-click on-add} i/close])] - - [:div.element-set-content + (when (and (not disable-remove?) (not (= :multiple fills))) + [:button {:class (stl/css :add-fill) + :on-click on-add} i/add-refactor])]] + (when open? + [:div {:class (stl/css :element-content)} (cond (= :multiple fills) - [:div.element-set-options-group - [:div.element-set-label (tr "settings.multiple")] - [:div.element-set-actions - [:div.element-set-actions-button {:on-click on-remove-all} - i/minus]]] + [:div {:class (stl/css :element-set-options-group)} + [:div {:class (stl/css :group-label)} + (tr "settings.multiple")] + [:button {:on-click on-remove-all + :class (stl/css :remove-btn)} + i/remove-refactor]] (seq fills) [:& h/sortable-container {} @@ -238,12 +181,16 @@ (when (or (= type :frame) (and (= type :multiple) (some? (:hide-fill-on-export values)))) - [:div.input-checkbox - [:input {:type "checkbox" - :id "show-fill-on-export" - :ref checkbox-ref - :checked (not hide-fill-on-export?) - :on-change on-change-show-fill-on-export}] - - [:label {:for "show-fill-on-export"} - (tr "workspace.options.show-fill-on-export")]])]]))) + [:div {:class (stl/css :checkbox)} + [:label {:for "show-fill-on-export" + :class (stl/css-case :global/checked (not hide-fill-on-export?))} + [:span {:class (stl/css-case :check-mark true + :checked (not hide-fill-on-export?))} + (when (not hide-fill-on-export?) + i/status-tick-refactor)] + (tr "workspace.options.show-fill-on-export") + [:input {:type "checkbox" + :id "show-fill-on-export" + :ref checkbox-ref + :checked (not hide-fill-on-export?) + :on-change on-change-show-fill-on-export}]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 7bcc45db9..08b5581db 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -8,50 +8,58 @@ .element-set { margin: 0; - .element-title { - margin: 0; - .title-spacing-fill { - padding-left: $s-2; - margin: 0; - } - .add-fill { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } +} + +.element-title { + margin: 0; +} + +.title-spacing-fill { + padding-left: $s-2; + margin: 0; +} + +.add-fill { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } - .element-content { - display: flex; - flex-direction: column; - gap: $s-12; - margin: $s-4 0 $s-8 0; - .element-set-options-group { - @include flexRow; - .group-label { - @extend .mixed-bar; - } - .remove-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .checkbox { - @extend .input-checkbox; - padding-left: $s-8; - span.checked { - background-color: var(--input-border-color-active); - svg { - @extend .button-icon-small; - stroke: var(--input-details-color); - } - } +} + +.element-content { + display: flex; + flex-direction: column; + gap: $s-12; + margin: $s-4 0 $s-8 0; +} + +.element-set-options-group { + @include flexRow; +} + +.group-label { + @extend .mixed-bar; +} + +.remove-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.checkbox { + @extend .input-checkbox; + padding-left: $s-8; + span.checked { + background-color: var(--input-border-color-active); + svg { + @extend .button-icon-small; + stroke: var(--input-details-color); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 2f326dddf..8191cf090 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -15,11 +15,9 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] - [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row input-row-v2]] [app.util.i18n :as i18n :refer [tr]] [okulary.core :as l] [rumext.v2 :as mf])) @@ -35,8 +33,7 @@ (mf/defc grid-options {::mf/wrap [mf/memo]} [{:keys [shape-id index grid frame-width frame-height default-grid-params]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - on-change (mf/use-fn (mf/deps shape-id index) #(st/emit! (dw/set-frame-grid shape-id index %))) + (let [on-change (mf/use-fn (mf/deps shape-id index) #(st/emit! (dw/set-frame-grid shape-id index %))) on-remove (mf/use-fn (mf/deps shape-id index) #(st/emit! (dw/remove-frame-grid shape-id index))) on-save-default (mf/use-fn #(st/emit! (dw/set-default-grid (:type %) (:params %)))) @@ -136,215 +133,87 @@ is-default (= (->> grid :params) (->> grid :type default-grid-params))] - (if new-css-system - [:div {:class (stl/css :grid-option)} - [:div {:class (stl/css :grid-title)} - [:div {:class (stl/css-case :option-row true - :hidden is-hidden?)} - [:button {:class (stl/css-case :show-options true - :selected open?) - :on-click toggle-advanced-options} - i/menu-refactor] - [:div {:class (stl/css :type-select-wrapper)} - [:& select - {:class (stl/css :grid-type-select) - :default-value type - :options [{:value :square :label (tr "workspace.options.grid.square")} - {:value :column :label (tr "workspace.options.grid.column")} - {:value :row :label (tr "workspace.options.grid.row")}] - :on-change handle-change-type}]] - (if (= type :square) - [:div {:class (stl/css :grid-size) - :title (tr "workspace.options.size")} - [:> numeric-input* {:min 0.01 - :value (or (:size params) "") - :no-validate true - :className (stl/css :numeric-input) - :on-change (handle-change :params :size)}]] - - [:div {:class (stl/css :editable-select-wrapper)} - [:& editable-select {:value (:size params) - :type "number" - :class (stl/css :column-select) - :input-class (stl/css :numeric-input) - :min 1 - :options size-options - :placeholder "Auto" - :on-change handle-change-size}]])] - - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click handle-toggle-visibility} - (if display i/shown-refactor i/hide-refactor)] - [:button {:class (stl/css :action-btn) - :on-click on-remove} - i/remove-refactor]]] - - (when (:display grid) - [:& advanced-options {:class (stl/css :grid-advanced-options) - :visible? open? - :on-close toggle-advanced-options} - ;; square - (when (= :square type) - [:div {:class (stl/css :square-row)} - [:div {:class (stl/css :advanced-row)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}] - [:button {:class (stl/css-case :show-more-options true - :selected show-more-options?) - :on-click toggle-more-options} - i/menu-refactor]] - (when show-more-options? - [:div {:class (stl/css :second-row)} - [:button {:class (stl/css-case :btn-options true - :disabled is-default) - :disabled is-default - :on-click handle-use-default} - [:span (tr "workspace.options.grid.params.use-default")]] - [:button {:class (stl/css-case :btn-options true - :disabled is-default) - :disabled is-default - :on-click handle-set-as-default} - [:span (tr "workspace.options.grid.params.set-default")]]])]) - - (when (or (= :column type) (= :row type)) - [:div {:class (stl/css :column-row)} - [:div {:class (stl/css :advanced-row)} - [:div {:class (stl/css :orientation-select-wrapper)} - [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :default-value (:type params) - :class (stl/css :orientation-select) - :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")} - {:value :left :label (if (= type :row) - (tr "workspace.options.grid.params.type.top") - (tr "workspace.options.grid.params.type.left"))} - {:value :center :label (tr "workspace.options.grid.params.type.center")} - {:value :right :label (if (= type :row) - (tr "workspace.options.grid.params.type.bottom") - (tr "workspace.options.grid.params.type.right"))}] - :on-change (handle-change :params :type)}]] - - [:div {:class (stl/css :color-wrapper)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}]]] - - [:div {:class (stl/css :advanced-row)} - [:div {:class (stl/css :height) - :title (if (= :row type) - (tr "workspace.options.grid.params.height") - (tr "workspace.options.grid.params.width"))} - [:span {:class (stl/css :icon-text)} - (if (= :row type) - "H" - "W")] - [:> numeric-input* {:placeholder "Auto" - :on-change handle-change-item-length - :nillable true - :className (stl/css :numeric-input) - :value (or (:item-length params) "")}]] - - [:div {:class (stl/css :gutter) - :title (tr "workspace.options.grid.params.gutter")} - [:span {:class (stl/css-case :icon true - :rotated (= type :row))} i/gap-horizontal-refactor] - [:> numeric-input* {:placeholder "0" - :on-change (handle-change :params :gutter) - :nillable true - :className (stl/css :numeric-input) - :value (or (:gutter params) 0)}]] - - [:div {:class (stl/css :margin) - :title (tr "workspace.options.grid.params.margin")} - [:span {:class (stl/css-case :icon true - :rotated (= type :column))} i/grid-margin-refactor] - [:> numeric-input* {:placeholder "0" - :on-change (handle-change :params :margin) - :nillable true - :className (stl/css :numeric-input) - :value (or (:margin params) 0)}]] - - [:button {:class (stl/css-case :show-more-options true - :selected show-more-options?) - :on-click toggle-more-options} - i/menu-refactor] - (when show-more-options? - [:div {:class (stl/css :more-options)} - [:button {:disabled is-default - :class (stl/css :option-btn) - :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")] - [:button {:disabled is-default - :class (stl/css :option-btn) - :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])] - - [:div.grid-option - [:div.grid-option-main {:style {:display (when open? "none")}} - [:button.custom-button {:class (when open? "is-active") - :on-click toggle-advanced-options} i/actions] + [:div {:class (stl/css :grid-option)} + [:div {:class (stl/css :grid-title)} + [:div {:class (stl/css-case :option-row true + :hidden is-hidden?)} + [:button {:class (stl/css-case :show-options true + :selected open?) + :on-click toggle-advanced-options} + i/menu-refactor] + [:div {:class (stl/css :type-select-wrapper)} [:& select - {:class "flex-grow" + {:class (stl/css :grid-type-select) :default-value type :options [{:value :square :label (tr "workspace.options.grid.square")} {:value :column :label (tr "workspace.options.grid.column")} {:value :row :label (tr "workspace.options.grid.row")}] - :on-change handle-change-type}] - - (if (= type :square) - [:div.input-element.pixels {:title (tr "workspace.options.size")} - [:> numeric-input* {:min 0.01 - :value (or (:size params) "") - :no-validate true - :on-change (handle-change :params :size)}]] + :on-change handle-change-type}]] + (if (= type :square) + [:div {:class (stl/css :grid-size) + :title (tr "workspace.options.size")} + [:> numeric-input* {:min 0.01 + :value (or (:size params) "") + :no-validate true + :className (stl/css :numeric-input) + :on-change (handle-change :params :size)}]] + [:div {:class (stl/css :editable-select-wrapper)} [:& editable-select {:value (:size params) :type "number" - :class "input-option" + :class (stl/css :column-select) + :input-class (stl/css :numeric-input) :min 1 :options size-options :placeholder "Auto" - :on-change handle-change-size}]) + :on-change handle-change-size}]])] - [:div.grid-option-main-actions - [:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)] - [:button.custom-button {:on-click on-remove} i/minus]]] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click handle-toggle-visibility} + (if display i/shown-refactor i/hide-refactor)] + [:button {:class (stl/css :action-btn) + :on-click on-remove} + i/remove-refactor]]] - [:& advanced-options {:visible? open? :on-close toggle-advanced-options} - [:button.custom-button {:on-click toggle-advanced-options} i/actions] + (when (:display grid) + [:& advanced-options {:class (stl/css :grid-advanced-options) + :visible? open? + :on-close toggle-advanced-options} + ;; square (when (= :square type) - [:& input-row {:label (tr "workspace.options.grid.params.size") - :class "pixels" - :min 0.01 - :value (:size params) - :on-change (handle-change :params :size)}]) + [:div {:class (stl/css :square-row)} + [:div {:class (stl/css :advanced-row)} + [:& color-row {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}] + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) + :on-click toggle-more-options} + i/menu-refactor]] + (when show-more-options? + [:div {:class (stl/css :second-row)} + [:button {:class (stl/css-case :btn-options true + :disabled is-default) + :disabled is-default + :on-click handle-use-default} + [:span (tr "workspace.options.grid.params.use-default")]] + [:button {:class (stl/css-case :btn-options true + :disabled is-default) + :disabled is-default + :on-click handle-set-as-default} + [:span (tr "workspace.options.grid.params.set-default")]]])]) - (when (= :row type) - [:& input-row {:label (tr "workspace.options.grid.params.rows") - :type :editable-select - :options size-options - :value (:size params) - :min 1 - :placeholder "Auto" - :on-change handle-change-size}]) - - (when (= :column type) - [:& input-row {:label (tr "workspace.options.grid.params.columns") - :type :editable-select - :options size-options - :value (:size params) - :min 1 - :placeholder "Auto" - :on-change handle-change-size}]) - - (when (#{:row :column} type) - [:& input-row {:label (tr "workspace.options.grid.params.type") - :type :select + (when (or (= :column type) (= :row type)) + [:div {:class (stl/css :column-row)} + [:div {:class (stl/css :advanced-row)} + [:div {:class (stl/css :orientation-select-wrapper)} + [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element + :default-value (:type params) + :class (stl/css :orientation-select) :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")} {:value :left :label (if (= type :row) (tr "workspace.options.grid.params.type.top") @@ -353,56 +222,67 @@ {:value :right :label (if (= type :row) (tr "workspace.options.grid.params.type.bottom") (tr "workspace.options.grid.params.type.right"))}] - :value (:type params) - :on-change (handle-change :params :type)}]) + :on-change (handle-change :params :type)}]] - (when (#{:row :column} type) - [:& input-row-v2 - {:class "pixels" - :label (if (= :row type) - (tr "workspace.options.grid.params.height") - (tr "workspace.options.grid.params.width"))} - [:> numeric-input* - {:placeholder "Auto" - :value (or (:item-length params) "") - :nillable true - :on-change handle-change-item-length}]]) + [:div {:class (stl/css :color-wrapper)} + [:& color-row {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}]]] - (when (#{:row :column} type) - [:* - [:& input-row {:label (tr "workspace.options.grid.params.gutter") - :class "pixels" - :value (:gutter params) - :min 0 - :nillable true - :default 0 - :placeholder "0" - :on-change (handle-change :params :gutter)}] - [:& input-row {:label (tr "workspace.options.grid.params.margin") - :class "pixels" - :min 0 - :nillable true - :default 0 - :placeholder "0" - :value (:margin params) - :on-change (handle-change :params :margin)}]]) + [:div {:class (stl/css :advanced-row)} + [:div {:class (stl/css :height) + :title (if (= :row type) + (tr "workspace.options.grid.params.height") + (tr "workspace.options.grid.params.width"))} + [:span {:class (stl/css :icon-text)} + (if (= :row type) + "H" + "W")] + [:> numeric-input* {:placeholder "Auto" + :on-change handle-change-item-length + :nillable true + :className (stl/css :numeric-input) + :value (or (:item-length params) "")}]] - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}] - [:div.row-flex - [:button.btn-options {:disabled is-default - :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")] - [:button.btn-options {:disabled is-default - :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]]]]))) + [:div {:class (stl/css :gutter) + :title (tr "workspace.options.grid.params.gutter")} + [:span {:class (stl/css-case :icon true + :rotated (= type :row))} i/gap-horizontal-refactor] + [:> numeric-input* {:placeholder "0" + :on-change (handle-change :params :gutter) + :nillable true + :className (stl/css :numeric-input) + :value (or (:gutter params) 0)}]] + + [:div {:class (stl/css :margin) + :title (tr "workspace.options.grid.params.margin")} + [:span {:class (stl/css-case :icon true + :rotated (= type :column))} i/grid-margin-refactor] + [:> numeric-input* {:placeholder "0" + :on-change (handle-change :params :margin) + :nillable true + :className (stl/css :numeric-input) + :value (or (:margin params) 0)}]] + + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) + :on-click toggle-more-options} + i/menu-refactor] + (when show-more-options? + [:div {:class (stl/css :more-options)} + [:button {:disabled is-default + :class (stl/css :option-btn) + :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")] + [:button {:disabled is-default + :class (stl/css :option-btn) + :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])])) (mf/defc frame-grid [{:keys [shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - state* (mf/use-state true) + (let [state* (mf/use-state true) open? (deref state*) frame-grids (:grids shape) has-frame-grids? (or (= :multiple frame-grids) (some? (seq frame-grids))) @@ -413,44 +293,26 @@ default-grid-params (mf/use-memo (mf/deps saved-grids) #(merge dw/default-grid-params saved-grids)) handle-create-grid (mf/use-fn (mf/deps id) #(st/emit! (dw/add-frame-grid id)))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:& title-bar {:collapsable? has-frame-grids? - :collapsed? (not open?) - :on-collapsed toggle-content - :class (stl/css-case :title-spacing-board-grid (not has-frame-grids?)) - :title (tr "workspace.options.guides.title")} + [:div {:class (stl/css :element-set)} + [:& title-bar {:collapsable? has-frame-grids? + :collapsed? (not open?) + :on-collapsed toggle-content + :class (stl/css-case :title-spacing-board-grid (not has-frame-grids?)) + :title (tr "workspace.options.guides.title")} - [:button {:on-click handle-create-grid - :class (stl/css :add-grid)} - i/add-refactor]] + [:button {:on-click handle-create-grid + :class (stl/css :add-grid)} + i/add-refactor]] - (when (and open? (seq frame-grids)) - [:div {:class (stl/css :element-set-content)} - (for [[index grid] (map-indexed vector frame-grids)] - [:& grid-options {:key (str id "-" index) - :shape-id id - :grid grid - :index index - :frame-width (:width shape) - :frame-height (:height shape) - :default-grid-params default-grid-params}])])] - - - [:div.element-set - [:div.element-set-title - [:span (tr "workspace.options.grid.grid-title")] - [:div.add-page {:on-click handle-create-grid} i/close]] - - (when (seq frame-grids) - [:div.element-set-content - (for [[index grid] (map-indexed vector frame-grids)] - [:& grid-options {:key (str id "-" index) - :shape-id id - :grid grid - :index index - :frame-width (:width shape) - :frame-height (:height shape) - :default-grid-params default-grid-params}])])]))) + (when (and open? (seq frame-grids)) + [:div {:class (stl/css :element-set-content)} + (for [[index grid] (map-indexed vector frame-grids)] + [:& grid-options {:key (str id "-" index) + :shape-id id + :grid grid + :index index + :frame-width (:width shape) + :frame-height (:height shape) + :default-grid-params default-grid-params}])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 0435242e8..4a23132e7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -8,241 +8,250 @@ .element-set { margin: 0; - .title-spacing-board-grid { - padding-left: $s-2; - margin: 0; +} + +.title-spacing-board-grid { + padding-left: $s-2; + margin: 0; +} + +.add-grid { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } - .add-grid { - @extend .button-tertiary; +} + +.element-set-content { + @include flexColumn; + margin: $s-4 0 $s-8 0; +} + +.grid-title { + @include flexRow; +} + +.option-row { + display: flex; + align-items: center; + gap: $s-1; + border-radius: $br-8; + background-color: var(--input-details-color); + .show-options { + @extend .button-secondary; height: $s-32; width: $s-28; + border-radius: $br-8 0 0 $br-8; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); svg { @extend .button-icon; } + &.selected { + @extend .button-icon-selected; + } } - .element-set-content { - @include flexColumn; - margin: $s-4 0 $s-8 0; - .grid-option { - .grid-title { - @include flexRow; - .option-row { - display: flex; - align-items: center; - gap: $s-1; - border-radius: $br-8; - background-color: var(--input-details-color); - .show-options { - @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; - box-sizing: border-box; - border: $s-1 solid var(--input-background-color); - svg { - @extend .button-icon; - } - &.selected { - @extend .button-icon-selected; - } - } - .type-select-wrapper { - width: $s-96; - padding: 0; - border-radius: 0; - height: $s-32; - .grid-type-select { - border-radius: 0; - height: 100%; - box-sizing: border-box; - border: $s-1 solid var(--input-background-color); - &:hover { - border: $s-1 solid var(--input-background-color-hover); - } - } - } - .grid-size { - @extend .asset-element; - width: $s-60; - margin: 0; - padding: 0; - padding-left: $s-8; - border-radius: 0 $br-8 $br-8 0; - .numeric-input { - @extend .input-base; - } - } - .editable-select-wrapper { - @extend .asset-element; - width: $s-60; - margin: 0; - padding: 0; - position: relative; - border-radius: 0 $br-8 $br-8 0; - .column-select { - height: $s-32; - border-radius: 0 $br-8 $br-8 0; - box-sizing: border-box; - border: $s-1 solid var(--input-background-color); - .numeric-input { - @extend .input-base; - margin: 0; - padding: 0; - } - span { - @include flexCenter; - svg { - @extend .button-icon; - } - } - } - } - - &.hidden { - .show-options { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - .type-select-wrapper, - .editable-select-wrapper { - @include hiddenElement; - .column-select, - .grid-type-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - .column-select { - @include hiddenElement; - border-radius: 0 $br-8 $br-8 0; - .numeric-input { - @include hiddenElement; - } - } - } - .grid-size { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - .icon { - stroke: var(--input-foreground-color-disabled); - } - .numeric-input { - color: var(--input-foreground-color-disabled); - } - } - .actions { - .hidden-btn, - .lock-btn { - background-color: transparent; - svg { - stroke: var(--input-foreground-color-disabled); - } - } - } - } - } - - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } + .type-select-wrapper { + width: $s-96; + padding: 0; + border-radius: 0; + height: $s-32; + .grid-type-select { + border-radius: 0; + height: 100%; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); + &:hover { + border: $s-1 solid var(--input-background-color-hover); + } + } + } + .grid-size { + @extend .asset-element; + width: $s-60; + margin: 0; + padding: 0; + padding-left: $s-8; + border-radius: 0 $br-8 $br-8 0; + .numeric-input { + @extend .input-base; + } + } + .editable-select-wrapper { + @extend .asset-element; + width: $s-60; + margin: 0; + padding: 0; + position: relative; + border-radius: 0 $br-8 $br-8 0; + .column-select { + height: $s-32; + border-radius: 0 $br-8 $br-8 0; + box-sizing: border-box; + border: $s-1 solid var(--input-background-color); + .numeric-input { + @extend .input-base; + margin: 0; + padding: 0; + } + span { + @include flexCenter; + svg { + @extend .button-icon; } } } - .grid-advanced-options { - @include flexColumn; - margin-top: $s-4; - .column-row, - .square-row { - @include flexColumn; - position: relative; - .advanced-row { - position: relative; - display: flex; - gap: $s-4; - .orientation-select-wrapper { - width: $s-92; - padding: 0; - } - .color-wrapper { - width: $s-156; - } - .show-more-options { - @extend .button-tertiary; - height: $s-32; - width: $s-32; - svg { - @extend .button-icon; - } - &.selected { - @extend .button-icon-selected; - } - } - .height { - @extend .input-element; - width: $s-108; - .icon-text { - padding-top: $s-1; - } - } - .gutter, - .margin { - @extend .input-element; - width: $s-108; - .icon { - &.rotated svg { - transform: rotate(90deg); - } - } - } - .more-options { - @include menuShadow; - @include flexColumn; - position: absolute; - top: calc($s-2 + $s-28); - right: 0; - width: $s-156; - max-height: $s-300; - padding: $s-2; - margin: 0 0 $s-40 0; - margin-top: $s-4; - border-radius: $br-8; - z-index: $z-index-3; - overflow-y: auto; - background-color: var(--menu-background-color); - .option-btn { - @include buttonStyle; - display: flex; - align-items: center; - height: $s-32; - padding: 0 $s-8; - border-radius: $br-6; - color: var(--menu-foreground-color); + } - &:hover { - background-color: var(--menu-background-color-hover); - color: var(--menu-foreground-color-hover); - } - } - } + &.hidden { + .show-options { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .type-select-wrapper, + .editable-select-wrapper { + @include hiddenElement; + .column-select, + .grid-type-select { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .column-select { + @include hiddenElement; + border-radius: 0 $br-8 $br-8 0; + .numeric-input { + @include hiddenElement; } - .second-row { - @extend .dropdown-wrapper; - left: unset; - right: 0; - width: $s-108; - .btn-options { - @include buttonStyle; - @extend .dropdown-element-base; - width: 100%; - } + } + } + .grid-size { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + .icon { + stroke: var(--input-foreground-color-disabled); + } + .numeric-input { + color: var(--input-foreground-color-disabled); + } + } + .actions { + .hidden-btn, + .lock-btn { + background-color: transparent; + svg { + stroke: var(--input-foreground-color-disabled); } } } } } + +.actions { + @include flexRow; +} + +.action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.grid-advanced-options { + @include flexColumn; + margin-top: $s-4; +} + +.column-row, +.square-row { + @include flexColumn; + position: relative; +} + +.advanced-row { + position: relative; + display: flex; + gap: $s-4; + .orientation-select-wrapper { + width: $s-92; + padding: 0; + } + .color-wrapper { + width: $s-156; + } + .show-more-options { + @extend .button-tertiary; + height: $s-32; + width: $s-32; + svg { + @extend .button-icon; + } + &.selected { + @extend .button-icon-selected; + } + } + .height { + @extend .input-element; + width: $s-108; + .icon-text { + padding-top: $s-1; + } + } + .gutter, + .margin { + @extend .input-element; + width: $s-108; + .icon { + &.rotated svg { + transform: rotate(90deg); + } + } + } + + .more-options { + @include menuShadow; + @include flexColumn; + position: absolute; + top: calc($s-2 + $s-28); + right: 0; + width: $s-156; + max-height: $s-300; + padding: $s-2; + margin: 0 0 $s-40 0; + margin-top: $s-4; + border-radius: $br-8; + z-index: $z-index-3; + overflow-y: auto; + background-color: var(--menu-background-color); + .option-btn { + @include buttonStyle; + display: flex; + align-items: center; + height: $s-32; + padding: 0 $s-8; + border-radius: $br-6; + color: var(--menu-foreground-color); + + &:hover { + background-color: var(--menu-background-color-hover); + color: var(--menu-foreground-color-hover); + } + } + } +} + +.second-row { + @extend .dropdown-wrapper; + left: unset; + right: 0; + width: $s-108; + .btn-options { + @include buttonStyle; + @extend .dropdown-element-base; + width: 100%; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index ffd4f82d6..7d9da9121 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -18,10 +18,8 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -38,9 +36,7 @@ (mf/defc set-self-alignment [{:keys [is-col? alignment set-alignment] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - dir-v [:auto :start :center :end :stretch #_:baseline] - alignment (or alignment :auto) + (let [alignment (or alignment :auto) type (if is-col? "col" "row") handle-set-alignment @@ -49,8 +45,7 @@ (fn [value] (set-alignment (-> value keyword))))] - (if new-css-system - [:div {:class (stl/css :self-align-menu)} + [:div {:class (stl/css :self-align-menu)} [:& radio-buttons {:selected (d/name alignment) :on-change handle-set-alignment :name (dm/str "flex-align-items-" type)} @@ -72,27 +67,14 @@ [:& radio-button {:value "stretch" :icon (if is-col? i/align-self-row-strech i/align-self-column-strech) :title "Align self stretch" - :id (dm/str "align-self-stretch-" type)}]]] - - [:div.align-self-style - (for [align dir-v] - [:button.align-self.tooltip.tooltip-bottom - {:class (dom/classnames :active (= alignment align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (dm/str "Align self " (d/name align)) ;; TODO fix this tooltip - :on-click #(set-alignment align) - :key (str "align-self" align)} - (lyc/get-layout-flex-icon :align-self align is-col?)])]))) + :id (dm/str "align-self-stretch-" type)}]]])) (mf/defc options {::mf/wrap [mf/memo]} [{:keys [shape cell cells] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - state* (mf/use-state {:open true}) + (let [state* (mf/use-state {:open true}) open? (:open @state*) cells (hooks/use-equal-memo cells) @@ -181,208 +163,104 @@ (dwge/clear-selection (:id shape)))))] - (if new-css-system - [:div {:class (stl/css :grid-cell-menu)} - [:div {:class (stl/css :grid-cell-menu-title)} - [:& title-bar {:collapsable? true - :collapsed? (not open?) - :on-collapsed #(swap! state* update :open not) - :title "Grid cell"}]] + [:div {:class (stl/css :grid-cell-menu)} + [:div {:class (stl/css :grid-cell-menu-title)} + [:& title-bar {:collapsable? true + :collapsed? (not open?) + :on-collapsed #(swap! state* update :open not) + :title "Grid cell"}]] - (when open? - [:div {:class (stl/css :grid-cell-menu-container)} - [:div {:class (stl/css :cell-mode :row)} - [:& radio-buttons {:selected (d/name cell-mode) - :on-change set-cell-mode - :name "cell-mode" - :wide true} - [:& radio-button {:value "auto" :id :auto}] - [:& radio-button {:value "manual" :id :manual}] - [:& radio-button {:value "area" :id :area}]]] - - (when (= :area cell-mode) - [:div {:class (stl/css :row)} - [:input - {:class (stl/css :area-input) - :key (dm/str "name-" (:id cell)) - :id "grid-area-name" - :type "text" - :aria-label "grid-area-name" - :placeholder "Area name" - :default-value area-name - :auto-complete "off" - :on-change on-area-name-change}]]) - - (when (and (not multiple?) (= :auto cell-mode)) - [:div {:class (stl/css :row)} - [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-vertical-refactor] - [:div {:class (stl/css :coord-input)} - [:> numeric-input* - {:placeholder "--" - :title "Column" - :on-click #(dom/select-target %) - :on-change (partial on-grid-coordinates :all :column) - :value column}]]] - - [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/flex-horizontal-refactor] - [:div {:class (stl/css :coord-input)} - [:> numeric-input* - {:placeholder "--" - :title "Row" - :on-click #(dom/select-target %) - :on-change (partial on-grid-coordinates :all :row) - :value row}]]]]) - - (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) - [:div {:class (stl/css :row)} - [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/layout-rows] - [:div {:class (stl/css :coord-input)} - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :start :column) - :value column}]] - [:div {:class (stl/css :coord-input)} - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :end :column) - :value column-end}]]] - - [:div {:class (stl/css :grid-coord-group)} - [:span {:class (stl/css :icon)} i/layout-columns] - [:div {:class (stl/css :coord-input :double)} - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :start :row) - :value row}]] - [:div {:class (stl/css :coord-input)} - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :end :row) - :value row-end}]]]]) + (when open? + [:div {:class (stl/css :grid-cell-menu-container)} + [:div {:class (stl/css :cell-mode :row)} + [:& radio-buttons {:selected (d/name cell-mode) + :on-change set-cell-mode + :name "cell-mode" + :wide true} + [:& radio-button {:value "auto" :id :auto}] + [:& radio-button {:value "manual" :id :manual}] + [:& radio-button {:value "area" + :id :area + :disabled (not valid-area-cells?)}]]] + (when (= :area cell-mode) [:div {:class (stl/css :row)} - [:& set-self-alignment {:is-col? false - :alignment align-self - :set-alignment set-alignment}] - [:& set-self-alignment {:is-col? true - :alignment justify-self - :set-alignment set-justify-self}]] + [:input + {:class (stl/css :area-input) + :key (dm/str "name-" (:id cell)) + :id "grid-area-name" + :type "text" + :aria-label "grid-area-name" + :placeholder "Area name" + :default-value area-name + :auto-complete "off" + :on-change on-area-name-change}]]) + (when (and (not multiple?) (= :auto cell-mode)) [:div {:class (stl/css :row)} - [:button - {:class (stl/css :edit-grid-btn) - :alt (tr "workspace.layout_grid.editor.options.edit-grid") - :on-click toggle-edit-mode} - (tr "workspace.layout_grid.editor.options.edit-grid")]]])] + [:div {:class (stl/css :grid-coord-group)} + [:span {:class (stl/css :icon)} i/flex-vertical-refactor] + [:div {:class (stl/css :coord-input)} + [:> numeric-input* + {:placeholder "--" + :title "Column" + :on-click #(dom/select-target %) + :on-change (partial on-grid-coordinates :all :column) + :value column}]]] + [:div {:class (stl/css :grid-coord-group)} + [:span {:class (stl/css :icon)} i/flex-horizontal-refactor] + [:div {:class (stl/css :coord-input)} + [:> numeric-input* + {:placeholder "--" + :title "Row" + :on-click #(dom/select-target %) + :on-change (partial on-grid-coordinates :all :row) + :value row}]]]]) - [:div.element-set - [:div.element-set-title - [:span "Grid Cell"]] + (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) + [:div {:class (stl/css :row)} + [:div {:class (stl/css :grid-coord-group)} + [:span {:class (stl/css :icon)} i/layout-rows] + [:div {:class (stl/css :coord-input)} + [:> numeric-input* + {:placeholder "--" + :on-pointer-down #(dom/select-target %) + :on-change (partial on-grid-coordinates :start :column) + :value column}]] + [:div {:class (stl/css :coord-input)} + [:> numeric-input* + {:placeholder "--" + :on-pointer-down #(dom/select-target %) + :on-change (partial on-grid-coordinates :end :column) + :value column-end}]]] - [:div.element-set-content.layout-grid-item-menu - [:div.layout-row - [:div.row-title.sizing "Position"] - [:div.position-wrapper - [:button.position-btn - {:on-click #(set-cell-mode :auto) - :class (dom/classnames :active (= :auto cell-mode))} "Auto"] - (when-not multiple? - [:button.position-btn - {:on-click #(set-cell-mode :manual) - :class (dom/classnames :active (= :manual cell-mode))} "Manual"]) - [:button.position-btn - {:on-click #(set-cell-mode :area) - :disabled (not valid-area-cells?) - :class (dom/classnames :active (= :area cell-mode))} "Area"]]] + [:div {:class (stl/css :grid-coord-group)} + [:span {:class (stl/css :icon)} i/layout-columns] + [:div {:class (stl/css :coord-input :double)} + [:> numeric-input* + {:placeholder "--" + :on-pointer-down #(dom/select-target %) + :on-change (partial on-grid-coordinates :start :row) + :value row}]] + [:div {:class (stl/css :coord-input)} + [:> numeric-input* + {:placeholder "--" + :on-pointer-down #(dom/select-target %) + :on-change (partial on-grid-coordinates :end :row) + :value row-end}]]]]) - [:div.manage-grid-columns - (when (and (not multiple?) (= :auto cell-mode)) - [:div.grid-auto - [:div.grid-columns-auto - [:span.icon i/layout-rows] - [:div.input-wrapper - [:> numeric-input* - {:placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-grid-coordinates :all :column) - :value column}]]] - [:div.grid-rows-auto - [:span.icon i/layout-columns] - [:div.input-wrapper - [:> numeric-input* - {:placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-grid-coordinates :all :row) - :value row}]]]]) + [:div {:class (stl/css :row)} + [:& set-self-alignment {:is-col? false + :alignment align-self + :set-alignment set-alignment}] + [:& set-self-alignment {:is-col? true + :alignment justify-self + :set-alignment set-justify-self}]] - (when (= :area cell-mode) - [:div.input-wrapper - [:input.input-text - {:key (dm/str "name-" (:id cell)) - :id "grid-area-name" - :type "text" - :aria-label "grid-area-name" - :placeholder "--" - :default-value area-name - :auto-complete "off" - :on-change on-area-name-change}]]) - - (when (and (not multiple?) (or (= :manual cell-mode) (= :area cell-mode))) - [:div.grid-manual - [:div.grid-columns-auto - [:span.icon i/layout-rows] - [:div.input-wrapper - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :start :column) - :value column}] - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :end :column) - :value column-end}]]] - [:div.grid-rows-auto - [:span.icon i/layout-columns] - [:div.input-wrapper - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :start :row) - :value row}] - [:> numeric-input* - {:placeholder "--" - :on-pointer-down #(dom/select-target %) - :on-change (partial on-grid-coordinates :end :row) - :value row-end}]]]])] - - [:div.layout-row - [:div.row-title "Align"] - [:div.btn-wrapper - [:& set-self-alignment {:is-col? false - :alignment align-self - :set-alignment set-alignment}]]] - [:div.layout-row - [:div.row-title "Justify"] - [:div.btn-wrapper - [:& set-self-alignment {:is-col? true - :alignment justify-self - :set-alignment set-justify-self}]]] - - [:div.layout-row.single-button - [:div.btn-wrapper - [:div.edit-mode - [:button.tooltip.tooltip-bottom-left - {:alt "Grid edit mode" - :on-click toggle-edit-mode - :style {:padding 0}} - "Edit grid" - i/grid-layout-mode]]]]]]))) + [:div {:class (stl/css :row)} + [:button + {:class (stl/css :edit-grid-btn) + :alt (tr "workspace.layout_grid.editor.options.edit-grid") + :on-click toggle-edit-mode} + (tr "workspace.layout_grid.editor.options.edit-grid")]]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index 66fa82d4e..a2a3449f4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -6,53 +6,51 @@ @import "refactor/common-refactor.scss"; -.grid-cell-menu { - .grid-cell-menu-container { - @include flexColumn; - margin-top: $s-8; - gap: $s-16; - } +.grid-cell-menu-container { + @include flexColumn; + margin-top: $s-8; + gap: $s-16; +} - .grid-cell-menu-title { - font-size: $fs-11; - } +.grid-cell-menu-title { + font-size: $fs-11; +} - .row { - @include flexRow; - } +.row { + @include flexRow; +} - .cell-mode :global(label) { - padding: 0 $s-12; - } +.cell-mode :global(label) { + padding: 0 $s-12; +} - .edit-grid-btn { - @extend .button-secondary; - @include tabTitleTipography; - width: 100%; - padding: $s-8; - } +.edit-grid-btn { + @extend .button-secondary; + @include tabTitleTipography; + width: 100%; + padding: $s-8; +} - .area-input { - @extend .input-element; - width: 100%; - padding: $s-8; - } +.area-input { + @extend .input-element; + width: 100%; + padding: $s-8; } .grid-coord-group { @include flexRow; - border-radius: $br-8; padding-left: $s-4; background-color: var(--input-background-color); - - .icon svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - .coord-input { - @extend .input-element; - border-radius: 0 $br-8 $br-8 0; - border-left: 1px solid var(--panel-background-color); - } +} + +.icon svg { + @extend .button-icon; + stroke: var(--icon-foreground); +} + +.coord-input { + @extend .input-element; + border-radius: 0 $br-8 $br-8 0; + border-left: 1px solid var(--panel-background-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index d99ca6ba1..67138d85e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -22,7 +22,6 @@ [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] @@ -45,15 +44,6 @@ [interaction] (get (event-type-names) (:event-type interaction) "--")) -(defn- action-type-names - [] - {:navigate (tr "workspace.options.interaction-navigate-to") - :open-overlay (tr "workspace.options.interaction-open-overlay") - :toggle-overlay (tr "workspace.options.interaction-toggle-overlay") - :close-overlay (tr "workspace.options.interaction-close-overlay") - :prev-screen (tr "workspace.options.interaction-prev-screen") - :open-url (tr "workspace.options.interaction-open-url")}) - (defn- action-summary [interaction destination] (case (:action-type interaction) @@ -69,34 +59,6 @@ :open-url (tr "workspace.options.interaction-open-url") "--")) -(defn- overlay-pos-type-names - [] - {:manual (tr "workspace.options.interaction-pos-manual") - :center (tr "workspace.options.interaction-pos-center") - :top-left (tr "workspace.options.interaction-pos-top-left") - :top-right (tr "workspace.options.interaction-pos-top-right") - :top-center (tr "workspace.options.interaction-pos-top-center") - :bottom-left (tr "workspace.options.interaction-pos-bottom-left") - :bottom-right (tr "workspace.options.interaction-pos-bottom-right") - :bottom-center (tr "workspace.options.interaction-pos-bottom-center")}) - -(defn- animation-type-names - [interaction] - (cond-> - {:dissolve (tr "workspace.options.interaction-animation-dissolve") - :slide (tr "workspace.options.interaction-animation-slide")} - - (ctsi/allow-push? (:action-type interaction)) - (assoc :push (tr "workspace.options.interaction-animation-push")))) - -(defn- easing-names - [] - {:linear (tr "workspace.options.interaction-easing-linear") - :ease (tr "workspace.options.interaction-easing-ease") - :ease-in (tr "workspace.options.interaction-easing-ease-in") - :ease-out (tr "workspace.options.interaction-easing-ease-out") - :ease-in-out (tr "workspace.options.interaction-easing-ease-in-out")}) - (defn- get-frames-options [frames shape] (->> frames @@ -115,8 +77,7 @@ (mf/defc flow-item [{:keys [flow]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - editing? (mf/use-state false) + (let [editing? (mf/use-state false) flow-for-rename (mf/deref flow-for-rename-ref) name-ref (mf/use-ref) @@ -144,10 +105,10 @@ (mf/deps flow) #(st/emit! (dw/select-shape (:starting-frame flow)))) - rename-flow - (mf/use-fn - (mf/deps flow) - #(st/emit! (dwi/start-rename-flow (:id flow)))) + ;; rename-flow + ;; (mf/use-fn + ;; (mf/deps flow) + ;; #(st/emit! (dwi/start-rename-flow (:id flow)))) remove-flow (mf/use-fn @@ -171,95 +132,59 @@ (let [name-input (mf/ref-val name-ref)] (dom/select-text! name-input)) nil)) - (if new-css-system - [:div {:class (stl/css :flow-element)} - [:span {:class (stl/css :flow-info)} - [:span {:class (stl/css :flow-name-wrapper)} - [:button {:class (stl/css :start-flow-btn) - :on-click start-flow} - [:span {:class (stl/css :button-icon)} - i/play-refactor]] - [:span {:class (stl/css :flow-input-wrapper)} - [:input - {:class (stl/css :flow-input) - :type "text" - :ref name-ref - :on-blur accept-edit - :on-key-down on-key-down - :default-value (:name flow "")}]]]] - [:button {:class (stl/css :remove-flow-btn) - :on-click remove-flow} - i/remove-refactor]] + [:div {:class (stl/css :flow-element)} + [:span {:class (stl/css :flow-info)} + [:span {:class (stl/css :flow-name-wrapper)} + [:button {:class (stl/css :start-flow-btn) + :on-click start-flow} + [:span {:class (stl/css :button-icon)} + i/play-refactor]] + [:span {:class (stl/css :flow-input-wrapper)} + [:input + {:class (stl/css :flow-input) + :type "text" + :ref name-ref + :on-blur accept-edit + :on-key-down on-key-down + :default-value (:name flow "")}]]]] - [:div.flow-element - [:div.flow-button {:on-click start-flow} i/play] - (if @editing? - [:input.element-name - {:type "text" - :ref name-ref - :on-blur accept-edit - :on-key-down on-key-down - :auto-focus true - :default-value (:name flow "")}] - [:span.element-label.flow-name - {:on-double-click rename-flow} - (:name flow)]) - [:div.add-page {:on-click remove-flow} i/minus]]))) + [:button {:class (stl/css :remove-flow-btn) + :on-click remove-flow} + i/remove-refactor]])) (mf/defc page-flows [{:keys [flows]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - (when (seq flows) - [:div {:class (stl/css :interaction-options)} - [:& title-bar {:collapsable? false - :title (tr "workspace.options.flows.flow-starts") - :class (stl/css :title-spacing-layout-flow)}] - (for [flow flows] - [:& flow-item {:flow flow :key (str (:id flow))}])]) - - (when (seq flows) - [:div.element-set.interactions-options - [:div.element-set-title - [:span (tr "workspace.options.flows.flow-starts")]] - (for [flow flows] - [:& flow-item {:flow flow :key (str (:id flow))}])])))) + (when (seq flows) + [:div {:class (stl/css :interaction-options)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.flows.flow-starts") + :class (stl/css :title-spacing-layout-flow)}] + (for [flow flows] + [:& flow-item {:flow flow :key (str (:id flow))}])])) (mf/defc shape-flows [{:keys [flows shape]}] (when (= (:type shape) :frame) - (let [new-css-system (mf/use-ctx ctx/new-css-system) - flow (ctp/get-frame-flow flows (:id shape)) + (let [flow (ctp/get-frame-flow flows (:id shape)) add-flow (mf/use-fn #(st/emit! (dwi/add-flow-selected-frame)))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:& title-bar {:collapsable? false - :title (tr "workspace.options.flows.flow") - :class (stl/css :title-spacing-layout-flow)} - (when (nil? flow) - [:button {:class (stl/css :add-flow-btn) - :title (tr "workspace.options.flows.add-flow-start") - :on-click add-flow} - i/add-refactor])] - (when flow - [:& flow-item {:flow flow :key (str (:id flow))}])] + [:div {:class (stl/css :element-set)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.flows.flow") + :class (stl/css :title-spacing-layout-flow)} + (when (nil? flow) + [:button {:class (stl/css :add-flow-btn) + :title (tr "workspace.options.flows.add-flow-start") + :on-click add-flow} + i/add-refactor])] - [:div.element-set.interactions-options - [:div.element-set-title - [:span (tr "workspace.options.flows.flow-start")]] - (if (nil? flow) - [:div.flow-element - [:span.element-label (tr "workspace.options.flows.add-flow-start")] - [:div.add-page {:on-click add-flow} - i/plus]] - [:& flow-item {:flow flow :key (str (:id flow))}])])))) + (when flow + [:& flow-item {:flow flow :key (str (:id flow))}])]))) (mf/defc interaction-entry [{:keys [index shape interaction update-interaction remove-interaction]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - objects (deref refs/workspace-page-objects) + (let [objects (deref refs/workspace-page-objects) destination (get objects (:destination interaction)) frames (mf/with-memo [objects] (ctt/get-viewer-frames objects {:all-frames? true})) @@ -286,18 +211,14 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event dom/get-target dom/get-value d/read-string))] + (let [value (keyword event)] (update-interaction index #(ctsi/set-event-type % value shape))))) change-action-type (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event dom/get-target dom/get-value d/read-string))] + (let [value (keyword event)] (update-interaction index #(ctsi/set-action-type % value))))) change-delay @@ -310,9 +231,7 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - event - (-> event dom/get-target dom/get-value)) + (let [value event value (when (not= value "") (uuid/uuid value))] (update-interaction index #(ctsi/set-destination % value))))) @@ -320,12 +239,7 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (uuid/uuid event) - (-> event - dom/get-target - dom/get-value - uuid/uuid))] + (let [value (uuid/uuid event)] (update-interaction index #(ctsi/set-position-relative-to % value))))) change-preserve-scroll @@ -357,11 +271,8 @@ change-overlay-pos-type (mf/use-fn (mf/deps shape) - (fn [event] - (let [shape-id (:id shape) - value (if new-css-system - event - (-> event dom/get-target dom/get-value d/read-string))] + (fn [value] + (let [shape-id (:id shape)] (update-interaction index #(ctsi/set-overlay-pos-type % value shape objects)) (when (= value :manual) (update-interaction index #(ctsi/set-position-relative-to % shape-id)))))) @@ -393,11 +304,9 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (if (= "" event) - nil - (keyword event)) - (-> event dom/get-target dom/get-value d/read-string))] + (let [value (if (= "" event) + nil + (keyword event))] (update-interaction index #(ctsi/set-animation-type % value))))) change-duration @@ -408,30 +317,21 @@ (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event dom/get-target dom/get-value d/read-string))] + (let [value (keyword event)] (update-interaction index #(ctsi/set-easing % value))))) change-way (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event dom/get-target dom/get-value d/read-string))] + (let [value (keyword event)] (update-interaction index #(ctsi/set-way % value))))) change-direction (mf/use-fn (mf/deps index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event - dom/get-target - (dom/get-data "value") - keyword))] + (let [value (keyword event)] (update-interaction index #(ctsi/set-direction % value))))) change-offset-effect @@ -502,565 +402,293 @@ {:icon :easing-ease-in-out-refactor :value :ease-in-out :label (tr "workspace.options.interaction-easing-ease-in-out")}]] - (if new-css-system - [:div {:class (stl/css-case :element-set-options-group true - :open extended-open?)} - ; Summary - [:div {:class (stl/css :interactions-summary)} - [:div {:class (stl/css-case :extend-btn true - :extended extended-open?) - :on-click toggle-extended} - i/menu-refactor] + [:div {:class (stl/css-case :element-set-options-group true + :open extended-open?)} + ; Summary + [:div {:class (stl/css :interactions-summary)} + [:div {:class (stl/css-case :extend-btn true + :extended extended-open?) + :on-click toggle-extended} + i/menu-refactor] - [:div {:class (stl/css :interactions-info) - :on-click toggle-extended} - [:div {:class (stl/css :trigger-name)} (event-type-name interaction)] - [:div {:class (stl/css :action-summary)} (action-summary interaction destination)]] - [:button {:class (stl/css :remove-btn) - :data-value index - :on-click #(remove-interaction index)} - i/remove-refactor]] + [:div {:class (stl/css :interactions-info) + :on-click toggle-extended} + [:div {:class (stl/css :trigger-name)} (event-type-name interaction)] + [:div {:class (stl/css :action-summary)} (action-summary interaction destination)]] + [:button {:class (stl/css :remove-btn) + :data-value index + :on-click #(remove-interaction index)} + i/remove-refactor]] - (when extended-open? - [:div {:class (stl/css :extended-options)} - ;; Trigger select + (when extended-open? + [:div {:class (stl/css :extended-options)} + ;; Trigger select + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} + (tr "workspace.options.interaction-trigger")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :interaction-type-select) + :default-value (:event-type interaction) + :options event-type-options + :on-change change-event-type}]]] + + ;; Delay + (when (ctsi/has-delay interaction) [:div {:class (stl/css :property-row)} [:span {:class (stl/css :interaction-name)} - (tr "workspace.options.interaction-trigger")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :interaction-type-select) - :default-value (:event-type interaction) - :options event-type-options - :on-change change-event-type}]]] + (tr "workspace.options.interaction-delay")] + [:div {:class (stl/css :input-element-wrapper) + :title (tr "workspace.options.interaction-ms")} + [:span.after (tr "workspace.options.interaction-ms")] + [:> numeric-input* {:ref ext-delay-ref + :className (stl/css :numeric-input) + :on-change change-delay + :value (:delay interaction) + :title (tr "workspace.options.interaction-ms")}]]]) - ;; Delay - (when (ctsi/has-delay interaction) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} - (tr "workspace.options.interaction-delay")] - [:div {:class (stl/css :input-element-wrapper) - :title (tr "workspace.options.interaction-ms")} - [:span.after (tr "workspace.options.interaction-ms")] - [:> numeric-input* {:ref ext-delay-ref - :className (stl/css :numeric-input) - :on-change change-delay - :value (:delay interaction) - :title (tr "workspace.options.interaction-ms")}]]]) + ;; Action select + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-action")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :interaction-type-select) + :default-value (:action-type interaction) + :options action-type-options + :on-change change-action-type}]]] - ;; Action select + ;; Destination + (when (ctsi/has-destination interaction) [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-action")] + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-destination")] [:div {:class (stl/css :select-wrapper)} [:& select {:class (stl/css :interaction-type-select) - :default-value (:action-type interaction) - :options action-type-options - :on-change change-action-type}]]] + :default-value (str (:destination interaction)) + :options destination-options + :on-change change-destination}]]]) - ;; Destination - (when (ctsi/has-destination interaction) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-destination")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :interaction-type-select) - :default-value (str (:destination interaction)) - :options destination-options - :on-change change-destination}]]]) + ;; Preserve scroll + (when (ctsi/has-preserve-scroll interaction) + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "preserve-" index) + :class (stl/css-case :global/checked preserve-scroll?)} + [:span {:class (stl/css-case :global/checked preserve-scroll?)} + (when preserve-scroll? + i/status-tick-refactor)] + (tr "workspace.options.interaction-preserve-scroll") + [:input {:type "checkbox" + :id (str "preserve-" index) + :checked preserve-scroll? + :on-change change-preserve-scroll}]]]]) - ;; Preserve scroll - (when (ctsi/has-preserve-scroll interaction) - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "preserve-" index) - :class (stl/css-case :global/checked preserve-scroll?)} - [:span {:class (stl/css-case :global/checked preserve-scroll?)} - (when preserve-scroll? - i/status-tick-refactor)] - (tr "workspace.options.interaction-preserve-scroll") - [:input {:type "checkbox" - :id (str "preserve-" index) - :checked preserve-scroll? - :on-change change-preserve-scroll}]]]]) + ;; URL + (when (ctsi/has-url interaction) + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-url")] + [:div {:class (stl/css :input-element-wrapper)} + [:input {:class (stl/css :input-text) + :type "url" + :placeholder "http://example.com" + :default-value (str (:url interaction)) + :on-blur change-url}]]]) - ;; URL - (when (ctsi/has-url interaction) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-url")] - [:div {:class (stl/css :input-element-wrapper)} - [:input {:class (stl/css :input-text) - :type "url" - :placeholder "http://example.com" - :default-value (str (:url interaction)) - :on-blur change-url}]]]) + (when (ctsi/has-overlay-opts interaction) + [:* + ;; Overlay position relative-to (select) + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-relative-to")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :interaction-type-select) + :default-value (str (:position-relative-to interaction)) + :options relative-to-opts + :on-change change-position-relative-to}]]] - (when (ctsi/has-overlay-opts interaction) - [:* - ;; Overlay position relative-to (select) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-relative-to")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :interaction-type-select) - :default-value (str (:position-relative-to interaction)) - :options relative-to-opts - :on-change change-position-relative-to}]]] + ;; Overlay position (select) + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-position")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :interaction-type-select) + :default-value (:overlay-pos-type interaction) + :options overlay-position-opts + :on-change change-overlay-pos-type}]]] - ;; Overlay position (select) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-position")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :interaction-type-select) - :default-value (:overlay-pos-type interaction) - :options overlay-position-opts - :on-change change-overlay-pos-type}]]] + ;; Overlay position (buttons) + [:div {:class (stl/css-case :property-row true + :big-row true)} + [:div {:class (stl/css :position-btns-wrapper)} + [:button {:class (stl/css-case :direction-btn true + :center-btn true + :active (= overlay-pos-type :center)) + :data-value :center + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :top-left-btn true + :active (= overlay-pos-type :top-left)) + :data-value :top-left + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :top-right-btn true + :active (= overlay-pos-type :top-right)) + :data-value :top-right + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] - ;; Overlay position (buttons) - [:div {:class (stl/css-case :property-row true - :big-row true)} - [:div {:class (stl/css :position-btns-wrapper)} - [:button {:class (stl/css-case :direction-btn true - :center-btn true - :active (= overlay-pos-type :center)) - :data-value :center - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :top-left-btn true - :active (= overlay-pos-type :top-left)) - :data-value :top-left - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :top-right-btn true - :active (= overlay-pos-type :top-right)) - :data-value :top-right - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :top-center-btn true + :active (= overlay-pos-type :top-center)) + :data-value :top-center + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :bottom-left-btn true + :active (= overlay-pos-type :bottom-left)) + :data-value :bottom-left + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :bottom-left-btn true + :active (= overlay-pos-type :bottom-left)) + :data-value :bottom-left + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :top-center-btn true - :active (= overlay-pos-type :top-center)) - :data-value :top-center - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-left-btn true - :active (= overlay-pos-type :bottom-left)) - :data-value :bottom-left - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-left-btn true - :active (= overlay-pos-type :bottom-left)) - :data-value :bottom-left - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :bottom-left-btn true + :active (= overlay-pos-type :bottom-left)) + :data-value :bottom-left + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :bottom-right-btn true + :active (= overlay-pos-type :bottom-right)) + :data-value :bottom-right + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]] + [:button {:class (stl/css-case :direction-btn true + :bottom-center-btn true + :active (= overlay-pos-type :bottom-center)) + :data-value :bottom-center + :on-click toggle-overlay-pos-type} + [:span {:class (stl/css :rectangle)}]]]] - [:button {:class (stl/css-case :direction-btn true - :bottom-left-btn true - :active (= overlay-pos-type :bottom-left)) - :data-value :bottom-left - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-right-btn true - :active (= overlay-pos-type :bottom-right)) - :data-value :bottom-right - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-center-btn true - :active (= overlay-pos-type :bottom-center)) - :data-value :bottom-center - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]]]] - - ;; Overlay click outside - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "close-" index) - :class (stl/css-case :global/checked close-click-outside?)} - [:span {:class (stl/css-case :global/checked close-click-outside?)} - (when close-click-outside? - i/status-tick-refactor)] - (tr "workspace.options.interaction-close-outside") - [:input {:type "checkbox" - :id (str "close-" index) - :checked close-click-outside? - :on-change change-close-click-outside}]]]] - - ;; Overlay background - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "background-" index) - :class (stl/css-case :global/checked background-overlay?)} - [:span {:class (stl/css-case :global/checked background-overlay?)} - (when background-overlay? - i/status-tick-refactor)] - (tr "workspace.options.interaction-background") - [:input {:type "checkbox" - :id (str "background-" index) - :checked background-overlay? - :on-change change-background-overlay}]]]]]) - - (when (ctsi/has-animation? interaction) - [:* - ;; Animation select - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-animation")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :animation-select) - :default-value (or (-> interaction :animation :animation-type) "") - :options animation-opts - :on-change change-animation-type}]]] - - ;; Direction - (when (ctsi/has-way? interaction) - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :inputs-wrapper)} - - [:& radio-buttons {:selected (d/name way) - :on-change change-way - :name "animation-way"} - [:& radio-button {:value "in" - :id "animation-way-in"}] - [:& radio-button {:id "animation-way-out" - :value "out"}]]]]) - - ;; Direction - (when (ctsi/has-direction? interaction) - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :buttons-wrapper)} - [:& radio-buttons {:selected (d/name direction) - :on-change change-direction - :name "animation-direction"} - [:& radio-button {:icon i/column-refactor - :icon-class (stl/css :right) - :value "right" - :id "animation-right"}] - [:& radio-button {:icon i/column-refactor - :icon-class (stl/css :left) - :id "animation-left" - :value "left"}] - [:& radio-button {:icon i/column-refactor - :icon-class (stl/css :down) - :id "animation-down" - :value "down"}] - [:& radio-button {:icon i/column-refactor - :icon-class (stl/css :up) - :id "animation-up" - :value "up"}]]]]) - - ;; Duration - (when (ctsi/has-duration? interaction) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-duration")] - [:div {:class (stl/css :input-element-wrapper) - :title (tr "workspace.options.interaction-ms")} - [:span.after (tr "workspace.options.interaction-ms")] - [:> numeric-input* {:ref ext-duration-ref - :on-change change-duration - :value (-> interaction :animation :duration) - :title (tr "workspace.options.interaction-ms")}]]]) - - ;; Easing - (when (ctsi/has-easing? interaction) - [:div {:class (stl/css :property-row)} - [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-easing")] - [:div {:class (stl/css :select-wrapper)} - [:& select {:class (stl/css :easing-select) - :dropdown-class (stl/css :dropdown-upwards) - :default-value (-> interaction :animation :easing) - :options easing-options - :on-change change-easing}]]]) - - ;; Offset effect - (when (ctsi/has-offset-effect? interaction) - [:div {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "offset-effect-" index) - :class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} - [:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} - (when (-> interaction :animation :offset-effect) - i/status-tick-refactor)] - (tr "workspace.options.interaction-offset-effect") - [:input {:type "checkbox" - :id (str "offset-effect-" index) - :checked (-> interaction :animation :offset-effect) - :on-change change-offset-effect}]]]])])])] - - - [:div.element-set-options-group {:class (dom/classnames - :open extended-open?)} - ; Summary - [:div.element-set-actions-button {:on-click toggle-extended} - i/actions] - [:div.interactions-summary {:on-click toggle-extended} - [:div.trigger-name (event-type-name interaction)] - [:div.action-summary (action-summary interaction destination)]] - [:div.element-set-actions {:on-click #(remove-interaction index)} - [:div.element-set-actions-button i/minus]] - - (when extended-open? - [:div.element-set-content - - ;; Trigger select - [:div.interactions-element.separator - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-trigger")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (:event-type interaction)) - :on-change change-event-type} - (for [[value name] (event-type-names)] - (when-not (and (= value :after-delay) - (not= (:type shape) :frame)) - [:option {:key (dm/str value) - :value (dm/str value)} name]))]] - - ;; Delay - (when (ctsi/has-delay interaction) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")] - [:div.input-element {:title (tr "workspace.options.interaction-ms")} - [:> numeric-input* {:ref ext-delay-ref - :on-change change-delay - :value (:delay interaction) - :title (tr "workspace.options.interaction-ms")}] - [:span.after (tr "workspace.options.interaction-ms")]]]) - - ;; Action select - [:div.interactions-element.separator - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-action")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (:action-type interaction)) - :on-change change-action-type} - (for [[value name] (action-type-names)] - [:option {:key (dm/str "action-" value) - :value (str value)} name])]] - - ;; Destination - (when (ctsi/has-destination interaction) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-destination")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (:destination interaction)) - :on-change change-destination} - (if (= (:action-type interaction) :close-overlay) - [:option {:value ""} (tr "workspace.options.interaction-self")] - [:option {:value ""} (tr "workspace.options.interaction-none")]) - (for [frame frames] - (when (and (not= (:id frame) (:id shape)) ; A frame cannot navigate to itself - (not= (:id frame) (:frame-id shape))) ; nor a shape to its container frame - [:option {:key (dm/str "destination-" (:id frame)) - :value (str (:id frame))} (:name frame)]))]]) - - ;; Preserve scroll - (when (ctsi/has-preserve-scroll interaction) - [:div.interactions-element - [:div.input-checkbox + ;; Overlay click outside + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "close-" index) + :class (stl/css-case :global/checked close-click-outside?)} + [:span {:class (stl/css-case :global/checked close-click-outside?)} + (when close-click-outside? + i/status-tick-refactor)] + (tr "workspace.options.interaction-close-outside") [:input {:type "checkbox" - :id (str "preserve-" index) - :checked preserve-scroll? - :on-change change-preserve-scroll}] - [:label {:for (str "preserve-" index)} - (tr "workspace.options.interaction-preserve-scroll")]]]) + :id (str "close-" index) + :checked close-click-outside? + :on-change change-close-click-outside}]]]] - ;; URL - (when (ctsi/has-url interaction) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-url")] - [:input.input-text {:type "url" - :placeholder "http://example.com" - :default-value (str (:url interaction)) - :on-blur change-url}]]) + ;; Overlay background + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "background-" index) + :class (stl/css-case :global/checked background-overlay?)} + [:span {:class (stl/css-case :global/checked background-overlay?)} + (when background-overlay? + i/status-tick-refactor)] + (tr "workspace.options.interaction-background") + [:input {:type "checkbox" + :id (str "background-" index) + :checked background-overlay? + :on-change change-background-overlay}]]]]]) - (when (ctsi/has-overlay-opts interaction) - [:* - ;; Overlay position relative-to (select) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-relative-to")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (:position-relative-to interaction)) - :on-change change-position-relative-to} - (when (not= (:overlay-pos-type interaction) :manual) - [:* - [:option {:value ""} (tr "workspace.options.interaction-auto")] - (for [frame shape-parents] - [:option {:key (dm/str "position-relative-to-" (:id frame)) - :value (str (:id frame))} (:name frame)])]) - [:option {:key (dm/str "position-relative-to-" (:id shape)) - :value (str (:id shape))} (:name shape) " (" (tr "workspace.options.interaction-self") ")"]]] + (when (ctsi/has-animation? interaction) + [:* + ;; Animation select + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-animation")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :animation-select) + :default-value (or (-> interaction :animation :animation-type) "") + :options animation-opts + :on-change change-animation-type}]]] - ;; Overlay position (select) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-position")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (:overlay-pos-type interaction)) - :on-change change-overlay-pos-type} - (for [[value name] (overlay-pos-type-names)] - [:option {:value (str value)} name])]] + ;; Direction + (when (ctsi/has-way? interaction) + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :inputs-wrapper)} - ;; Overlay position (buttons) - [:div.interactions-element.interactions-pos-buttons - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :center)) - :data-value :center - :on-click toggle-overlay-pos-type} - i/position-center] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :top-left)) - :data-value :top-left - :on-click toggle-overlay-pos-type} - i/position-top-left] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :top-right)) - :data-value :top-right - :on-click toggle-overlay-pos-type} - i/position-top-right] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :top-center)) - :data-value :top-center - :on-click toggle-overlay-pos-type} - i/position-top-center] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :bottom-left)) - :data-value :bottom-center - :on-click toggle-overlay-pos-type} - i/position-bottom-left] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :bottom-right)) - :data-value :bottom-right - :on-click toggle-overlay-pos-type} - i/position-bottom-right] - [:div.element-set-actions-button - {:class (dom/classnames :active (= overlay-pos-type :bottom-center)) - :data-value :bottom-center - :on-click toggle-overlay-pos-type} - i/position-bottom-center]] + [:& radio-buttons {:selected (d/name way) + :on-change change-way + :name "animation-way"} + [:& radio-button {:value "in" + :id "animation-way-in"}] + [:& radio-button {:id "animation-way-out" + :value "out"}]]]]) - ;; Overlay click outside - [:div.interactions-element - [:div.input-checkbox - [:input {:type "checkbox" - :id (str "close-" index) - :checked close-click-outside? - :on-change change-close-click-outside}] - [:label {:for (str "close-" index)} - (tr "workspace.options.interaction-close-outside")]]] + ;; Direction + (when (ctsi/has-direction? interaction) + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :buttons-wrapper)} + [:& radio-buttons {:selected (d/name direction) + :on-change change-direction + :name "animation-direction"} + [:& radio-button {:icon i/column-refactor + :icon-class (stl/css :right) + :value "right" + :id "animation-right"}] + [:& radio-button {:icon i/column-refactor + :icon-class (stl/css :left) + :id "animation-left" + :value "left"}] + [:& radio-button {:icon i/column-refactor + :icon-class (stl/css :down) + :id "animation-down" + :value "down"}] + [:& radio-button {:icon i/column-refactor + :icon-class (stl/css :up) + :id "animation-up" + :value "up"}]]]]) - ;; Overlay background - [:div.interactions-element - [:div.input-checkbox - [:input {:type "checkbox" - :id (str "background-" index) - :checked background-overlay? - :on-change change-background-overlay}] - [:label {:for (str "background-" index)} - (tr "workspace.options.interaction-background")]]]]) + ;; Duration + (when (ctsi/has-duration? interaction) + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-duration")] + [:div {:class (stl/css :input-element-wrapper) + :title (tr "workspace.options.interaction-ms")} + [:span.after (tr "workspace.options.interaction-ms")] + [:> numeric-input* {:ref ext-duration-ref + :on-change change-duration + :value (-> interaction :animation :duration) + :title (tr "workspace.options.interaction-ms")}]]]) - (when (ctsi/has-animation? interaction) - [:* - ;; Animation select - [:div.interactions-element.separator - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-animation")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (-> interaction :animation :animation-type)) - :on-change change-animation-type} - [:option {:value ""} (tr "workspace.options.interaction-animation-none")] - (for [[value name] (animation-type-names interaction)] - [:option {:value (str value)} name])]] + ;; Easing + (when (ctsi/has-easing? interaction) + [:div {:class (stl/css :property-row)} + [:span {:class (stl/css :interaction-name)} (tr "workspace.options.interaction-easing")] + [:div {:class (stl/css :select-wrapper)} + [:& select {:class (stl/css :easing-select) + :dropdown-class (stl/css :dropdown-upwards) + :default-value (-> interaction :animation :easing) + :options easing-options + :on-change change-easing}]]]) - ;; Direction - (when (ctsi/has-way? interaction) - [:div.interactions-element.interactions-way-buttons - [:div.input-radio - [:input {:type "radio" - :id "way-in" - :checked (= :in way) - :name "animation-way" - :value ":in" - :on-change change-way}] - [:label {:for "way-in"} (tr "workspace.options.interaction-in")]] - [:div.input-radio - [:input {:type "radio" - :id "way-out" - :checked (= :out way) - :name "animation-way" - :value ":out" - :on-change change-way}] - [:label {:for "way-out"} (tr "workspace.options.interaction-out")]]]) - - ;; Direction - (when (ctsi/has-direction? interaction) - [:div.interactions-element.interactions-direction-buttons - [:div.element-set-actions-button - {:class (dom/classnames :active (= direction :right)) - :data-value :right - :on-click change-direction} - i/animate-right] - [:div.element-set-actions-button - {:class (dom/classnames :active (= direction :down)) - :data-value :up - :on-click change-direction} - i/animate-down] - [:div.element-set-actions-button - {:class (dom/classnames :active (= direction :left)) - :data-value :left - :on-click change-direction} - i/animate-left] - [:div.element-set-actions-button - {:class (dom/classnames :active (= direction :up)) - :data-value :down - :on-click change-direction} - i/animate-up]]) - - ;; Duration - (when (ctsi/has-duration? interaction) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-duration")] - [:div.input-element {:title (tr "workspace.options.interaction-ms")} - [:> numeric-input* {:ref ext-duration-ref - :on-change change-duration - :value (-> interaction :animation :duration) - :title (tr "workspace.options.interaction-ms")}] - [:span.after (tr "workspace.options.interaction-ms")]]]) - - ;; Easing - (when (ctsi/has-easing? interaction) - [:div.interactions-element - [:span.element-set-subtitle.wide (tr "workspace.options.interaction-easing")] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :value (str (-> interaction :animation :easing)) - :on-change change-easing} - (for [[value name] (easing-names)] - [:option {:value (str value)} name])] - [:div.interactions-easing-icon - (case (-> interaction :animation :easing) - :linear i/easing-linear - :ease i/easing-ease - :ease-in i/easing-ease-in - :ease-out i/easing-ease-out - :ease-in-out i/easing-ease-in-out)]]) - - ;; Offset effect - (when (ctsi/has-offset-effect? interaction) - [:div.interactions-element - [:div.input-checkbox - [:input {:type "checkbox" - :id (str "offset-effect-" index) - :checked (-> interaction :animation :offset-effect) - :on-change change-offset-effect}] - [:label {:for (str "offset-effect-" index)} - (tr "workspace.options.interaction-offset-effect")]]])])])]))) + ;; Offset effect + (when (ctsi/has-offset-effect? interaction) + [:div {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "offset-effect-" index) + :class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} + [:span {:class (stl/css-case :global/checked (-> interaction :animation :offset-effect))} + (when (-> interaction :animation :offset-effect) + i/status-tick-refactor)] + (tr "workspace.options.interaction-offset-effect") + [:input {:type "checkbox" + :id (str "offset-effect-" index) + :checked (-> interaction :animation :offset-effect) + :on-change change-offset-effect}]]]])])])])) (mf/defc interactions-menu [{:keys [shape] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - interactions (get shape :interactions []) + (let [interactions (get shape :interactions []) options (mf/deref refs/workspace-page-options) flows (:flows options) @@ -1076,76 +704,43 @@ update-interaction (fn [index update-fn] (st/emit! (dwi/update-interaction shape index update-fn)))] - (if new-css-system - [:div {:class (stl/css :interactions-content)} - (if shape - [:& shape-flows {:flows flows - :shape shape}] - [:& page-flows {:flows flows}]) - [:div {:class (stl/css :interaction-options)} - (when (and shape (not (cfh/unframed-shape? shape))) - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? false - :title (tr "workspace.options.interactions") - :class (stl/css :title-spacing-layout-interactions)} + [:div {:class (stl/css :interactions-content)} + (if shape + [:& shape-flows {:flows flows + :shape shape}] + [:& page-flows {:flows flows}]) + [:div {:class (stl/css :interaction-options)} + (when (and shape (not (cfh/unframed-shape? shape))) + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.interactions") + :class (stl/css :title-spacing-layout-interactions)} - [:button {:class (stl/css :add-interaction-btn) - :on-click add-interaction} - i/add-refactor]]]) - [:div {:class (stl/css :help-content)} - (when (= (count interactions) 0) - [:* - (when (and shape (not (cfh/unframed-shape? shape))) - [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/add-refactor] - [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.add-interaction")]]) + [:button {:class (stl/css :add-interaction-btn) + :on-click add-interaction} + i/add-refactor]]]) + [:div {:class (stl/css :help-content)} + (when (= (count interactions) 0) + [:* + (when (and shape (not (cfh/unframed-shape? shape))) [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor] + [:div {:class (stl/css :interactions-help-icon)} i/add-refactor] [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.select-a-shape")]] - [:div {:class (stl/css :help-group)} - [:div {:class (stl/css :interactions-help-icon)} i/play-refactor] - [:div {:class (stl/css :interactions-help)} - (tr "workspace.options.use-play-button")]]])] - [:div {:class (stl/css :groups)} - (for [[index interaction] (d/enumerate interactions)] - [:& interaction-entry {:key (dm/str (:id shape) "-" index) - :index index - :shape shape - :interaction interaction - :update-interaction update-interaction - :remove-interaction remove-interaction}])]]] - - [:* - (if shape - [:& shape-flows {:flows flows - :shape shape}] - [:& page-flows {:flows flows}]) - - [:div.element-set.interactions-options - (when (and shape (not (cfh/unframed-shape? shape))) - [:div.element-set-title - [:span (tr "workspace.options.interactions")] - [:div.add-page {:on-click add-interaction} - i/plus]]) - [:div.element-set-content - (when (= (count interactions) 0) - [:* - (when (and shape (not (cfh/unframed-shape? shape))) - [:* - [:div.interactions-help-icon i/plus] - [:div.interactions-help.separator (tr "workspace.options.add-interaction")]]) - [:div.interactions-help-icon i/interaction] - [:div.interactions-help (tr "workspace.options.select-a-shape")] - [:div.interactions-help-icon i/play] - [:div.interactions-help (tr "workspace.options.use-play-button")]])] - [:div.groups - (for [[index interaction] (d/enumerate interactions)] - [:& interaction-entry {:key (dm/str (:id shape) "-" index) - :index index - :shape shape - :interaction interaction - :update-interaction update-interaction - :remove-interaction remove-interaction}])]]]))) + (tr "workspace.options.add-interaction")]]) + [:div {:class (stl/css :help-group)} + [:div {:class (stl/css :interactions-help-icon)} i/interaction-refactor] + [:div {:class (stl/css :interactions-help)} + (tr "workspace.options.select-a-shape")]] + [:div {:class (stl/css :help-group)} + [:div {:class (stl/css :interactions-help-icon)} i/play-refactor] + [:div {:class (stl/css :interactions-help)} + (tr "workspace.options.use-play-button")]]])] + [:div {:class (stl/css :groups)} + (for [[index interaction] (d/enumerate interactions)] + [:& interaction-entry {:key (dm/str (:id shape) "-" index) + :index index + :shape shape + :interaction interaction + :update-interaction update-interaction + :remove-interaction remove-interaction}])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 7dedfd571..bdfec509f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -14,7 +14,6 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -33,9 +32,7 @@ (mf/defc layer-menu {::mf/wrap-props false} [props] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - ids (unchecked-get props "ids") - type (unchecked-get props "type") + (let [ids (unchecked-get props "ids") values (unchecked-get props "values") hidden? (:hidden values) @@ -148,90 +145,46 @@ preview-complete?)) (swap! state* assoc :selected-blend-mode current-blend-mode))) - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css-case :element-set-content true - :hidden hidden?)} - [:div {:class (stl/css :select)} - [:& select - {:default-value selected-blend-mode - :options options - :on-change handle-change-blend-mode - :is-open? option-highlighted? - :class (stl/css-case :hidden-select hidden?) - :on-pointer-enter-option handle-blend-mode-enter - :on-pointer-leave-option handle-blend-mode-leave}]] - [:div {:class (stl/css :input) - :title (tr "workspace.options.opacity")} - [:span {:class (stl/css :icon)} "%"] - [:> numeric-input* - {:value (opacity->string current-opacity) - :placeholder (tr "settings.multiple") - :on-change handle-opacity-change - :min 0 - :max 100 - :className (stl/css :numeric-input)}]] + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css-case :element-set-content true + :hidden hidden?)} + [:div {:class (stl/css :select)} + [:& select + {:default-value selected-blend-mode + :options options + :on-change handle-change-blend-mode + :is-open? option-highlighted? + :class (stl/css-case :hidden-select hidden?) + :on-pointer-enter-option handle-blend-mode-enter + :on-pointer-leave-option handle-blend-mode-leave}]] + [:div {:class (stl/css :input) + :title (tr "workspace.options.opacity")} + [:span {:class (stl/css :icon)} "%"] + [:> numeric-input* + {:value (opacity->string current-opacity) + :placeholder (tr "settings.multiple") + :on-change handle-opacity-change + :min 0 + :max 100 + :className (stl/css :numeric-input)}]] - [:div {:class (stl/css :actions)} - (cond - (or (= :multiple hidden?) (not hidden?)) - [:button {:on-click handle-set-hidden - :class (stl/css :hidden-btn)} i/shown-refactor] + [:div {:class (stl/css :actions)} + (cond + (or (= :multiple hidden?) (not hidden?)) + [:button {:on-click handle-set-hidden + :class (stl/css :hidden-btn)} i/shown-refactor] - :else - [:button {:on-click handle-set-visible - :class (stl/css :hidden-btn)} i/hide-refactor]) + :else + [:button {:on-click handle-set-visible + :class (stl/css :hidden-btn)} i/hide-refactor]) - (cond - (or (= :multiple blocked?) (not blocked?)) - [:button {:on-click handle-set-blocked - :class (stl/css :lock-btn)} i/unlock-refactor] + (cond + (or (= :multiple blocked?) (not blocked?)) + [:button {:on-click handle-set-blocked + :class (stl/css :lock-btn)} i/unlock-refactor] - :else - [:button {:on-click handle-set-unblocked - :class (stl/css-case :lock-btn true - :locked blocked?)} i/lock-refactor])]]] - - [:div.element-set - [:div.element-set-title - [:span - (case type - :multiple (tr "workspace.options.layer-options.title.multiple") - :group (tr "workspace.options.layer-options.title.group") - (tr "workspace.options.layer-options.title"))]] - - [:div.element-set-content - [:div.row-flex - [:& select - {:class "flex-grow no-check" - :default-value selected-blend-mode - :options options - :on-change handle-change-blend-mode - :is-open? option-highlighted? - :on-pointer-enter-option handle-blend-mode-enter - :on-pointer-leave-option handle-blend-mode-leave}] - - [:div.input-element {:title (tr "workspace.options.opacity") - :class "percentail"} - [:> numeric-input* - {:value (opacity->string current-opacity) - :placeholder (tr "settings.multiple") - :on-change handle-opacity-change - :min 0 - :max 100}]] - - [:div.element-set-actions.layer-actions - (cond - (or (= :multiple hidden?) (not hidden?)) - [:div.element-set-actions-button {:on-click handle-set-hidden} i/eye] - - :else - [:div.element-set-actions-button {:on-click handle-set-visible} i/eye-closed]) - - (cond - (or (= :multiple blocked?) (not blocked?)) - [:div.element-set-actions-button {:on-click handle-set-blocked} i/unlock] - - :else - [:div.element-set-actions-button {:on-click handle-set-unblocked} i/lock])]]]]))) + :else + [:button {:on-click handle-set-unblocked + :class (stl/css-case :lock-btn true + :locked blocked?)} i/lock-refactor])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 7d8f31d76..93be5aa25 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -8,48 +8,48 @@ .element-set { margin-bottom: $s-8; - .element-set-content { +} +.element-set-content { + display: flex; + height: $s-32; + gap: $s-4; + .select { + width: $s-124; + padding: 0; + } + .input { + @extend .input-element; + width: $s-60; + } + .actions { display: flex; - height: $s-32; gap: $s-4; - .select { - width: $s-124; - padding: 0; + .hidden-btn, + .lock-btn { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + + &.hidden { + .hidden-select { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); } .input { - @extend .input-element; - width: $s-60; - } - .actions { - display: flex; - gap: $s-4; - .hidden-btn, - .lock-btn { - @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + .icon { + stroke: var(--input-foreground-color-disabled); } - } - - &.hidden { - .hidden-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - .input { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - .icon { - stroke: var(--input-foreground-color-disabled); - } - .numeric-input { - color: var(--input-foreground-color-disabled); - } + .numeric-input { + color: var(--input-foreground-color-disabled); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index dc97af314..c9069edbb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -23,7 +23,6 @@ [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.formats :as fmt] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] @@ -41,29 +40,6 @@ :column i/column-refactor :column-reverse i/column-reverse-refactor)) -(mf/defc direction-btn - [{:keys [dir saved-dir on-click icon?] :as props}] - (let [handle-on-click - (mf/use-fn - (mf/deps on-click dir) - (fn [] - (when (some? on-click) - (on-click dir))))] - - [:button.dir.tooltip.tooltip-bottom - {:class (dom/classnames :active (= saved-dir dir) - :row (= :row dir) - :row-reverse (= :row-reverse dir) - :column-reverse (= :column-reverse dir) - :column (= :column dir)) - :key (dm/str "direction-" dir) - :alt (str/replace (str/capital (d/name dir)) "-" " ") - :on-click handle-on-click} - (if icon? - i/auto-direction - (str/replace (str/capital (d/name dir)) "-" " "))])) - - ;; FLEX COMPONENTS (def layout-container-flex-attrs @@ -85,86 +61,6 @@ :layout-grid-rows]) (defn get-layout-flex-icon - [type val is-col?] - (case type - :align-items - (if is-col? - (case val - :start i/align-items-column-start - :end i/align-items-column-end - :center i/align-items-column-center - :stretch i/align-items-column-strech - :baseline i/align-items-column-baseline) - (case val - :start i/align-items-row-start - :end i/align-items-row-end - :center i/align-items-row-center - :stretch i/align-items-row-strech - :baseline i/align-items-row-baseline)) - - :justify-content - (if is-col? - (case val - :start i/justify-content-column-start - :end i/justify-content-column-end - :center i/justify-content-column-center - :space-around i/justify-content-column-around - :space-evenly i/justify-content-column-evenly - :space-between i/justify-content-column-between) - (case val - :start i/justify-content-row-start - :end i/justify-content-row-end - :center i/justify-content-row-center - :space-around i/justify-content-row-around - :space-evenly i/justify-content-row-evenly - :space-between i/justify-content-row-between)) - - :align-content - (if is-col? - (case val - :start i/align-content-column-start - :end i/align-content-column-end - :center i/align-content-column-center - :space-around i/align-content-column-around - :space-evenly i/align-content-column-evenly - :space-between i/align-content-column-between - :stretch nil) - - (case val - :start i/align-content-row-start - :end i/align-content-row-end - :center i/align-content-row-center - :space-around i/align-content-row-around - :space-evenly i/align-content-row-evenly - :space-between i/align-content-row-between - :stretch nil)) - - (case val - :start i/align-content-row-start - :end i/align-content-row-end - :center i/align-content-row-center - :space-around i/align-content-row-around - :space-between i/align-content-row-between - :stretch nil) - - :align-self - (if is-col? - (case val - :auto i/minus - :start i/align-self-row-left - :end i/align-self-row-right - :center i/align-self-row-center - :stretch i/align-self-row-strech - :baseline i/align-self-row-baseline) - (case val - :auto i/minus - :start i/align-self-column-top - :end i/align-self-column-bottom - :center i/align-self-column-center - :stretch i/align-self-column-strech - :baseline i/align-self-column-baseline)))) - -(defn get-layout-flex-icon-refactor [type val is-col?] (case type :align-items @@ -276,249 +172,118 @@ (mf/defc direction-row-flex [{:keys [saved-dir on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:& radio-buttons {:selected (d/name saved-dir) - :on-change on-change - :name "flex-direction"} - [:& radio-button {:value "row" - :id "flex-direction-row" - :title "Row" - :icon (dir-icons-refactor :row)}] - [:& radio-button {:value "row-reverse" - :id "flex-direction-row-reverse" - :title "Row reverse" - :icon (dir-icons-refactor :row-reverse)}] - [:& radio-button {:value "column" - :id "flex-direction-column" - :title "Column" - :icon (dir-icons-refactor :column)}] - [:& radio-button {:value "column-reverse" - :id "flex-direction-column-reverse" - :title "Column reverse" - :icon (dir-icons-refactor :column-reverse)}]] - [:* - (for [dir [:row :row-reverse :column :column-reverse]] - [:& direction-btn {:key (d/name dir) - :dir dir - :saved-dir saved-dir - :on-click on-change - :icon? true}])]))) + [:& radio-buttons {:selected (d/name saved-dir) + :on-change on-change + :name "flex-direction"} + [:& radio-button {:value "row" + :id "flex-direction-row" + :title "Row" + :icon (dir-icons-refactor :row)}] + [:& radio-button {:value "row-reverse" + :id "flex-direction-row-reverse" + :title "Row reverse" + :icon (dir-icons-refactor :row-reverse)}] + [:& radio-button {:value "column" + :id "flex-direction-column" + :title "Column" + :icon (dir-icons-refactor :column)}] + [:& radio-button {:value "column-reverse" + :id "flex-direction-column-reverse" + :title "Column reverse" + :icon (dir-icons-refactor :column-reverse)}]]) (mf/defc wrap-row [{:keys [wrap-type on-click] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:button {:class (stl/css-case :wrap-button true - :selected (= wrap-type :wrap)) - :title (if (= :wrap wrap-type) - "No wrap" - "Wrap") - :on-click on-click} - i/wrap-refactor] - - [:* - [:button.tooltip.tooltip-bottom - {:class (dom/classnames :active (= wrap-type :nowrap)) - :alt "No wrap" - :data-value :nowrap - :on-click on-click - :style {:padding 0}} - [:span.no-wrap i/minus]] - [:button.wrap.tooltip.tooltip-bottom - {:class (dom/classnames :active (= wrap-type :wrap)) - :alt "Wrap" - :data-value :wrap - :on-click on-click} - i/auto-wrap]]))) + [:button {:class (stl/css-case :wrap-button true + :selected (= wrap-type :wrap)) + :title (if (= :wrap wrap-type) + "No wrap" + "Wrap") + :on-click on-click} + i/wrap-refactor]) (mf/defc align-row [{:keys [is-col? align-items on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:& radio-buttons {:selected (d/name align-items) - :on-change on-change - :name "flex-align-items"} - [:& radio-button {:value "start" - :icon (get-layout-flex-icon-refactor :align-items :start is-col?) - :title "Align items start" - :id "align-items-start"}] - [:& radio-button {:value "center" - :icon (get-layout-flex-icon-refactor :align-items :center is-col?) - :title "Align items center" - :id "align-items-center"}] - [:& radio-button {:value "end" - :icon (get-layout-flex-icon-refactor :align-items :end is-col?) - :title "Align items end" - :id "align-items-end"}]] - - [:div.align-items-style - [:button.align-start.tooltip.tooltip-bottom - {:class (dom/classnames :active (= align-items :start)) - :alt "Align items start" - :data-value :start - :on-click on-change} - (get-layout-flex-icon :align-items :start is-col?)] - [:button.align-start.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-items :center)) - :alt "Align items center" - :data-value :center - :on-click on-change} - (get-layout-flex-icon :align-items :center is-col?)] - [:button.align-start.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-items :end)) - :alt "Align items end" - :data-value :end - :on-click on-change} - (get-layout-flex-icon :align-items :end is-col?)]]))) + [:& radio-buttons {:selected (d/name align-items) + :on-change on-change + :name "flex-align-items"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon :align-items :start is-col?) + :title "Align items start" + :id "align-items-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon :align-items :center is-col?) + :title "Align items center" + :id "align-items-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon :align-items :end is-col?) + :title "Align items end" + :id "align-items-end"}]]) (mf/defc align-content-row [{:keys [is-col? align-content on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:& radio-buttons {:selected (d/name align-content) - :on-change on-change - :name "flex-align-content"} - [:& radio-button {:value "start" - :icon (get-layout-flex-icon-refactor :align-content :start is-col?) - :title "Align content start" - :id "align-content-start"}] - [:& radio-button {:value "center" - :icon (get-layout-flex-icon-refactor :align-content :center is-col?) - :title "Align content center" - :id "align-content-center"}] - [:& radio-button {:value "end" - :icon (get-layout-flex-icon-refactor :align-content :end is-col?) - :title "Align content end" - :id "align-content-end"}] - [:& radio-button {:value "space-between" - :icon (get-layout-flex-icon-refactor :align-content :space-between is-col?) - :title "Align content space-between" - :id "align-content-space-between"}] - [:& radio-button {:value "space-around" - :icon (get-layout-flex-icon-refactor :align-content :space-around is-col?) - :title "Align content space-around" - :id "align-content-space-around"}] - [:& radio-button {:value "space-evenly" - :icon (get-layout-flex-icon-refactor :align-content :space-evenly is-col?) - :title "Align content space-evenly" - :id "align-content-space-evenly"}]] - [:* - [:div.align-content-style - [:button.align-content.tooltip.tooltip-bottom - {:class (dom/classnames :active (= align-content :start)) - :alt "Align content start" - :data-value :start - :on-click on-change} - (get-layout-flex-icon :align-content :start is-col?)] - [:button.align-content.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-content :center)) - :alt "Align content center" - :data-value :center - :on-click on-change} - (get-layout-flex-icon :align-content :center is-col?)] - [:button.align-content.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-content :end)) - :alt "Align content end" - :data-value :end - :on-click on-change} - (get-layout-flex-icon :align-content :end is-col?)]] - [:div.align-content-style - [:button.align-content.tooltip.tooltip-bottom - {:class (dom/classnames :active (= align-content :space-between)) - :alt "Align content space-between" - :data-value :space-between - :on-click on-change} - (get-layout-flex-icon :align-content :space-between is-col?)] - [:button.align-content.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-content :space-around)) - :alt "Align content space-around" - :data-value :space-around - :on-click on-change} - (get-layout-flex-icon :align-content :space-around is-col?)] - [:button.align-content.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= align-content :space-evenly)) - :alt "Align content space-evenly" - :data-value :space-evenly - :on-click on-change} - (get-layout-flex-icon :align-content :space-evenly is-col?)]]]))) + [:& radio-buttons {:selected (d/name align-content) + :on-change on-change + :name "flex-align-content"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon :align-content :start is-col?) + :title "Align content start" + :id "align-content-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon :align-content :center is-col?) + :title "Align content center" + :id "align-content-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon :align-content :end is-col?) + :title "Align content end" + :id "align-content-end"}] + [:& radio-button {:value "space-between" + :icon (get-layout-flex-icon :align-content :space-between is-col?) + :title "Align content space-between" + :id "align-content-space-between"}] + [:& radio-button {:value "space-around" + :icon (get-layout-flex-icon :align-content :space-around is-col?) + :title "Align content space-around" + :id "align-content-space-around"}] + [:& radio-button {:value "space-evenly" + :icon (get-layout-flex-icon :align-content :space-evenly is-col?) + :title "Align content space-evenly" + :id "align-content-space-evenly"}]]) (mf/defc justify-content-row [{:keys [is-col? justify-content on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:& radio-buttons {:selected (d/name justify-content) - :on-change on-change - :name "flex-justify"} - [:& radio-button {:value "start" - :icon (get-layout-flex-icon-refactor :justify-content :start is-col?) - :title "Justify content start" - :id "justify-content-start"}] - [:& radio-button {:value "center" - :icon (get-layout-flex-icon-refactor :justify-content :center is-col?) - :title "Justify content center" - :id "justify-content-center"}] - [:& radio-button {:value "end" - :icon (get-layout-flex-icon-refactor :justify-content :end is-col?) - :title "Justify content end" - :id "justify-content-end"}] - [:& radio-button {:value "space-between" - :icon (get-layout-flex-icon-refactor :justify-content :space-between is-col?) - :title "Justify content space-between" - :id "justify-content-space-between"}] - [:& radio-button {:value "space-around" - :icon (get-layout-flex-icon-refactor :justify-content :space-around is-col?) - :title "Justify content space-around" - :id "justify-content-space-around"}] - [:& radio-button {:value "space-evenly" - :icon (get-layout-flex-icon-refactor :justify-content :space-evenly is-col?) - :title "Justify content space-evenly" - :id "justify-content-space-evenly"}]] - [:* - [:div.justify-content-style - [:button.justify.tooltip.tooltip-bottom - {:class (dom/classnames :active (= justify-content :start)) - :alt "Justify content start" - :data-value :start - :on-click on-change} - (get-layout-flex-icon :justify-content :start is-col?)] - [:button.justify.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= justify-content :center)) - :data-value :center - :alt "Justify content center" - :on-click on-change} - (get-layout-flex-icon :justify-content :center is-col?)] - [:button.justify.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= justify-content :end)) - :alt "Justify content end" - :data-value :end - :on-click on-change} - (get-layout-flex-icon :justify-content :end is-col?)]] - [:div.justify-content-style - [:button.justify.tooltip.tooltip-bottom - {:class (dom/classnames :active (= justify-content :space-between)) - :alt "Justify content space-between" - :data-value :space-between - :on-click on-change} - (get-layout-flex-icon :justify-content :space-between is-col?)] - [:button.justify.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= justify-content :space-around)) - :alt "Justify content space-around" - :data-value :space-around - :on-click on-change} - (get-layout-flex-icon :justify-content :space-around is-col?)] - [:button.justify.tooltip.tooltip-bottom-left - {:class (dom/classnames :active (= justify-content :space-evenly)) - :alt "Justify content space-evenly" - :data-value :space-evenly - :on-click on-change} - (get-layout-flex-icon :justify-content :space-evenly is-col?)]]]))) + [:& radio-buttons {:selected (d/name justify-content) + :on-change on-change + :name "flex-justify"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon :justify-content :start is-col?) + :title "Justify content start" + :id "justify-content-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon :justify-content :center is-col?) + :title "Justify content center" + :id "justify-content-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon :justify-content :end is-col?) + :title "Justify content end" + :id "justify-content-end"}] + [:& radio-button {:value "space-between" + :icon (get-layout-flex-icon :justify-content :space-between is-col?) + :title "Justify content space-between" + :id "justify-content-space-between"}] + [:& radio-button {:value "space-around" + :icon (get-layout-flex-icon :justify-content :space-around is-col?) + :title "Justify content space-around" + :id "justify-content-space-around"}] + [:& radio-button {:value "space-evenly" + :icon (get-layout-flex-icon :justify-content :space-evenly is-col?) + :title "Justify content space-evenly" + :id "justify-content-space-evenly"}]]) (mf/defc padding-section [{:keys [values on-change-style on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - padding-type (:layout-padding-type values) + (let [padding-type (:layout-padding-type values) toggle-padding-mode (mf/use-fn @@ -551,171 +316,110 @@ ;;on destroy component (select-paddings false false false false)))) - (if new-css-system - [:div {:class (stl/css :padding-group)} - [:div {:class (stl/css :padding-inputs)} - (cond - (= padding-type :simple) - [:div {:class (stl/css :paddings-simple)} - [:div {:class (stl/css :padding-simple) - :title "Vertical padding"} - [:span {:class (stl/css :icon)} - i/padding-top-bottom-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :simple :p1) - :on-focus #(do - (dom/select-target %) - (select-paddings true false true false)) - :nillable true - :min 0 - :value p1}]] - [:div {:class (stl/css :padding-simple) - :title "Horizontal padding"} + [:div {:class (stl/css :padding-group)} + [:div {:class (stl/css :padding-inputs)} + (cond + (= padding-type :simple) + [:div {:class (stl/css :paddings-simple)} + [:div {:class (stl/css :padding-simple) + :title "Vertical padding"} + [:span {:class (stl/css :icon)} + i/padding-top-bottom-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :simple :p1) + :on-focus #(do + (dom/select-target %) + (select-paddings true false true false)) + :nillable true + :min 0 + :value p1}]] + [:div {:class (stl/css :padding-simple) + :title "Horizontal padding"} - [:span {:class (stl/css :icon)} - i/padding-left-right-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :simple :p2) - :on-focus #(do (dom/select-target %) - (select-paddings false true false true)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value p2}]]] - (= padding-type :multiple) - [:div {:class (stl/css :paddings-multiple)} + [:span {:class (stl/css :icon)} + i/padding-left-right-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :simple :p2) + :on-focus #(do (dom/select-target %) + (select-paddings false true false true)) + :on-blur #(select-paddings false false false false) + :nillable true + :min 0 + :value p2}]]] + (= padding-type :multiple) + [:div {:class (stl/css :paddings-multiple)} - [:div {:class (stl/css :padding-multiple) - :title "Top padding"} - [:span {:class (stl/css :icon)} - i/padding-top-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :multiple :p1) - :on-focus #(do (dom/select-target %) - (select-padding :p1)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value (:p1 (:layout-padding values))}]] + [:div {:class (stl/css :padding-multiple) + :title "Top padding"} + [:span {:class (stl/css :icon)} + i/padding-top-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p1) + :on-focus #(do (dom/select-target %) + (select-padding :p1)) + :on-blur #(select-paddings false false false false) + :nillable true + :min 0 + :value (:p1 (:layout-padding values))}]] - [:div {:class (stl/css :padding-multiple) - :title "Right padding"} - [:span {:class (stl/css :icon)} - i/padding-right-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :multiple :p2) - :on-focus #(do (dom/select-target %) - (select-padding :p2)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value (:p2 (:layout-padding values))}]] + [:div {:class (stl/css :padding-multiple) + :title "Right padding"} + [:span {:class (stl/css :icon)} + i/padding-right-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p2) + :on-focus #(do (dom/select-target %) + (select-padding :p2)) + :on-blur #(select-paddings false false false false) + :nillable true + :min 0 + :value (:p2 (:layout-padding values))}]] - [:div {:class (stl/css :padding-multiple) - :title "Bottom padding"} - [:span {:class (stl/css :icon)} - i/padding-bottom-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :multiple :p3) - :on-focus #(do (dom/select-target %) - (select-padding :p3)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value (:p3 (:layout-padding values))}]] + [:div {:class (stl/css :padding-multiple) + :title "Bottom padding"} + [:span {:class (stl/css :icon)} + i/padding-bottom-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p3) + :on-focus #(do (dom/select-target %) + (select-padding :p3)) + :on-blur #(select-paddings false false false false) + :nillable true + :min 0 + :value (:p3 (:layout-padding values))}]] - [:div {:class (stl/css :padding-multiple) - :title "Left padding"} - [:span {:class (stl/css :icon)} - i/padding-left-refactor] - [:> numeric-input* - {:className (stl/css :numeric-input) - :placeholder "--" - :on-change (partial on-change :multiple :p4) - :on-focus #(do (dom/select-target %) - (select-padding :p4)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value (:p4 (:layout-padding values))}]]])] - [:button {:class (stl/css-case :padding-toggle true - :selected (= padding-type :multiple)) - :on-click toggle-padding-mode} - i/padding-extended-refactor]] - - [:div.padding-row - (cond - (= padding-type :simple) - - [:div.padding-group - [:div.padding-item.tooltip.tooltip-bottom-left - {:alt "Vertical padding"} - [:span.icon.rotated i/auto-padding-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :simple :p1) - :on-focus #(do - (dom/select-target %) - (select-paddings true false true false)) - :nillable true - :min 0 - :value p1}]] - - [:div.padding-item.tooltip.tooltip-bottom-left - {:alt "Horizontal padding"} - [:span.icon i/auto-padding-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :simple :p2) - :on-focus #(do (dom/select-target %) - (select-paddings false true false true)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value p2}]]] - - (= padding-type :multiple) - [:div.wrapper - (for [num [:p1 :p2 :p3 :p4]] - [:div.tooltip.tooltip-bottom - {:key (dm/str "padding-" (d/name num)) - :alt (case num - :p1 "Top" - :p2 "Right" - :p3 "Bottom" - :p4 "Left")} - [:div.input-element.auto - [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :multiple num) - :on-focus #(do (dom/select-target %) - (select-padding num)) - :on-blur #(select-paddings false false false false) - :nillable true - :min 0 - :value (num (:layout-padding values))}]]])]) - - [:div.padding-icons - [:div.padding-icon.tooltip.tooltip-bottom-left - {:class (dom/classnames :selected (= padding-type :multiple)) - :alt "Independent paddings" - :on-click toggle-padding-mode} - i/auto-padding-side]]]))) + [:div {:class (stl/css :padding-multiple) + :title "Left padding"} + [:span {:class (stl/css :icon)} + i/padding-left-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p4) + :on-focus #(do (dom/select-target %) + (select-padding :p4)) + :on-blur #(select-paddings false false false false) + :nillable true + :min 0 + :value (:p4 (:layout-padding values))}]]])] + [:button {:class (stl/css-case :padding-toggle true + :selected (= padding-type :multiple)) + :on-click toggle-padding-mode} + i/padding-extended-refactor]])) (mf/defc gap-section [{:keys [is-col? wrap-type gap-selected? on-change gap-value]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - select-gap + (let [select-gap (fn [gap] (st/emit! (udw/set-gap-selected gap)))] @@ -725,89 +429,47 @@ ;;on destroy component (select-gap nil)))) - (if new-css-system - [:div {:class (stl/css :gap-group)} - [:div {:class (stl/css-case :row-gap true - :disabled (and (= :nowrap wrap-type) (not is-col?))) - :title "Row gap"} - [:span {:class (stl/css :icon)} i/gap-vertical-refactor] - [:> numeric-input* {:className (stl/css :numeric-input true) - :no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :row-gap) - (reset! gap-selected? :row-gap) - (dom/select-target event)) - :on-change (partial on-change (= :nowrap wrap-type) :row-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :nillable true - :min 0 - :value (:row-gap gap-value) - :disabled (and (= :nowrap wrap-type) (not is-col?))}]] + [:div {:class (stl/css :gap-group)} + [:div {:class (stl/css-case :row-gap true + :disabled (and (= :nowrap wrap-type) (not is-col?))) + :title "Row gap"} + [:span {:class (stl/css :icon)} i/gap-vertical-refactor] + [:> numeric-input* {:className (stl/css :numeric-input true) + :no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :row-gap) + (reset! gap-selected? :row-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :row-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :nillable true + :min 0 + :value (:row-gap gap-value) + :disabled (and (= :nowrap wrap-type) (not is-col?))}]] - [:div {:class (stl/css-case :column-gap true - :disabled (and (= :nowrap wrap-type) is-col?)) - :title "Column gap"} - [:span {:class (stl/css :icon)} - i/gap-horizontal-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :column-gap) - (reset! gap-selected? :column-gap) - (dom/select-target event)) - :on-change (partial on-change (= :nowrap wrap-type) :column-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :nillable true - :min 0 - :value (:column-gap gap-value) - :disabled (and (= :nowrap wrap-type) is-col?)}]]] - - [:div.layout-row - [:div.gap.row-title "Gap"] - [:div.gap-group - [:div.gap-row.tooltip.tooltip-bottom-left - {:alt "Column gap"} - [:span.icon - i/auto-gap] - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :column-gap) - (reset! gap-selected? :column-gap) - (dom/select-target event)) - :on-change (partial on-change (= :nowrap wrap-type) :column-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :nillable true - :min 0 - :value (:column-gap gap-value) - :disabled (and (= :nowrap wrap-type) is-col?)}]] - - [:div.gap-row.tooltip.tooltip-bottom-left - {:alt "Row gap"} - [:span.icon.rotated - i/auto-gap] - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :row-gap) - (reset! gap-selected? :row-gap) - (dom/select-target event)) - :on-change (partial on-change (= :nowrap wrap-type) :row-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :nillable true - :min 0 - :value (:row-gap gap-value) - :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))) + [:div {:class (stl/css-case :column-gap true + :disabled (and (= :nowrap wrap-type) is-col?)) + :title "Column gap"} + [:span {:class (stl/css :icon)} + i/gap-horizontal-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :column-gap) + (reset! gap-selected? :column-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :column-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :nillable true + :min 0 + :value (:column-gap gap-value) + :disabled (and (= :nowrap wrap-type) is-col?)}]]])) ;; GRID COMPONENTS @@ -835,36 +497,22 @@ :space-evenly i/grid-justify-content-row-between)))) (mf/defc direction-row-grid - [{:keys [saved-dir on-change on-click] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - (if new-css-system - [:& radio-buttons {:selected (d/name saved-dir) - :on-change on-change - :name "grid-direction"} - [:& radio-button {:value "row" - :id "grid-direction-row" - :title "Row" - :icon (dir-icons-refactor :row)}] - [:& radio-button {:value "column" - :id "grid-direction-column" - :title "Column" - :icon (dir-icons-refactor :column)}]] - [:* - [:& direction-btn {:key "grid-direction-row" - :dir :row - :saved-dir saved-dir - :on-click on-click - :icon? true}] - [:& direction-btn {:key "grid-direction-column" - :dir :column - :saved-dir saved-dir - :on-click on-click - :icon? true}]]))) + [{:keys [saved-dir on-change] :as props}] + [:& radio-buttons {:selected (d/name saved-dir) + :on-change on-change + :name "grid-direction"} + [:& radio-button {:value "row" + :id "grid-direction-row" + :title "Row" + :icon (dir-icons-refactor :row)}] + [:& radio-button {:value "column" + :id "grid-direction-column" + :title "Column" + :icon (dir-icons-refactor :column)}]]) (mf/defc grid-edit-mode [{:keys [id] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - edition (mf/deref refs/selected-edition) + (let [edition (mf/deref refs/selected-edition) active? (= id edition) toggle-edit-mode @@ -874,81 +522,43 @@ (if-not active? (st/emit! (udw/start-edition-mode id)) (st/emit! :interrupt))))] - (if new-css-system - [:button - {:class (stl/css :edit-mode-btn) - :alt "Grid edit mode" - :on-click toggle-edit-mode} - (tr "workspace.layout_grid.editor.options.edit-grid")] - - [:button.tooltip.tooltip-bottom-left - {:class (dom/classnames :active active?) - :alt "Grid edit mode" - :on-click toggle-edit-mode - :style {:padding 0}} - (tr "workspace.layout_grid.editor.options.edit-grid") - i/grid-layout-mode]))) + [:button + {:class (stl/css :edit-mode-btn) + :alt "Grid edit mode" + :on-click toggle-edit-mode} + (tr "workspace.layout_grid.editor.options.edit-grid")])) (mf/defc align-grid-row [{:keys [is-col? align-items set-align] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - type (if is-col? :column :row)] - (if new-css-system - [:& radio-buttons {:selected (d/name align-items) - :on-change #(set-align % type) - :name (dm/str "flex-align-items-" (d/name type))} - [:& radio-button {:value "start" - :icon (get-layout-grid-icon-refactor :align-items :start is-col?) - :title "Align items start" - :id (dm/str "align-items-start-" (d/name type))}] - [:& radio-button {:value "center" - :icon (get-layout-grid-icon-refactor :align-items :center is-col?) - :title "Align items center" - :id (dm/str "align-items-center-" (d/name type))}] - [:& radio-button {:value "end" - :icon (get-layout-grid-icon-refactor :align-items :end is-col?) - :title "Align items end" - :id (dm/str "align-items-end-" (d/name type))}]] - [:div.align-items-style - (for [align [:start :center :end]] - [:button.align-start.tooltip - {:class (dom/classnames :active (= align-items align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (if is-col? - (dm/str "justify-items: " (d/name align)) - (dm/str "align-items: " (d/name align))) - :on-click #(set-align align type) - :key (dm/str "align-items" (d/name align))} - (get-layout-flex-icon :align-items align is-col?)])]))) + (let [type (if is-col? :column :row)] + [:& radio-buttons {:selected (d/name align-items) + :on-change #(set-align % type) + :name (dm/str "flex-align-items-" (d/name type))} + [:& radio-button {:value "start" + :icon (get-layout-grid-icon-refactor :align-items :start is-col?) + :title "Align items start" + :id (dm/str "align-items-start-" (d/name type))}] + [:& radio-button {:value "center" + :icon (get-layout-grid-icon-refactor :align-items :center is-col?) + :title "Align items center" + :id (dm/str "align-items-center-" (d/name type))}] + [:& radio-button {:value "end" + :icon (get-layout-grid-icon-refactor :align-items :end is-col?) + :title "Align items end" + :id (dm/str "align-items-end-" (d/name type))}]])) (mf/defc justify-grid-row [{:keys [is-col? justify-items set-justify] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - type (if is-col? :column :row)] + (let [type (if is-col? :column :row)] - (if new-css-system - [:& radio-buttons {:selected (d/name justify-items) - :on-change #(set-justify % type) - :name (dm/str "grid-justify-items-" (d/name type))} - (for [justify [:start :center :end :space-around :space-between :stretch]] - [:& radio-button {:value (d/name justify) - :icon (get-layout-grid-icon-refactor :justify-items justify is-col?) - :title (dm/str "Justify items " (d/name justify)) - :id (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])] - - [:div.justify-content-style - (for [align [:start :center :end :space-around :space-between :stretch]] - [:button.align-start.tooltip - {:class (dom/classnames :active (= justify-items align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (if is-col? - (dm/str "align-content: " (d/name align)) - (dm/str "justify-content: " (d/name align))) - :on-click #(set-justify align type) - :key (dm/str "justify-content" (d/name align))} - (get-layout-grid-icon :justify-items align is-col?)])]))) + [:& radio-buttons {:selected (d/name justify-items) + :on-change #(set-justify % type) + :name (dm/str "grid-justify-items-" (d/name type))} + (for [justify [:start :center :end :space-around :space-between :stretch]] + [:& radio-button {:value (d/name justify) + :icon (get-layout-grid-icon-refactor :justify-items justify is-col?) + :title (dm/str "Justify items " (d/name justify)) + :id (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])])) (defn manage-values [{:keys [value type]}] (case type @@ -959,10 +569,18 @@ value)) (mf/defc grid-track-info - [{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track on-select-track]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) + [{:keys [is-col? + type + index + column + set-column-value + set-column-type + remove-element + reorder-track + hover-track + on-select-track]}] - drop-track + (let [drop-track (mf/use-fn (mf/deps type reorder-track index) (fn [drop-position data event] @@ -996,89 +614,50 @@ :column column} :draggable? true)] - (if new-css-system - [:div {:class - (stl/css-case :track-info true - :dnd-over-top (or (= (:over dprops) :top) - (= (:over dprops) :center)) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref - :on-pointer-enter pointer-enter - :on-pointer-leave pointer-leave} + [:div {:class (stl/css-case :track-info true + :dnd-over-top (or (= (:over dprops) :top) + (= (:over dprops) :center)) + :dnd-over-bot (= (:over dprops) :bot)) + :ref dref + :on-pointer-enter pointer-enter + :on-pointer-leave pointer-leave} - [:div {:class (stl/css :track-info-container)} - [:div {:class (stl/css :track-info-dir-icon) - :on-click handle-select-track} - (if is-col? i/flex-vertical-refactor i/flex-horizontal-refactor)] + [:div {:class (stl/css :track-info-container)} + [:div {:class (stl/css :track-info-dir-icon) + :on-click handle-select-track} + (if is-col? i/flex-vertical-refactor i/flex-horizontal-refactor)] - [:div {:class (stl/css :track-info-value)} - [:> numeric-input* {:no-validate true - :value (:value column) - :on-change #(set-column-value type index %) - :placeholder "--" - :min 0 - :disabled (= :auto (:type column))}]] + [:div {:class (stl/css :track-info-value)} + [:> numeric-input* {:no-validate true + :value (:value column) + :on-change #(set-column-value type index %) + :placeholder "--" + :min 0 + :disabled (= :auto (:type column))}]] - [:div {:class (stl/css :track-info-unit)} - [:& select - {:class (stl/css :track-info-unit-selector) - :default-value (:type column) - :options [{:value :flex :label "FR"} - {:value :auto :label "AUTO"} - {:value :fixed :label "PX"} - {:value :percent :label "%"}] - :on-change #(set-column-type type index %)}]]] + [:div {:class (stl/css :track-info-unit)} + [:& select {:class (stl/css :track-info-unit-selector) + :default-value (:type column) + :options [{:value :flex :label "FR"} + {:value :auto :label "AUTO"} + {:value :fixed :label "PX"} + {:value :percent :label "%"}] + :on-change #(set-column-type type index %)}]]] - [:button - {:class (stl/css :remove-track-btn) - :on-click #(remove-element type index)} - i/remove-refactor]] - - [:div.column-info - {:ref dref - :class (dom/classnames - :dnd-over-top (or (= (:over dprops) :top) - (= (:over dprops) :center)) - :dnd-over-bot (= (:over dprops) :bot)) - :on-pointer-enter pointer-enter - :on-pointer-leave pointer-leave} - [:div.direction-grid-icon - (if is-col? - i/layout-rows - i/layout-columns)] - - [:div.grid-column-value - [:> numeric-input* {:no-validate true - :value (:value column) - :on-change #(set-column-value type index %) - :placeholder "--" - :disabled (= :auto (:type column))}]] - [:div.grid-column-unit - [:& select - {:class "grid-column-unit-selector" - :default-value (:type column) - :options [{:value :flex :label "FR"} - {:value :auto :label "AUTO"} - {:value :fixed :label "PX"} - {:value :percent :label "%"}] - :on-change #(set-column-type type index %)}]] - [:button.remove-grid-column - {:on-click #(remove-element type index)} - i/minus]]))) + [:button {:class (stl/css :remove-track-btn) + :on-click #(remove-element type index)} + i/remove-refactor]])) (mf/defc grid-columns-row [{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type remove-element reorder-track hover-track on-select-track] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - column-num (count column-values) + (let [column-num (count column-values) direction (if (> column-num 1) (if is-col? "Columns " "Rows ") (if is-col? "Column " "Row ")) track-name (dm/str direction (if (= column-num 0) " - empty" column-num)) track-detail (str/join ", " (map manage-values column-values)) - generated-name (dm/str direction (if (= column-num 0) " - empty" (dm/str column-num " (" track-detail ")"))) type (if is-col? :column :row) @@ -1087,61 +666,36 @@ (when-not expanded? (toggle)) (add-new-element type ctl/default-track-value))] - (if new-css-system - [:div {:class (stl/css :grid-tracks)} - [:div {:class (stl/css :grid-track-header)} - [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu-refactor] - [:div {:class (stl/css :track-title) :on-click toggle} - [:div {:class (stl/css :track-name) :title track-name} track-name] - [:div {:class (stl/css :track-detail) :title track-detail} track-detail]] - [:button {:class (stl/css :add-column) :on-click add-track} i/add-refactor]] + [:div {:class (stl/css :grid-tracks)} + [:div {:class (stl/css :grid-track-header)} + [:button {:class (stl/css :expand-icon) :on-click toggle} i/menu-refactor] + [:div {:class (stl/css :track-title) :on-click toggle} + [:div {:class (stl/css :track-name) :title track-name} track-name] + [:div {:class (stl/css :track-detail) :title track-detail} track-detail]] + [:button {:class (stl/css :add-column) :on-click add-track} i/add-refactor]] - (when expanded? - [:& h/sortable-container {} - [:div {:class (stl/css :grid-tracks-info-container)} - (for [[index column] (d/enumerate column-values)] - [:& grid-track-info {:key (dm/str index "-" (name type)) - :type type - :is-col? is-col? - :index index - :column column - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track - :on-select-track on-select-track}])]])] - - [:div.grid-columns - [:div.grid-columns-header - [:button.expand-icon {:on-click toggle} i/actions] - [:div.columns-info {:title generated-name :on-click toggle} generated-name] - [:button.add-column {:on-click add-track} i/plus]] - - (when expanded? - [:& h/sortable-container {} - [:div.columns-info-wrapper - (for [[index column] (d/enumerate column-values)] - [:& grid-track-info {:key (dm/str index "-" (name type)) - :type type - :is-col? is-col? - :index index - :column column - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track - :on-select-track on-select-track}])]])]))) + (when expanded? + [:& h/sortable-container {} + [:div {:class (stl/css :grid-tracks-info-container)} + (for [[index column] (d/enumerate column-values)] + [:& grid-track-info {:key (dm/str index "-" (name type)) + :type type + :is-col? is-col? + :index index + :column column + :set-column-value set-column-value + :set-column-type set-column-type + :remove-element remove-element + :reorder-track reorder-track + :hover-track hover-track + :on-select-track on-select-track}])]])])) ;; LAYOUT COMPONENT (mf/defc layout-container-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "multiple"]))]} [{:keys [ids values multiple] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - ;; Display + (let [;; Display layout-type (:layout values) has-layout? (some? layout-type) @@ -1194,9 +748,9 @@ set-direction-refactor (mf/use-fn - (mf/deps new-css-system layout-type ids) + (mf/deps layout-type ids) (fn [dir] - (let [dir (if new-css-system (keyword dir) dir)] + (let [dir (keyword dir)] (if (= :flex layout-type) (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})) (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))) @@ -1205,7 +759,7 @@ wrap-type (:layout-wrap-type values) - toggle-wrap-refactor + toggle-wrap (mf/use-fn (mf/deps wrap-type ids) (fn [] @@ -1214,30 +768,12 @@ :wrap)] (st/emit! (dwsl/update-layout ids {:layout-wrap-type type}))))) - set-wrap - (mf/use-fn - (mf/deps ids) - (fn [event] - (let [type (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (st/emit! (dwsl/update-layout ids {:layout-wrap-type type}))))) - ;; Align items align-items (:layout-align-items values) set-align-items - (mf/use-fn - (mf/deps ids) - (fn [event] - (let [value (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (st/emit! (dwsl/update-layout ids {:layout-align-items value}))))) - - set-align-items-refactor (mf/use-fn (mf/deps ids) (fn [value] @@ -1248,15 +784,6 @@ justify-content (:layout-justify-content values) set-justify-content - (mf/use-fn - (mf/deps ids) - (fn [event] - (let [value (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))) - - set-justify-content-refactor (mf/use-fn (mf/deps ids) (fn [value] @@ -1267,17 +794,6 @@ align-content (:layout-align-content values) set-align-content - (mf/use-fn - (mf/deps ids align-content) - (fn [event] - (let [value (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (if (= align-content value) - (st/emit! (dwsl/update-layout ids {:layout-align-content :stretch})) - (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) - - set-align-content-refactor (mf/use-fn (mf/deps ids) (fn [value align-content] @@ -1324,9 +840,9 @@ set-direction (mf/use-fn - (mf/deps layout-type ids new-css-system) + (mf/deps layout-type ids) (fn [dir] - (let [dir (cond-> dir new-css-system keyword)] + (let [dir (keyword dir)] (if (= :flex layout-type) (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})) (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))) @@ -1337,9 +853,9 @@ set-align-grid (mf/use-fn - (mf/deps ids new-css-system) + (mf/deps ids) (fn [value type] - (let [value (cond-> value new-css-system keyword)] + (let [value (keyword value)] (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-align-items value})) (st/emit! (dwsl/update-layout ids {:layout-justify-items value})))))) @@ -1352,9 +868,9 @@ set-justify-grid (mf/use-fn - (mf/deps ids new-css-system) + (mf/deps ids) (fn [value type] - (let [value (cond-> value new-css-system keyword)] + (let [value (keyword value)] (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-justify-content value})) (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) @@ -1379,246 +895,127 @@ (fn [] (st/emit! (dom/open-new-window cf/grid-help-uri))))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-layout? - :collapsed? (not open?) - :on-collapsed toggle-content - :title "Layout" - :class (stl/css-case :title-spacing-layout (not has-layout?))} - (if (and (not multiple) (:layout values)) - [:div {:class (stl/css :title-actions)} - (when ^boolean grid-enabled? - [:* - [:button {:class (stl/css :add-layout) - :on-click handle-show-layout-dropdown} - i/menu-refactor] + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-layout? + :collapsed? (not open?) + :on-collapsed toggle-content + :title "Layout" + :class (stl/css-case :title-spacing-layout (not has-layout?))} + (if (and (not multiple) (:layout values)) + [:div {:class (stl/css :title-actions)} + (when ^boolean grid-enabled? + [:* + [:button {:class (stl/css :add-layout) + :on-click handle-show-layout-dropdown} + i/menu-refactor] - [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options} - [:div {:class (stl/css :layout-options)} - [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"] - [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]) + [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options} + [:div {:class (stl/css :layout-options)} + [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"] + [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]) - [:button {:class (stl/css :remove-layout) - :on-click on-remove-layout} - i/remove-refactor]] + [:button {:class (stl/css :remove-layout) + :on-click on-remove-layout} + i/remove-refactor]] - [:div {:class (stl/css :title-actions)} - (if ^boolean grid-enabled? - [:* - [:button {:class (stl/css :add-layout) - :on-click handle-show-layout-dropdown} - i/add-refactor] + [:div {:class (stl/css :title-actions)} + (if ^boolean grid-enabled? + [:* + [:button {:class (stl/css :add-layout) + :on-click handle-show-layout-dropdown} + i/add-refactor] - [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options} - [:div {:class (stl/css :layout-options)} - [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"] - [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]] + [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options} + [:div {:class (stl/css :layout-options)} + [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"] + [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]] - [:button {:class (stl/css :add-layout) - :data-value :flex - :on-click on-set-layout} - i/add-refactor])])]] + [:button {:class (stl/css :add-layout) + :data-value :flex + :on-click on-set-layout} + i/add-refactor])])]] - (when (and open? has-layout?) - (when (not= :multiple layout-type) - (case layout-type - :flex - [:div {:class (stl/css :flex-layout-menu)} - [:div {:class (stl/css :first-row)} - [:& align-row {:is-col? is-col? - :align-items align-items - :on-change set-align-items-refactor}] + (when (and open? has-layout?) + (when (not= :multiple layout-type) + (case layout-type + :flex + [:div {:class (stl/css :flex-layout-menu)} + [:div {:class (stl/css :first-row)} + [:& align-row {:is-col? is-col? + :align-items align-items + :on-change set-align-items}] - [:& direction-row-flex {:on-change set-direction-refactor - :saved-dir saved-dir}] + [:& direction-row-flex {:on-change set-direction-refactor + :saved-dir saved-dir}] - [:& wrap-row {:wrap-type wrap-type - :on-click toggle-wrap-refactor}]] + [:& wrap-row {:wrap-type wrap-type + :on-click toggle-wrap}]] - [:div {:class (stl/css :second-row :help-button-wrapper)} - [:& justify-content-row {:is-col? is-col? - :justify-content justify-content - :on-change set-justify-content-refactor}] + [:div {:class (stl/css :second-row :help-button-wrapper)} + [:& justify-content-row {:is-col? is-col? + :justify-content justify-content + :on-change set-justify-content}] - [:button {:on-click handle-open-flex-help - :class (stl/css :help-button)} i/help-refactor]] - (when (= :wrap wrap-type) - [:div {:class (stl/css :third-row)} - [:& align-content-row {:is-col? is-col? - :align-content align-content - :on-change set-align-content-refactor}]]) - [:div {:class (stl/css :forth-row)} - [:& gap-section {:is-col? is-col? - :wrap-type wrap-type - :gap-selected? gap-selected? - :on-change set-gap - :gap-value (:layout-gap values)}] + [:button {:on-click handle-open-flex-help + :class (stl/css :help-button)} i/help-refactor]] + (when (= :wrap wrap-type) + [:div {:class (stl/css :third-row)} + [:& align-content-row {:is-col? is-col? + :align-content align-content + :on-change set-align-content}]]) + [:div {:class (stl/css :forth-row)} + [:& gap-section {:is-col? is-col? + :wrap-type wrap-type + :gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}] - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]]] + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]]] - :grid - [:div {:class (stl/css :grid-layout-menu)} - (when (= 1 (count ids)) - [:div {:class (stl/css :edit-grid-wrapper)} - [:& grid-edit-mode {:id (first ids)}] - [:button {:on-click handle-open-grid-help - :class (stl/css :help-button)} i/help-refactor]]) - [:div {:class (stl/css :row :first-row)} - [:div {:class (stl/css :direction-edit)} - [:div {:class (stl/css :direction)} - [:& direction-row-grid {:saved-dir saved-grid-dir - :on-change set-direction}]]] + :grid + [:div {:class (stl/css :grid-layout-menu)} + (when (= 1 (count ids)) + [:div {:class (stl/css :edit-grid-wrapper)} + [:& grid-edit-mode {:id (first ids)}] + [:button {:on-click handle-open-grid-help + :class (stl/css :help-button)} i/help-refactor]]) + [:div {:class (stl/css :row :first-row)} + [:div {:class (stl/css :direction-edit)} + [:div {:class (stl/css :direction)} + [:& direction-row-grid {:saved-dir saved-grid-dir + :on-change set-direction}]]] - [:& align-grid-row {:is-col? false - :align-items align-items-row - :set-align set-align-grid}] + [:& align-grid-row {:is-col? false + :align-items align-items-row + :set-align set-align-grid}] - [:& align-grid-row {:is-col? true - :align-items align-items-column - :set-align set-align-grid}]] + [:& align-grid-row {:is-col? true + :align-items align-items-column + :set-align set-align-grid}]] - [:div {:class (stl/css :row :grid-layout-align)} - [:& justify-grid-row {:is-col? true - :justify-items grid-justify-content-column - :set-justify set-justify-grid}] - [:& justify-grid-row {:is-col? false - :justify-items grid-justify-content-row - :set-justify set-justify-grid}]]] - nil)))] - - [:div.element-set - [:div.element-set-title - [:* - [:span "Layout"] - - (if ^boolean grid-enabled? - [:div.title-actions - [:div.layout-btns - [:button {:on-click set-flex - :class (dom/classnames - :active (= :flex layout-type))} "Flex"] - [:button {:on-click set-grid - :class (dom/classnames - :active (= :grid layout-type))} "Grid"]] - - (when (and (not multiple) (:layout values)) - [:button.remove-layout {:on-click on-remove-layout} i/minus])] - - [:div.title-actions - (if (and (not multiple) (:layout values)) - [:button.remove-layout {:on-click on-remove-layout} i/minus] - [:button.add-page {:data-value :flex - :on-click on-set-layout} i/close])])]] - - (when (:layout values) - (when (not= :multiple layout-type) - (case layout-type - :flex - - [:div.element-set-content.layout-menu - [:div.layout-row - [:div.direction-wrap.row-title "Direction"] - [:div.btn-wrapper - [:div.direction - [:& direction-row-flex {:on-change set-direction - :saved-dir saved-dir}]] - - [:div.wrap-type - [:& wrap-row {:wrap-type wrap-type - :on-click set-wrap}]]]] - - (when (= :wrap wrap-type) - [:div.layout-row - [:div.align-content.row-title "Content"] - [:div.btn-wrapper.align-content - [:& align-content-row {:is-col? is-col? - :align-content align-content - :on-change set-align-content}]]]) - - [:div.layout-row - [:div.align-items.row-title "Align"] - [:div.btn-wrapper - [:& align-row {:is-col? is-col? - :align-items align-items - :on-change set-align-items}]]] - - [:div.layout-row - [:div.justify-content.row-title "Justify"] - [:div.btn-wrapper.justify-content - [:& justify-content-row {:is-col? is-col? - :justify-content justify-content - :on-change set-justify-content}]]] - - [:& gap-section {:is-col? is-col? - :wrap-type wrap-type - :gap-selected? gap-selected? - :on-change set-gap - :gap-value (:layout-gap values)}] - - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]] - - :grid - - [:div.element-set-content.layout-menu - [:div.layout-row - [:div.direction-wrap.row-title "Direction"] - [:div.btn-wrapper - [:div.direction - [:* - (for [dir [:row :column]] - [:& direction-btn {:key (d/name dir) - :dir dir - :saved-dir saved-grid-dir - :on-click set-direction - :icon? true}])]] - - (when (= 1 (count ids)) - [:div.edit-mode - [:& grid-edit-mode {:id (first ids)}]])]] - - [:div.layout-row - [:div.align-items-grid.row-title "Items"] - [:div.btn-wrapper.align-grid-items - [:& align-grid-row {:is-col? false - :align-items align-items-row - :set-align set-align-grid}] - - [:& align-grid-row {:is-col? true - :align-items align-items-column - :set-align set-align-grid}]]] - - [:div.layout-row - [:div.jusfiy-content-grid.row-title "Content"] - [:div.btn-wrapper.align-grid-content - [:& justify-grid-row {:is-col? true - :justify-items grid-justify-content-column - :set-justify set-justify-grid}] - [:& justify-grid-row {:is-col? false - :justify-items grid-justify-content-row - :set-justify set-justify-grid}]]]] - - ;; Default if not grid or flex - nil)))]))) + [:div {:class (stl/css :row :grid-layout-align)} + [:& justify-grid-row {:is-col? true + :justify-items grid-justify-content-column + :set-justify set-justify-grid}] + [:& justify-grid-row {:is-col? false + :justify-items grid-justify-content-row + :set-justify set-justify-grid}]]] + nil)))])) (mf/defc grid-layout-edition {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]} [{:keys [ids values] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - - ;; Gap + (let [;; Gap gap-selected? (mf/use-state :none) saved-grid-dir (:layout-grid-dir values) set-direction (fn [dir] - (let [dir (if new-css-system (keyword dir) dir)] + (let [dir (keyword dir)] (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))) set-gap @@ -1650,9 +1047,9 @@ set-align-grid (mf/use-fn - (mf/deps ids new-css-system) + (mf/deps ids) (fn [value type] - (let [value (cond-> value new-css-system keyword)] + (let [value (keyword value)] (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-align-items value})) (st/emit! (dwsl/update-layout ids {:layout-justify-items value})))))) @@ -1664,9 +1061,9 @@ set-justify-grid (mf/use-fn - (mf/deps ids new-css-system) + (mf/deps ids) (fn [value type] - (let [value (cond-> value new-css-system keyword)] + (let [value (keyword value)] (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-justify-content value})) (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) @@ -1743,141 +1140,70 @@ (fn [] (st/emit! (dwge/locate-board (first ids)))))] - (if new-css-system - [:div {:class (stl/css :grid-layout-menu)} - [:div {:class (stl/css :row)} - [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"] - [:button {:on-click handle-open-grid-help - :class (stl/css :help-button)} i/help-refactor] - [:button {:class (stl/css :exit-btn) - :on-click #(st/emit! udw/clear-edition-mode)} - (tr "workspace.layout_grid.editor.options.exit")]] + [:div {:class (stl/css :grid-layout-menu)} + [:div {:class (stl/css :row)} + [:div {:class (stl/css :grid-layout-menu-title)} "GRID LAYOUT"] + [:button {:on-click handle-open-grid-help + :class (stl/css :help-button)} i/help-refactor] + [:button {:class (stl/css :exit-btn) + :on-click #(st/emit! udw/clear-edition-mode)} + (tr "workspace.layout_grid.editor.options.exit")]] - [:div {:class (stl/css :row :first-row)} - [:div {:class (stl/css :direction-edit)} - [:div {:class (stl/css :direction)} - [:& direction-row-grid {:saved-dir saved-grid-dir - :on-change set-direction}]]] + [:div {:class (stl/css :row :first-row)} + [:div {:class (stl/css :direction-edit)} + [:div {:class (stl/css :direction)} + [:& direction-row-grid {:saved-dir saved-grid-dir + :on-change set-direction}]]] - [:& align-grid-row {:is-col? false - :align-items align-items-row - :set-align set-align-grid}] + [:& align-grid-row {:is-col? false + :align-items align-items-row + :set-align set-align-grid}] - [:& align-grid-row {:is-col? true - :align-items align-items-column - :set-align set-align-grid}]] + [:& align-grid-row {:is-col? true + :align-items align-items-column + :set-align set-align-grid}]] - [:div {:class (stl/css :row :grid-layout-align)} - [:& justify-grid-row {:is-col? true - :justify-items grid-justify-content-column - :set-justify set-justify-grid}] - [:& justify-grid-row {:is-col? false - :justify-items grid-justify-content-row - :set-justify set-justify-grid}] + [:div {:class (stl/css :row :grid-layout-align)} + [:& justify-grid-row {:is-col? true + :justify-items grid-justify-content-column + :set-justify set-justify-grid}] + [:& justify-grid-row {:is-col? false + :justify-items grid-justify-content-row + :set-justify set-justify-grid}] - [:button {:on-click handle-locate-grid - :class (stl/css :locate-button)} - i/locate-refactor]] - [:div {:class (stl/css :row :grid-tracks-row)} - [:& grid-columns-row {:is-col? true - :expanded? @grid-columns-open? - :toggle toggle-columns-info - :column-values column-grid-values - :add-new-element add-new-element - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track - :on-select-track handle-select-track}] + [:button {:on-click handle-locate-grid + :class (stl/css :locate-button)} + i/locate-refactor]] + [:div {:class (stl/css :row :grid-tracks-row)} + [:& grid-columns-row {:is-col? true + :expanded? @grid-columns-open? + :toggle toggle-columns-info + :column-values column-grid-values + :add-new-element add-new-element + :set-column-value set-column-value + :set-column-type set-column-type + :remove-element remove-element + :reorder-track reorder-track + :hover-track hover-track + :on-select-track handle-select-track}] - [:& grid-columns-row {:is-col? false - :expanded? @grid-rows-open? - :toggle toggle-rows-info - :column-values rows-grid-values - :add-new-element add-new-element - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track - :on-select-track handle-select-track}]] - [:div {:class (stl/css :row)} - [:& gap-section {:gap-selected? gap-selected? - :on-change set-gap - :gap-value (:layout-gap values)}]] + [:& grid-columns-row {:is-col? false + :expanded? @grid-rows-open? + :toggle toggle-rows-info + :column-values rows-grid-values + :add-new-element add-new-element + :set-column-value set-column-value + :set-column-type set-column-type + :remove-element remove-element + :reorder-track reorder-track + :hover-track hover-track + :on-select-track handle-select-track}]] + [:div {:class (stl/css :row)} + [:& gap-section {:gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}]] - [:div {:class (stl/css :row :padding-section)} - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]]] - - [:div.element-set - [:div.element-set-title - [:span "Grid Layout"]] - - [:div.element-set-content.layout-menu - [:div.layout-row - [:div.direction-wrap.row-title "Direction"] - [:div.btn-wrapper - [:div.direction - (for [dir [:row :column]] - [:& direction-btn {:key (d/name dir) - :dir dir - :saved-dir saved-grid-dir - :on-click set-direction - :icon? true}])] - - (when (= 1 (count ids)) - [:div.edit-mode - [:& grid-edit-mode {:id (first ids)}]])]] - - [:div.layout-row - [:div.align-items-grid.row-title "Items"] - [:div.btn-wrapper.align-grid - [:& align-grid-row {:is-col? false - :align-items align-items-row - :set-align set-align-grid}] - - [:& align-grid-row {:is-col? true - :align-items align-items-column - :set-align set-align-grid}]]] - - [:div.layout-row - [:div.jusfiy-content-grid.row-title "Content"] - [:div.btn-wrapper.align-grid-content - [:& justify-grid-row {:is-col? true - :justify-items grid-justify-content-row - :set-justify set-justify-grid}] - [:& justify-grid-row {:is-col? false - :justify-items grid-justify-content-column - :set-justify set-justify-grid}]]] - [:& grid-columns-row {:is-col? true - :expanded? @grid-columns-open? - :toggle toggle-columns-info - :column-values column-grid-values - :add-new-element add-new-element - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track}] - - [:& grid-columns-row {:is-col? false - :expanded? @grid-rows-open? - :toggle toggle-rows-info - :column-values rows-grid-values - :add-new-element add-new-element - :set-column-value set-column-value - :set-column-type set-column-type - :remove-element remove-element - :reorder-track reorder-track - :hover-track hover-track}] - - [:& gap-section {:gap-selected? gap-selected? - :on-change set-gap - :gap-value (:layout-gap values)}] - - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]]]))) + [:div {:class (stl/css :row :padding-section)} + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 1bee7524d..cc51a740b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -174,7 +174,7 @@ .grid-layout-menu-title { flex: 1; font-size: $fs-11; - color: $df-primary; + color: var(--title-foreground-color-hover); } .edit-mode-btn { @@ -246,9 +246,6 @@ border-right: $s-1 solid var(--panel-background-color); } - .track-info-unit { - } - .track-info-unit-selector { border-radius: 0 $br-8 $br-8 0; width: $s-96; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 4162175b7..8a028b2ff 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -17,9 +17,8 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon get-layout-flex-icon-refactor]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -40,8 +39,7 @@ (mf/defc margin-section [{:keys [values change-margin-style on-margin-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - margin-type (or (:layout-item-margin-type values) :simple) + (let [margin-type (or (:layout-item-margin-type values) :simple) m1 (when (and (not (= :multiple (:layout-item-margin values))) (= (dm/get-in values [:layout-item-margin :m1]) (dm/get-in values [:layout-item-margin :m3]))) @@ -63,158 +61,99 @@ ;;on destroy component (select-margins false false false false)))) - (if new-css-system - [:div {:class (stl/css :margin-row)} - [:div {:class (stl/css :inputs-wrapper)} - (cond - (= margin-type :simple) - [:div {:class (stl/css :margin-simple)} - [:div {:class (stl/css :vertical-margin) - :title "Vertical margin"} - [:span {:class (stl/css :icon)} - i/margin-top-bottom-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :nillable true - :value m1 - :on-focus (fn [event] - (select-margins true false true false) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m1) - :on-blur #(select-margins false false false false)}]] + [:div {:class (stl/css :margin-row)} + [:div {:class (stl/css :inputs-wrapper)} + (cond + (= margin-type :simple) + [:div {:class (stl/css :margin-simple)} + [:div {:class (stl/css :vertical-margin) + :title "Vertical margin"} + [:span {:class (stl/css :icon)} + i/margin-top-bottom-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :nillable true + :value m1 + :on-focus (fn [event] + (select-margins true false true false) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m1) + :on-blur #(select-margins false false false false)}]] - [:div {:class (stl/css :horizontal-margin) - :title "Horizontal margin"} - [:span {:class (stl/css :icon)} - i/margin-left-right-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus (fn [event] - (select-margins false true false true) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m2) - :on-blur #(select-margins false false false false) - :nillable true - :value m2}]]] + [:div {:class (stl/css :horizontal-margin) + :title "Horizontal margin"} + [:span {:class (stl/css :icon)} + i/margin-left-right-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margins false true false true) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m2) + :on-blur #(select-margins false false false false) + :nillable true + :value m2}]]] - (= margin-type :multiple) - [:div {:class (stl/css :margin-multiple)} - [:div {:class (stl/css :top-margin) - :title "Top margin"} - [:span {:class (stl/css :icon)} - i/margin-top-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus (fn [event] - (select-margin :m1) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple :m1) - :on-blur #(select-margins false false false false) - :nillable true - :value (:m1 (:layout-item-margin values))}]] - [:div {:class (stl/css :right-margin) - :title "Right margin"} - [:span {:class (stl/css :icon)} - i/margin-right-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus (fn [event] - (select-margin :m2) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple :m2) - :on-blur #(select-margins false false false false) - :nillable true - :value (:m2 (:layout-item-margin values))}]] + (= margin-type :multiple) + [:div {:class (stl/css :margin-multiple)} + [:div {:class (stl/css :top-margin) + :title "Top margin"} + [:span {:class (stl/css :icon)} + i/margin-top-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m1) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m1) + :on-blur #(select-margins false false false false) + :nillable true + :value (:m1 (:layout-item-margin values))}]] + [:div {:class (stl/css :right-margin) + :title "Right margin"} + [:span {:class (stl/css :icon)} + i/margin-right-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m2) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m2) + :on-blur #(select-margins false false false false) + :nillable true + :value (:m2 (:layout-item-margin values))}]] - [:div {:class (stl/css :bottom-margin) - :title "Bottom margin"} - [:span {:class (stl/css :icon)} - i/margin-bottom-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus (fn [event] - (select-margin :m3) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple :m3) - :on-blur #(select-margins false false false false) - :nillable true - :value (:m3 (:layout-item-margin values))}]] - [:div {:class (stl/css :left-margin) - :title "Left margin"} - [:span {:class (stl/css :icon)} - i/margin-left-refactor] - [:> numeric-input* {:className (stl/css :numeric-input) - :placeholder "--" - :on-focus (fn [event] - (select-margin :m4) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple :m4) - :on-blur #(select-margins false false false false) - :nillable true - :value (:m4 (:layout-item-margin values))}]]])] - [:button {:class (stl/css-case :margin-mode true - :selected (= margin-type :multiple)) - :title "Margin - multiple" - :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} - i/margin-refactor]] - [:div.margin-row - (cond - (= margin-type :simple) - - [:div.margin-item-group - [:div.margin-item.tooltip.tooltip-bottom-left - {:alt "Vertical margin"} - [:span.icon i/auto-margin-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margins true false true false) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m1) - :on-blur #(select-margins false false false false) - :nillable true - :value m1}]] - - [:div.margin-item.tooltip.tooltip-bottom-left - {:alt "Horizontal margin"} - [:span.icon.rotated i/auto-margin-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margins false true false true) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m2) - :on-blur #(select-margins false false false false) - :nillable true - :value m2}]]] - - (= margin-type :multiple) - [:div.wrapper - (for [num [:m1 :m2 :m3 :m4]] - [:div.tooltip.tooltip-bottom - {:key (dm/str "margin-" (d/name num)) - :alt (case num - :m1 "Top" - :m2 "Right" - :m3 "Bottom" - :m4 "Left")} - [:div.input-element.auto - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margin num) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple num) - :on-blur #(select-margins false false false false) - :nillable true - :value (num (:layout-item-margin values))}]]])]) - - [:div.margin-item-icons - [:div.margin-item-icon.tooltip.tooltip-bottom-left - {:class (dom/classnames :selected (= margin-type :multiple)) - :alt "Margin - multiple" - :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} - i/auto-margin]]]))) + [:div {:class (stl/css :bottom-margin) + :title "Bottom margin"} + [:span {:class (stl/css :icon)} + i/margin-bottom-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m3) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m3) + :on-blur #(select-margins false false false false) + :nillable true + :value (:m3 (:layout-item-margin values))}]] + [:div {:class (stl/css :left-margin) + :title "Left margin"} + [:span {:class (stl/css :icon)} + i/margin-left-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m4) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m4) + :on-blur #(select-margins false false false false) + :nillable true + :value (:m4 (:layout-item-margin values))}]]])] + [:button {:class (stl/css-case :margin-mode true + :selected (= margin-type :multiple)) + :title "Margin - multiple" + :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} + i/margin-refactor]])) (mf/defc element-behaviour-horizontal [{:keys [auto? fill? layout-item-sizing on-change] :as props}] @@ -270,112 +209,46 @@ :id "behaviour-v-auto"}])]]) (mf/defc element-behaviour - [{:keys [auto? fill? layout-item-h-sizing layout-item-v-sizing on-change-behaviour-h-refactor on-change-behaviour-v-refactor on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system)] - - (if new-css-system - [:div {:class (stl/css-case :behaviour-menu true - :wrap (and fill? auto?))} - [:& element-behaviour-horizontal {:auto? auto? - :fill? fill? - :layout-item-sizing layout-item-h-sizing - :on-change on-change-behaviour-h-refactor}] - [:& element-behaviour-vertical {:auto? auto? - :fill? fill? - :layout-item-sizing layout-item-v-sizing - :on-change on-change-behaviour-v-refactor}]] - - [:div.btn-wrapper - {:class (when (and fill? auto?) "wrap")} - [:div.layout-behavior.horizontal - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fix width" - :class (dom/classnames :active (= layout-item-h-sizing :fix)) - :data-direction :h - :data-value :fix - :on-click on-change} - i/auto-fix-layout] - (when fill? - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Width 100%" - :class (dom/classnames :active (= layout-item-h-sizing :fill)) - :data-direction :h - :data-value :fill - :on-click on-change} - i/auto-fill]) - (when auto? - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fit content" - :class (dom/classnames :active (= layout-item-h-sizing :auto)) - :data-direction :h - :data-value :auto - :on-click on-change} - i/auto-hug])] - - [:div.layout-behavior - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fix height" - :class (dom/classnames :active (= layout-item-v-sizing :fix)) - :data-direction :v - :data-value :fix - :on-click on-change} - i/auto-fix-layout] - (when fill? - [:button.behavior-btn.tooltip.tooltip-bottom-left - {:alt "Height 100%" - :class (dom/classnames :active (= layout-item-v-sizing :fill)) - :data-direction :v - :data-value :fill - :on-click on-change} - i/auto-fill]) - (when auto? - [:button.behavior-btn.tooltip.tooltip-bottom-left - {:alt "Fit content" - :class (dom/classnames :active (= layout-item-v-sizing :auto)) - :data-direction :v - :data-value :auto - :on-click on-change} - i/auto-hug])]]))) + [{:keys [auto? + fill? + layout-item-h-sizing + layout-item-v-sizing + on-change-behaviour-h-refactor + on-change-behaviour-v-refactor] :as props}] + [:div {:class (stl/css-case :behaviour-menu true + :wrap (and fill? auto?))} + [:& element-behaviour-horizontal {:auto? auto? + :fill? fill? + :layout-item-sizing layout-item-h-sizing + :on-change on-change-behaviour-h-refactor}] + [:& element-behaviour-vertical {:auto? auto? + :fill? fill? + :layout-item-sizing layout-item-v-sizing + :on-change on-change-behaviour-v-refactor}]]) (mf/defc align-self-row [{:keys [is-col? align-self on-change] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - dir-v [:start :center :end #_:stretch #_:baseline]] - (if new-css-system - [:& radio-buttons {:selected (d/name align-self) - :on-change on-change - :name "flex-align-self"} - [:& radio-button {:value "start" - :icon (get-layout-flex-icon-refactor :align-self :start is-col?) - :title "Align self start" - :id "align-self-start"}] - [:& radio-button {:value "center" - :icon (get-layout-flex-icon-refactor :align-self :center is-col?) - :title "Align self center" - :id "align-self-center"}] - [:& radio-button {:value "end" - :icon (get-layout-flex-icon-refactor :align-self :end is-col?) - :title "Align self end" - :id "align-self-end"}]] - - [:div.align-self-style - (for [align dir-v] - [:button.align-self.tooltip.tooltip-bottom - {:class (dom/classnames :active (= align-self align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (dm/str "Align self " (d/name align)) - :data-value align - :on-click on-change - :key (str "align-self" align)} - (get-layout-flex-icon :align-self align is-col?)])]))) + [:& radio-buttons {:selected (d/name align-self) + :on-change on-change + :name "flex-align-self"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon :align-self :start is-col?) + :title "Align self start" + :id "align-self-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon :align-self :center is-col?) + :title "Align self center" + :id "align-self-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon :align-self :end is-col?) + :title "Align self end" + :id "align-self-end"}]]) (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]} [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent?] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) + (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents (mf/deref selection-parents-ref) is-absolute? (:layout-item-absolute values) @@ -408,17 +281,6 @@ "Layout element") set-align-self - (mf/use-fn - (mf/deps ids align-self) - (fn [event] - (let [value (-> (dom/get-current-target event) - (dom/get-data "value") - (d/read-string))] - (if (= align-self value) - (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil})) - (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))) - - set-align-self-refactor (mf/use-fn (mf/deps ids align-self) (fn [value] @@ -464,7 +326,7 @@ (mf/use-fn (mf/deps ids) (fn [value] - (let [value (if new-css-system (keyword value) value)] + (let [value (keyword value)] (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))))) @@ -472,7 +334,7 @@ (mf/use-fn (mf/deps ids) (fn [value] - (let [value (if new-css-system (keyword value) value)] + (let [value (keyword value)] (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))) ;; Size and position @@ -485,7 +347,7 @@ (mf/use-fn (mf/deps ids) (fn [value] - (let [value (if new-css-system (keyword value) value)] + (let [value (keyword value)] (when (= value :static) (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil}))) (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))) @@ -498,19 +360,18 @@ (fn [value] (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value}))))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-content? - :collapsed? (not open?) - :on-collapsed toggle-content - :title title - :class (stl/css-case :title-spacing-layout-element true - :title-spacing-empty (not has-content?))}]] - (when open? - [:div {:class (stl/css :flex-element-menu)} - (when (or is-layout-child? is-absolute?) - [:div {:class (stl/css :row)} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-content? + :collapsed? (not open?) + :on-collapsed toggle-content + :title title + :class (stl/css-case :title-spacing-layout-element true + :title-spacing-empty (not has-content?))}]] + (when open? + [:div {:class (stl/css :flex-element-menu)} + (when (or is-layout-child? is-absolute?) + [:div {:class (stl/css :row)} [:div {:class (stl/css :position-options)} [:& radio-buttons {:selected (if is-absolute? "absolute" "static") :on-change on-change-position @@ -535,187 +396,93 @@ :nillable true :value (:layout-item-z-index values)}]])]) + [:div {:class (stl/css :row)} + [:& element-behaviour {:fill? is-layout-child? + :auto? is-layout-container? + :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) + :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) + :on-change-behaviour-h-refactor on-change-behaviour-h + :on-change-behaviour-v-refactor on-change-behaviour-v + :on-change on-change-behaviour}]] + + (when (and is-layout-child? is-flex-parent?) [:div {:class (stl/css :row)} - [:& element-behaviour {:fill? is-layout-child? - :auto? is-layout-container? - :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) - :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) - :on-change-behaviour-h-refactor on-change-behaviour-h - :on-change-behaviour-v-refactor on-change-behaviour-v - :on-change on-change-behaviour}]] + [:& align-self-row {:is-col? is-col? + :align-self align-self + :on-changer set-align-self}]]) - (when (and is-layout-child? is-flex-parent?) - [:div {:class (stl/css :row)} - [:& align-self-row {:is-col? is-col? - :align-self align-self - :on-changer set-align-self-refactor}]]) - - (when is-layout-child? - [:div {:class (stl/css :row)} - [:& margin-section {:values values - :change-margin-style change-margin-style - :on-margin-change on-margin-change}]]) - - (when (or (= (:layout-item-h-sizing values) :fill) - (= (:layout-item-v-sizing values) :fill)) - [:div {:class (stl/css :row)} - [:div {:class (stl/css :advanced-options)} - (when (= (:layout-item-h-sizing values) :fill) - [:div {:class (stl/css :horizontal-fill)} - [:div {:class (stl/css :layout-item-min-w) - :title (tr "workspace.options.layout-item.layout-item-min-w")} - - [:span {:class (stl/css :icon-text)} - "MIN W"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-min-w) - :value (get values :layout-item-min-w) - :nillable true}]] - - [:div {:class (stl/css :layout-item-max-w) - :title (tr "workspace.options.layout-item.layout-item-max-w")} - [:span {:class (stl/css :icon-text)} - "MAX W"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-max-w) - :value (get values :layout-item-max-w) - :nillable true}]]]) - (when (= (:layout-item-v-sizing values) :fill) - [:div {:class (stl/css :vertical-fill)} - [:div {:class (stl/css :layout-item-min-h) - :title (tr "workspace.options.layout-item.layout-item-min-h")} - - [:span {:class (stl/css :icon-text)} - "MIN H"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-min-h) - :value (get values :layout-item-min-h) - :nillable true}]] - - [:div {:class (stl/css :layout-item-max-h) - :title (tr "workspace.options.layout-item.layout-item-max-h")} - - [:span {:class (stl/css :icon-text)} - "MAX H"] - [:> numeric-input* - {:className (stl/css :numeric-input) - :no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change :layout-item-max-h) - :value (get values :layout-item-max-h) - :nillable true}]]])]])])] - - - [:div.element-set - [:div.element-set-title - [:span (cond - (and is-layout-container? (not is-layout-child?)) - "Flex board" - - is-flex-parent? - "Flex element" - - is-grid-parent? - "Grid element" - - :else - "Layout element")]] - - [:div.element-set-content.layout-item-menu - (when (or is-layout-child? is-absolute?) - [:div.layout-row - [:div.row-title.sizing "Position"] - [:div.btn-wrapper - [:div.absolute - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Static" - :class (dom/classnames :active (not (:layout-item-absolute values))) - :on-click #(on-change-position :static)} - "Static"] - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Absolute" - :class (dom/classnames :active (and (:layout-item-absolute values) (not= :multiple (:layout-item-absolute values)))) - :on-click #(on-change-position :absolute)} - "Absolute"]] - - [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"} - i/layers - [:> numeric-input* - {:placeholder "--" - :on-focus #(dom/select-target %) - :on-change #(on-change-z-index %) - :nillable true - :value (:layout-item-z-index values)}]]]]) - - [:* - [:div.layout-row - [:div.row-title.sizing "Sizing"] - [:& element-behaviour {:fill? is-layout-child? - :auto? is-layout-container? - :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) - :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) - :on-change-behaviour-h-refactor on-change-behaviour-h - :on-change-behaviour-v-refactor on-change-behaviour-v - :on-change on-change-behaviour}]] - - (when (and is-layout-child? is-flex-parent?) - [:div.layout-row - [:div.row-title "Align"] - [:div.btn-wrapper - [:& align-self-row {:is-col? is-col? - :align-self align-self - :on-change set-align-self}]]]) - - (when is-layout-child? + (when is-layout-child? + [:div {:class (stl/css :row)} [:& margin-section {:values values :change-margin-style change-margin-style - :on-margin-change on-margin-change}]) + :on-margin-change on-margin-change}]]) - [:div.advanced-ops-body - [:div.input-wrapper - (for [item (cond-> [] - (= (:layout-item-h-sizing values) :fill) - (conj :layout-item-min-w :layout-item-max-w) + (when (or (= (:layout-item-h-sizing values) :fill) + (= (:layout-item-v-sizing values) :fill)) + [:div {:class (stl/css :row)} + [:div {:class (stl/css :advanced-options)} + (when (= (:layout-item-h-sizing values) :fill) + [:div {:class (stl/css :horizontal-fill)} + [:div {:class (stl/css :layout-item-min-w) + :title (tr "workspace.options.layout-item.layout-item-min-w")} - (= (:layout-item-v-sizing values) :fill) - (conj :layout-item-min-h :layout-item-max-h))] + [:span {:class (stl/css :icon-text)} + "MIN W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-w) + :value (get values :layout-item-min-w) + :nillable true}]] - [:div.tooltip.tooltip-bottom - {:key (d/name item) - :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) - :class (dom/classnames "maxH" (= item :layout-item-max-h) - "minH" (= item :layout-item-min-h) - "maxW" (= item :layout-item-max-w) - "minW" (= item :layout-item-min-w))} - [:div.input-element - {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} - [:> numeric-input* - {:no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-focus #(dom/select-target %) - :on-change (partial on-size-change item) - :value (get values item) - :nillable true}]]])]]]]]))) + [:div {:class (stl/css :layout-item-max-w) + :title (tr "workspace.options.layout-item.layout-item-max-w")} + [:span {:class (stl/css :icon-text)} + "MAX W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-w) + :value (get values :layout-item-max-w) + :nillable true}]]]) + (when (= (:layout-item-v-sizing values) :fill) + [:div {:class (stl/css :vertical-fill)} + [:div {:class (stl/css :layout-item-min-h) + :title (tr "workspace.options.layout-item.layout-item-min-h")} + + [:span {:class (stl/css :icon-text)} + "MIN H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-h) + :value (get values :layout-item-min-h) + :nillable true}]] + + [:div {:class (stl/css :layout-item-max-h) + :title (tr "workspace.options.layout-item.layout-item-max-h")} + + [:span {:class (stl/css :icon-text)} + "MAX H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-h) + :value (get values :layout-item-max-h) + :nillable true}]]])]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index 689966404..a88b10213 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -8,125 +8,132 @@ .element-set { margin: 0; - .element-title { - .title-spacing-layout-element { - margin: 0 0 $s-4 0; - } - .title-spacing-empty { - padding-left: $s-2; - } +} + +.title-spacing-layout-element { + margin: 0 0 $s-4 0; +} + +.title-spacing-empty { + padding-left: $s-2; +} + +.flex-element-menu { + @include flexColumn; + gap: $s-12; +} + +.behaviour-menu { + display: flex; + gap: $s-4; +} + +.horizontal-behaviour { + &.one-element { + width: $s-28; } - .flex-element-menu { - @include flexColumn; - gap: $s-12; + &.two-element { + width: $s-60; + } + &.three-element { + width: $s-92; + } +} - .behaviour-menu { - display: flex; - gap: $s-4; - .horizontal-behaviour { - &.one-element { - width: $s-28; - } - &.two-element { - width: $s-60; - } - &.three-element { - width: $s-92; - } - } - .vertical-behaviour { - .rotated { - transform: rotate(90deg); - } - &.one-element { - width: $s-28; - } - &.two-element { - width: $s-60; - } - &.three-element { - width: $s-92; - } - } - } +.vertical-behaviour { + .rotated { + transform: rotate(90deg); + } + &.one-element { + width: $s-28; + } + &.two-element { + width: $s-60; + } + &.three-element { + width: $s-92; + } +} - .z-index-wrapper { - @extend .input-element; - width: $s-60; - } +.z-index-wrapper { + @extend .input-element; + width: $s-60; +} - .row { - display: flex; - gap: $s-4; - } +.row { + display: flex; + gap: $s-4; +} - .position-options { - width: $s-188; - } +.position-options { + width: $s-188; +} - .margin-row { - display: flex; - align-items: flex-start; - gap: $s-4; - .margin-mode { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - &.selected { - background-color: var(--button-tertiary-background-color-active); - color: var(--button-tertiary-foreground-color-active); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } - } - } - .inputs-wrapper { - .margin-simple { - display: flex; - gap: $s-4; - .vertical-margin, - .horizontal-margin { - @extend .input-element; - width: $s-108; - } - } - .margin-multiple { - display: grid; - grid-template-columns: 1fr 1fr; - gap: $s-4; - .top-margin, - .bottom-margin, - .left-margin, - .right-margin { - @extend .input-element; - width: $s-108; - } - } - } - } +.margin-row { + display: flex; + align-items: flex-start; + gap: $s-4; +} - .advanced-options { - @include flexColumn; - .horizontal-fill, - .vertical-fill { - display: flex; - gap: $s-4; - .layout-item-min-w, - .layout-item-min-h, - .layout-item-max-w, - .layout-item-max-h { - @extend .input-element; - width: $s-108; - .icon-text { - justify-content: flex-start; - width: $s-80; - padding-top: $s-2; - } - } - } +.margin-mode { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + &.selected { + background-color: var(--button-tertiary-background-color-active); + color: var(--button-tertiary-foreground-color-active); + svg { + stroke: var(--button-tertiary-foreground-color-active); } } } + +.margin-simple { + display: flex; + gap: $s-4; + .vertical-margin, + .horizontal-margin { + @extend .input-element; + width: $s-108; + } +} + +.margin-multiple { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-4; +} + +.top-margin, +.bottom-margin, +.left-margin, +.right-margin { + @extend .input-element; + width: $s-108; +} + +.advanced-options { + @include flexColumn; +} + +.horizontal-fill, +.vertical-fill { + display: flex; + gap: $s-4; +} + +.layout-item-min-w, +.layout-item-min-h, +.layout-item-max-w, +.layout-item-max-h { + @extend .input-element; + width: $s-108; + .icon-text { + justify-content: flex-start; + width: $s-80; + padding-top: $s-2; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index fc408f592..0cc61833c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -21,7 +21,6 @@ [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -75,8 +74,7 @@ {::mf/wrap-props false ::mf/wrap [mf/memo]} [{:keys [ids ids-with-children values type all-types shape]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - options (if (= type :multiple) + (let [options (if (= type :multiple) (reduce #(union %1 %2) (map #(get type->options %) all-types)) (get type->options type)) @@ -193,16 +191,7 @@ :else :vert)) - on-orientation-clicked - (mf/use-fn - (mf/deps ids) - (fn [event] - (let [orientation (-> (dom/get-current-target event) - (dom/get-data "value") - (keyword))] - (st/emit! (udw/change-orientation ids orientation))))) - - on-orientation-change-refactor + on-orientation-change (mf/use-fn (mf/deps ids) (fn [orientation] @@ -348,30 +337,29 @@ ;; restore focus to the newly created numeric-input (let [radius-input (mf/ref-val radius-input-ref)] (dom/focus! radius-input))))) - (if new-css-system - [:div {:class (stl/css :element-set)} - (when (and (options :presets) - (or (nil? all-types) (= (count all-types) 1))) - [:div {:class (stl/css :presets)} - [:div {:class (stl/css-case :presets-wrapper true - :opened show-presets-dropdown?) - :on-click open-presets} - [:span {:class (stl/css :select-name)}(tr "workspace.options.size-presets")] - [:span {:class (stl/css :collapsed-icon)} i/arrow-refactor] + [:div {:class (stl/css :element-set)} + (when (and (options :presets) + (or (nil? all-types) (= (count all-types) 1))) + [:div {:class (stl/css :presets)} + [:div {:class (stl/css-case :presets-wrapper true + :opened show-presets-dropdown?) + :on-click open-presets} + [:span {:class (stl/css :select-name)} (tr "workspace.options.size-presets")] + [:span {:class (stl/css :collapsed-icon)} i/arrow-refactor] - [:& dropdown {:show show-presets-dropdown? - :on-close close-presets} - [:ul {:class (stl/css :custom-select-dropdown)} - (for [size-preset size-presets] - (if-not (:width size-preset) + [:& dropdown {:show show-presets-dropdown? + :on-close close-presets} + [:ul {:class (stl/css :custom-select-dropdown)} + (for [size-preset size-presets] + (if-not (:width size-preset) + [:li {:key (:name size-preset) + :class (stl/css-case :dropdown-element true + :disabled true)} + [:span {:class (stl/css :preset-name)} (:name size-preset)]] + + (let [preset-match (and (= (:width size-preset) (d/parse-integer (:width values) 0)) + (= (:height size-preset) (d/parse-integer (:height values) 0)))] [:li {:key (:name size-preset) - :class (stl/css-case :dropdown-element true - :disabled true)} - [:span {:class (stl/css :preset-name)} (:name size-preset)]] - - (let [preset-match (and (= (:width size-preset) (d/parse-integer (:width values) 0)) - (= (:height size-preset) (d/parse-integer (:height values) 0)))] - [:li {:key (:name size-preset) :class (stl/css-case :dropdown-element true :match preset-match) :data-width (:width size-preset) @@ -383,366 +371,189 @@ (when preset-match [:span {:class (stl/css :check-icon)} i/tick-refactor])])))]]] - [:& radio-buttons {:selected (or (d/name orientation) "") - :on-change on-orientation-change-refactor - :name "frame-otientation"} - [:& radio-button {:icon i/size-vertical-refactor - :value "vert" - :id "size-vertical"}] - [:& radio-button {:icon i/size-horizontal-refactor - :value "horiz" - :id "size-horizontal"}]]]) - (when (options :size) - [:div {:class (stl/css :size)} - [:div {:class (stl/css-case :width true - :disabled disabled-width-sizing?) - :title (tr "workspace.options.width")} - [:span {:class (stl/css :icon-text)} "W"] - [:> numeric-input* {:min 0.01 - :no-validate true - :placeholder "--" - :on-change on-width-change - :disabled disabled-width-sizing? - :className (stl/css :numeric-input) - :value (:width values)}]] - [:div {:class (stl/css-case :height true - :disabled disabled-height-sizing?) - :title (tr "workspace.options.height")} - [:span {:class (stl/css :icon-text)} "H"] - [:> numeric-input* {:min 0.01 - :no-validate true - :placeholder "--" - :on-change on-height-change - :disabled disabled-height-sizing? - :className (stl/css :numeric-input) - :value (:height values)}]] - [:button {:class (stl/css-case - :lock-size-btn true - :selected (true? proportion-lock) - :disabled (= proportion-lock :multiple)) - :on-click on-proportion-lock-change} - (if proportion-lock - i/lock-refactor - i/unlock-refactor)]]) - (when (options :position) - [:div {:class (stl/css :position)} - [:div {:class (stl/css-case :x-position true - :disabled disabled-position-x?) - :title (tr "workspace.options.x")} - [:span {:class (stl/css :icon-text)} "X"] - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-change on-pos-x-change - :disabled disabled-position-x? - :className (stl/css :numeric-input) - :value (:x values)}]] + [:& radio-buttons {:selected (or (d/name orientation) "") + :on-change on-orientation-change + :name "frame-otientation"} + [:& radio-button {:icon i/size-vertical-refactor + :value "vert" + :id "size-vertical"}] + [:& radio-button {:icon i/size-horizontal-refactor + :value "horiz" + :id "size-horizontal"}]]]) + (when (options :size) + [:div {:class (stl/css :size)} + [:div {:class (stl/css-case :width true + :disabled disabled-width-sizing?) + :title (tr "workspace.options.width")} + [:span {:class (stl/css :icon-text)} "W"] + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder "--" + :on-change on-width-change + :disabled disabled-width-sizing? + :className (stl/css :numeric-input) + :value (:width values)}]] + [:div {:class (stl/css-case :height true + :disabled disabled-height-sizing?) + :title (tr "workspace.options.height")} + [:span {:class (stl/css :icon-text)} "H"] + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder "--" + :on-change on-height-change + :disabled disabled-height-sizing? + :className (stl/css :numeric-input) + :value (:height values)}]] + [:button {:class (stl/css-case + :lock-size-btn true + :selected (true? proportion-lock) + :disabled (= proportion-lock :multiple)) + :on-click on-proportion-lock-change} + (if proportion-lock + i/lock-refactor + i/unlock-refactor)]]) + (when (options :position) + [:div {:class (stl/css :position)} + [:div {:class (stl/css-case :x-position true + :disabled disabled-position-x?) + :title (tr "workspace.options.x")} + [:span {:class (stl/css :icon-text)} "X"] + [:> numeric-input* {:no-validate true + :placeholder "--" + :on-change on-pos-x-change + :disabled disabled-position-x? + :className (stl/css :numeric-input) + :value (:x values)}]] - [:div {:class (stl/css-case :y-position true - :disabled disabled-position-y?) - :title (tr "workspace.options.y")} - [:span {:class (stl/css :icon-text)} "Y"] - [:> numeric-input* {:no-validate true - :placeholder "--" - :disabled disabled-position-y? - :on-change on-pos-y-change - :className (stl/css :numeric-input) - :value (:y values)}]]]) - (when (or (options :rotation) (options :radius)) - [:div {:class (stl/css :rotation-radius)} + [:div {:class (stl/css-case :y-position true + :disabled disabled-position-y?) + :title (tr "workspace.options.y")} + [:span {:class (stl/css :icon-text)} "Y"] + [:> numeric-input* {:no-validate true + :placeholder "--" + :disabled disabled-position-y? + :on-change on-pos-y-change + :className (stl/css :numeric-input) + :value (:y values)}]]]) + (when (or (options :rotation) (options :radius)) + [:div {:class (stl/css :rotation-radius)} - (when (options :rotation) - [:div {:class (stl/css :rotation) - :title (tr "workspace.options.rotation")} - [:span {:class (stl/css :icon)} i/rotation-refactor] - [:> numeric-input* - {:no-validate true - :min 0 - :max 359 - :data-wrap true - :placeholder "--" - :on-change on-rotation-change - :className (stl/css :numeric-input) - :value (:rotation values)}]]) - - (when (options :radius) - [:div {:class (stl/css :radius)} - [:div {:class (stl/css :radius-inputs)} - (cond - (= radius-mode :radius-1) - [:div {:class (stl/css :radius-1) - :title (tr "workspace.options.radius")} - [:span {:class (stl/css :icon)} i/corner-radius-refactor] - [:> numeric-input* - {:placeholder "Mixed" - :ref radius-input-ref - :min 0 - :on-change on-radius-1-change - :className (stl/css :numeric-input) - :value (:rx values)}]] - - @radius-multi? - [:div {:class (stl/css :radius-1) - :title (tr "workspace.options.radius")} - [:span {:class (stl/css :icon)} i/corner-radius-refactor] - [:input.input-text - {:type "number" - :placeholder "Mixed" - :min 0 - :on-change on-radius-multi-change - :className (stl/css :numeric-input) - :value (if all-equal? (:rx values) nil)}]] - - - (= radius-mode :radius-4) - [:div {:class (stl/css :radius-4)} - [:div {:class (stl/css :small-input) - :title (tr "workspace.options.radius-top-left")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r1-change - :className (stl/css :numeric-input) - :value (:r1 values)}]] - - [:div {:class (stl/css :small-input) - :title (tr "workspace.options.radius-top-right")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r2-change - :className (stl/css :numeric-input) - :value (:r2 values)}]] - - [:div {:class (stl/css :small-input) - :title (tr "workspace.options.radius-bottom-left")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r4-change - :className (stl/css :numeric-input) - :value (:r4 values)}]] - - [:div {:class (stl/css :small-input) - :title (tr "workspace.options.radius-bottom-right")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r3-change - :className (stl/css :numeric-input) - :value (:r3 values)}]] - ])] - [:button {:class (stl/css-case :radius-mode true - :selected (= radius-mode :radius-4)) - :title (if(= radius-mode :radius-4) - (tr "workspace.options.radius.all-corners") - (tr "workspace.options.radius.single-corners")) - :on-click toggle-radius-mode} - i/corner-radius-refactor]])]) - (when (or (options :clip-content) (options :show-in-viewer)) - [:div {:class (stl/css :clip-show)} - (when (options :clip-content) - [:div {:class (stl/css :clip-content)} - [:input {:type "checkbox" - :id "clip-content" - :ref clip-content-ref - :class (stl/css :clip-content-input) - :checked (not (:show-content values)) - :on-change on-change-clip-content}] - - [:label {:for "clip-content" - :title (tr "workspace.options.clip-content") - :class (stl/css-case :clip-content-label true - :selected (not (:show-content values)))} - [:span {:class (stl/css :icon)} - i/clip-content-refactor] - ]]) - (when (options :show-in-viewer) - [:div {:class (stl/css :clip-content)} - [:input {:type "checkbox" - :id "show-in-viewer" - :ref show-in-viewer-ref - :class (stl/css :clip-content-input) - :checked (not (:hide-in-viewer values)) - :on-change on-change-show-in-viewer}] - - [:label {:for "show-in-viewer" - :title (tr "workspace.options.show-in-viewer") - :class (stl/css-case :clip-content-label true - :selected (not (:hide-in-viewer values)))} - [:span {:class (stl/css :icon)} - i/play-refactor]]])])] - - [:* - [:div.element-set - [:div.element-set-content - - ;; FRAME PRESETS - (when (and (options :presets) - (or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected - [:div.row-flex ;; some frames and some non frames - [:div.presets.custom-select.flex-grow {:class (when show-presets-dropdown? "opened") - :on-click open-presets} - [:span (tr "workspace.options.size-presets")] - [:span.dropdown-button i/arrow-down] - [:& dropdown {:show show-presets-dropdown? - :on-close close-presets} - [:ul.custom-select-dropdown - (for [size-preset size-presets] - (if-not (:width size-preset) - [:li.dropdown-label {:key (:name size-preset)} - [:span (:name size-preset)]] - [:li {:key (:name size-preset) - :data-width (:width size-preset) - :data-height (:height size-preset) - :on-click on-preset-selected} - (:name size-preset) - [:span (:width size-preset) " x " (:height size-preset)]]))]]] - [:span.orientation-icon {:data-value :vert - :on-click on-orientation-clicked} i/size-vert] - [:span.orientation-icon {:data-value :horiz - :on-click on-orientation-clicked} i/size-horiz]]) - - ;; WIDTH & HEIGHT - (when (options :size) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.size")] - [:div.input-element.width {:title (tr "workspace.options.width")} - [:> numeric-input* {:min 0.01 - :no-validate true - :placeholder "--" - :on-change on-width-change - :disabled disabled-width-sizing? - :value (:width values)}]] - - [:div.input-element.height {:title (tr "workspace.options.height")} - [:> numeric-input* {:min 0.01 - :no-validate true - :placeholder "--" - :on-change on-height-change - :disabled disabled-height-sizing? - :value (:height values)}]] - - [:div.lock-size {:class (dom/classnames - :selected (true? proportion-lock) - :disabled (= proportion-lock :multiple)) - :on-click on-proportion-lock-change} - (if proportion-lock - i/lock - i/unlock)]]) - - ;; POSITION - (when (options :position) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.position")] - [:div.input-element.Xaxis {:title (tr "workspace.options.x")} - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-change on-pos-x-change - :disabled disabled-position-x? - :value (:x values)}]] - [:div.input-element.Yaxis {:title (tr "workspace.options.y")} - [:> numeric-input* {:no-validate true - :placeholder "--" - :disabled disabled-position-y? - :on-change on-pos-y-change - :value (:y values)}]]]) - - ;; ROTATION - (when (options :rotation) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.rotation")] - [:div.input-element.degrees {:title (tr "workspace.options.rotation")} - [:> numeric-input* - {:no-validate true - :min 0 - :max 359 - :data-wrap true - :placeholder "--" - :on-change on-rotation-change - :value (:rotation values)}]]]) - - ;; RADIUS - (when (options :radius) - [:div.row-flex - [:div.radius-options - [:div.radius-icon.tooltip.tooltip-bottom - {:class (dom/classnames - :selected (or (= radius-mode :radius-1) @radius-multi?)) - :alt (tr "workspace.options.radius.all-corners") - :on-click on-switch-to-radius-1} - i/radius-1] - [:div.radius-icon.tooltip.tooltip-bottom - {:class (dom/classnames - :selected (and (= radius-mode :radius-4) (not @radius-multi?))) - :alt (tr "workspace.options.radius.single-corners") - :on-click on-switch-to-radius-4} - i/radius-4]] + (when (options :rotation) + [:div {:class (stl/css :rotation) + :title (tr "workspace.options.rotation")} + [:span {:class (stl/css :icon)} i/rotation-refactor] + [:> numeric-input* + {:no-validate true + :min 0 + :max 359 + :data-wrap true + :placeholder "--" + :on-change on-rotation-change + :className (stl/css :numeric-input) + :value (:rotation values)}]]) + (when (options :radius) + [:div {:class (stl/css :radius)} + [:div {:class (stl/css :radius-inputs)} (cond (= radius-mode :radius-1) - [:div.input-element.mini {:title (tr "workspace.options.radius")} + [:div {:class (stl/css :radius-1) + :title (tr "workspace.options.radius")} + [:span {:class (stl/css :icon)} i/corner-radius-refactor] [:> numeric-input* - {:placeholder "--" + {:placeholder "Mixed" :ref radius-input-ref :min 0 :on-change on-radius-1-change + :className (stl/css :numeric-input) :value (:rx values)}]] @radius-multi? - [:div.input-element.mini {:title (tr "workspace.options.radius")} + [:div {:class (stl/css :radius-1) + :title (tr "workspace.options.radius")} + [:span {:class (stl/css :icon)} i/corner-radius-refactor] [:input.input-text {:type "number" - :placeholder "--" + :placeholder "Mixed" :min 0 :on-change on-radius-multi-change - :value ""}]] + :className (stl/css :numeric-input) + :value (if all-equal? (:rx values) nil)}]] + (= radius-mode :radius-4) - [:* - [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")} + [:div {:class (stl/css :radius-4)} + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-top-left")} [:> numeric-input* {:placeholder "--" :min 0 :on-change on-radius-r1-change + :className (stl/css :numeric-input) :value (:r1 values)}]] - [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")} + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-top-right")} [:> numeric-input* {:placeholder "--" :min 0 :on-change on-radius-r2-change + :className (stl/css :numeric-input) :value (:r2 values)}]] - [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r3-change - :value (:r3 values)}]] - - [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")} + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-bottom-left")} [:> numeric-input* {:placeholder "--" :min 0 :on-change on-radius-r4-change - :value (:r4 values)}]]])]) - (when (options :clip-content) - [:div.input-checkbox - [:input {:type "checkbox" - :id "clip-content" - :ref clip-content-ref - :checked (not (:show-content values)) - :on-change on-change-clip-content}] + :className (stl/css :numeric-input) + :value (:r4 values)}]] - [:label {:for "clip-content"} - (tr "workspace.options.clip-content")]]) - (when (options :show-in-viewer) - [:div.input-checkbox - [:input {:type "checkbox" - :id "show-in-viewer" - :ref show-in-viewer-ref - :checked (not (:hide-in-viewer values)) - :on-change on-change-show-in-viewer}] + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-bottom-right")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r3-change + :className (stl/css :numeric-input) + :value (:r3 values)}]]])] + [:button {:class (stl/css-case :radius-mode true + :selected (= radius-mode :radius-4)) + :title (if (= radius-mode :radius-4) + (tr "workspace.options.radius.all-corners") + (tr "workspace.options.radius.single-corners")) + :on-click toggle-radius-mode} + i/corner-radius-refactor]])]) + (when (or (options :clip-content) (options :show-in-viewer)) + [:div {:class (stl/css :clip-show)} + (when (options :clip-content) + [:div {:class (stl/css :clip-content)} + [:input {:type "checkbox" + :id "clip-content" + :ref clip-content-ref + :class (stl/css :clip-content-input) + :checked (not (:show-content values)) + :on-change on-change-clip-content}] - [:label {:for "show-in-viewer"} - (tr "workspace.options.show-in-viewer")]])]]]))) + [:label {:for "clip-content" + :title (tr "workspace.options.clip-content") + :class (stl/css-case :clip-content-label true + :selected (not (:show-content values)))} + [:span {:class (stl/css :icon)} + i/clip-content-refactor]]]) + (when (options :show-in-viewer) + [:div {:class (stl/css :clip-content)} + [:input {:type "checkbox" + :id "show-in-viewer" + :ref show-in-viewer-ref + :class (stl/css :clip-content-input) + :checked (not (:hide-in-viewer values)) + :on-change on-change-show-in-viewer}] + + [:label {:for "show-in-viewer" + :title (tr "workspace.options.show-in-viewer") + :class (stl/css-case :clip-content-label true + :selected (not (:hide-in-viewer values)))} + [:span {:class (stl/css :icon)} + i/play-refactor]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index b0a5cb1a6..f05c3e555 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -9,216 +9,235 @@ .element-set { @include flexColumn; margin-bottom: $s-8; - .presets { - display: flex; - align-items: flex-start; - gap: $s-4; - .presets-wrapper { - @extend .asset-element; - position: relative; - display: flex; - height: $s-32; - width: $s-188; - padding: $s-8; - border-radius: $br-8; - .select-name { - @include titleTipography; - display: flex; - justify-content: flex-start; - align-items: center; - flex-grow: 1; - cursor: pointer; - } - .collapsed-icon { - @include flexCenter; - cursor: pointer; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - transform: rotate(90deg); - } - } - .custom-select-dropdown { - @extend .dropdown-wrapper; - margin-top: $s-2; - width: $s-252; - .dropdown-element { - @extend .dropdown-element-base; - .name-wrapper { - display: flex; - gap: $s-8; - flex-grow: 1; - .preset-name { - color: var(--menu-foreground-color-rest); - } - .preset-size { - color: var(--menu-foreground-color-rest); - } - } +} - .check-icon { - @include flexCenter; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } - } +.presets { + display: flex; + align-items: flex-start; + gap: $s-4; +} - &.disabled { - pointer-events: none; - cursor: default; - .preset-name { - color: var(--menu-foreground-color); - } - } +.presets-wrapper { + @extend .asset-element; + position: relative; + display: flex; + height: $s-32; + width: $s-188; + padding: $s-8; + border-radius: $br-8; - &.match { - .name-wrapper .preset-name { - color: var(--menu-foreground-color-hover); - } - .check-icon svg { - stroke: var(--menu-foreground-color-hover); - } - } - - &:hover { - background-color: var(--menu-background-color-hover); - .name-wrapper .preset-name { - color: var(--menu-foreground-color-hover); - } - .check-icon svg { - stroke: var(--menu-foreground-color-hover); - } - } - } - } - &:hover { - .collapsed-icon svg { - stroke: var(--input-foreground-color-active); - } - } + .collapsed-icon { + @include flexCenter; + cursor: pointer; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + transform: rotate(90deg); } } - .size { - @include flexRow; - .height, - .width { - @extend .input-element; - width: $s-108; - .icon-text { - padding-top: $s-1; + + &:hover { + .collapsed-icon svg { + stroke: var(--input-foreground-color-active); + } + } +} + +.select-name { + @include titleTipography; + display: flex; + justify-content: flex-start; + align-items: center; + flex-grow: 1; + cursor: pointer; +} + +.custom-select-dropdown { + @extend .dropdown-wrapper; + margin-top: $s-2; + width: $s-252; + .dropdown-element { + @extend .dropdown-element-base; + .name-wrapper { + display: flex; + gap: $s-8; + flex-grow: 1; + .preset-name { + color: var(--menu-foreground-color-rest); } - &.disabled { - @extend .disabled-input; + .preset-size { + color: var(--menu-foreground-color-rest); } } - .lock-size-btn { - @extend .button-tertiary; - border-radius: $br-8; - height: $s-32; - width: $s-28; + + .check-icon { + @include flexCenter; svg { - @extend .button-icon; + @extend .button-icon-small; stroke: var(--icon-foreground); } - &.selected { - @extend .button-icon-selected; + } + + &.disabled { + pointer-events: none; + cursor: default; + .preset-name { + color: var(--menu-foreground-color); } } - } - .position { - @include flexRow; - .x-position, - .y-position { - @extend .input-element; - width: $s-108; - .icon-text { - padding-top: $s-1; + + &.match { + .name-wrapper .preset-name { + color: var(--menu-foreground-color-hover); } - &.disabled { - @extend .disabled-input; + .check-icon svg { + stroke: var(--menu-foreground-color-hover); } } - } - .rotation-radius { - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: $s-4; - .rotation { - @extend .input-element; - width: $s-108; - .icon-text { - padding-top: $s-1; + + &:hover { + background-color: var(--menu-background-color-hover); + .name-wrapper .preset-name { + color: var(--menu-foreground-color-hover); } - } - .radius { - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: $s-4; - .radius-inputs { - display: flex; - .radius-1 { - @extend .input-element; - width: $s-108; - } - .radius-4 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: $s-4; - .small-input { - @extend .input-element; - width: $s-52; - } - } - } - .radius-mode { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } - } - } - } - } - .clip-show { - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: $s-4; - .clip-content, - .show-in-viewer { - .clip-content-input { - display: none; - } - .clip-content-label { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - border-radius: $br-8; - .icon { - @include flexCenter; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - &.selected { - background-color: var(--button-tertiary-background-color-hover); - svg { - stroke: var(--button-tertiary-foreground-color-active); - } - } + .check-icon svg { + stroke: var(--menu-foreground-color-hover); + } + } + } +} + +.size { + @include flexRow; +} + +.height, +.width { + @extend .input-element; + width: $s-108; + .icon-text { + padding-top: $s-1; + } + &.disabled { + @extend .disabled-input; + } +} + +.lock-size-btn { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.selected { + @extend .button-icon-selected; + } +} + +.position { + @include flexRow; +} + +.x-position, +.y-position { + @extend .input-element; + width: $s-108; + .icon-text { + padding-top: $s-1; + } + &.disabled { + @extend .disabled-input; + } +} + +.rotation-radius { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; +} + +.rotation { + @extend .input-element; + width: $s-108; + .icon-text { + padding-top: $s-1; + } +} +.radius { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; +} + +.radius-inputs { + display: flex; +} + +.radius-1 { + @extend .input-element; + width: $s-108; +} + +.radius-4 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-4; + .small-input { + @extend .input-element; + width: $s-52; + } +} + +.radius-mode { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.selected { + background-color: var(--button-tertiary-background-color-hover); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } +} + +.clip-show { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; +} + +.clip-content, +.show-in-viewer { + .clip-content-input { + display: none; + } + .clip-content-label { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; + .icon { + @include flexCenter; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + &.selected { + background-color: var(--button-tertiary-background-color-hover); + svg { + stroke: var(--button-tertiary-foreground-color-active); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index a7246b249..874e4628a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -19,7 +19,6 @@ [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] @@ -51,8 +50,7 @@ (mf/defc shadow-entry [{:keys [ids index value on-reorder disable-drag? on-blur open-state-ref]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - basic-offset-x-ref (mf/use-ref nil) + (let [basic-offset-x-ref (mf/use-ref nil) basic-offset-y-ref (mf/use-ref nil) basic-blur-ref (mf/use-ref nil) @@ -61,9 +59,7 @@ adv-blur-ref (mf/use-ref nil) adv-spread-ref (mf/use-ref nil) - shadow-style (if new-css-system - (:style value) - (dm/str (:style value))) + shadow-style (:style value) shadow-id (:id value) @@ -143,9 +139,7 @@ (mf/use-fn (mf/deps ids index) (fn [event] - (let [value (if new-css-system - (keyword event) - (-> event dom/get-target-val d/read-string))] + (let [value (keyword event)] (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))) type-options [{:value "drop-shadow" :label (tr "workspace.options.shadow-options.drop-shadow")} @@ -155,187 +149,91 @@ manage-on-close #(st/emit! (dwu/commit-undo-transaction :color-row))] - [:div.shadow-option {:class (stl/css-case new-css-system - :global/shadow-option true - :shadow-element true - :dnd-over-top (= (:over dprops) :top) - :dnd-over-bot (= (:over dprops) :bot)) - :ref dref} - (if new-css-system - [:* - [:div {:class (stl/css :basic-options)} - [:div {:class (stl/css-case :shadow-info true - :hidden hidden?)} - [:button {:class (stl/css-case :more-options true - :selected open-shadow) - :on-click on-toggle-open-shadow} - i/menu-refactor] - [:div {:class (stl/css :type-select)} - [:& select - {:class (stl/css :shadow-type-select) - :default-value (d/name shadow-style) - :options type-options - :on-change on-type-change}]]] - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click toggle-visibility} - (if hidden? - i/hide-refactor - i/shown-refactor)] - [:button {:class (stl/css :action-btn) - :on-click on-remove-shadow} - i/remove-refactor]]] - (when open-shadow - [:& advanced-options {:class (stl/css :shadow-advanced-options) - :visible? open-shadow - :on-close on-toggle-open-shadow} - - [:div {:class (stl/css :first-row)} - [:div {:class (stl/css :offset-x-input) - :title (tr "workspace.options.shadow-options.offsetx")} - [:span {:class (stl/css :input-label)} - "X"] - [:> numeric-input* {:className (stl/css :numeric-input) - :ref adv-offset-x-ref - :no-validate true - :placeholder "--" - :on-change (update-attr index :offset-x basic-offset-x-ref) - :on-blur on-blur - :value (:offset-x value)}]] - - [:div {:class (stl/css :blur-input) - :title (tr "workspace.options.shadow-options.blur")} - [:span {:class (stl/css :input-label)} - (tr "workspace.options.shadow-options.blur")] - [:> numeric-input* {:ref adv-blur-ref - :className (stl/css :numeric-input) - :no-validate true - :placeholder "--" - :on-change (update-attr index :blur basic-blur-ref) - :on-blur on-blur - :min 0 - :value (:blur value)}]] - - [:div {:class (stl/css :spread-input) - :title (tr "workspace.options.shadow-options.spread")} - [:span {:class (stl/css :input-label)} - (tr "workspace.options.shadow-options.spread")] - [:> numeric-input* {:ref adv-spread-ref - :className (stl/css :numeric-input) - :no-validate true - :placeholder "--" - :on-change (update-attr index :spread) - :on-blur on-blur - :value (:spread value)}]]] - - [:div {:class (stl/css :second-row)} - [:div {:class (stl/css :offset-y-input) - :title (tr "workspace.options.shadow-options.offsety")} - [:span {:class (stl/css :input-label)} - "Y"] - [:> numeric-input* {:ref adv-offset-y-ref - :className (stl/css :numeric-input) - :no-validate true - :placeholder "--" - :on-change (update-attr index :offset-y basic-offset-y-ref) - :on-blur on-blur - :value (:offset-y value)}]] - [:& color-row {:color (if (string? (:color value)) - ;; Support for old format colors - {:color (:color value) :opacity (:opacity value)} - (:color value)) - :title (tr "workspace.options.shadow-options.color") - :disable-gradient true - :disable-image true - :on-change update-color - :on-detach detach-color - :on-open manage-on-open - :on-close manage-on-close}]]])] - - [:* - [:div.shadow-option-main {:style {:display (when open-shadow "none")}} - [:div.element-set-actions-button - {:on-click on-toggle-open-shadow} - i/actions] - - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :default-value shadow-style - :on-change on-type-change} - [:option {:value ":drop-shadow" - :selected (when (= shadow-style ":drop-shadow") "selected")} - (tr "workspace.options.shadow-options.drop-shadow")] - [:option {:value ":inner-shadow" - :selected (when (= shadow-style ":inner-shadow") "selected")} - (tr "workspace.options.shadow-options.inner-shadow")]] - - [:div.shadow-option-main-actions - [:div.element-set-actions-button {:on-click toggle-visibility} - (if hidden? i/eye-closed i/eye)] - [:div.element-set-actions-button - {:data-index index - :on-click on-remove-shadow} - i/minus]]] - - [:& advanced-options {:visible? open-shadow + [:div {:class (stl/css-case :global/shadow-option true + :shadow-element true + :dnd-over-top (= (:over dprops) :top) + :dnd-over-bot (= (:over dprops) :bot)) + :ref dref} + [:* + [:div {:class (stl/css :basic-options)} + [:div {:class (stl/css-case :shadow-info true + :hidden hidden?)} + [:button {:class (stl/css-case :more-options true + :selected open-shadow) + :on-click on-toggle-open-shadow} + i/menu-refactor] + [:div {:class (stl/css :type-select)} + [:& select + {:class (stl/css :shadow-type-select) + :default-value (d/name shadow-style) + :options type-options + :on-change on-type-change}]]] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click toggle-visibility} + (if hidden? + i/hide-refactor + i/shown-refactor)] + [:button {:class (stl/css :action-btn) + :on-click on-remove-shadow} + i/remove-refactor]]] + (when open-shadow + [:& advanced-options {:class (stl/css :shadow-advanced-options) + :visible? open-shadow :on-close on-toggle-open-shadow} - [:div.color-data - [:div.element-set-actions-button - {:on-click on-toggle-open-shadow} - i/actions] - [:select.input-select - {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :default-value shadow-style - :on-change on-type-change} - [:option {:value ":drop-shadow" - :selected (when (= shadow-style ":drop-shadow") "selected")} - (tr "workspace.options.shadow-options.drop-shadow")] - [:option {:value ":inner-shadow" - :selected (when (= shadow-style ":inner-shadow") "selected")} - (tr "workspace.options.shadow-options.inner-shadow")]]] - [:div.row-grid-2 - [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")} - [:> numeric-input* {:ref adv-offset-x-ref + [:div {:class (stl/css :first-row)} + [:div {:class (stl/css :offset-x-input) + :title (tr "workspace.options.shadow-options.offsetx")} + [:span {:class (stl/css :input-label)} + "X"] + [:> numeric-input* {:className (stl/css :numeric-input) + :ref adv-offset-x-ref :no-validate true :placeholder "--" :on-change (update-attr index :offset-x basic-offset-x-ref) :on-blur on-blur - :value (:offset-x value)}] - [:span.after (tr "workspace.options.shadow-options.offsetx")]] + :value (:offset-x value)}]] - [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")} - [:> numeric-input* {:ref adv-offset-y-ref - :no-validate true - :placeholder "--" - :on-change (update-attr index :offset-y basic-offset-y-ref) - :on-blur on-blur - :value (:offset-y value)}] - [:span.after (tr "workspace.options.shadow-options.offsety")]]] - - [:div.row-grid-2 - [:div.input-element {:title (tr "workspace.options.shadow-options.blur")} + [:div {:class (stl/css :blur-input) + :title (tr "workspace.options.shadow-options.blur")} + [:span {:class (stl/css :input-label)} + (tr "workspace.options.shadow-options.blur")] [:> numeric-input* {:ref adv-blur-ref + :className (stl/css :numeric-input) :no-validate true :placeholder "--" :on-change (update-attr index :blur basic-blur-ref) :on-blur on-blur :min 0 - :value (:blur value)}] - [:span.after (tr "workspace.options.shadow-options.blur")]] + :value (:blur value)}]] - [:div.input-element {:title (tr "workspace.options.shadow-options.spread")} + [:div {:class (stl/css :spread-input) + :title (tr "workspace.options.shadow-options.spread")} + [:span {:class (stl/css :input-label)} + (tr "workspace.options.shadow-options.spread")] [:> numeric-input* {:ref adv-spread-ref + :className (stl/css :numeric-input) :no-validate true :placeholder "--" :on-change (update-attr index :spread) :on-blur on-blur - :value (:spread value)}] - [:span.after (tr "workspace.options.shadow-options.spread")]]] + :value (:spread value)}]]] - [:div.color-row-wrap + [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :offset-y-input) + :title (tr "workspace.options.shadow-options.offsety")} + [:span {:class (stl/css :input-label)} + "Y"] + [:> numeric-input* {:ref adv-offset-y-ref + :className (stl/css :numeric-input) + :no-validate true + :placeholder "--" + :on-change (update-attr index :offset-y basic-offset-y-ref) + :on-blur on-blur + :value (:offset-y value)}]] [:& color-row {:color (if (string? (:color value)) - ;; Support for old format colors + ;; Support for old format colors {:color (:color value) :opacity (:opacity value)} (:color value)) :title (tr "workspace.options.shadow-options.color") @@ -344,13 +242,12 @@ :on-change update-color :on-detach detach-color :on-open manage-on-open - :on-close manage-on-close}]]]])])) + :on-close manage-on-close}]]])]])) (mf/defc shadow-menu {::mf/wrap-props false} [props] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - ids (unchecked-get props "ids") + (let [ids (unchecked-get props "ids") type (unchecked-get props "type") values (unchecked-get props "values") @@ -389,70 +286,35 @@ (mf/deps ids) #(st/emit! (dc/add-shadow ids (create-shadow))))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-shadows? - :collapsed? (not open?) - :on-collapsed toggle-content - :title (case type - :multiple (tr "workspace.options.shadow-options.title.multiple") - :group (tr "workspace.options.shadow-options.title.group") - (tr "workspace.options.shadow-options.title")) - :class (stl/css-case :title-spacing-shadow (not has-shadows?))} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-shadows? + :collapsed? (not open?) + :on-collapsed toggle-content + :title (case type + :multiple (tr "workspace.options.shadow-options.title.multiple") + :group (tr "workspace.options.shadow-options.title.group") + (tr "workspace.options.shadow-options.title")) + :class (stl/css-case :title-spacing-shadow (not has-shadows?))} - (when-not (= :multiple shadows) - [:button {:class (stl/css :add-shadow) - :on-click on-add-shadow} i/add-refactor])]] - - (when open? - (cond - (= :multiple shadows) - [:div {:class (stl/css :element-set-content)} - [:div {:class (stl/css :multiple-shadows)} - [:div {:class (stl/css :label)} (tr "settings.multiple")] - [:div {:class (stl/css :actions)} - [:button {:class (stl/css :action-btn) - :on-click on-remove-all} - i/remove-refactor]]]] - - (seq shadows) - [:& h/sortable-container {} - [:div {:class (stl/css :element-set-content)} - (for [[index value] (d/enumerate shadows)] - [:& shadow-entry - {:key (dm/str "shadow-" index) - :ids ids - :value value - :on-reorder handle-reorder - :disable-drag? disable-drag? - :on-blur on-blur - :index index - :open-state-ref open-state-ref}])]]))] - - [:div.element-set.shadow-options - [:div.element-set-title - [:span - (case type - :multiple (tr "workspace.options.shadow-options.title.multiple") - :group (tr "workspace.options.shadow-options.title.group") - (tr "workspace.options.shadow-options.title"))] - - (when-not (= :multiple shadows) - [:div.add-page {:on-click on-add-shadow} i/close])] + (when-not (= :multiple shadows) + [:button {:class (stl/css :add-shadow) + :on-click on-add-shadow} i/add-refactor])]] + (when open? (cond (= :multiple shadows) - [:div.element-set-content - [:div.element-set-options-group - [:div.element-set-label (tr "settings.multiple")] - [:div.element-set-actions - [:div.element-set-actions-button {:on-click on-remove-all} - i/minus]]]] + [:div {:class (stl/css :element-set-content)} + [:div {:class (stl/css :multiple-shadows)} + [:div {:class (stl/css :label)} (tr "settings.multiple")] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click on-remove-all} + i/remove-refactor]]]] (seq shadows) [:& h/sortable-container {} - [:div.element-set-content + [:div {:class (stl/css :element-set-content)} (for [[index value] (d/enumerate shadows)] [:& shadow-entry {:key (dm/str "shadow-" index) @@ -462,4 +324,4 @@ :disable-drag? disable-drag? :on-blur on-blur :index index - :open-state-ref open-state-ref}])]])]))) + :open-state-ref open-state-ref}])]]))])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index e5c27782a..a9ef8ebd2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -8,129 +8,127 @@ .element-set { margin: 0; - .element-title { - .title-spacing-shadow { - margin: 0; - padding-left: $s-2; +} + +.title-spacing-shadow { + margin: 0; + padding-left: $s-2; +} +.add-shadow { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.element-set-content { + margin-top: $s-4; + @include flexColumn; +} + +.multiple-shadows { + @include flexRow; +} + +.label { + @extend .mixed-bar; +} + +.actions { + @include flexRow; +} + +.action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.shadow-element { + @include flexColumn; +} + +.basic-options { + @include flexRow; +} + +.shadow-info { + display: flex; + align-items: center; + gap: $s-1; + width: $s-188; + .more-options { + @extend .button-secondary; + height: $s-32; + width: $s-28; + border-radius: $br-8 0 0 $br-8; + svg { + @extend .button-icon; } - .add-shadow { - @extend .button-tertiary; - height: $s-32; - width: $s-28; + &.selected { + background-color: var(--button-radio-background-color-active); svg { - @extend .button-icon; + stroke: var(--button-radio-foreground-color-active); } } } - .element-set-content { - margin-top: $s-4; - @include flexColumn; - .multiple-shadows { - @include flexRow; - .label { - @extend .mixed-bar; - } - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } + .type-select { + padding: 0; + border-radius: 0 $br-8 $br-8 0; + flex-grow: 1; + .shadow-type-select { + flex-grow: 1; + border-radius: 0 $br-8 $br-8 0; } - .shadow-element { - @include flexColumn; - .basic-options { - @include flexRow; - .shadow-info { - display: flex; - align-items: center; - gap: $s-1; - width: $s-188; - .more-options { - @extend .button-secondary; - height: $s-32; - width: $s-28; - border-radius: $br-8 0 0 $br-8; - svg { - @extend .button-icon; - } - &.selected { - background-color: var(--button-radio-background-color-active); - svg { - stroke: var(--button-radio-foreground-color-active); - } - } - } - .type-select { - padding: 0; - border-radius: 0 $br-8 $br-8 0; - flex-grow: 1; - .shadow-type-select { - flex-grow: 1; - border-radius: 0 $br-8 $br-8 0; - } - } + } - &.hidden { - .more-options { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - .type-select { - @include hiddenElement; - .shadow-type-select { - @include hiddenElement; - border: $s-1 solid var(--input-border-color-disabled); - } - } - } - } - .actions { - @include flexRow; - .action-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - } - .shadow-advanced-options { - @include flexColumn; - .first-row, - .second-row { - @include flexRow; - .offset-x-input, - .blur-input, - .spread-input, - .offset-y-input { - @extend .input-element; - width: $s-60; - min-width: $s-60; - align-items: baseline; - input { - width: $s-32; - } - } - .blur-input, - .spread-input { - width: $s-92; - .input-label { - width: $s-44; - } - } - .spread-input { - gap: $s-8; - } - } + &.hidden { + .more-options { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); + } + .type-select { + @include hiddenElement; + .shadow-type-select { + @include hiddenElement; + border: $s-1 solid var(--input-border-color-disabled); } } } } + +.shadow-advanced-options { + @include flexColumn; +} + +.first-row, +.second-row { + @include flexRow; + .offset-x-input, + .blur-input, + .spread-input, + .offset-y-input { + @extend .input-element; + width: $s-60; + min-width: $s-60; + align-items: baseline; + input { + width: $s-32; + } + } + .blur-input, + .spread-input { + width: $s-92; + .input-label { + width: $s-44; + } + } + .spread-input { + gap: $s-8; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 90d4d9ac3..093434da9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -13,7 +13,6 @@ [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]] @@ -38,8 +37,7 @@ (mf/defc stroke-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "show-caps"]))]} [{:keys [ids type values show-caps disable-stroke-style] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - label (case type + (let [label (case type :multiple (tr "workspace.options.selection-stroke") :group (tr "workspace.options.group-stroke") (tr "workspace.options.stroke")) @@ -53,27 +51,15 @@ strokes (:strokes values) has-strokes? (or (= :multiple strokes) (some? (seq strokes))) - handle-change-stroke-color - (mf/use-fn - (mf/deps ids) - (fn [index] - (fn [color] - (st/emit! (dc/change-stroke ids color index))))) - on-color-change-refactor + on-color-change (mf/use-fn (mf/deps ids) (fn [index color] (st/emit! (dc/change-stroke ids color index)))) - handle-remove - (mf/use-fn - (mf/deps ids) - (fn [index] - (fn [] - (st/emit! (dc/remove-stroke ids index))))) - on-remove-refactor + on-remove (mf/use-fn (mf/deps ids) (fn [index] @@ -85,16 +71,7 @@ (fn [_] (st/emit! (dc/remove-all-strokes ids)))) - handle-detach - (mf/use-fn - (mf/deps ids) - (fn [index] - (fn [color] - (let [color (-> color - (assoc :id nil :file-id nil))] - (st/emit! (dc/change-stroke ids color index)))))) - - on-color-detach-refactor + on-color-detach (mf/use-fn (mf/deps ids) (fn [index color] @@ -110,42 +87,19 @@ (st/emit! (dc/reorder-strokes ids index new-index))))) on-stroke-style-change - (fn [index] - (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value) - (d/read-string))] - (st/emit! (dc/change-stroke ids {:stroke-style value} index))))) - - on-stroke-style-change-refactor (mf/use-fn (mf/deps ids) (fn [index value] (st/emit! (dc/change-stroke ids {:stroke-style value} index)))) - on-stroke-alignment-change - (fn [index] - (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value) - (d/read-string))] - (when-not (str/empty? value) - (st/emit! (dc/change-stroke ids {:stroke-alignment value} index)))))) - - on-stroke-alignment-change-refactor (fn [index value] (when-not (str/empty? value) (st/emit! (dc/change-stroke ids {:stroke-alignment value} index)))) - on-stroke-width-change - (fn [index] - (fn [value] - (when-not (str/empty? value) - (st/emit! (dc/change-stroke ids {:stroke-width value} index))))) - on-stroke-width-change-refactor + on-stroke-width-change (fn [index value] (when-not (str/empty? value) (st/emit! (dc/change-stroke ids {:stroke-width value} index)))) @@ -207,70 +161,27 @@ on-blur (fn [_] (reset! disable-drag false))] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? has-strokes? - :collapsed? (not open?) - :on-collapsed toggle-content - :title label - :class (stl/css-case :title-spacing-stroke (not has-strokes?))} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? has-strokes? + :collapsed? (not open?) + :on-collapsed toggle-content + :title label + :class (stl/css-case :title-spacing-stroke (not has-strokes?))} - [:button {:class (stl/css :add-stroke) - :on-click on-add-stroke} i/add-refactor]]] - (when open? - [:div {:class (stl/css-case :element-content true - :empty-content (not has-strokes?))} - (cond - (= :multiple strokes) - [:div {:class (stl/css :element-set-options-group)} - [:div {:class (stl/css :group-label)} - (tr "settings.multiple")] - [:button {:on-click handle-remove-all - :class (stl/css :remove-btn)} - i/remove-refactor]] - (seq strokes) - [:& h/sortable-container {} - (for [[index value] (d/enumerate (:strokes values []))] - [:& stroke-row {:key (dm/str "stroke-" index) - :stroke value - :title (tr "workspace.options.stroke-color") - :index index - :show-caps show-caps - :on-color-change on-color-change-refactor - :on-color-detach on-color-detach-refactor - :on-stroke-width-change on-stroke-width-change-refactor - :on-stroke-style-change on-stroke-style-change-refactor - :on-stroke-alignment-change on-stroke-alignment-change-refactor - :open-caps-select open-caps-select - :close-caps-select close-caps-select - :on-stroke-cap-start-change on-stroke-cap-start-change - :on-stroke-cap-end-change on-stroke-cap-end-change - :on-stroke-cap-switch on-stroke-cap-switch - :on-remove on-remove-refactor - :on-reorder (handle-reorder index) - :disable-drag disable-drag - :on-focus on-focus - :select-on-focus (not @disable-drag) - :on-blur on-blur - :disable-stroke-style disable-stroke-style}])])])] - - - [:div.element-set - [:div.element-set-title - [:span label] - [:div.add-page {:on-click on-add-stroke} i/close]] - - [:div.element-set-content + [:button {:class (stl/css :add-stroke) + :on-click on-add-stroke} i/add-refactor]]] + (when open? + [:div {:class (stl/css-case :element-content true + :empty-content (not has-strokes?))} (cond (= :multiple strokes) - [:div.element-set-options-group - [:div.element-set-label (tr "settings.multiple")] - [:div.element-set-actions - [:div.element-set-actions-button {:on-click handle-remove-all} - i/minus]]] - - + [:div {:class (stl/css :element-set-options-group)} + [:div {:class (stl/css :group-label)} + (tr "settings.multiple")] + [:button {:on-click handle-remove-all + :class (stl/css :remove-btn)} + i/remove-refactor]] (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] @@ -279,8 +190,8 @@ :title (tr "workspace.options.stroke-color") :index index :show-caps show-caps - :on-color-change handle-change-stroke-color - :on-color-detach handle-detach + :on-color-change on-color-change + :on-color-detach on-color-detach :on-stroke-width-change on-stroke-width-change :on-stroke-style-change on-stroke-style-change :on-stroke-alignment-change on-stroke-alignment-change @@ -289,10 +200,10 @@ :on-stroke-cap-start-change on-stroke-cap-start-change :on-stroke-cap-end-change on-stroke-cap-end-change :on-stroke-cap-switch on-stroke-cap-switch - :on-remove handle-remove + :on-remove on-remove :on-reorder (handle-reorder index) :disable-drag disable-drag :on-focus on-focus :select-on-focus (not @disable-drag) :on-blur on-blur - :disable-stroke-style disable-stroke-style}])])]]))) + :disable-stroke-style disable-stroke-style}])])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index 252334692..53f6af64e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -8,43 +8,48 @@ .element-set { margin: 0; - .element-title { - margin: 0; - .title-spacing-stroke { - padding-left: $s-2; - margin: 0; - } - .add-stroke { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } +} - .element-content { - display: flex; - flex-direction: column; - gap: $s-12; - margin: $s-4 0 $s-8 0; - .element-set-options-group { - @include flexRow; - .group-label { - @extend .mixed-bar; - } - .remove-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - &.empty-content { - margin: 0; - } +.element-title { + margin: 0; +} + +.title-spacing-stroke { + padding-left: $s-2; + margin: 0; +} +.add-stroke { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.element-content { + display: flex; + flex-direction: column; + gap: $s-12; + margin: $s-4 0 $s-8 0; + &.empty-content { + margin: 0; + } +} + +.element-set-options-group { + @include flexRow; +} + +.group-label { + @extend .mixed-bar; +} + +.remove-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index 792b83f94..2092e5510 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -11,16 +11,13 @@ [app.main.data.workspace.changes :as dch] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] - [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - handle-change + (let [handle-change (mf/use-fn (mf/deps attr on-change) (fn [event] @@ -33,56 +30,31 @@ (on-delete attr))) label (->> attr last d/name)] - (if new-css-system - [:* - (if (string? value) - [:div {:class (stl/css :attr-content)} - [:span {:class (stl/css :attr-name)} label] - [:div {:class (stl/css :attr-input)} - [:input {:value value - :class "input-text" - :on-change handle-change}]] - [:div {:class (stl/css :attr-actions)} - [:button {:class (stl/css :attr-action-btn) - :on-click handle-delete} - i/remove-refactor]]] - [:div {:class (stl/css :attr-nested-content)} - [:div {:class (stl/css :attr-title)} - (str (d/name (last attr)))] - (for [[key value] value] - [:div {:class (stl/css :attr-row) :key key} - [:& attribute-value {:key key - :attr (conj attr key) - :value value - :on-change on-change - :on-delete on-delete}]])])] - [:div.element-set-content - (if (string? value) - [:div.row-flex.row-flex-removable - [:& input-row {:label label - :type :text - :class "large" - :value (str value) - :on-change handle-change}] - [:div.element-set-actions - [:div.element-set-actions-button {:on-click handle-delete} - i/minus]]] - - [:* - [:div.element-set-title - {:style {:border-bottom "1px solid #444" :margin-bottom "0.5rem"}} - [:span (str (d/name (last attr)))]] - - (for [[key value] value] - [:& attribute-value {:key key - :attr (conj attr key) - :value value - :on-change on-change - :on-delete on-delete}])])]))) + [:* + (if (string? value) + [:div {:class (stl/css :attr-content)} + [:span {:class (stl/css :attr-name)} label] + [:div {:class (stl/css :attr-input)} + [:input {:value value + :class "input-text" + :on-change handle-change}]] + [:div {:class (stl/css :attr-actions)} + [:button {:class (stl/css :attr-action-btn) + :on-click handle-delete} + i/remove-refactor]]] + [:div {:class (stl/css :attr-nested-content)} + [:div {:class (stl/css :attr-title)} + (str (d/name (last attr)))] + (for [[key value] value] + [:div {:class (stl/css :attr-row) :key key} + [:& attribute-value {:key key + :attr (conj attr key) + :value value + :on-change on-change + :on-delete on-delete}]])])])) (mf/defc svg-attrs-menu [{:keys [ids values]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - state* (mf/use-state true) + (let [state* (mf/use-state true) open? (deref state*) attrs (:svg-attrs values) has-attributes? (or (= :multiple attrs) (some? (seq attrs))) @@ -112,30 +84,18 @@ (st/emit! (dch/update-shapes ids update-fn)))))] (when-not (empty? attrs) - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-set-title)} - [:& title-bar {:collapsable? has-attributes? - :collapsed? (not open?) - :on-collapsed toggle-content - :title (tr "workspace.sidebar.options.svg-attrs.title") - :class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]] - (when open? - [:div {:class (stl/css :element-set-content)} + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-set-title)} + [:& title-bar {:collapsable? has-attributes? + :collapsed? (not open?) + :on-collapsed toggle-content + :title (tr "workspace.sidebar.options.svg-attrs.title") + :class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]] + (when open? + [:div {:class (stl/css :element-set-content)} (for [[attr-key attr-value] attrs] [:& attribute-value {:key attr-key :attr [attr-key] :value attr-value :on-change handle-change - :on-delete handle-delete}])])] - - [:div.element-set - [:div.element-set-title - [:span (tr "workspace.sidebar.options.svg-attrs.title")]] - - (for [[attr-key attr-value] attrs] - [:& attribute-value {:key attr-key - :attr [attr-key] - :value attr-value - :on-change handle-change - :on-delete handle-delete}])])))) + :on-delete handle-delete}])])]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 5926c782b..536f589c9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -8,41 +8,49 @@ .element-set { margin: 0; - .title-spacing-svg-attrs { - padding-left: $s-2; - margin: 0; - } - .element-set-content { - @include flexColumn; - margin: $s-4 0 0 0; - .attr-content { - display: flex; - gap: $s-4; - .attr-name { - @include titleTipography; - @include twoLineTextEllipsis; - width: $s-88; - margin: auto $s-4; - margin-right: 0; - display: inline-block; - } - .attr-input { - @extend .input-element; - width: $s-124; - } - .attr-actions { - display: flex; - gap: $s-4; - .attr-action-btn { - @extend .button-tertiary; - width: $s-28; - height: $s-32; - svg { - @extend .button-icon; - } - } - } - } +} + +.title-spacing-svg-attrs { + padding-left: $s-2; + margin: 0; +} + +.element-set-content { + @include flexColumn; + margin: $s-4 0 0 0; +} + +.attr-content { + display: flex; + gap: $s-4; +} + +.attr-name { + @include titleTipography; + @include twoLineTextEllipsis; + width: $s-88; + margin: auto $s-4; + margin-right: 0; + display: inline-block; + color: var(--title-foreground-color); +} + +.attr-input { + @extend .input-element; + width: $s-124; +} + +.attr-actions { + display: flex; + gap: $s-4; +} + +.attr-action-btn { + @extend .button-tertiary; + width: $s-28; + height: $s-32; + svg { + @extend .button-icon; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 8e393ae2d..913630f04 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -30,181 +30,101 @@ (mf/defc text-align-options [{:keys [values on-change on-blur] :as props}] (let [{:keys [text-align]} values - new-css-system (mf/use-ctx ctx/new-css-system) - handle-change (mf/use-fn + (mf/deps on-blur) (fn [value] - (let [new-align (if new-css-system - value - (-> (dom/get-current-target value) - (dom/get-data "value")))] - (on-change {:text-align new-align}) - (when (some? on-blur) (on-blur)))))] + (on-change {:text-align value}) + (when (some? on-blur) (on-blur))))] ;; --- Align - (if new-css-system - [:div {:class (stl/css :align-options)} - [:& radio-buttons {:selected text-align - :on-change handle-change - :name "align-text-options"} - [:& radio-button {:value "left" - :id "text-align-left" - :title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left)) - :icon i/text-align-left-refactor}] - [:& radio-button {:value "center" - :id "text-align-center" - :title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center)) - :icon i/text-align-center-refactor}] - [:& radio-button {:value "right" - :id "text-align-right" - :title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right)) - :icon i/text-align-right-refactor}] - [:& radio-button {:value "justify" - :id "text-align-justify" - :title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify)) - :icon i/text-justify-refactor}]]] - [:div.align-icons - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left)) - :class (dom/classnames :current (= "left" text-align)) - :data-value "left" - :on-click handle-change} - i/text-align-left] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center)) - :class (dom/classnames :current (= "center" text-align)) - :data-value "center" - :on-click handle-change} - i/text-align-center] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right)) - :class (dom/classnames :current (= "right" text-align)) - :data-value "right" - :on-click handle-change} - i/text-align-right] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify)) - :class (dom/classnames :current (= "justify" text-align)) - :data-value "justify" - :on-click handle-change} - i/text-align-justify]]))) + [:div {:class (stl/css :align-options)} + [:& radio-buttons {:selected text-align + :on-change handle-change + :name "align-text-options"} + [:& radio-button {:value "left" + :id "text-align-left" + :title (tr "workspace.options.text-options.text-align-left" (sc/get-tooltip :text-align-left)) + :icon i/text-align-left-refactor}] + [:& radio-button {:value "center" + :id "text-align-center" + :title (tr "workspace.options.text-options.text-align-center" (sc/get-tooltip :text-align-center)) + :icon i/text-align-center-refactor}] + [:& radio-button {:value "right" + :id "text-align-right" + :title (tr "workspace.options.text-options.text-align-right" (sc/get-tooltip :text-align-right)) + :icon i/text-align-right-refactor}] + [:& radio-button {:value "justify" + :id "text-align-justify" + :title (tr "workspace.options.text-options.text-align-justify" (sc/get-tooltip :text-align-justify)) + :icon i/text-justify-refactor}]]])) (mf/defc text-direction-options [{:keys [values on-change on-blur] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - direction (:text-direction values) + (let [direction (:text-direction values) handle-change (mf/use-fn (mf/deps direction) (fn [value] - (let [val (if new-css-system - value - (-> (dom/get-current-target value) - (dom/get-data "value"))) - dir (if (= val direction) + (let [dir (if (= value direction) "none" - val)] + value)] (on-change {:text-direction dir}) (when (some? on-blur) (on-blur)))))] - (if new-css-system - [:div {:class (stl/css :text-direction-options)} - [:& radio-buttons {:selected direction - :on-change handle-change - :name "text-direction-options"} - [:& radio-button {:value "ltr" - :type "checkbox" - :id "ltr-text-direction" - :title (tr "workspace.options.text-options.direction-ltr") - :icon i/text-ltr-refactor}] - [:& radio-button {:value "rtl" - :type "checkbox" - :id "rtl-text-direction" - :title (tr "workspace.options.text-options.direction-rtl") - :icon i/text-rtl-refactor}]]] - ;; --- Align - [:div.align-icons - [:span.tooltip.tooltip-bottom-left - {:alt (tr "workspace.options.text-options.direction-ltr") - :class (dom/classnames :current (= "ltr" direction)) - :data-value "ltr" - :on-click handle-change} - i/text-direction-ltr] - [:span.tooltip.tooltip-bottom-left - {:alt (tr "workspace.options.text-options.direction-rtl") - :class (dom/classnames :current (= "rtl" direction)) - :data-value "rtl" - :on-click handle-change} - i/text-direction-rtl]]))) + [:div {:class (stl/css :text-direction-options)} + [:& radio-buttons {:selected direction + :on-change handle-change + :name "text-direction-options"} + [:& radio-button {:value "ltr" + :type "checkbox" + :id "ltr-text-direction" + :title (tr "workspace.options.text-options.direction-ltr") + :icon i/text-ltr-refactor}] + [:& radio-button {:value "rtl" + :type "checkbox" + :id "rtl-text-direction" + :title (tr "workspace.options.text-options.direction-rtl") + :icon i/text-rtl-refactor}]]])) (mf/defc vertical-align [{:keys [values on-change on-blur] :as props}] (let [{:keys [vertical-align]} values - new-css-system (mf/use-ctx ctx/new-css-system) vertical-align (or vertical-align "top") handle-change (mf/use-fn + (mf/deps on-blur) (fn [value] - (let [new-align (if new-css-system - value - (-> (dom/get-current-target value) - (dom/get-data "value")))] - (on-change {:vertical-align new-align}) - (when (some? on-blur) (on-blur)))))] + (on-change {:vertical-align value}) + (when (some? on-blur) (on-blur))))] - (if new-css-system - [:div {:class (stl/css :vertical-align-options)} - [:& radio-buttons {:selected vertical-align - :on-change handle-change - :name "vertical-align-text-options"} - [:& radio-button {:value "top" - :id "vertical-text-align-top" - :title (tr "workspace.options.text-options.align-top") - :icon i/text-top-refactor}] - [:& radio-button {:value "center" - :id "vertical-text-align-center" - :title (tr "workspace.options.text-options.align-middle") - :icon i/text-middle-refactor}] - [:& radio-button {:value "bottom" - :id "vertical-text-align-bottom" - :title (tr "workspace.options.text-options.align-bottom") - :icon i/text-bottom-refactor}]]] - [:div.align-icons - [:span.tooltip.tooltip-bottom-left - {:alt (tr "workspace.options.text-options.align-top") - :class (dom/classnames :current (= "top" vertical-align)) - :data-value "top" - :on-click handle-change} - i/align-top] - [:span.tooltip.tooltip-bottom-left - {:alt (tr "workspace.options.text-options.align-middle") - :class (dom/classnames :current (= "center" vertical-align)) - :data-value "center" - :on-click handle-change} - i/align-middle] - [:span.tooltip.tooltip-bottom-left - {:alt (tr "workspace.options.text-options.align-bottom") - :class (dom/classnames :current (= "bottom" vertical-align)) - :data-value "bottom" - :on-click handle-change} - i/align-bottom]]))) + [:div {:class (stl/css :vertical-align-options)} + [:& radio-buttons {:selected vertical-align + :on-change handle-change + :name "vertical-align-text-options"} + [:& radio-button {:value "top" + :id "vertical-text-align-top" + :title (tr "workspace.options.text-options.align-top") + :icon i/text-top-refactor}] + [:& radio-button {:value "center" + :id "vertical-text-align-center" + :title (tr "workspace.options.text-options.align-middle") + :icon i/text-middle-refactor}] + [:& radio-button {:value "bottom" + :id "vertical-text-align-bottom" + :title (tr "workspace.options.text-options.align-bottom") + :icon i/text-bottom-refactor}]]])) (mf/defc grow-options [{:keys [ids values on-blur] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - grow-type (:grow-type values) + (let [grow-type (:grow-type values) handle-change-grow (mf/use-fn - (mf/deps ids new-css-system) + (mf/deps ids on-blur) (fn [value] (let [uid (js/Symbol) - grow-type (if new-css-system - (keyword value) - (-> (dom/get-current-target value) - (dom/get-data "value") - (keyword)))] + grow-type (keyword value)] (st/emit! (dwu/start-undo-transaction uid) (dch/update-shapes ids #(assoc % :grow-type grow-type))) @@ -212,105 +132,55 @@ (ts/schedule #(st/emit! (dwu/commit-undo-transaction uid)))) (when (some? on-blur) (on-blur))))] - (if new-css-system - [:div {:class (stl/css :grow-options)} - [:& radio-buttons {:selected (d/name grow-type) - :on-change handle-change-grow - :name "grow-text-options"} - [:& radio-button {:value "fixed" - :id "text-fixed-grow" - :title (tr "workspace.options.text-options.grow-fixed") - :icon i/text-fixed-refactor}] - [:& radio-button {:value "auto-width" - :id "text-auto-width-grow" - :title (tr "workspace.options.text-options.grow-auto-width") - :icon i/text-auto-width-refactor}] - [:& radio-button {:value "auto-height" - :id "text-auto-height-grow" - :title (tr "workspace.options.text-options.grow-auto-height") - :icon i/text-auto-height-refactor}]]] - - [:div.align-icons - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.grow-fixed") - :class (dom/classnames :current (= :fixed grow-type)) - :data-value "fixed" - :on-click handle-change-grow} - i/auto-fix] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.grow-auto-width") - :data-value "auto-width" - :class (dom/classnames :current (= :auto-width grow-type)) - :on-click handle-change-grow} - i/auto-width] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.grow-auto-height") - :class (dom/classnames :current (= :auto-height grow-type)) - :data-value "auto-height" - :on-click handle-change-grow} - i/auto-height]]))) + [:div {:class (stl/css :grow-options)} + [:& radio-buttons {:selected (d/name grow-type) + :on-change handle-change-grow + :name "grow-text-options"} + [:& radio-button {:value "fixed" + :id "text-fixed-grow" + :title (tr "workspace.options.text-options.grow-fixed") + :icon i/text-fixed-refactor}] + [:& radio-button {:value "auto-width" + :id "text-auto-width-grow" + :title (tr "workspace.options.text-options.grow-auto-width") + :icon i/text-auto-width-refactor}] + [:& radio-button {:value "auto-height" + :id "text-auto-height-grow" + :title (tr "workspace.options.text-options.grow-auto-height") + :icon i/text-auto-height-refactor}]]])) (mf/defc text-decoration-options [{:keys [values on-change on-blur] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - text-decoration (or (:text-decoration values) "none") + (let [text-decoration (or (:text-decoration values) "none") handle-change (mf/use-fn (mf/deps text-decoration) (fn [value] - (let [val (if new-css-system - value - (-> (dom/get-current-target value) - (dom/get-data "value"))) - decoration (if (= val text-decoration) + (let [decoration (if (= value text-decoration) "none" - val)] + value)] (on-change {:text-decoration decoration}) (when (some? on-blur) (on-blur)))))] - (if new-css-system - [:div {:class (stl/css :text-decoration-options)} - [:& radio-buttons {:selected text-decoration - :on-change handle-change - :name "text-decoration-options"} - [:& radio-button {:value "underline" - :type "checkbox" - :id "underline-text-decoration" - :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) - :icon i/text-underlined-refactor}] - [:& radio-button {:value "line-through" - :type "checkbox" - :id "line-through-text-decoration" - :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) - :icon i/text-stroked-refactor}]]] - - [:div.align-icons - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.none") - :class (dom/classnames :current (= "none" text-decoration)) - :data-value "none" - :on-click handle-change} - i/minus] - - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) - :class (dom/classnames :current (= "underline" text-decoration)) - :data-value "underline" - :on-click handle-change} - i/underline] - - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) - :class (dom/classnames :current (= "line-through" text-decoration)) - :data-value "line-through" - :on-click handle-change} - i/strikethrough]]))) + [:div {:class (stl/css :text-decoration-options)} + [:& radio-buttons {:selected text-decoration + :on-change handle-change + :name "text-decoration-options"} + [:& radio-button {:value "underline" + :type "checkbox" + :id "underline-text-decoration" + :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) + :icon i/text-underlined-refactor}] + [:& radio-button {:value "line-through" + :type "checkbox" + :id "line-through-text-decoration" + :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) + :icon i/text-stroked-refactor}]]])) (mf/defc text-menu {::mf/wrap [mf/memo]} [{:keys [ids type values] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - file-id (mf/use-ctx ctx/current-file-id) + (let [file-id (mf/use-ctx ctx/current-file-id) typographies (mf/deref refs/workspace-file-typography) shared-libs (mf/deref refs/workspace-libraries) label (case type @@ -411,87 +281,48 @@ (let [node (dom/get-element-by-class "public-DraftEditor-content")] (dom/focus! node))))))}] - (if new-css-system - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true - :collapsed? (not main-menu-open?) - :on-collapsed toggle-main-menu - :title label - :class (stl/css :title-spacing-text)} - (when (and (not typography) (not multiple?)) - [:button {:class (stl/css :add-typography) - :on-click on-convert-to-typography} - i/add-refactor])]] + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? true + :collapsed? (not main-menu-open?) + :on-collapsed toggle-main-menu + :title label + :class (stl/css :title-spacing-text)} + (when (and (not typography) (not multiple?)) + [:button {:class (stl/css :add-typography) + :on-click on-convert-to-typography} + i/add-refactor])]] - (when main-menu-open? - [:div {:class (stl/css :element-content)} - (cond - typography - [:& typography-entry {:typography typography - :local? (= typography-file file-id) - :file (get shared-libs typography-file) - :on-detach handle-detach-typography - :on-change handle-change-typography}] + (when main-menu-open? + [:div {:class (stl/css :element-content)} + (cond + typography + [:& typography-entry {:typography typography + :local? (= typography-file file-id) + :file (get shared-libs typography-file) + :on-detach handle-detach-typography + :on-change handle-change-typography}] - (= typography-id :multiple) - [:div {:class (stl/css :multiple-typography)} - [:span {:class (stl/css :multiple-text)} (tr "workspace.libraries.text.multiple-typography")] - [:div {:class (stl/css :multiple-typography-button) - :on-click handle-detach-typography - :title (tr "workspace.libraries.text.multiple-typography-tooltip")} - i/detach-refactor]] + (= typography-id :multiple) + [:div {:class (stl/css :multiple-typography)} + [:span {:class (stl/css :multiple-text)} (tr "workspace.libraries.text.multiple-typography")] + [:div {:class (stl/css :multiple-typography-button) + :on-click handle-detach-typography + :title (tr "workspace.libraries.text.multiple-typography-tooltip")} + i/detach-refactor]] - :else - [:> text-options opts]) + :else + [:> text-options opts]) - [:div {:class (stl/css :text-align-options)} - [:> text-align-options opts] - [:> grow-options opts] - [:button {:class (stl/css :more-options) - :on-click toggle-more-options} - i/menu-refactor]] - - (when more-options-open? - [:div {:class (stl/css :text-decoration-options)} - [:> vertical-align opts] - [:> text-decoration-options opts] - [:> text-direction-options opts]])])] - - - [:div.element-set - [:div.element-set-title - [:span label] - (when (and (not typography) (not multiple?)) - [:div.add-page {:on-click on-convert-to-typography} i/close])] - - (cond - typography - [:& typography-entry {:typography typography - :local? (= typography-file file-id) - :file (get shared-libs typography-file) - :on-detach handle-detach-typography - :on-change handle-change-typography}] - - (= typography-id :multiple) - [:div.multiple-typography - [:div.multiple-typography-text (tr "workspace.libraries.text.multiple-typography")] - [:div.multiple-typography-button {:on-click handle-detach-typography - :title (tr "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]] - - :else - [:> text-options opts]) - - [:div.element-set-content - - [:div.row-flex + [:div {:class (stl/css :text-align-options)} [:> text-align-options opts] - [:> vertical-align opts]] - - [:div.row-flex - [:> text-decoration-options opts] - [:> text-direction-options opts]] - - [:div.row-flex [:> grow-options opts] - [:div.align-icons]]]]))) + [:button {:class (stl/css :more-options) + :on-click toggle-more-options} + i/menu-refactor]] + + (when more-options-open? + [:div {:class (stl/css :text-decoration-options)} + [:> vertical-align opts] + [:> text-decoration-options opts] + [:> text-direction-options opts]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index 2504fa5e7..2e0c98298 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -8,58 +8,68 @@ .element-set { margin: 0; - .element-title { - margin: 0; - .add-typography { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .element-content { - @include flexColumn; - margin-top: $s-4; - .multiple-typography { - @extend .mixed-bar; - .multiple-text { - @include titleTipography; - flex-grow: 1; - color: var(--input-foreground-color-active); - } - .multiple-typography-button { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .text-align-options { - display: flex; - gap: $s-4; - .align-options, - .text-direction-options, - .vertical-align-options, - .grow-options, - .text-decoration-options { - height: $s-32; - } - .more-options { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - } - } - } - .text-decoration-options { - display: flex; - gap: $s-4; - } +} + +.element-title { + margin: 0; +} + +.add-typography { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; } } + +.element-content { + @include flexColumn; + margin-top: $s-4; +} + +.multiple-typography { + @extend .mixed-bar; +} + +.multiple-text { + @include titleTipography; + flex-grow: 1; + color: var(--input-foreground-color-active); +} + +.multiple-typography-button { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.text-align-options { + display: flex; + gap: $s-4; +} + +.align-options, +.text-direction-options, +.vertical-align-options, +.grow-options, +.text-decoration-options { + height: $s-32; +} + +.more-options { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } +} + +.text-decoration-options { + display: flex; + gap: $s-4; +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 122c32ea8..c54d3a13d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -25,7 +25,6 @@ [app.main.ui.components.select :refer [select]] [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -61,8 +60,7 @@ {::mf/wrap [mf/memo]} [{:keys [font current? on-click style]}] (let [item-ref (mf/use-ref) - on-click (mf/use-fn (mf/deps font) #(on-click font)) - new-css-system (mf/use-ctx ctx/new-css-system)] + on-click (mf/use-fn (mf/deps font) #(on-click font))] (mf/use-effect (mf/deps current?) @@ -72,22 +70,14 @@ (when-not (dom/is-in-viewport? element) (dom/scroll-into-view! element)))))) - (if new-css-system - [:div {:class (stl/css :font-wrapper) - :style style - :ref item-ref - :on-click on-click} - [:div {:class (stl/css-case :font-item true - :selected current?)} - [:span {:class (stl/css :label)} (:name font)] - [:span {:class (stl/css :icon)} (when current? i/tick-refactor)]]] - - [:div.font-item {:ref item-ref - :style style - :class (when current? "selected") - :on-click on-click} - [:span.icon (when current? i/tick)] - [:span.label (:name font)]]))) + [:div {:class (stl/css :font-wrapper) + :style style + :ref item-ref + :on-click on-click} + [:div {:class (stl/css-case :font-item true + :selected current?)} + [:span {:class (stl/css :label)} (:name font)] + [:span {:class (stl/css :icon)} (when current? i/tick-refactor)]]])) (declare row-renderer) @@ -104,8 +94,7 @@ (mf/defc font-selector [{:keys [on-select on-close current-font show-recent] :as props}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - selected (mf/use-state current-font) + (let [selected (mf/use-state current-font) state (mf/use-state {:term "" :backends #{}}) flist (mf/use-ref) @@ -143,12 +132,8 @@ on-filter-change (mf/use-fn - (mf/deps new-css-system) (fn [event] - (let [value (if new-css-system - event - (dom/get-target-val event))] - (swap! state assoc :term value)))) + (swap! state assoc :term event))) on-select-and-close (mf/use-fn @@ -184,72 +169,35 @@ #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})] (.scrollToPosition ^js inst offset))))) + [:div {:class (stl/css :font-selector)} + [:div {:class (stl/css :font-selector-dropdown)} + [:div {:class (stl/css :header)} + [:& search-bar {:on-change on-filter-change + :value (:term @state) + :placeholder (tr "workspace.options.search-font")}] + (when (and recent-fonts show-recent) + [* + [:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")] + (for [[idx font] (d/enumerate recent-fonts)] + [:& font-item {:key (dm/str "font-" idx) + :font font + :style {} + :on-click on-select-and-close + :current? (= (:id font) (:id @selected))}])])] - (if new-css-system - [:div {:class (stl/css :font-selector)} - [:div {:class (stl/css :font-selector-dropdown)} - [:div {:class (stl/css :header)} - [:& search-bar {:on-change on-filter-change - :value (:term @state) - :placeholder (tr "workspace.options.search-font")}] - (when (and recent-fonts show-recent) - [* - [:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")] - (for [[idx font] (d/enumerate recent-fonts)] - [:& font-item {:key (dm/str "font-" idx) - :font font - :style {} - :on-click on-select-and-close - :current? (= (:id font) (:id @selected))}])])] - - [:div {:class (stl/css :fonts-list)} - [:> rvt/AutoSizer {} - (fn [props] - (let [width (unchecked-get props "width") - height (unchecked-get props "height") - render #(row-renderer fonts @selected on-select-and-close %)] - (mf/html - [:> rvt/List #js {:height height - :ref flist - :width width - :rowCount (count fonts) - :rowHeight 36 - :rowRenderer render}])))]]]] - - [:div.font-selector - [:div.font-selector-dropdown - [:header - [:input {:placeholder (tr "workspace.options.search-font") - :value (:term @state) - :ref input - :spell-check false - :on-change on-filter-change}] - (when (and recent-fonts show-recent) - [:* - [:hr] - [:p.title (tr "workspace.options.recent-fonts")] - (for [[idx font] (d/enumerate recent-fonts)] - [:& font-item {:key (dm/str "font-" idx) - :font font - :style {} - :on-click on-select-and-close - :current? (= (:id font) (:id @selected))}])])] - - [:hr] - - [:div.fonts-list - [:> rvt/AutoSizer {} - (fn [props] - (let [width (unchecked-get props "width") - height (unchecked-get props "height") - render #(row-renderer fonts @selected on-select-and-close %)] - (mf/html - [:> rvt/List #js {:height height - :ref flist - :width width - :rowCount (count fonts) - :rowHeight 32 - :rowRenderer render}])))]]]]))) + [:div {:class (stl/css :fonts-list)} + [:> rvt/AutoSizer {} + (fn [props] + (let [width (unchecked-get props "width") + height (unchecked-get props "height") + render #(row-renderer fonts @selected on-select-and-close %)] + (mf/html + [:> rvt/List #js {:height height + :ref flist + :width width + :rowCount (count fonts) + :rowHeight 36 + :rowRenderer render}])))]]]])) (defn row-renderer [fonts selected on-select props] @@ -272,7 +220,6 @@ font-id (or font-id (:font-id txt/default-text-attrs)) font-size (or font-size (:font-size txt/default-text-attrs)) font-variant-id (or font-variant-id (:font-variant-id txt/default-text-attrs)) - new-css-system (mf/use-ctx ctx/new-css-system) fonts (mf/deref fonts/fontsdb) font (get fonts font-id) @@ -304,17 +251,14 @@ on-font-variant-change (mf/use-fn (mf/deps font on-change) - (fn [event] - (let [new-variant-id (if new-css-system - event - (dom/get-target-val event)) - variant (d/seek #(= new-variant-id (:id %)) (:variants font))] + (fn [new-variant-id] + (let [variant (d/seek #(= new-variant-id (:id %)) (:variants font))] (on-change {:font-id (:id font) :font-family (:family font) :font-variant-id new-variant-id :font-weight (:weight variant) :font-style (:style variant)}) - (dom/blur! (dom/get-target event))))) + (dom/blur! (dom/get-target new-variant-id))))) on-font-select (mf/use-fn @@ -335,114 +279,65 @@ (when (mf/ref-val last-font) (st/emit! (fts/add-recent-font (mf/ref-val last-font))))))] - (if new-css-system - [:* - (when @open-selector? - [:& font-selector - {:current-font font - :on-close on-font-selector-close - :on-select on-font-select - :show-recent show-recent}]) + [:* + (when @open-selector? + [:& font-selector + {:current-font font + :on-close on-font-selector-close + :on-select on-font-select + :show-recent show-recent}]) - [:div {:class (stl/css :font-option) - :on-click #(reset! open-selector? true)} - (cond - (= :multiple font-id) - "--" + [:div {:class (stl/css :font-option) + :on-click #(reset! open-selector? true)} + (cond + (= :multiple font-id) + "--" - (some? font) - [:* - [:span {:class (stl/css :name)} - (:name font)] - [:span {:class (stl/css :icon)} - i/arrow-refactor]] + (some? font) + [:* + [:span {:class (stl/css :name)} + (:name font)] + [:span {:class (stl/css :icon)} + i/arrow-refactor]] - :else - (tr "dashboard.fonts.deleted-placeholder"))] + :else + (tr "dashboard.fonts.deleted-placeholder"))] - [:div {:class (stl/css :font-modifiers)} - [:div {:class (stl/css :font-size-options)} - (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72] - size-options (if (= font-size :multiple) (into [""] size-options) size-options)] - [:& editable-select - {:value (attr->string font-size) - :class (stl/css :font-size-select) - :input-class (stl/css :numeric-input) - :options size-options - :type "number" - :placeholder "--" - :min 3 - :max 1000 - :on-change on-font-size-change - :on-blur on-blur}])] + [:div {:class (stl/css :font-modifiers)} + [:div {:class (stl/css :font-size-options)} + (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72] + size-options (if (= font-size :multiple) (into [""] size-options) size-options)] + [:& editable-select + {:value (attr->string font-size) + :class (stl/css :font-size-select) + :input-class (stl/css :numeric-input) + :options size-options + :type "number" + :placeholder "--" + :min 3 + :max 1000 + :on-change on-font-size-change + :on-blur on-blur}])] - [:div {:class (stl/css :font-variant-options)} - (let [basic-variant-options (->> (:variants font) - (map (fn [variant] - {:value (:id variant) - :key (pr-str variant) - :label (:name variant)}) )) - variant-options (if (= font-size :multiple) - (conj basic-variant-options - {:value :multiple - :key :multiple-variants - :label "--"} ) - basic-variant-options)] - ;; TODO Add disabled mode - [:& select - {:class (stl/css :font-variant-select) - :default-value (attr->string font-variant-id) - :options variant-options - :on-change on-font-variant-change - :on-blur on-blur}])]]] - - [:* - (when @open-selector? - [:& font-selector - {:current-font font - :on-close on-font-selector-close - :on-select on-font-select - :show-recent show-recent}]) - - [:div.row-flex - [:div.input-select.font-option - {:on-click #(reset! open-selector? true)} - (cond - (= :multiple font-id) - "--" - - (some? font) - (:name font) - - :else - (tr "dashboard.fonts.deleted-placeholder"))]] - - [:div.row-flex - (let [size-options [8 9 10 11 12 14 16 18 24 36 48 72] - size-options (if (= font-size :multiple) (into [""] size-options) size-options)] - [:& editable-select - {:value (attr->string font-size) - :class "input-option size-option" - :options size-options - :type "number" - :placeholder "--" - :min 3 - :max 1000 - :on-change on-font-size-change - :on-blur on-blur}]) - - [:select.input-select.variant-option - {:disabled (= font-id :multiple) - :data-mousetrap-dont-stop true - :value (attr->string font-variant-id) - :on-change on-font-variant-change - :on-blur on-blur} - (when (or (= font-id :multiple) (= font-variant-id :multiple)) - [:option {:value ""} "--"]) - (for [variant (:variants font)] - [:option {:value (:id variant) - :key (pr-str variant)} - (:name variant)])]]]))) + [:div {:class (stl/css :font-variant-options)} + (let [basic-variant-options (->> (:variants font) + (map (fn [variant] + {:value (:id variant) + :key (pr-str variant) + :label (:name variant)}))) + variant-options (if (= font-size :multiple) + (conj basic-variant-options + {:value :multiple + :key :multiple-variants + :label "--"}) + basic-variant-options)] + ;; TODO Add disabled mode + [:& select + {:class (stl/css :font-variant-select) + :default-value (attr->string font-variant-id) + :options variant-options + :on-change on-font-variant-change + :on-blur on-blur}])]]])) (mf/defc spacing-options {::mf/wrap-props false} @@ -452,152 +347,87 @@ line-height (or line-height "1.2") letter-spacing (or letter-spacing "0") - new-css-system (mf/use-ctx ctx/new-css-system) line-height-nillable (if (= (str line-height) "1.2") false true) handle-change (fn [value attr] (on-change {attr (str value)}))] - (if new-css-system - [:div {:class (stl/css :spacing-options)} - [:div {:class (stl/css :line-height)} - [:span {:class (stl/css :icon) - :alt (tr "workspace.options.text-options.line-height")} - i/text-lineheight-refactor] - [:> numeric-input* - {:min -200 - :max 200 - :step 0.1 - :default "1.2" - :class (stl/css :line-height-input) - :value (attr->string line-height) - :placeholder (tr "settings.multiple") - :nillable line-height-nillable - :on-change #(handle-change % :line-height) - :on-blur on-blur}]] - [:div {:class (stl/css :letter-spacing)} - [:span - {:class (stl/css :icon) - :alt (tr "workspace.options.text-options.letter-spacing")} - i/text-letterspacing-refactor] - [:> numeric-input* - {:min -200 - :max 200 - :step 0.1 - :class (stl/css :letter-spacing-input) - :value (attr->string letter-spacing) - :placeholder (tr "settings.multiple") - :on-change #(handle-change % :letter-spacing) - :on-blur on-blur}]]] + [:div {:class (stl/css :spacing-options)} + [:div {:class (stl/css :line-height)} + [:span {:class (stl/css :icon) + :alt (tr "workspace.options.text-options.line-height")} + i/text-lineheight-refactor] + [:> numeric-input* + {:min -200 + :max 200 + :step 0.1 + :default "1.2" + :class (stl/css :line-height-input) + :value (attr->string line-height) + :placeholder (tr "settings.multiple") + :nillable line-height-nillable + :on-change #(handle-change % :line-height) + :on-blur on-blur}]] - - [:div.spacing-options - [:div.input-icon - [:span.icon-before.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.line-height")} - i/line-height] - [:> numeric-input* - {:min -200 - :max 200 - :step 0.1 - :default "1.2" - :value (attr->string line-height) - :placeholder (tr "settings.multiple") - :nillable line-height-nillable - :on-change #(handle-change % :line-height) - :on-blur on-blur}]] - - [:div.input-icon - [:span.icon-before.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.letter-spacing")} - i/letter-spacing] - [:> numeric-input* - {:min -200 - :max 200 - :step 0.1 - :value (attr->string letter-spacing) - :placeholder (tr "settings.multiple") - :on-change #(handle-change % :letter-spacing) - :on-blur on-blur}]]]))) + [:div {:class (stl/css :letter-spacing)} + [:span + {:class (stl/css :icon) + :alt (tr "workspace.options.text-options.letter-spacing")} + i/text-letterspacing-refactor] + [:> numeric-input* + {:min -200 + :max 200 + :step 0.1 + :class (stl/css :letter-spacing-input) + :value (attr->string letter-spacing) + :placeholder (tr "settings.multiple") + :on-change #(handle-change % :letter-spacing) + :on-blur on-blur}]]])) (mf/defc text-transform-options {::mf/wrap-props false} [{:keys [values on-change on-blur]}] (let [text-transform (or (:text-transform values) "none") - new-css-system (mf/use-ctx ctx/new-css-system) handle-change (fn [type] (if (= text-transform type) (on-change {:text-transform "unset"}) (on-change {:text-transform type})) (when (some? on-blur) (on-blur)))] - (if new-css-system - [:div {:class (stl/css :text-transform)} - [:& radio-buttons {:selected text-transform - :on-change handle-change - :name "text-transform"} - [:& radio-button {:icon i/text-uppercase-refactor - :type "checkbox" - :value "uppercase" - :id "text-transform-uppercase"}] - [:& radio-button {:icon i/text-lowercase-refactor - :type "checkbox" - :value "lowercase" - :id "text-transform-lowercase"}] - [:& radio-button {:icon i/text-mixed-refactor - :type "checkbox" - :value "capitalize" - :id "text-transform-capitalize"}]]] - [:div.align-icons - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.none") - :class (dom/classnames :current (= "none" text-transform)) - :on-focus #(dom/prevent-default %) - :on-click #(handle-change "none")} - i/minus] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.uppercase") - :class (dom/classnames :current (= "uppercase" text-transform)) - :on-click #(handle-change "uppercase")} - i/uppercase] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.lowercase") - :class (dom/classnames :current (= "lowercase" text-transform)) - :on-click #(handle-change "lowercase")} - i/lowercase] - [:span.tooltip.tooltip-bottom - {:alt (tr "workspace.options.text-options.titlecase") - :class (dom/classnames :current (= "capitalize" text-transform)) - :on-click #(handle-change "capitalize")} - i/titlecase]]))) + [:div {:class (stl/css :text-transform)} + [:& radio-buttons {:selected text-transform + :on-change handle-change + :name "text-transform"} + [:& radio-button {:icon i/text-uppercase-refactor + :type "checkbox" + :value "uppercase" + :id "text-transform-uppercase"}] + [:& radio-button {:icon i/text-lowercase-refactor + :type "checkbox" + :value "lowercase" + :id "text-transform-lowercase"}] + [:& radio-button {:icon i/text-mixed-refactor + :type "checkbox" + :value "capitalize" + :id "text-transform-capitalize"}]]])) (mf/defc text-options {::mf/wrap-props false} [{:keys [ids editor values on-change on-blur show-recent]}] - (let [new-css-system (mf/use-ctx ctx/new-css-system) - opts #js {:editor editor + (let [opts #js {:editor editor :ids ids :values values :on-change on-change :on-blur on-blur :show-recent show-recent}] - (if new-css-system - [:div {:class (stl/css :text-options)} - [:> font-options opts] - [:div {:class (stl/css :typography-variations)} - [:> spacing-options opts] - [:> text-transform-options opts]]] - - [:div.element-set-content - [:> font-options opts] - [:div.row-flex - [:> spacing-options opts]] - [:div.row-flex - [:> text-transform-options opts]]]))) - + [:div {:class (stl/css :text-options)} + [:> font-options opts] + [:div {:class (stl/css :typography-variations)} + [:> spacing-options opts] + [:> text-transform-options opts]]])) (mf/defc typography-advanced-options {::mf/wrap [mf/memo]} @@ -684,16 +514,11 @@ :on-click navigate-to-library} (tr "workspace.assets.typography.go-to-edit")])])]))) - (mf/defc typography-entry {::mf/wrap-props false} [{:keys [file-id typography local? selected? on-click on-change on-detach on-context-menu editing? renaming? focus-name? external-open*]}] - (let [hover-detach* (mf/use-state false) - hover-detach? (deref hover-detach*) - - name-input-ref (mf/use-ref) + (let [name-input-ref (mf/use-ref) read-only? (mf/use-ctx ctx/workspace-read-only?) - new-css-system (mf/use-ctx ctx/new-css-system) editable? (and local? (not read-only?)) open* (mf/use-state editing?) @@ -710,12 +535,6 @@ (on-change {:name name}) (st/emit! #(update % :workspace-global dissoc :rename-typography)))))) - on-pointer-enter - (mf/use-fn #(reset! hover-detach* true)) - - on-pointer-leave - (mf/use-fn #(reset! hover-detach* false)) - on-open (mf/use-fn #(reset! open* true)) @@ -755,147 +574,62 @@ (dom/focus! node) (dom/select-text! node))))) - (if new-css-system - [:* - [:div {:class (stl/css-case :typography-entry true - :selected ^boolean selected?) - :style {:display (when ^boolean open? "none")}} - (if renaming? - [:div {:class (stl/css :font-name-wrapper)} - [:div - {:class (stl/css :typography-sample-input) - :style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] - - [:input - {:class (stl/css :adv-typography-name) - :type "text" - :ref name-input-ref - :default-value (:name typography) - :on-key-down on-key-down - :on-blur on-name-blur}]] - [:div - {:class (stl/css-case :typography-selection-wrapper true - :is-selectable ^boolean on-click) - :on-click on-click - :on-context-menu on-context-menu} - [:div - {:class (stl/css :typography-sample) - :style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")] - - [:div {:class (stl/css :typography-name) - :title (:name typography)} (:name typography)] - - (when-not name-only? - [:div {:class (stl/css :typography-font) - :title (:name font-data)} - (:name font-data)])]) - [:div {:class (stl/css :element-set-actions)} - (when ^boolean on-detach - [:button {:class (stl/css :element-set-actions-button) - :on-click on-detach} - i/detach-refactor]) - [:button {:class (stl/css :menu-btn) - :on-click on-open} - i/menu-refactor]]] - - [:& typography-advanced-options - {:visible? open? - :on-close on-close - :typography typography - :editable? editable? - :name-input-ref name-input-ref - :on-change on-change - :on-name-blur on-name-blur - :on-key-down on-key-down - :local? local? - :navigate-to-library navigate-to-library}]] - - - [:* - [:div.element-set-options-group.typography-entry - {:class (when ^boolean selected? "selected") - :style {:display (when ^boolean open? "none")}} - [:div.typography-selection-wrapper - {:class (when ^boolean on-click "is-selectable") - :on-click on-click - :on-context-menu on-context-menu} - [:div.typography-sample - {:style {:font-family (:font-family typography) + [:* + [:div {:class (stl/css-case :typography-entry true + :selected ^boolean selected?) + :style {:display (when ^boolean open? "none")}} + (if renaming? + [:div {:class (stl/css :font-name-wrapper)} + [:div + {:class (stl/css :typography-sample-input) + :style {:font-family (:font-family typography) :font-weight (:font-weight typography) :font-style (:font-style typography)}} (tr "workspace.assets.typography.sample")] - [:div.typography-name {:title (:name typography)} (:name typography)]] - [:div.element-set-actions - (when ^boolean on-detach - [:div.element-set-actions-button - {:on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave - :on-click on-detach} - (if ^boolean hover-detach? i/unchain i/chain)]) - [:div.element-set-actions-button - {:on-click on-open} - i/actions]]] + [:input + {:class (stl/css :adv-typography-name) + :type "text" + :ref name-input-ref + :default-value (:name typography) + :on-key-down on-key-down + :on-blur on-name-blur}]] + [:div + {:class (stl/css-case :typography-selection-wrapper true + :is-selectable ^boolean on-click) + :on-click on-click + :on-context-menu on-context-menu} + [:div + {:class (stl/css :typography-sample) + :style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.sample")] - [:& advanced-options {:visible? open? :on-close on-close} - (if ^boolean editable? - [:* - [:div.element-set-content - [:div.row-flex - [:input.element-name.adv-typography-name - {:type "text" - :ref name-input-ref - :default-value (:name typography) - :on-blur on-name-blur}] + [:div {:class (stl/css :typography-name) + :title (:name typography)} (:name typography)] - [:div.element-set-actions-button - {:on-click on-close} - i/actions]]] + (when-not name-only? + [:div {:class (stl/css :typography-font) + :title (:name font-data)} + (:name font-data)])]) + [:div {:class (stl/css :element-set-actions)} + (when ^boolean on-detach + [:button {:class (stl/css :element-set-actions-button) + :on-click on-detach} + i/detach-refactor]) + [:button {:class (stl/css :menu-btn) + :on-click on-open} + i/menu-refactor]]] - [:& text-options {:values typography - :on-change on-change - :show-recent false}]] - - [:div.element-set-content.typography-read-only-data - [:div.row-flex.typography-name - [:span {:title (:name typography)} (:name typography)]] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-id")] - [:span (:font-id typography)]] - - [:div.element-set-actions-button.actions-inside - {:on-click on-close} - i/actions] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-variant-id")] - [:span (:font-variant-id typography)]] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-size")] - [:span (:font-size typography)]] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.line-height")] - [:span (:line-height typography)]] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.letter-spacing")] - [:span (:letter-spacing typography)]] - - [:div.row-flex - [:span.label (tr "workspace.assets.typography.text-transform")] - [:span (:text-transform typography)]] - - (when-not local? - [:div.row-flex - [:a.go-to-lib-button - {:on-click navigate-to-library} - (tr "workspace.assets.typography.go-to-edit")]])])]]))) + [:& typography-advanced-options + {:visible? open? + :on-close on-close + :typography typography + :editable? editable? + :name-input-ref name-input-ref + :on-change on-change + :on-name-blur on-name-blur + :on-key-down on-key-down + :local? local? + :navigate-to-library navigate-to-library}]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 305fc6e83..6f7aab290 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -142,103 +142,104 @@ height: 100%; width: 100%; background-color: var(--assets-title-background-color); - .typography-info-wrapper { - @include flexColumn; - margin-bottom: $s-12; - .typography-name-wrapper { - @extend .asset-element; - display: grid; - grid-template-columns: $s-24 auto 1fr $s-28; - flex: 1; +} + +.typography-info-wrapper { + @include flexColumn; + margin-bottom: $s-12; + .typography-name-wrapper { + @extend .asset-element; + display: grid; + grid-template-columns: $s-24 auto 1fr $s-28; + flex: 1; + height: $s-32; + width: 100%; + padding: 0 0 0 $s-12; + background-color: var(--assets-item-background-color-hover); + margin-bottom: $s-4; + .typography-sample { + @include flexCenter; + min-width: $s-24; + font-size: $fs-16; height: $s-32; - width: 100%; - padding: 0 0 0 $s-12; - background-color: var(--assets-item-background-color-hover); - margin-bottom: $s-4; - .typography-sample { - @include flexCenter; - min-width: $s-24; - font-size: $fs-16; - height: $s-32; - padding: 0; - color: var(--assets-item-name-foreground-color-hover); + padding: 0; + color: var(--assets-item-name-foreground-color-hover); + } + .typography-name { + @include titleTipography; + @include textEllipsis; + display: flex; + align-items: center; + justify-content: flex-start; + margin-left: $s-6; + color: var(--assets-item-name-foreground-color-hover); + } + .typography-font { + @include titleTipography; + @include textEllipsis; + margin-left: $s-6; + display: flex; + align-items: center; + justify-content: flex-start; + min-width: 0; + color: var(--assets-item-name-foreground-color); + } + .action-btn { + @extend .button-tertiary; + width: $s-28; + height: $s-32; + svg { + @extend .button-icon; } - .typography-name { - @include titleTipography; - @include textEllipsis; - display: flex; - align-items: center; - justify-content: flex-start; - margin-left: $s-6; - color: var(--assets-item-name-foreground-color-hover); - } - .typography-font { - @include titleTipography; - @include textEllipsis; - margin-left: $s-6; - display: flex; - align-items: center; - justify-content: flex-start; - min-width: 0; - color: var(--assets-item-name-foreground-color); - } - .action-btn { - @extend .button-tertiary; - width: $s-28; - height: $s-32; - svg { - @extend .button-icon; - } - &:active { - background-color: transparent; - } + &:active { + background-color: transparent; } } + } - .info-row { - display: grid; - grid-template-columns: 50% 50%; - height: $s-32; - --calcualted-width: calc(var(--width) - $s-48); - padding-left: $s-2; - .info-label { - @include titleTipography; - @include textEllipsis; - width: calc(var(--calcualted-width) / 2); - padding-top: $s-8; - color: var(--assets-item-name-foreground-color); - } - .info-content { - @include titleTipography; - @include textEllipsis; - padding-top: $s-8; - width: calc(var(--calcualted-width) / 2); - color: var(--assets-item-name-foreground-color-hover); + .info-row { + display: grid; + grid-template-columns: 50% 50%; + height: $s-32; + --calcualted-width: calc(var(--width) - $s-48); + padding-left: $s-2; + .info-label { + @include titleTipography; + @include textEllipsis; + width: calc(var(--calcualted-width) / 2); + padding-top: $s-8; + color: var(--assets-item-name-foreground-color); + } + .info-content { + @include titleTipography; + @include textEllipsis; + padding-top: $s-8; + width: calc(var(--calcualted-width) / 2); + color: var(--assets-item-name-foreground-color-hover); + } + } + + .link-btn { + @include tabTitleTipography; + @extend .button-secondary; + width: 100%; + height: $s-32; + border-radius: $br-8; + &:hover { + background-color: var(--button-secondary-background-color-hover); + color: var(--button-secondary-foreground-color-hover); + border: $s-1 solid var(--button-secondary-border-color-hover); + text-decoration: none; + svg { + stroke: var(--button-secondary-foreground-color-hover); } } - - .link-btn { - @include tabTitleTipography; - @extend .button-secondary; - width: 100%; - height: $s-32; - border-radius: $br-8; - &:hover { - background-color: var(--button-secondary-background-color-hover); - color: var(--button-secondary-foreground-color-hover); - border: $s-1 solid var(--button-secondary-border-color-hover); - text-decoration: none; - svg { - stroke: var(--button-secondary-foreground-color-hover); - } - } - &:focus { - background-color: var(--button-secondary-background-color-focus); - color: var(--button-secondary-foreground-color-focus); - border: $s-1 solid var(--button-secondary-border-color-focus); - svg { - stroke: var(--button-secondary-foreground-color-focus); - } + &:focus { + background-color: var(--button-secondary-background-color-focus); + color: var(--button-secondary-foreground-color-focus); + border: $s-1 solid var(--button-secondary-border-color-focus); + svg { + stroke: var(--button-secondary-foreground-color-focus); } } }