Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 11:41:47 -05:00
Code Issues Activity

♻️ Remove new-css-system from design tab

Browse source
This commit is contained in:
Eva 2024-01-02 14:35:46 +01:00 • committed by Alonso Torres
parent 0a123a3917
commit 67c692fdbd
42 changed files with 3852 additions and 6809 deletions

13
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

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

194
frontend/src/app/main/ui/workspace/sidebar/options.cljs
View file

@ -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

40
frontend/src/app/main/ui/workspace/sidebar/options.scss
View file

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

18
frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
View file

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

184
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
View file

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

45
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
View file

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

123
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

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

163
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

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

151
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

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

55
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View file

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

95
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View file

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

53
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

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

243
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
View file

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

285
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

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

191
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

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

132
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

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

117
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

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

94
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View file

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

420
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

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

451
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

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

312
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View file

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

72
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
View file

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

1103
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

File diff suppressed because it is too large Load diff

125
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

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

74
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
View file

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

1690
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

File diff suppressed because it is too large Load diff

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

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

677
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

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

231
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

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

535
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

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

405
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

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

322
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

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

228
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View file

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

143
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

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

79
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
View file

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

108
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

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

78
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

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

439
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

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

116
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

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

668
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

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

181
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

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