diff --git a/frontend/resources/images/icons/text-Autoheight-refactor.svg b/frontend/resources/images/icons/text-Autoheight-refactor.svg deleted file mode 100644 index e7fe97560..000000000 --- a/frontend/resources/images/icons/text-Autoheight-refactor.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/resources/images/icons/text-auto-height-refactor.svg b/frontend/resources/images/icons/text-auto-height-refactor.svg index 90016a8e0..a1d458946 100644 --- a/frontend/resources/images/icons/text-auto-height-refactor.svg +++ b/frontend/resources/images/icons/text-auto-height-refactor.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/resources/images/icons/text-auto-width-refactor.svg b/frontend/resources/images/icons/text-auto-width-refactor.svg index 07b07ed76..011d5871c 100644 --- a/frontend/resources/images/icons/text-auto-width-refactor.svg +++ b/frontend/resources/images/icons/text-auto-width-refactor.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/resources/images/icons/text-autoheight-refactor.svg b/frontend/resources/images/icons/text-autoheight-refactor.svg deleted file mode 100644 index e7fe97560..000000000 --- a/frontend/resources/images/icons/text-autoheight-refactor.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/resources/images/icons/text-autowidth-refactor.svg b/frontend/resources/images/icons/text-autowidth-refactor.svg deleted file mode 100644 index e7fe97560..000000000 --- a/frontend/resources/images/icons/text-autowidth-refactor.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 8b912412c..d3ff0a526 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -168,14 +168,13 @@ @include flexCenter; border-radius: $br-8; color: var(--button-radio-foreground-color-rest); - background-color: var(--button-radio-background-color-rest); border: $s-1 solid var(--button-radio-background-color-rest); svg, span svg { stroke: var(--button-radio-foreground-color-rest); } &:hover { - background-color: transparent; + background-color: var(--button-radio-background-color-rest); color: var(--button-radio-foreground-color-hover); border: $s-1 solid transparent; svg, @@ -288,8 +287,10 @@ @include textEllipsis; height: $s-28; width: 100%; + flex-grow: 1; margin: $s-2 0; - padding: 0 0 0 $s-4; + padding: 0 0 0 $s-6; + border-radius: $br-8; color: var(--input-foreground-color-active); &:focus-within, &:active { @@ -302,18 +303,17 @@ @include flexCenter; min-width: $s-12; height: $s-32; - margin-right: $s-4; svg { - @extend .button-icon; + @extend .button-icon-small; } } .input-label { @include tabTitleTipography; @include flexCenter; - min-width: $s-12; + width: $s-20; + padding-left: $s-8; height: $s-32; - margin-right: $s-4; color: var(--input-foreground-color); } @@ -322,15 +322,15 @@ display: flex; align-items: center; height: $s-32; - padding: 0 $s-4; border-radius: $br-8; background-color: var(--input-background-color); border: $s-1 solid var(--input-background-color); color: var(--input-foreground-color); - span { + span, + label { @extend .input-label; svg { - @extend .button-icon; + @extend .button-icon-small; stroke: var(--input-foreground-color); } } diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 29d767015..67c42afe1 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -176,6 +176,7 @@ --color-bullet-background-color: var(--white); // We don't want this color to change with palette --color-bullet-border-color: var(--color-background-quaternary); + --color-bullet-border-color-selected: var(--color-accent-primary); --palette-handler-background-color: var(--color-background-quaternary); --assets-title-background-color: var(--color-background-primary); diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index e955e8478..cdacbd4a4 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -9,6 +9,7 @@ $s-0: 0px; $s-1: 1px; $s-2: math.div(0.25rem, 2); +$s-3: calc($s-1 + $s-2); $s-4: var(--s-4); $s-6: calc($s-2 + $s-4); $s-8: calc(var(--s-4) * 2); diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss index 54fb5b58b..a43404ff1 100644 --- a/frontend/resources/styles/main/layouts/main-layout.scss +++ b/frontend/resources/styles/main/layouts/main-layout.scss @@ -353,7 +353,10 @@ color: $df-secondary; } .form-container { + width: 800px; + margin: 80px auto auto 120px; form { + width: 468px; .fields-row { .custom-input, .custom-select { @@ -364,6 +367,7 @@ color: $df-primary; font-size: 11px; margin-bottom: 12px; + margin-left: -4px; } input, select { @@ -411,8 +415,43 @@ border: 1px solid $da-primary; } } + textarea { + border-radius: 8px; + padding: 12px 14px; + background-color: $db-tertiary; + color: $df-primary; + border: none; + &:focus { + outline: 1px solid $da-primary; + } + } } } + .field-title { + color: $df-primary; + } + .field-title:not(:first-child) { + margin-top: 64px; + } + + .field-text { + color: $df-secondary; + } + button, + .btn-secondary { + width: 100%; + font-size: 11px; + text-transform: uppercase; + background-color: $db-tertiary; + color: $df-primary; + &:hover { + color: $da-primary; + background-color: $db-cuaternary; + } + } + hr { + display: none; + } } .links { margin-top: 12px; @@ -420,6 +459,156 @@ } } + //Access tokens + .dashboard-access-tokens { + width: 800px; + margin-left: 120px; + margin-top: 80px; + .access-tokens-hero-container { + background-color: transparent; + .access-tokens-hero { + width: 468px; + flex-direction: column; + gap: 32px; + background-color: transparent; + margin: 0; + padding: 0; + .desc { + background-color: transparent; + width: 100%; + h2 { + color: $df-primary; + font-size: 24px; + font-weight: regular; + margin-bottom: 32px; + } + p { + color: $df-secondary; + margin-bottom: 0; + font-size: 14px; + } + } + button { + width: 100%; + font-size: 11px; + text-transform: uppercase; + background-color: $db-tertiary; + color: $df-primary; + &:hover { + color: $da-primary; + background-color: $db-cuaternary; + } + } + } + } + .dashboard-table { + width: 800px; + .table-rows { + padding-top: 0; + .table-row { + font-size: 14px; + min-height: 40px; + height: fit-content; + .name { + color: $df-primary; + max-width: 480px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } + .expiration-date { + color: $df-secondary; + } + } + } + } + .access-tokens-empty { + width: 468px; + border: 1px solid $db-cuaternary; + border-radius: 8px; + margin-top: 32px; + font-size: 14px; + background-color: transparent; + color: $df-secondary; + } + } + + // Team webhooks + &.dashboard-team-webhooks { + width: 800px; + margin-left: 120px; + margin-top: 80px; + border: none; + align-items: flex-start; + .webhooks-hero-container { + width: 468px; + background-color: transparent; + .webhooks-hero { + width: 468px; + flex-direction: column; + gap: 32px; + background-color: transparent; + margin: 0; + padding: 0; + .desc { + background-color: transparent; + width: 100%; + h2 { + color: $df-primary; + font-size: 24px; + font-weight: regular; + margin-bottom: 32px; + } + p { + color: $df-secondary; + margin-bottom: 0; + font-size: 14px; + } + } + .btn-primary { + width: 100%; + font-size: 11px; + text-transform: uppercase; + background-color: $db-tertiary; + color: $df-primary; + &:hover { + color: $da-primary; + background-color: $db-cuaternary; + } + } + } + } + .dashboard-table { + width: 800px; + .table-rows { + padding-top: 0; + .table-row { + font-size: 14px; + min-height: 40px; + height: fit-content; + .name { + color: $df-primary; + max-width: 480px; + } + .expiration-date { + color: $df-secondary; + } + } + } + } + .webhooks-empty { + width: 468px; + border: 1px solid $db-cuaternary; + border-radius: 8px; + margin-top: 32px; + font-size: 14px; + background-color: transparent; + color: $df-secondary; + } + } + // Members section .dashboard-table { .table-header { diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index e4559e9cb..74600eee5 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -273,7 +273,7 @@ .slider-selector.hue { grid-area: "hue"; - align-self: end; + align-self: flex-end; } .slider-selector.opacity { diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 48d0a045a..3070777fd 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1924,7 +1924,7 @@ &.single-button { display: flex; - justify-content: end; + justify-content: flex-end; height: 1.5rem; .btn-wrapper { diff --git a/frontend/shadow-cljs.edn b/frontend/shadow-cljs.edn index 9797e3234..cdfc2c25c 100644 --- a/frontend/shadow-cljs.edn +++ b/frontend/shadow-cljs.edn @@ -10,7 +10,8 @@ :output-dir "resources/public/js/" :asset-path "/js" :devtools {:browser-inject :main - :watch-dir "resources/public"} + :watch-dir "resources/public" + :reload-strategy :full} :build-options {:manifest-name "manifest.json"} :modules diff --git a/frontend/src/app/main/data/workspace/common.cljs b/frontend/src/app/main/data/workspace/common.cljs index ab6ad0154..78109f41f 100644 --- a/frontend/src/app/main/data/workspace/common.cljs +++ b/frontend/src/app/main/data/workspace/common.cljs @@ -169,7 +169,6 @@ (ptk/reify ::hide-toolbar ptk/UpdateEvent (update [_ state] - (let [_ (prn "hide toolbar")]) (assoc-in state [:workspace-local :hide-toolbar] true)))) (defn show-toolbar @@ -177,5 +176,4 @@ (ptk/reify ::show-toolbar ptk/UpdateEvent (update [_ state] - (let [_ (prn "show toolbar")]) (assoc-in state [:workspace-local :hide-toolbar] false)))) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index 763c90b55..2858b3c0a 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -22,6 +22,8 @@ &.mini { width: var(--bullet-size, $s-16); height: var(--bullet-size, $s-16); + min-width: var(--bullet-size, $s-16); + min-height: var(--bullet-size, $s-16); margin-top: 0; border: 1px solid var(--color-bullet-border-color); } @@ -29,7 +31,6 @@ &.is-not-library-color { overflow: hidden; border-radius: $br-8; - & .color-bullet-wrapper { clip-path: none; } @@ -60,6 +61,9 @@ height: 100%; background-color: var(--color-bullet-background-color); } + &:hover { + border: $s-2 solid var(--color-bullet-border-color-selected); + } } .color-text { diff --git a/frontend/src/app/main/ui/components/color_input.cljs b/frontend/src/app/main/ui/components/color_input.cljs index 45509a341..3d546a045 100644 --- a/frontend/src/app/main/ui/components/color_input.cljs +++ b/frontend/src/app/main/ui/components/color_input.cljs @@ -45,7 +45,7 @@ dirty-ref (mf/use-ref false) parse-value - (mf/use-callback + (mf/use-fn (mf/deps ref) (fn [] (let [input-node (mf/ref-val ref)] @@ -58,14 +58,14 @@ nil))))) update-input - (mf/use-callback + (mf/use-fn (mf/deps ref) (fn [new-value] (let [input-node (mf/ref-val ref)] (dom/set-value! input-node (uc/remove-hash new-value))))) apply-value - (mf/use-callback + (mf/use-fn (mf/deps on-change update-input) (fn [new-value] (mf/set-ref-val! dirty-ref false) @@ -75,7 +75,7 @@ (update-input new-value)))) handle-key-down - (mf/use-callback + (mf/use-fn (mf/deps apply-value update-input) (fn [event] (mf/set-ref-val! dirty-ref true) @@ -93,7 +93,7 @@ (dom/blur! input-node))))) handle-blur - (mf/use-callback + (mf/use-fn (mf/deps parse-value apply-value update-input) (fn [_] (let [new-value (parse-value)] @@ -104,7 +104,7 @@ (update-input value))))) on-click - (mf/use-callback + (mf/use-fn (fn [event] (let [target (dom/get-target event)] (when (some? ref) @@ -113,12 +113,12 @@ (dom/blur! current))))))) on-mouse-up - (mf/use-callback + (mf/use-fn (fn [event] (dom/prevent-default event))) handle-focus - (mf/use-callback + (mf/use-fn (fn [event] (let [target (dom/get-target event)] (when on-focus diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index 06e3981e9..890e6b06d 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -21,7 +21,7 @@ .dropdown-button { @include flexCenter; svg { - @extend .button-icon; + @extend .button-icon-small; transform: rotate(90deg); stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index bbad62215..9099406a3 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -20,7 +20,6 @@ {::mf/wrap-props false} [props] (let [context (mf/use-ctx context) - icon (unchecked-get props "icon") id (unchecked-get props "id") value (unchecked-get props "value") @@ -28,18 +27,18 @@ title (unchecked-get props "title") unique-key (unchecked-get props "unique-key") icon-class (unchecked-get props "icon-class") + type (or (unchecked-get props "type") "radio") on-change (unchecked-get context "on-change") selected (unchecked-get context "selected") name (unchecked-get context "name") - encode-fn (unchecked-get context "encode-fn") + encode-fn (unchecked-get context "encode-fn") checked? (= selected value)] [:label {:for id :title title :key unique-key - :tabIndex "0" :class (stl/css-case :radio-icon true :checked checked? @@ -53,48 +52,7 @@ [:input {:id id :on-change on-change - :type "radio" - :name name - :disabled disabled - :value (encode-fn value) - :checked checked?}]])) - -(mf/defc nilable-option - {::mf/wrap-props false} - [props] - (let [context (mf/use-ctx context) - icon (unchecked-get props "icon") - id (unchecked-get props "id") - value (unchecked-get props "value") - title (unchecked-get props "title") - disabled (unchecked-get props "disabled") - unique-key (unchecked-get props "unique-key") - icon-class (unchecked-get props "icon-class") - - on-change (unchecked-get context "on-change") - selected (unchecked-get context "selected") - name (unchecked-get context "name") - - encode-fn (unchecked-get context "encode-fn") - checked? (= selected value)] - - [:label {:for id - :key unique-key - :title title - :class (stl/css-case - :radio-icon true - :disabled disabled - :checked checked?)} - - (if (some? icon) - [:span {:class (when icon-class icon-class)} - icon] - [:span {:class (stl/css :title-name)} - (encode-fn value)]) - - [:input {:id id - :on-change on-change - :type "checkbox" + :type type :name name :disabled disabled :value (encode-fn value) @@ -128,9 +86,11 @@ (mf/use-fn (mf/deps on-change) (fn [event] - (let [value (dom/get-target-val event)] + (let [input-node (dom/get-target event) + value (dom/get-target-val event)] (when (fn? on-change) - (on-change (decode-fn value) event))))) + (do (on-change (decode-fn value) event) + (dom/blur! input-node)))))) context-value (mf/with-memo [selected on-change' name encode-fn decode-fn] diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 9f575372d..d436f4d76 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -14,11 +14,11 @@ } .radio-icon { @extend .button-radio; - height: $s-28; + height: $s-32; flex-grow: 1; - border-radius: $s-6; - border: solid $s-1 transparent; + border-radius: $s-8; box-sizing: content-box; + border: none; input { display: none; } @@ -30,8 +30,15 @@ @include tabTitleTipography; color: var(--radio-btn-foreground-color); } + &:hover { + border: none; + svg { + color: var(--radio-btn-foreground-color-selected); + } + } &.checked { + border: none; background-color: var(--radio-btn-background-color-selected); svg { stroke: var(--radio-btn-foreground-color-selected); @@ -43,6 +50,7 @@ &.disabled { cursor: default; + background-color: transparent; svg { stroke: var(--button-foreground-color-disabled); } diff --git a/frontend/src/app/main/ui/components/search_bar.cljs b/frontend/src/app/main/ui/components/search_bar.cljs index 8eb5631e2..507b68d1e 100644 --- a/frontend/src/app/main/ui/components/search_bar.cljs +++ b/frontend/src/app/main/ui/components/search_bar.cljs @@ -42,7 +42,7 @@ (fn [event] (let [enter? (kbd/enter? event) esc? (kbd/esc? event) - node (dom/event->target event)] + node (dom/get-target event)] (when ^boolean enter? (dom/blur! node)) (when ^boolean esc? (dom/blur! node)))))] [:span {:class (dom/classnames (css :search-box) true diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 2fabc9d22..5f00befbc 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -23,7 +23,7 @@ [item item item])) (mf/defc select - [{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}] + [{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}] (let [new-css-system (mf/use-ctx ctx/new-css-system) label-index (mf/with-memo [options] (into {} (map as-key-value) options)) @@ -95,7 +95,7 @@ [:span {:class (stl/css :current-label)} current-label] [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:& dropdown {:show is-open? :on-close close-dropdown} - [:ul {:class (stl/css :custom-select-dropdown)} + [:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} (for [[index item] (d/enumerate options)] (if (= :separator item) [:li {:class (dom/classnames (stl/css :separator) true) diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 8b4625d79..ba9b52baa 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -37,7 +37,7 @@ .dropdown-button { @include flexCenter; svg { - @extend .button-icon; + @extend .button-icon-small; transform: rotate(90deg); stroke: var(--icon-foreground); } diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index 8482f4fb1..da7cf4f98 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -13,16 +13,27 @@ (mf/defc title-bar {::mf/wrap-props false} - [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}] + [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class clickable-all?]}] (let [klass (dm/str (stl/css :title-bar) " " class)] [:div {:class klass} (if collapsable? - [:button {:class (stl/css :toggle-btn) :on-click on-collapsed} - [:span {:class (stl/css-case - :collased-icon true - :rotated collapsed?)} - i/arrow-refactor] - [:div {:class (stl/css :title)} title]] + [:div {:class (stl/css :title-wrapper)} + (if clickable-all? + [:button {:class (stl/css :toggle-btn) + :on-click on-collapsed} + [:span {:class (stl/css-case + :collapsabled-icon true + :rotated collapsed?)} + i/arrow-refactor] + [:div {:class (stl/css :title)} title]] + + [:* + [:button {:class (stl/css-case + :collapsabled-icon true + :rotated collapsed?) + :on-click on-collapsed} + i/arrow-refactor] + [:div {:class (stl/css :title)} title]])] [:div {:class (stl/css :title-only)} title]) children (when (some? on-btn-click) diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 98e4595fc..d69d8affa 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -23,26 +23,57 @@ flex-grow: 1; height: 100%; min-height: $s-32; - margin-left: $s-8; color: var(--title-foreground-color); } .title-only { margin-left: $s-8; } - .toggle-btn { - @include buttonStyle; + .title-wrapper { display: flex; align-items: center; flex-grow: 1; padding: 0; color: var(--title-foreground-color); stroke: var(--title-foreground-color); - .collased-icon { + .toggle-btn { + @include buttonStyle; + display: flex; + align-items: center; + flex-grow: 1; + padding: 0; + color: var(--title-foreground-color); + stroke: var(--title-foreground-color); + .collapsabled-icon { + @include flexCenter; + height: $s-24; + border-radius: $br-8; + svg { + @extend .button-icon-small; + transform: rotate(90deg); + stroke: var(--icon-foreground); + } + &.rotated svg { + transform: rotate(0deg); + } + } + &:hover { + color: var(--title-foreground-color-hover); + stroke: var(--title-foreground-color-hover); + .title { + color: var(--title-foreground-color-hover); + stroke: var(--title-foreground-color-hover); + } + .collapsabled-icon svg { + stroke: var(--title-foreground-color-hover); + } + } + } + .collapsabled-icon { + @include buttonStyle; @include flexCenter; height: $s-24; border-radius: $br-8; - svg { @extend .button-icon-small; transform: rotate(90deg); @@ -56,10 +87,9 @@ color: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover); .title { - color: var(--title-foreground-color-hover); stroke: var(--title-foreground-color-hover); } - .collased-icon svg { + .collapsabled-icon svg { stroke: var(--title-foreground-color-hover); } } diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 6cc4f9244..5ce90cf3b 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -950,7 +950,7 @@ [:* [:& header {:team team :section :dashboard-team-webhooks}] [:section.dashboard-container.dashboard-team-webhooks - [:div + [:* [:& webhooks-hero] (if (empty? webhooks) [:div.webhooks-empty diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs index e46c4aac2..b5bd3983b 100644 --- a/frontend/src/app/main/ui/settings/feedback.cljs +++ b/frontend/src/app/main/ui/settings/feedback.cljs @@ -64,8 +64,8 @@ :form form} ;; --- Feedback section - [:h2 (tr "feedback.title")] - [:p (tr "feedback.subtitle")] + [:h2.field-title (tr "feedback.title")] + [:p.field-text (tr "feedback.subtitle")] [:div.fields-row [:& fm/input {:label (tr "feedback.subject") @@ -82,22 +82,20 @@ [:hr] - [:h2 (tr "feedback.discourse-title")] - [:p (tr "feedback.discourse-subtitle1")] + [:h2.field-title (tr "feedback.discourse-title")] + [:p.field-text (tr "feedback.discourse-subtitle1")] [:a.btn-secondary.btn-large {:href "https://community.penpot.app" :target "_blank"} (tr "feedback.discourse-go-to")] [:hr] - [:h2 (tr "feedback.twitter-title")] - [:p (tr "feedback.twitter-subtitle1")] + [:h2.field-title (tr "feedback.twitter-title")] + [:p.field-text (tr "feedback.twitter-subtitle1")] [:a.btn-secondary.btn-large {:href "https://twitter.com/penpotapp" :target "_blank"} - (tr "feedback.twitter-go-to")] - - ])) + (tr "feedback.twitter-go-to")]])) (mf/defc feedback-page [] diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index a7f2b83ef..85a312635 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -206,7 +206,7 @@ (mf/use-fn (mf/deps file-id) (fn [event] - (let [input-node (dom/event->target event) + (let [input-node (dom/get-target event) publish-library #(st/emit! (dwl/set-file-shared file-id true)) cancel-publish #(st/emit! (modal/show :libraries-dialog {}))] (if empty-library? @@ -237,7 +237,7 @@ (fn [event] (let [enter? (kbd/enter? event) esc? (kbd/esc? event) - input-node (dom/event->target event)] + input-node (dom/get-target event)] (when ^boolean enter? (dom/blur! input-node)) (when ^boolean esc? diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 6bb7c755a..32fbbe731 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -130,7 +130,7 @@ (fn [event] (let [enter? (kbd/enter? event) esc? (kbd/esc? event) - node (dom/event->target event)] + node (dom/get-target event)] (when ^boolean enter? (dom/blur! node)) (when ^boolean esc? (dom/blur! node))))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index df3c6ed70..04f76cd0c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -105,18 +105,16 @@ } } .libraries-wrapper { - overflow: auto; + overflow-x: hidden; + overflow-y: auto; + scrollbar-gutter: stable; display: flex; flex-direction: column; padding-left: $s-8; - height: calc(100% - $s-80); - overflow-y: auto; - overflow-x: hidden; - scrollbar-gutter: stable; - overflow-y: overlay; + height: calc(100vh - $s-180); } .assets-header { - padding: $s-8 $s-12 $s-12 $s-12; + padding: $s-8 0 $s-12 $s-12; .search-wrapper { display: flex; gap: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index 110717753..1cadf1dc9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -113,8 +113,7 @@ (mf/use-fn (mf/deps rename-color) (fn [event] - (let [target (dom/event->target event) - name (dom/get-value target)] + (let [name (dom/get-target-val event)] (rename-color name) (st/emit! dwl/clear-color-for-rename) (reset! editing* false)))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index 8125e8a89..022a05ab5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -21,7 +21,7 @@ .colors-group { margin-top: $s-4; .asset-list { - padding: 0 0 0 $s-12; + padding: 0 0 0 $s-4; .asset-list-item { position: relative; display: flex; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index f7710e491..cc2d7879e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -146,6 +146,7 @@ [:div {:class (dom/classnames (css :asset-section) true)} [:& title-bar {:collapsable? true :collapsed? (not open?) + :clickable-all? true :on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?))) :class (css :title-spacing) :title (mf/html [:span {:class (dom/classnames (css :title-name) true)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index cb02f3d0c..9a1c5531f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -600,10 +600,10 @@ :name "listing-style"} [:& radio-button {:icon i/view-as-list-refactor :value "list" - :id :list}] + :id "opt-list"}] [:& radio-button {:icon i/flex-grid-refactor :value "grid" - :id :grid}]]]) + :id "opt-grid"}]]]) (when (and components-v2 (not read-only?) local?) [:div {:on-click add-component diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index f8e4d3fb7..7415ecf14 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -205,14 +205,14 @@ .listing-option-btn { @include flexCenter; cursor: pointer; + background-color: var(--button-radio-background-color-rest); &.first { margin-left: auto; } svg { - height: 16px; - width: 16px; + @extend .button-icon; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs index 9befc10c5..116ebd2ab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs @@ -56,6 +56,7 @@ [:div {:class (dom/classnames (css :library-title) true)} [:& title-bar {:collapsable? true :collapsed? (not open?) + :clickable-all? true :on-collapsed toggle-open :title (if local? (mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index e33204180..546975055 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -49,16 +49,17 @@ (if new-css-system [:div {:class (dom/classnames (css :group-title) true) :on-context-menu on-context-menu} - [:& title-bar {:collapsable? true - :collapsed? (not group-open?) - :on-collapsed on-fold-group - :title (mf/html [:* (when-not (empty? other-path) - [:span {:class (dom/classnames (css :pre-path) true) - :title (when truncated path)} - other-path "\u00A0\u2022\u00A0"]) - [:span {:class (dom/classnames (css :path) true) - :title (when truncated path)} - last-path]])}] + [:& title-bar {:collapsable? true + :collapsed? (not group-open?) + :clickable-all? true + :on-collapsed on-fold-group + :title (mf/html [:* (when-not (empty? other-path) + [:span {:class (dom/classnames (css :pre-path) true) + :title (when truncated path)} + other-path "\u00A0\u2022\u00A0"]) + [:span {:class (dom/classnames (css :path) true) + :title (when truncated path)} + last-path]])}] [:& cmm/assets-context-menu {:on-close on-close-menu :state @menu-state diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss index 5ba513806..88eb0e6cd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -7,12 +7,14 @@ @import "refactor/common-refactor.scss"; .group-title { - padding-left: $s-16; + padding-left: $s-4; .pre-path { + margin-left: $s-2; text-transform: initial; color: var(--title-foreground-color); } .path { + margin-left: $s-2; text-transform: initial; color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs index fc1e1f94f..82a9320b6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.assets.typographies - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -101,7 +101,7 @@ (partial on-asset-click typography-id apply-typography))] (if ^boolean new-css-system - [:div {:class (dom/classnames (css :typography-item) true) + [:div {:class (stl/css :typography-item) :ref item-ref :draggable (and (not read-only?) (not open?)) :on-drag-start on-typography-drag-start @@ -109,6 +109,7 @@ :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default :on-drop on-drop} + [:& typography-entry {:typography typography :local? local? @@ -121,9 +122,8 @@ :focus-name? rename? :external-open* open* :file-id file-id}] - (when ^boolean dragging? - [:div {:class (dom/classnames (css :dragging) true)}])] + [:div {:class (stl/css :dragging)}])] [:div.typography-container {:ref item-ref :draggable (and (not read-only?) (not open?)) @@ -184,7 +184,7 @@ (cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))] (if ^boolean new-css-system - [:div {:class (dom/classnames (css :typographies-group) true) + [:div {:class (stl/css :typographies-group) :on-drag-enter on-drag-enter :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default @@ -199,19 +199,19 @@ (when group-open? [:* (let [typographies (get groups "" [])] - [:div {:class (dom/classnames (css :assets-list) true) + [:div {:class (stl/css :assets-list) :on-drag-enter on-drag-enter :on-drag-leave on-drag-leave :on-drag-over dom/prevent-default :on-drop on-drop} (when ^boolean dragging? - [:div {:class (css :grid-placeholder)} "\u00A0"]) + [:div {:class (stl/css :grid-placeholder)} "\u00A0"]) (when (and (empty? typographies) (some? groups)) - [:div {:class (css :drop-space)}]) + [:div {:class (stl/css :drop-space)}]) (for [{:keys [id] :as typography} typographies] [:& typography-item {:typography typography :key (dm/str "typography-" id) @@ -411,6 +411,7 @@ (modal/show! :name-group-dialog {:path path :last-path last-path :accept rename-group}))) + on-ungroup (mf/use-fn (mf/deps typographies) @@ -433,7 +434,7 @@ (fn [id event] (dom/prevent-default event) (let [pos (dom/get-client-position event)] - (when (and local? (not read-only?)) + (when (not read-only?) (when-not (contains? selected id) (on-clear-selection)) (swap! state assoc :id id) @@ -467,7 +468,7 @@ editing-id (if new-css-system (:edit-typography local-data) (or (:rename-typography local-data) - (:edit-typography local-data))) + (:edit-typography local-data))) renaming-id (:rename-typography local-data) @@ -484,7 +485,8 @@ (when (:edit-typography local-data) (st/emit! #(update % :workspace-global dissoc :edit-typography))))) - [:& cmm/asset-section {:file-id file-id + [:* + [:& cmm/asset-section {:file-id file-id :title (tr "workspace.assets.typography") :section :typographies :assets-count (count typographies) @@ -493,8 +495,8 @@ (when local? [:& cmm/asset-section-block {:role :title-button} (when-not read-only? - [:button {:class (dom/classnames (css :assets-btn) true) - :on-click add-typography} + [:button {:class (stl/css :assets-btn) + :on-click add-typography} i/add-refactor])]) (when local? @@ -524,7 +526,7 @@ :on-context-menu on-context-menu :selected-full selected-full}] - (when local? + (if local? [:& cmm/assets-context-menu {:on-close on-close-menu :state @menu-state @@ -548,11 +550,18 @@ :id "assets-group-typography" :option-handler on-group})] - [(when-not (or multi-typographies? multi-assets?) [(tr "workspace.assets.rename") handle-rename-typography-clicked]) (when-not (or multi-typographies? multi-assets?) [(tr "workspace.assets.edit") handle-edit-typography-clicked]) [(tr "workspace.assets.delete") handle-delete-typography] (when-not multi-assets? - [(tr "workspace.assets.group") on-group])])}])]])) + [(tr "workspace.assets.group") on-group])])}] + + (when new-css-system + [:& cmm/assets-context-menu + {:on-close on-close-menu + :state @menu-state + :options [{:option-name "show info" + :id "assets-rename-typography" + :option-handler handle-edit-typography-clicked}]}]))]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss index a83da56d4..5c5e199ed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss @@ -19,7 +19,7 @@ } .typographies-group { .assets-list { - padding: 0 0 0 $s-12; + padding: 0 0 0 $s-4; .drop-space { height: $s-12; border-radius: $br-8; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index fee063fab..91a08976d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -241,7 +241,7 @@ handle-key-down (mf/use-fn (fn [event] - (when-let [node (dom/event->target event)] + (when-let [node (dom/get-target event)] (when (kbd/enter? event) (dom/blur! node)) (when (kbd/esc? event) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index 0919d573a..36441b292 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -35,40 +35,34 @@ state* (mf/use-state {:show-content true :show-more-options false}) - state (deref state*) - open? (:show-content state) more-options? (:show-more-options state) + toggle-content (mf/use-fn #(swap! state* update :show-content not)) - toggle-content - (mf/use-fn #(swap! state* update :show-content not)) - - toggle-more-options - (mf/use-fn #(swap! state* update :show-more-options not)) - + toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not)) change! - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [update-fn] (st/emit! (dch/update-shapes ids update-fn)))) handle-add - (mf/use-callback + (mf/use-fn (mf/deps change!) (fn [] (change! #(assoc % :blur (create-blur))))) handle-delete - (mf/use-callback + (mf/use-fn (mf/deps change!) (fn [] (change! #(dissoc % :blur)))) handle-change - (mf/use-callback + (mf/use-fn (mf/deps change!) (fn [value] (change! #(cond-> % @@ -79,7 +73,7 @@ (assoc-in [:blur :value] value))))) handle-toggle-visibility - (mf/use-callback + (mf/use-fn (mf/deps change!) (fn [] (change! #(update-in % [:blur :hidden] not))))] @@ -87,19 +81,17 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& 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 :title-spacing-blur)} - + :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 :first-row)} @@ -120,11 +112,13 @@ :on-click handle-delete} i/remove-refactor]]] (when more-options? [:div {:class (stl/css :second-row)} - [:span {:class (stl/css :label)} + [: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)}]])])] @@ -140,7 +134,8 @@ [:div.element-set-title-actions (when (and has-value? (not multiple?)) - [:div.add-page {:on-click handle-toggle-visibility} (if (:hidden blur) i/eye-closed i/eye)]) + [:div.add-page {:on-click handle-toggle-visibility} + (if (:hidden blur) i/eye-closed i/eye)]) (if has-value? [:div.add-page {:on-click handle-delete} i/minus] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index f9960fa80..888548156 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-blur { + padding-left: $s-12; + } .add-blur { @extend .button-tertiary; height: $s-32; @@ -43,10 +46,10 @@ @extend .button-icon; } &.selected { - background-color: var(--button-secondary-background-color-active); - color: var(--button-secondary-foreground-color-active); + background-color: var(--button-tertiary-background-color-hover); + color: var(--button-tertiary-foreground-color-active); svg { - stroke: var(--button-secondary-foreground-color-active); + stroke: var(--button-tertiary-foreground-color-active); } } } @@ -77,9 +80,11 @@ } .second-row { @extend .input-element; - gap: $s-4; width: $s-92; - padding-left: $s-8; + .label { + padding-left: $s-8; + width: $s-60; + } } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index 92b77df1c..bae691940 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -101,22 +101,22 @@ :value "union" :disabled disabled-bool-btns :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") - :id :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 :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 :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 :exclude}]]] + :id "bool-opt-exclude"}]]] [:div {:class (stl/css :bool-group)} [:button diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index 63a4d6623..80fa49f47 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs @@ -161,6 +161,8 @@ state* (mf/use-state true) open? (deref state*) + has-colors? (or (some? (seq colors)) (some? (seq library-colors))) + toggle-content (mf/use-fn #(swap! state* not)) expand-lib-color (mf/use-state false) @@ -215,11 +217,11 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-colors? :collapsed? (not open?) :on-collapsed toggle-content :title (tr "workspace.options.selection-color") - :class (stl/css :title-spacing-selected-colors)}]] + :class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]] (when open? [:div {:class (stl/css :element-content)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 4301877b0..116eef94c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-selected-colors { + padding-left: $s-12; + } .add-fill { @extend .button-tertiary; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index c822e9129..1ed1fa93b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -13,14 +13,14 @@ .constraints-widget { background-color: var(--constraint-widget-background-color); display: grid; - grid-template-columns: $s-24 $s-72 $s-24; - grid-template-rows: $s-24 $s-72 $s-24; + 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-120; - width: $s-120; + height: $s-108; + width: $s-108; border-radius: $br-8; .constraints-top, .constraints-left, @@ -37,8 +37,8 @@ width: 100%; height: 100%; .resalted-area { - width: $s-40; - height: $s-4; + width: $s-32; + height: $s-3; border-radius: $br-8; background-color: var(--button-constraint-background-color-rest); padding: 0; @@ -58,11 +58,11 @@ .constraints-left { grid-area: left; .constraint-btn-rotated { - height: $s-72; + height: $s-60; width: $s-24; .resalted-area { - height: $s-40; - width: $s-4; + height: $s-32; + width: $s-3; } } } @@ -72,20 +72,20 @@ background-color: var(--constraint-center-area-background-color); border-radius: $br-8; .constraint-btn { - width: $s-72; + width: $s-60; height: $s-24; .resalted-area { - width: $s-40; - height: $s-4; + width: $s-32; + height: $s-3; } } .constraint-btn-special { position: absolute; - height: $s-72; + height: $s-60; width: $s-24; .resalted-area { - height: $s-40; - width: $s-4; + height: $s-32; + width: $s-3; } } } @@ -95,8 +95,8 @@ height: $s-72; width: $s-24; .resalted-area { - height: $s-40; - width: $s-4; + height: $s-32; + width: $s-3; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index 66492c6e0..f45dffb83 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -32,6 +32,7 @@ [{:keys [ids type values page-id file-id] :as props}] (let [new-css-system (mf/use-ctx ctx/new-css-system) exports (:exports values []) + has-exports? (or (= :multiple exports) (some? (seq exports))) comp-state* (mf/use-state true) open? (deref comp-state*) @@ -52,7 +53,7 @@ (str suffix)))) scale-enabled? - (mf/use-callback + (mf/use-fn (fn [export] (#{:png :jpeg} (:type export)))) @@ -94,7 +95,7 @@ ;; TODO: maybe move to specific events for avoid to have this logic here? add-export - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [] (let [xspec {:type :png :suffix "" :scale 1}] @@ -103,7 +104,7 @@ (assoc shape :exports (into [xspec] (:exports shape))))))))) delete-export - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [position] (let [remove-fill-by-index (fn [values index] (->> (d/enumerate values) @@ -114,7 +115,7 @@ (st/emit! (dch/update-shapes ids remove))))) on-scale-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index event] (let [scale (if new-css-system @@ -127,7 +128,7 @@ (assoc-in shape [:exports index :scale] scale))))))) on-suffix-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [event] (let [value (dom/get-target-val event) @@ -139,7 +140,7 @@ (assoc-in shape [:exports index :suffix] value))))))) on-type-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index event] (let [type (if new-css-system @@ -152,14 +153,14 @@ (assoc-in shape [:exports index :type] type))))))) on-remove-all - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [] (st/emit! (dch/update-shapes ids (fn [shape] (assoc shape :exports [])))))) manage-key-down - (mf/use-callback + (mf/use-fn (fn [event] (let [esc? (kbd/esc? event)] (when esc? @@ -181,11 +182,11 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& 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 :title-spacing-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? @@ -210,15 +211,20 @@ [:& 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 (str (:scale export)) :options size-options + :dropdown-class (stl/css :dropdown-upwards) :on-change (partial on-scale-change index)}]]) - [:div {:class (stl/css :suffix-input)} + [: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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 3c43629b8..78fe2b024 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-export { + padding-left: $s-12; + } .add-export { @extend .button-tertiary; height: $s-32; @@ -54,15 +57,24 @@ .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; - padding: 0 $s-8; flex-grow: 1; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index 68781e157..e4111beb8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -50,34 +50,39 @@ :group (tr "workspace.options.group-fill") (tr "workspace.options.fill")) - state* (mf/use-state true) + ;; Excluding nil values + values (d/without-nils values) + fills (:fills values) + has-fills? (or (= :multiple fills) (some? (seq fills))) + + + state* (mf/use-state has-fills?) open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) - ;; Excluding nil values - values (d/without-nils values) + hide-fill-on-export? (:hide-fill-on-export values false) checkbox-ref (mf/use-ref) on-add - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [_] (st/emit! (dc/add-fill ids {:color default-color :opacity 1})))) on-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (fn [color] (st/emit! (dc/change-fill ids color index))))) on-reorder - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [new-index] (fn [index] @@ -94,7 +99,7 @@ :opacity 1}))) on-detach - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (fn [color] @@ -103,7 +108,7 @@ (st/emit! (dc/change-fill ids color index)))))) on-change-show-fill-on-export - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [event] (let [value (-> event dom/get-target dom/checked?)] @@ -130,20 +135,20 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-fills? :collapsed? (not open?) :on-collapsed toggle-content :title label - :class (stl/css :title-spacing-fill)} + :class (stl/css-case :title-spacing-fill (not has-fills?))} - (when (and (not disable-remove?) (not (= :multiple (:fills values)))) + (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 values)) + (= :multiple fills) [:div {:class (stl/css :element-set-options-group)} [:div {:class (stl/css :group-label)} (tr "settings.multiple")] @@ -151,7 +156,7 @@ :class (stl/css :remove-btn)} i/remove-refactor]] - (seq (:fills values)) + (seq fills) [:& h/sortable-container {} (for [[index value] (d/enumerate (:fills values []))] [:& color-row {:color {:color (:fill-color value) @@ -190,20 +195,20 @@ [:div.element-set [:div.element-set-title [:span label] - (when (and (not disable-remove?) (not (= :multiple (:fills values)))) + (when (and (not disable-remove?) (not (= :multiple fills))) [:div.add-page {:on-click on-add} i/close])] [:div.element-set-content (cond - (= :multiple (:fills values)) + (= :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]]] - (seq (:fills values)) + (seq fills) [:& h/sortable-container {} (for [[index value] (d/enumerate (:fills values []))] [:& color-row {:color {:color (:fill-color value) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss index 76786dc02..e074bc78e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-fill { + padding-left: $s-12; + } .add-fill { @extend .button-tertiary; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index b1dc4cd9f..e108fd738 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -397,27 +397,30 @@ (let [new-css-system (mf/use-ctx ctx/new-css-system) state* (mf/use-state true) open? (deref state*) + frame-grids (:grids shape) + has-frame-grids? (or (= :multiple frame-grids) (some? (seq frame-grids))) toggle-content (mf/use-fn #(swap! state* not)) - id (:id shape) + id (:id shape) saved-grids (mf/deref workspace-saved-grids) 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? true + [:& 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.grid.grid-title")} [:button {:on-click handle-create-grid :class (stl/css :add-grid)} i/add-refactor]] - (when (and open? (seq (:grids shape))) + (when (and open? (seq frame-grids)) [:div {:class (stl/css :element-set-content)} - (for [[index grid] (map-indexed vector (:grids shape))] + (for [[index grid] (map-indexed vector frame-grids)] [:& grid-options {:key (str id "-" index) :shape-id id :grid grid @@ -432,9 +435,9 @@ [:span (tr "workspace.options.grid.grid-title")] [:div.add-page {:on-click handle-create-grid} i/close]] - (when (seq (:grids shape)) + (when (seq frame-grids) [:div.element-set-content - (for [[index grid] (map-indexed vector (:grids shape))] + (for [[index grid] (map-indexed vector frame-grids)] [:& grid-options {:key (str id "-" index) :shape-id id :grid grid diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 3b4603892..2c2021fa7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -7,6 +7,9 @@ @import "refactor/common-refactor.scss"; .element-set { + .title-spacing-board-grid { + padding-left: $s-12; + } .add-grid { @extend .button-tertiary; height: $s-32; @@ -174,7 +177,6 @@ .height { @extend .input-element; width: $s-108; - padding-left: $s-8; .icon-text { padding-top: $s-1; } @@ -183,7 +185,6 @@ .margin { @extend .input-element; width: $s-108; - padding-left: $s-8; .icon { &.rotated svg { transform: rotate(90deg); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index c9f901b71..b57836615 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -159,6 +159,8 @@ :options options :on-change handle-change-blend-mode :is-open? option-highlighted? + :class (stl/css-case :hidden-select (or hidden? + blocked?)) :on-pointer-enter-option handle-blend-mode-enter :on-pointer-leave-option handle-blend-mode-leave}]] [:div {:class (stl/css :input) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss index 15229959b..491d091c6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -18,7 +18,6 @@ .input { @extend .input-element; width: $s-60; - padding-left: $s-8; } .actions { display: flex; @@ -37,7 +36,7 @@ } &.hidden { - .select { + .hidden-select { background-color: transparent; border: $s-1 solid var(--input-border-color-disabled); color: var(--input-foreground-color-disabled); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 8820a30bf..a91fbfbce 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -901,19 +901,19 @@ (mf/defc grid-track-info [{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track]}] (let [drop-track - (mf/use-callback + (mf/use-fn (mf/deps type reorder-track index) (fn [drop-position data] (reorder-track type (:index data) (if (= :top drop-position) (dec index) index)))) pointer-enter - (mf/use-callback + (mf/use-fn (mf/deps type hover-track index) (fn [] (hover-track type index true))) pointer-leave - (mf/use-callback + (mf/use-fn (mf/deps type hover-track index) (fn [] (hover-track type index false))) @@ -1004,6 +1004,7 @@ ;; Display layout-type (:layout values) + has-layout? (some? layout-type) state* (mf/use-state (if layout-type true @@ -1217,11 +1218,11 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-layout? :collapsed? (not open?) :on-collapsed toggle-content :title "Layout" - :class (stl/css :title-spacing-layout)} + :class (stl/css-case :title-spacing-layout (not has-layout?))} (if (and (not multiple) (:layout values)) [:div {:class (stl/css :title-actions)} (when (features/active-feature? :grid-layout) @@ -1243,7 +1244,7 @@ :on-click on-set-layout} i/add-refactor]])]] - (when (and open? (:layout values)) + (when (and open? has-layout?) (when (not= :multiple layout-type) (case layout-type :flex diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index a8408e936..807de426b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -9,7 +9,7 @@ .element-set { .element-title { .title-spacing-layout { - margin: 0; + padding-left: $s-12; } .title-actions { @@ -50,8 +50,7 @@ stroke: var(--icon-foreground); } &.selected { - background-color: var(--button-tertiary-background-color-active); - color: var(--button-tertiary-foreground-color-active); + background-color: var(--button-tertiary-background-color-hover); svg { stroke: var(--button-tertiary-foreground-color-active); } @@ -72,7 +71,6 @@ .column-gap { @extend .input-element; width: $s-108; - padding-left: $s-8; &.disabled { @extend .disabled-input; } @@ -80,7 +78,6 @@ .row-gap { @extend .input-element; width: $s-108; - padding-left: $s-8; &.disabled { @extend .disabled-input; } @@ -98,7 +95,6 @@ .padding-simple { @extend .input-element; width: $s-108; - padding-left: $s-8; } } .paddings-multiple { @@ -108,7 +104,6 @@ .padding-multiple { @extend .input-element; width: $s-108; - padding-left: $s-8; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 21e9508c0..67b453fa9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -387,6 +387,7 @@ state* (mf/use-state true) open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) + has-content? (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?) ;; Align self @@ -486,7 +487,7 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-content? :collapsed? (not open?) :on-collapsed toggle-content :title (cond @@ -501,7 +502,8 @@ :else "Layout element") - :class (stl/css :title-spacing-layout-element)} + :class (stl/css-case :title-spacing-layout-element true + :title-spacing-empty (not has-content?))} (when is-flex-parent? [:div {:class (stl/css :position-options)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index 1c8dbf180..7f1f016e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -14,6 +14,9 @@ width: $s-140; } } + .title-spacing-empty { + padding-left: $s-12; + } } .flex-element-menu { display: flex; @@ -54,7 +57,6 @@ .z-index-wrapper { @extend .input-element; width: $s-124; - padding-left: $s-8; } } .second-row { @@ -90,7 +92,6 @@ .horizontal-margin { @extend .input-element; width: $s-108; - padding-left: $s-8; } } .margin-multiple { @@ -103,7 +104,6 @@ .right-margin { @extend .input-element; width: $s-108; - padding-left: $s-8; } } } @@ -124,7 +124,6 @@ .layout-item-max-h { @extend .input-element; width: $s-108; - padding-left: $s-8; .icon-text { justify-content: flex-start; width: $s-80; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 0bc00dd7c..2bf1ac6ec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -386,10 +386,10 @@ :name "frame-otientation"} [:& radio-button {:icon i/size-vertical-refactor :value "vert" - :id :vert}] + :id "size-vertical"}] [:& radio-button {:icon i/size-horizontal-refactor :value "horiz" - :id :horiz}]]]) + :id "size-horizontal"}]]]) (when (options :size) [:div {:class (stl/css :size)} [:div {:class (stl/css-case :width true diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index ffda32b62..5e4127468 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -101,8 +101,7 @@ .width { @extend .input-element; width: $s-108; - padding-left: $s-8; - y .icon-text { + .icon-text { padding-top: $s-1; } &.disabled { @@ -128,7 +127,6 @@ .y-position { @extend .input-element; width: $s-108; - padding-left: $s-8; .icon-text { padding-top: $s-1; } @@ -145,7 +143,6 @@ .rotation { @extend .input-element; width: $s-108; - padding-left: $s-8; .icon-text { padding-top: $s-1; } @@ -160,7 +157,6 @@ .radius-1 { @extend .input-element; width: $s-108; - padding-left: $s-8; } .radius-4 { display: grid; @@ -169,7 +165,6 @@ .small-input { @extend .input-element; width: $s-52; - padding-left: $s-8; } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index 3d0539e11..9d101d6ee 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -350,7 +350,7 @@ shadows (:shadow values []) open-state-ref (mf/with-memo [] (l/atom {})) - + has-shadows? (or (= :multiple shadows) (some? (seq shadows))) state* (mf/use-state {:show-content true :disable-drag false}) @@ -386,14 +386,14 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& 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 :title-spacing-shadow)} + :class (stl/css-case :title-spacing-shadow (not has-shadows?))} (when-not (= :multiple shadows) [:button {:class (stl/css :add-shadow) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss index 2c7e02144..13deb563b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-shadow { + padding-left: $s-12; + } .add-shadow { @extend .button-tertiary; height: $s-32; @@ -64,10 +67,10 @@ @extend .button-icon; } &.selected { - background-color: var(--button-secondary-background-color-active); - color: var(--button-secondary-foreground-color-active); + background-color: var(--button-tertiary-background-color-hover); + color: var(--button-tertiary-foreground-color-active); svg { - stroke: var(--button-secondary-foreground-color-active); + stroke: var(--button-tertiary-foreground-color-active); } } } @@ -111,7 +114,6 @@ @extend .input-element; width: $s-60; min-width: $s-60; - padding: 0 0 0 $s-8; input { width: $s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 4deded69d..aca613552 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -48,38 +48,42 @@ open? (deref state*) toggle-content (mf/use-fn #(swap! state* not)) + strokes (:strokes values) + has-strokes? (or (= :multiple strokes) (some? (seq strokes))) handle-change-stroke-color - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (fn [color] (st/emit! (dc/change-stroke ids color index))))) on-color-change-refactor - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index color] (st/emit! (dc/change-stroke ids color index)))) handle-remove - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (fn [] (st/emit! (dc/remove-stroke ids index))))) on-remove-refactor - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (st/emit! (dc/remove-stroke ids index)))) handle-remove-all - (fn [_] - (st/emit! (dc/remove-all-strokes ids))) + (mf/use-fn + (mf/deps ids) + (fn [_] + (st/emit! (dc/remove-all-strokes ids)))) handle-detach - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index] (fn [color] @@ -88,7 +92,7 @@ (st/emit! (dc/change-stroke ids color index)))))) on-color-detach-refactor - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index color] (let [color (-> color @@ -96,7 +100,7 @@ (st/emit! (dc/change-stroke ids color index))))) handle-reorder - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [new-index] (fn [index] @@ -111,7 +115,7 @@ (st/emit! (dc/change-stroke ids {:stroke-style value} index))))) on-stroke-style-change-refactor - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [index value] (st/emit! (dc/change-stroke ids {:stroke-style value} index)))) @@ -202,25 +206,25 @@ (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-strokes? :collapsed? (not open?) :on-collapsed toggle-content :title label - :class (stl/css :title-spacing-fill)} + :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 :element-content)} (cond - (= :multiple (:strokes values)) + (= :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 values)) + (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] [:& stroke-row {:key (dm/str "stroke-" index) @@ -254,7 +258,7 @@ [:div.element-set-content (cond - (= :multiple (:strokes values)) + (= :multiple strokes) [:div.element-set-options-group [:div.element-set-label (tr "settings.multiple")] [:div.element-set-actions @@ -262,7 +266,7 @@ i/minus]]] - (seq (:strokes values)) + (seq strokes) [:& h/sortable-container {} (for [[index value] (d/enumerate (:strokes values []))] [:& stroke-row {:key (dm/str "stroke-" index) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss index ce1d49eae..9738f5a35 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss @@ -8,6 +8,9 @@ .element-set { .element-title { + .title-spacing-stroke { + padding-left: $s-12; + } .add-stroke { @extend .button-tertiary; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index 8423f5b01..0399ea390 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -21,13 +21,13 @@ (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 - (mf/use-callback + (mf/use-fn (mf/deps attr on-change) (fn [event] (on-change attr (dom/get-target-val event)))) handle-delete - (mf/use-callback + (mf/use-fn (mf/deps attr on-delete) (fn [] (on-delete attr))) @@ -86,10 +86,12 @@ (let [new-css-system (mf/use-ctx ctx/new-css-system) state* (mf/use-state true) open? (deref state*) + attrs (:svg-attrs values) + has-attributes? (or (= :multiple attrs) (some? (seq attrs))) toggle-content (mf/use-fn #(swap! state* not)) handle-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [attr value] (let [update-fn @@ -97,7 +99,7 @@ (st/emit! (dch/update-shapes ids update-fn))))) handle-delete - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [attr] (let [update-fn @@ -111,17 +113,17 @@ shape))] (st/emit! (dch/update-shapes ids update-fn)))))] - (when-not (empty? (:svg-attrs values)) + (when-not (empty? attrs) (if new-css-system [:div {:class (stl/css :element-set)} [:div {:class (stl/css :element-set-title)} - [:& title-bar {:collapsable? true + [:& title-bar {:collapsable? has-attributes? :collapsed? (not open?) :on-collapsed toggle-content :title (tr "workspace.sidebar.options.svg-attrs.title") - :class (stl/css :title-spacing-svg-attrs)}]] + :class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]] [:div {:class (stl/css :element-set-content)} - (for [[attr-key attr-value] (:svg-attrs values)] + (for [[attr-key attr-value] attrs] [:& attribute-value {:key attr-key :attr [attr-key] :value attr-value @@ -132,7 +134,7 @@ [:div.element-set-title [:span (tr "workspace.sidebar.options.svg-attrs.title")]] - (for [[attr-key attr-value] (:svg-attrs values)] + (for [[attr-key attr-value] attrs] [:& attribute-value {:key attr-key :attr [attr-key] :value attr-value diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 5495e17be..806fadf67 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -7,6 +7,9 @@ @import "refactor/common-refactor.scss"; .element-set { + .title-spacing-svg-attrs { + padding-left: $s-12; + } .element-set-content { display: flex; flex-direction: column; @@ -33,7 +36,6 @@ .attr-input { @extend .input-element; width: $s-124; - padding-left: $s-8; } .attr-actions { display: flex; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs index 436eb28dc..8e393ae2d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs @@ -17,11 +17,11 @@ [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] [app.main.store :as st] - [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons nilable-option]] + [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.typography :refer [typography-entry typography-options]] + [app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.timers :as ts] @@ -113,14 +113,16 @@ [:& radio-buttons {:selected direction :on-change handle-change :name "text-direction-options"} - [:& nilable-option {:value "ltr" + [:& radio-button {:value "ltr" + :type "checkbox" :id "ltr-text-direction" :title (tr "workspace.options.text-options.direction-ltr") :icon i/text-ltr-refactor}] - [:& nilable-option {:value "rtl" - :id "rtl-text-direction" - :title (tr "workspace.options.text-options.direction-rtl") - :icon i/text-rtl-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 @@ -195,21 +197,20 @@ handle-change-grow (mf/use-fn - (mf/deps ids) + (mf/deps ids new-css-system) (fn [value] - (let [uid (js/Symbol) - - grow-type (if new-css-system - (keyword value) - (-> (dom/get-current-target value) - (dom/get-data "value") - (keyword)))] - (st/emit! - (dwu/start-undo-transaction uid) - (dch/update-shapes ids #(assoc % :grow-type grow-type))) + (let [uid (js/Symbol) + grow-type (if new-css-system + (keyword value) + (-> (dom/get-current-target value) + (dom/get-data "value") + (keyword)))] + (st/emit! + (dwu/start-undo-transaction uid) + (dch/update-shapes ids #(assoc % :grow-type grow-type))) ;; We asynchronously commit so every sychronous event is resolved first and inside the transaction - (ts/schedule #(st/emit! (dwu/commit-undo-transaction uid)))) - (when (some? on-blur) (on-blur))))] + (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)} @@ -271,14 +272,16 @@ [:& radio-buttons {:selected text-decoration :on-change handle-change :name "text-decoration-options"} - [:& nilable-option {:value "underline" - :id "underline-text-decoration" - :title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline)) - :icon i/text-underlined-refactor}] - [:& nilable-option {:value "line-through" - :id "line-through-text-decoration" - :title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through)) - :icon i/text-stroked-refactor}]]] + [:& 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 @@ -335,7 +338,7 @@ typography-file (:typography-ref-file values) emit-update! - (mf/use-callback + (mf/use-fn (mf/deps values) (fn [ids attrs] (st/emit! (dwt/save-font (-> (merge txt/default-text-attrs values attrs) @@ -343,7 +346,7 @@ (dwt/update-all-attrs ids attrs)))) on-change - (mf/use-callback + (mf/use-fn (mf/deps ids emit-update!) (fn [attrs] (emit-update! ids attrs))) @@ -381,14 +384,14 @@ :typography-ref-file file-id}))) handle-detach-typography - (mf/use-callback + (mf/use-fn (mf/deps on-change) (fn [] (on-change {:typography-ref-file nil :typography-ref-id nil}))) handle-change-typography - (mf/use-callback + (mf/use-fn (mf/deps typography file-id) (fn [changes] (st/emit! (dwl/update-typography (merge typography changes) file-id)))) @@ -440,7 +443,7 @@ i/detach-refactor]] :else - [:> typography-options opts]) + [:> text-options opts]) [:div {:class (stl/css :text-align-options)} [:> text-align-options opts] @@ -477,7 +480,7 @@ :title (tr "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]] :else - [:> typography-options opts]) + [:> text-options opts]) [:div.element-set-content diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index e142d4d5a..0edee08b4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -22,14 +22,7 @@ flex-direction: column; gap: $s-4; .multiple-typography { - display: flex; - align-items: center; - padding: 0 $s-8; - gap: $s-4; - border-radius: $s-8; - background-color: var(--input-background-color); - height: $s-32; - flex-grow: 1; + @extend .mixed-bar; .multiple-text { @include titleTipography; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 55d64f06c..874df130c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -20,7 +20,7 @@ [app.main.store :as st] [app.main.ui.components.editable-select :refer [editable-select]] [app.main.ui.components.numeric-input :refer [numeric-input*]] - [app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.search-bar :refer [search-bar]] [app.main.ui.components.select :refer [select]] [app.main.ui.context :as ctx] @@ -184,6 +184,7 @@ #(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})] (.scrollToPosition ^js inst offset))))) + (if new-css-system [:div {:class (stl/css :font-selector)} [:div {:class (stl/css :font-selector-dropdown)} @@ -249,6 +250,7 @@ :rowCount (count fonts) :rowHeight 32 :rowRenderer render}])))]]]]))) + (defn row-renderer [fonts selected on-select props] (let [index (unchecked-get props "index") @@ -303,7 +305,9 @@ (mf/use-fn (mf/deps font on-change) (fn [event] - (let [new-variant-id (dom/get-target-val event) + (let [new-variant-id (if new-css-system + event + (dom/get-target-val event)) variant (d/seek #(= new-variant-id (:id %)) (:variants font))] (on-change {:font-id (:id font) :font-family (:family font) @@ -330,6 +334,7 @@ (on-blur)) (when (mf/ref-val last-font) (st/emit! (fts/add-recent-font (mf/ref-val last-font))))))] + (if new-css-system [:* (when @open-selector? @@ -339,9 +344,8 @@ :on-select on-font-select :show-recent show-recent}]) - [:div - {:class (stl/css :font-option) - :on-click #(reset! open-selector? true)} + [:div {:class (stl/css :font-option) + :on-click #(reset! open-selector? true)} (cond (= :multiple font-id) "--" @@ -355,6 +359,7 @@ :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] @@ -406,7 +411,6 @@ :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)] @@ -481,6 +485,7 @@ :on-change #(handle-change % :letter-spacing) :on-blur on-blur}]]] + [:div.spacing-options [:div.input-icon [:span.icon-before.tooltip.tooltip-bottom @@ -526,15 +531,18 @@ [:& radio-buttons {:selected text-transform :on-change handle-change :name "text-transform"} - [:& nilable-option {:icon i/text-uppercase-refactor + [:& radio-button {:icon i/text-uppercase-refactor + :type "checkbox" :value "uppercase" - :id :uppercase}] - [:& nilable-option {:icon i/text-lowercase-refactor + :id "text-transform-uppercase"}] + [:& radio-button {:icon i/text-lowercase-refactor + :type "checkbox" :value "lowercase" - :id :lowercase}] - [:& nilable-option {:icon i/text-mixed-refactor + :id "text-transform-lowercase"}] + [:& radio-button {:icon i/text-mixed-refactor + :type "checkbox" :value "capitalize" - :id :capitalize}]]] + :id "text-transform-capitalize"}]]] [:div.align-icons [:span.tooltip.tooltip-bottom @@ -559,7 +567,7 @@ :on-click #(handle-change "capitalize")} i/titlecase]]))) -(mf/defc typography-options +(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) @@ -571,7 +579,7 @@ :show-recent show-recent}] (if new-css-system - [:div {:class (stl/css :typography-options)} + [:div {:class (stl/css :text-options)} [:> font-options opts] [:div {:class (stl/css :typography-variations)} [:> spacing-options opts] @@ -588,7 +596,9 @@ (mf/defc typography-advanced-options {::mf/wrap [mf/memo]} [{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library on-key-down]}] - (let [ref (mf/use-ref nil)] + (let [ref (mf/use-ref nil) + font-data (fonts/get-font-data (:font-id typography))] + (mf/use-effect (mf/deps visible?) (fn [] @@ -599,14 +609,14 @@ (when visible? [:div {:ref ref :class (stl/css :advanced-options-wrapper)} + (if ^boolean editable? [:* [: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)}} + [: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 @@ -621,47 +631,52 @@ :on-click on-close} i/tick-refactor]] - [:& typography-options {:values typography - :on-change on-change - :show-recent false}]] + [:& 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 {:class (stl/css :typography-info-wrapper)} + [:div {:class (stl/css :typography-name-wrapper)} + [:div {:class (stl/css :typography-sample) - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-id")] - [:span (:font-id typography)]] + :style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.sample")] - [:div.element-set-actions-button.actions-inside - {:on-click on-close} - i/actions] + [:div {:class (stl/css :typography-name) + :title (:name typography)} + (:name typography)] + [:span {:class (stl/css :typography-font)} + (:name font-data)] + [:div {:class (stl/css :action-btn) + :on-click on-close} + i/menu-refactor]] - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-variant-id")] - [:span (:font-variant-id typography)]] + [:div {:class (stl/css :info-row)} + [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")] + [:span {:class (stl/css :info-content)} (:font-variant-id typography)]] - [:div.row-flex - [:span.label (tr "workspace.assets.typography.font-size")] - [:span (:font-size typography)]] + [:div {:class (stl/css :info-row)} + [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-size")] + [:span {:class (stl/css :info-content)} (:font-size typography)]] - [:div.row-flex - [:span.label (tr "workspace.assets.typography.line-height")] - [:span (:line-height typography)]] + [:div {:class (stl/css :info-row)} + [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.line-height")] + [:span {:class (stl/css :info-content)} (:line-height typography)]] - [:div.row-flex - [:span.label (tr "workspace.assets.typography.letter-spacing")] - [:span (:letter-spacing typography)]] + [:div {:class (stl/css :info-row)} + [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.letter-spacing")] + [:span {:class (stl/css :info-content)} (:letter-spacing typography)]] - [:div.row-flex - [:span.label (tr "workspace.assets.typography.text-transform")] - [:span (:text-transform typography)]] + [:div {:class (stl/css :info-row)} + [:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.text-transform")] + [:span {:class (stl/css :info-content)} (: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")]])])]))) + [:a {:class (stl/css :link-btn) + :on-click navigate-to-library} + (tr "workspace.assets.typography.go-to-edit")])])]))) (mf/defc typography-entry @@ -713,7 +728,7 @@ (fn [event] (let [enter? (kbd/enter? event) esc? (kbd/esc? event) - input-node (dom/event->target event)] + input-node (dom/get-target event)] (when ^boolean enter? (dom/blur! input-node)) (when ^boolean esc? @@ -733,6 +748,7 @@ #(when-let [node (mf/ref-val name-input-ref)] (dom/focus! node) (dom/select-text! node))))) + (if new-css-system [:* [:div {:class (stl/css-case :typography-entry true @@ -773,18 +789,18 @@ [:div {:class (stl/css :typography-font) :title (:name font-data)} (:name font-data)])]) - - (when ^boolean on-detach - [:div {:class (stl/css :element-set-actions)} - [:div - {:class (stl/css :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/detach-refactor i/chain)]])] + [: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 + {:visible? open? + :on-close on-close :typography typography :editable? editable? :name-input-ref name-input-ref @@ -836,9 +852,9 @@ {:on-click on-close} i/actions]]] - [:& typography-options {:values typography - :on-change on-change - :show-recent false}]] + [:& text-options {:values typography + :on-change on-change + :show-recent false}]] [:div.element-set-content.typography-read-only-data [:div.row-flex.typography-name diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 41bdb7e7e..e974a515f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -13,6 +13,13 @@ height: $s-32; width: 100%; border-radius: $br-8; + background-color: var(--assets-item-background-color); + color: var(--assets-item-name-foreground-color-hover); + &:hover, + &:focus-within { + background-color: var(--assets-item-background-color-hover); + color: var(--assets-item-name-foreground-color-hover); + } .typography-selection-wrapper { display: grid; @@ -29,6 +36,7 @@ .typography-sample { @include flexCenter; min-width: $s-24; + height: $s-32; color: var(--assets-item-name-foreground-color-hover); } .typography-name, @@ -54,8 +62,27 @@ border: $s-1 solid var(--assets-item-border-color); } + .element-set-actions { + display: flex; + visibility: hidden; + .element-set-actions-button, + .menu-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + &:active { + background-color: transparent; + } + } + } &:hover { background-color: var(--assets-item-background-color-hover); + .element-set-actions { + visibility: visible; + } } } @@ -77,11 +104,14 @@ width: $s-24; height: 100%; font-size: $fs-16; + color: var(--assets-item-name-foreground-color-hover); } .adv-typography-name { @include removeInputStyle; - color: var(--input-foreground-color); + font-size: $fs-12; + color: var(--input-foreground-color-active); flex-grow: 1; + padding-left: $s-6; margin: 0; } .action-btn { @@ -93,6 +123,9 @@ @extend .button-icon-small; stroke: var(--icon-foreground); } + &:active { + background-color: transparent; + } } &:focus-within { border: $s-1 solid var(--input-border-color-active); @@ -109,9 +142,111 @@ height: 100%; width: 100%; background-color: var(--assets-title-background-color); + .typography-info-wrapper { + display: flex; + flex-direction: column; + gap: $s-4; + 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; + 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; + } + &: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); + } + } + + .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); + } + } + } + } } -.typography-options { +.text-options { position: relative; display: flex; flex-direction: column; @@ -129,7 +264,7 @@ height: $s-28; width: $s-28; svg { - @extend .button-icon; + @extend .button-icon-small; stroke: var(--icon-foreground); transform: rotate(90deg); } @@ -151,13 +286,11 @@ height: $s-32; .numeric-input { @extend .input-base; - margin: 0; - padding: 0; } span { @include flexCenter; svg { - @extend .button-icon; + @extend .button-icon-small; } } } @@ -166,7 +299,7 @@ height: $s-28; min-width: $s-28; svg { - @extend .button-icon; + @extend .button-icon-small; stroke: var(--icon-foreground); transform: rotate(90deg); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 75c8f869a..cbdb4699e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -61,6 +61,25 @@ gradient-color? (and (not multiple-colors?) (:gradient color) (get-in color [:gradient :type])) + + editing-text* (mf/use-state false) + editing-text? (deref editing-text*) + + on-focus + (mf/use-fn + (mf/deps on-focus) + (fn [event] + (reset! editing-text* true) + (when on-focus + (on-focus event)))) + + on-blur + (mf/use-fn + (mf/deps on-blur) + (fn [event] + (reset! editing-text* false) + (when on-blur + (on-blur event)))) parse-color (mf/use-fn (fn [color] @@ -157,7 +176,6 @@ (when (not= prev-color color) (modal/update-props! :colorpicker {:data (parse-color color)}))) - (if new-css-system [:div {:class (stl/css-case :color-data true @@ -166,13 +184,16 @@ :ref dref} [:span {:class (stl/css :color-info)} [:span {:class (stl/css-case :color-name-wrapper true + :library-name-wrapper library-color? + :editing editing-text? :gradient-name-wrapper gradient-color?)} [:span {:class (stl/css :color-bullet-wrapper)} [:& cbn/color-bullet {:color (cond-> color - (nil? color-name) (assoc - :id nil - :file-id nil)) - :on-click handle-click-color}]] + (nil? color-name) (assoc + :id nil + :file-id nil)) + :mini? true + :on-click handle-click-color}]] (cond ;; Rendering a color with ID library-color? @@ -212,7 +233,6 @@ (not multiple-colors?) (not library-color?)) - [:div {:class (stl/css :opacity-element-wrapper)} [:span {:class (stl/css :icon-text)} "%"] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index fed6300cd..b357a701b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -13,24 +13,24 @@ .color-info { display: flex; align-items: center; - gap: $s-1; + gap: $s-2; border-radius: $s-8; background-color: var(--input-details-color); height: $s-32; width: 100%; flex-grow: 1; .color-name-wrapper { - display: flex; - align-items: center; - border-radius: $br-8; - background-color: var(--input-background-color); + @extend .input-element; flex-grow: 1; - + width: 100%; + border-radius: $br-8 0 0 $br-8; + padding: 0; + margin-right: 0; .color-bullet-wrapper { - @extend .input-element; - background-color: transparent; + height: $s-28; + padding: 0 $s-2 0 $s-8; border-radius: $br-8 0 0 $br-8; - padding: 0 $s-4 0 $s-8; + background-color: transparent; &:hover { background-color: transparent; } @@ -39,35 +39,67 @@ @include titleTipography; display: flex; align-items: center; - height: $s-32; + height: $s-28; + padding-left: $s-6; + border-radius: $br-8; + width: 100%; flex-grow: 1; color: var(--input-foreground-color-active); } .detach-btn { @extend .button-tertiary; - height: $s-32; + height: $s-28; width: $s-28; border-radius: 0 $br-8 $br-8 0; + display: none; svg { @extend .button-icon; } } .color-input-wrapper { - @extend .input-element; + @include titleTipography; + display: flex; + align-items: center; + height: $s-28; + padding: 0 $s-0; + width: 100%; + margin: 0; + flex-grow: 1; + background-color: var(--input-background-color); + color: var(--input-foreground-color); border-radius: $br-0; } - &:hover, - &:focus, - &:focus-within { + &:hover { + background-color: var(--input-background-color-hover); .color-bullet-wrapper, .color-name, .detach-btn, .color-input-wrapper { background-color: var(--input-background-color-hover); } - .detach-btn svg { - stroke: var(--input-foreground-color-active); + .detach-btn { + display: flex; + svg { + stroke: var(--input-foreground-color-active); + } } + &.editing { + background-color: var(--input-background-color-active); + .color-bullet-wrapper, + .color-name, + .detach-btn, + .color-input-wrapper { + background-color: var(--input-background-color-active); + } + } + } + &:focus, + &:focus-within { + background-color: var(--input-background-color-active); + } + + &.editing { + background-color: var(--input-background-color-active); } } .gradient-name-wrapper { @@ -75,11 +107,13 @@ border-radius: 0 $br-8 $br-8 0; } } + .library-name-wrapper { + border-radius: $br-8; + } .opacity-element-wrapper { @extend .input-element; width: $s-60; border-radius: 0 $br-8 $br-8 0; - padding-left: $s-8; .opacity-input { border-radius: 0 $br-8 $br-8 0; min-width: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss index 0ed841ada..3c61be1b1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss @@ -18,7 +18,6 @@ @extend .input-element; width: $s-60; border-radius: $br-8; - padding: $s-8; .icon { @include flexCenter; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 8d82b10ec..9531080e6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -56,8 +56,7 @@ on-blur (mf/use-callback (fn [event] - (let [target (dom/event->target event) - name (str/trim (dom/get-value target))] + (let [name (str/trim (dom/get-target-val event))] (when-not (str/empty? name) (st/emit! (dw/rename-page id name))) (st/emit! (dw/stop-rename-page-item))))) @@ -238,11 +237,12 @@ [:div {:class (dom/classnames (css :sitemap) true) :style #js {"--height" (str size "px")}} - [:& title-bar {:collapsable? true - :collapsed? (not show-pages?) - :on-collapsed toggle-pages - :title (tr "workspace.sidebar.sitemap") - :class (css :title-spacing-sitemap)} + [:& title-bar {:collapsable? true + :collapsed? (not show-pages?) + :on-collapsed toggle-pages + :clickable-all? true + :title (tr "workspace.sidebar.sitemap") + :class (css :title-spacing-sitemap)} (if workspace-read-only? [:div diff --git a/frontend/src/app/main/ui/workspace/text_palette.cljs b/frontend/src/app/main/ui/workspace/text_palette.cljs index 83037e8b0..f2b5ef35c 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.cljs +++ b/frontend/src/app/main/ui/workspace/text_palette.cljs @@ -134,7 +134,6 @@ [:div {:class (dom/classnames (css :text-palette) true) :style #js {"--height" (str size "px")}} - (when show-arrows? [:button {:class (dom/classnames (css :left-arrow) true) :disabled (= offset 0) diff --git a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs index 2eab802c6..ad6217d29 100644 --- a/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.viewport.pixel-overlay (:require + [app.common.math :as mth] [app.main.data.modal :as modal] [app.main.data.workspace.colors :as dwc] [app.main.data.workspace.undo :as dwu] @@ -58,8 +59,8 @@ canvas-height (if new-css-system 140 160) {brx :left bry :top} (dom/get-bounding-rect viewport-node) - x (- (.-clientX event) brx) - y (- (.-clientY event) bry) + x (mth/floor (- (.-clientX event) brx)) + y (mth/floor (- (.-clientY event) bry)) zoom-context (mf/ref-val zoom-view-context)