diff --git a/frontend/resources/images/icons/clipboard-refactor.svg b/frontend/resources/images/icons/clipboard-refactor.svg new file mode 100644 index 000000000..52667fc11 --- /dev/null +++ b/frontend/resources/images/icons/clipboard-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/code-refactor.svg b/frontend/resources/images/icons/code-refactor.svg new file mode 100644 index 000000000..d91ebb9e5 --- /dev/null +++ b/frontend/resources/images/icons/code-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/help-refactor.svg b/frontend/resources/images/icons/help-refactor.svg new file mode 100644 index 000000000..08bddb3ed --- /dev/null +++ b/frontend/resources/images/icons/help-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/layers-refactor.svg b/frontend/resources/images/icons/layers-refactor.svg new file mode 100644 index 000000000..dd446f29b --- /dev/null +++ b/frontend/resources/images/icons/layers-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 856367026..553842f5d 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -98,6 +98,7 @@ background-color: var(--button-secondary-background-color-hover); border: $s-1 solid var(--button-secondary-border-color-hover); color: var(--button-secondary-foreground-color-hover); + text-decoration: none; svg, span svg { stroke: var(--button-secondary-foreground-color-hover); @@ -524,10 +525,80 @@ } } +.empty-icon { + @include flexCenter; + height: $s-48; + width: $s-48; + border-radius: $br-circle; + background-color: var(--empty-message-background-color); + svg { + @extend .button-icon; + height: $s-28; + width: $s-28; + stroke: var(--empty-message-foreground-color); + } +} + +.attr-title { + div { + margin-left: 0; + color: var(--entry-foreground-color-hover); + } + button { + @extend .button-tertiary; + display: none; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + &:hover { + button { + display: flex; + } + } +} + .attr-row { display: grid; grid-template-areas: "name content"; grid-template-columns: $s-92 1fr; + gap: $s-4; + height: $s-32; + :global(.attr-label) { + @include titleTipography; + @include twoLineTextEllipsis; + width: $s-92; + margin: auto 0; + color: var(--entry-foreground-color); + grid-area: name; + } + + :global(.attr-value) { + grid-area: content; + display: flex; + color: var(--entry-foreground-color-hover); + @include titleTipography; + } +} + +.copy-button-children { + @include titleTipography; + color: var(--color-foreground-primary); + text-align: left; + + display: grid; + grid-template-columns: 1fr 22px; + grid-template-areas: "name button"; + width: 100%; + margin: 0; + padding: 0; + height: fit-content; + &:hover { + div { + color: var(--entry-foreground-color-hover); + } + } } .comment-bubbles { @@ -555,10 +626,8 @@ // SELECTS AND DROPDOWNS .menu-dropdown { @include menuShadow; + @include flexColumn; position: absolute; - display: flex; - flex-direction: column; - gap: $s-4; padding: $s-4; border-radius: $br-8; z-index: $z-index-10; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 1977679a5..6cfc4e003 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -122,6 +122,7 @@ --search-bar-input-background-color: var(--color-background-tertiary); --search-bar-input-border-color: var(--color-background-tertiary); + // INPUTS, SELECTS, DROPDOWNS --input-background-color: var(--color-background-tertiary); --input-foreground-color: var(--color-foreground-secondary); --input-placeholder-color: var(--color-foreground-secondary); @@ -137,9 +138,6 @@ --input-border-color-disabled: var(--color-background-quaternary); --input-details-color: var(--color-background-primary); - --pill-background-color: var(--color-background-tertiary); - --pill-foreground-color: var(--color-foreground-primary); - --menu-background-color: var(--color-background-tertiary); --menu-foreground-color: var(--color-foreground-primary); --menu-background-color-selected: var(--color-background-tertiary); @@ -158,6 +156,9 @@ --menu-foreground-color-disabled: var(--color-foreground-secondary); --menu-border-color-disabled: var(--color-background-quaternary); + --pill-background-color: var(--color-background-tertiary); + --pill-foreground-color: var(--color-foreground-primary); + --tag-background-color: var(--color-accent-primary); --palette-background-color: var(--color-background-primary); diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index b435101c9..744e2abcd 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -10,6 +10,18 @@ align-items: center; } +@mixin flexColumn { + display: flex; + flex-direction: column; + gap: $s-4; +} + +@mixin flexRow { + display: flex; + align-items: center; + gap: $s-4; +} + @mixin buttonStyle { border: none; background: none; @@ -61,6 +73,27 @@ -webkit-box-orient: vertical; } +@mixin inspectValue { + @include titleTipography; + display: inline-block; + width: fit-content; + padding: 0; + margin: 0; + text-align: left; + color: var(--menu-foreground-color); +} + +@mixin copyWrapper { + @include flexColumn; + position: relative; + min-height: $s-32; + width: $s-156; + max-width: $s-156; + padding: calc($s-8 - $s-1) 0 calc($s-8 - $s-1) calc($s-8 - $s-1); + border-radius: $s-8; + box-sizing: border-box; +} + @keyframes spin-animation { 0% { transform: rotate(0deg); diff --git a/frontend/src/app/main/ui/components/code_block.cljs b/frontend/src/app/main/ui/components/code_block.cljs index 1904b2170..9bef8150c 100644 --- a/frontend/src/app/main/ui/components/code_block.cljs +++ b/frontend/src/app/main/ui/components/code_block.cljs @@ -5,17 +5,21 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.code-block + (:require-macros [app.main.style :as stl]) (:require ["highlight.js" :as hljs] + [app.common.data.macros :as dm] + [app.main.ui.context :as ctx] [rumext.v2 :as mf])) (mf/defc code-block {::mf/wrap-props false} [{:keys [code type]}] - (let [block-ref (mf/use-ref)] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + block-ref (mf/use-ref)] (mf/with-effect [code type] (when-let [node (mf/ref-val block-ref)] (hljs/highlightElement node))) - [:pre.code-display {:class type :ref block-ref} code])) + [:pre {:class (dm/str type " " (stl/css new-css-system :code-display)) :ref block-ref} code])) diff --git a/frontend/src/app/main/ui/components/code_block.scss b/frontend/src/app/main/ui/components/code_block.scss new file mode 100644 index 000000000..1b8e72a4d --- /dev/null +++ b/frontend/src/app/main/ui/components/code_block.scss @@ -0,0 +1,14 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.code-display { + border-radius: $br-8; + margin-top: $s-8; + padding: $s-12; + background-color: var(--menu-background-color); +} diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index 33cf9ba9f..34686068e 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -36,7 +36,6 @@ :is-gradient (some? gradient) :is-transparent (and opacity (> 1 opacity)) :grid-area area) - :on-click on-click} (if (some? gradient) @@ -56,8 +55,9 @@ (let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)] (when (or (not size) (> size 64)) [:span {:class (stl/css-case - :color-text true - :small-text (and (>= size 64) (< size 72))) + :color-text (< size 72) + :small-text (and (>= size 64) (< size 72)) + :big-text (>= size 72)) :on-click on-click :on-double-click on-double-click} (or name color (uc/gradient-type->string (:type gradient)))]))) 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 2858b3c0a..d47fa2321 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -80,6 +80,11 @@ } } +.big-text { + @include inspectValue; + height: $s-16; +} + .no-text { display: none; } diff --git a/frontend/src/app/main/ui/components/copy_button.cljs b/frontend/src/app/main/ui/components/copy_button.cljs index 55cbee2f7..745567979 100644 --- a/frontend/src/app/main/ui/components/copy_button.cljs +++ b/frontend/src/app/main/ui/components/copy_button.cljs @@ -5,15 +5,19 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.components.copy-button + (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dm] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.timers :as timers] [app.util.webapi :as wapi] [beicon.core :as rx] [rumext.v2 :as mf])) -(mf/defc copy-button [{:keys [data on-copied]}] - (let [just-copied (mf/use-state false)] +(mf/defc copy-button [{:keys [data on-copied children class]}] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + just-copied (mf/use-state false)] (mf/use-effect (mf/deps @just-copied) (fn [] @@ -23,11 +27,24 @@ (let [sub (timers/schedule 1000 #(reset! just-copied false))] ;; On unmount we dispose the timer #(rx/-dispose sub))))) + (if new-css-system + [:button {:class (dm/str class " " (stl/css-case :copy-button true + :copy-wrapper (some? children))) + :on-click #(when-not @just-copied + (reset! just-copied true) + (wapi/write-to-clipboard (if (fn? data) (data) data)))} - [:button.copy-button - {:on-click #(when-not @just-copied - (reset! just-copied true) - (wapi/write-to-clipboard (if (fn? data) (data) data)))} - (if @just-copied - i/tick - i/copy)])) + (when children + children) + [:span {:class (stl/css :icon-btn)} + (if @just-copied + i/tick-refactor + i/clipboard-refactor)]] + + [:button.copy-button + {:on-click #(when-not @just-copied + (reset! just-copied true) + (wapi/write-to-clipboard (if (fn? data) (data) data)))} + (if @just-copied + i/tick + i/copy)]))) diff --git a/frontend/src/app/main/ui/components/copy_button.scss b/frontend/src/app/main/ui/components/copy_button.scss new file mode 100644 index 000000000..f13f91487 --- /dev/null +++ b/frontend/src/app/main/ui/components/copy_button.scss @@ -0,0 +1,77 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.copy-button { + @include buttonStyle; + @include flexCenter; + height: $s-32; + width: $s-28; + border: $s-1 solid transparent; + border-radius: $br-8; + background-color: transparent; + box-sizing: border-box; + .icon-btn { + @include flexCenter; + height: $s-32; + min-width: $s-28; + width: $s-28; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + + &:hover { + background-color: var(--color-background-tertiary); + color: var(--color-foreground-primary); + border: $s-1 solid var(--color-background-tertiary); + .icon-btn { + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + &:focus, + &:focus-visible { + outline: none; + border: $s-1 solid var(--button-tertiary-border-color-focus); + background-color: transparent; + color: var(--button-tertiary-foreground-color-focus); + .icon-btn svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + + &.copy-wrapper { + @include copyWrapper; + height: fit-content; + text-align: left; + .icon-btn { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + right: 0; + height: 32px; + width: 28px; + svg { + @extend .button-icon-small; + display: none; + } + } + &:hover { + .icon-btn { + svg { + display: flex; + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + } +} diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs index db052276a..ab69c224d 100644 --- a/frontend/src/app/main/ui/components/shape_icon.cljs +++ b/frontend/src/app/main/ui/components/shape_icon.cljs @@ -47,3 +47,39 @@ #_:default i/bool-union) :svg-raw i/file-svg nil))) + +(mf/defc element-icon-refactor + [{:keys [shape main-instance?] :as props}] + (if (ctk/instance-head? shape) + (if main-instance? + i/component-refactor + i/copy-refactor) + (case (:type shape) + :frame (cond + (and (ctl/flex-layout? shape) (ctl/col? shape)) + i/flex-vertical-refactor + + (and (ctl/flex-layout? shape) (ctl/row? shape)) + i/flex-horizontal-refactor + + (ctl/grid-layout? shape) + i/grid-refactor + + :else + i/board-refactor) + :image i/img-refactor + :line i/path-refactor + :circle i/elipse-refactor + :path i/curve-refactor + :rect i/rectangle-refactor + :text i/text-refactor + :group (if (:masked-group shape) + i/mask-refactor + i/group-refactor) + :bool (case (:bool-type shape) + :difference i/boolean-difference-refactor + :exclude i/boolean-exclude-refactor + :intersection i/boolean-intersection-refactor + #_:default i/boolean-union-refactor) + :svg-raw i/svg-refactor + nil))) diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index da7cf4f98..1a78fd134 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -26,7 +26,6 @@ :rotated collapsed?)} i/arrow-refactor] [:div {:class (stl/css :title)} title]] - [:* [:button {:class (stl/css-case :collapsabled-icon true diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 4147e44e3..9d87eeff3 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -305,8 +305,10 @@ (def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor)) (def boolean-union-refactor (icon-xref :boolean-union-refactor)) (def clip-content-refactor (icon-xref :clip-content-refactor)) +(def clipboard-refactor (icon-xref :clipboard-refactor)) (def close-refactor (icon-xref :close-refactor)) (def close-small-refactor (icon-xref :close-small-refactor)) +(def code-refactor (icon-xref :code-refactor)) (def component-refactor (icon-xref :component-refactor)) (def comments-refactor (icon-xref :comments-refactor)) (def copy-refactor (icon-xref :copy-refactor)) @@ -351,6 +353,7 @@ (def graphics-refactor (icon-xref :graphics-refactor)) (def gap-horizontal-refactor (icon-xref :gap-horizontal-refactor)) (def gap-vertical-refactor (icon-xref :gap-vertical-refactor)) +(def help-refactor (icon-xref :help-refactor)) (def hide-refactor (icon-xref :hide-refactor)) (def history-refactor (icon-xref :history-refactor)) (def hsva-refactor (icon-xref :hsva-refactor)) @@ -371,6 +374,7 @@ (def justify-content-row-between-refactor (icon-xref :justify-content-row-between-refactor)) (def justify-content-row-around-refactor (icon-xref :justify-content-row-around-refactor)) (def justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly-refactor)) +(def layers-refactor (icon-xref :layers-refactor)) (def lock-refactor (icon-xref :lock-refactor)) (def library-refactor (icon-xref :library-refactor)) (def margin-bottom-refactor (icon-xref :margin-bottom-refactor)) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs index d1196a718..74bf4bcf9 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes.cljs @@ -5,8 +5,10 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes + (:require-macros [app.main.style :as stl]) (:require [app.common.types.components-list :as ctkl] + [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.viewer.inspect.annotation :refer [annotation]] [app.main.ui.viewer.inspect.attributes.blur :refer [blur-panel]] @@ -34,35 +36,65 @@ (mf/defc attributes [{:keys [page-id file-id shapes frame from libraries share-id objects]}] - (let [shapes (hooks/use-equal-memo shapes) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (hooks/use-equal-memo shapes) type (if (= (count shapes) 1) (-> shapes first :type) :multiple) options (type->options type) content (when (= (count shapes) 1) (ctkl/get-component-annotation (first shapes) libraries))] - [:div.element-options - (for [[idx option] (map-indexed vector options)] - [:> (case option - :geometry geometry-panel - :layout layout-panel - :layout-element layout-element-panel - :fill fill-panel - :stroke stroke-panel - :shadow shadow-panel - :blur blur-panel - :image image-panel - :text text-panel - :svg svg-panel) - {:key idx - :shapes shapes - :objects objects - :frame frame - :from from}]) - (when content - [:& annotation {:content content}]) - [:& exports - {:shapes shapes - :type type - :page-id page-id - :file-id file-id - :share-id share-id}]])) + (if new-css-system + [:div {:class (stl/css :element-options)} + (for [[idx option] (map-indexed vector options)] + [:> (case option + :geometry geometry-panel + :layout layout-panel + :layout-element layout-element-panel + :fill fill-panel + :stroke stroke-panel + :shadow shadow-panel + :blur blur-panel + :image image-panel + :text text-panel + :svg svg-panel) + {:key idx + :shapes shapes + :objects objects + :frame frame + :from from}]) + (when content + [:& annotation {:content content}]) + [:& exports + {:shapes shapes + :type type + :page-id page-id + :file-id file-id + :share-id share-id}]] + + + [:div.element-options + (for [[idx option] (map-indexed vector options)] + [:> (case option + :geometry geometry-panel + :layout layout-panel + :layout-element layout-element-panel + :fill fill-panel + :stroke stroke-panel + :shadow shadow-panel + :blur blur-panel + :image image-panel + :text text-panel + :svg svg-panel) + {:key idx + :shapes shapes + :objects objects + :frame frame + :from from}]) + (when content + [:& annotation {:content content}]) + [:& exports + {:shapes shapes + :type type + :page-id page-id + :file-id file-id + :share-id share-id}]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes.scss b/frontend/src/app/main/ui/viewer/inspect/attributes.scss new file mode 100644 index 000000000..17a761d01 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes.scss @@ -0,0 +1,15 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-options { + display: flex; + flex-direction: column; + gap: $s-16; + width: 100%; + height: 100%; +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs index f8c3446da..c34c6f8f2 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs @@ -5,8 +5,11 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.blur + (:require-macros [app.main.style :as stl]) (:require [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -16,16 +19,36 @@ (mf/defc blur-panel [{:keys [objects shapes]}] - (let [shapes (->> shapes (filter has-blur?))] - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.blur")] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (->> shapes (filter has-blur?))] + (if new-css-system + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.blur") + :class (stl/css :title-spacing-blur)} + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] - (for [shape shapes] - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.blur.value")] - [:div.attributes-value (css/get-css-value objects shape :filter)] - [:& copy-button {:data (css/get-css-property objects shape :filter)}]])]))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + [:div {:class (stl/css :blur-row)} + [:div {:class (stl/css :global/attr-label)} "Filter"] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects shape :filter)} + [:div {:class (stl/css :button-children)} + (css/get-css-value objects shape :filter)]]]])]]) + + + (when (seq shapes) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.blur")] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])] + + (for [shape shapes] + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.blur.value")] + [:div.attributes-value (css/get-css-value objects shape :filter)] + [:& copy-button {:data (css/get-css-property objects shape :filter)}]])])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss new file mode 100644 index 000000000..403c1fbd3 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss @@ -0,0 +1,22 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-blur { + @extend .attr-title; + } +} +.attributes-content { + .blur-row { + @extend .attr-row; + } + .button-children { + @extend .copy-button-children; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs index 468132b7e..178ae3cc3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs @@ -5,11 +5,15 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.common + (:require-macros [app.main.style :as stl]) (:require [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.color-bullet :refer [color-bullet color-name]] + [app.main.ui.components.color-bullet-new :as cbn] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.select :refer [select]] + [app.main.ui.context :as ctx] [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :refer [tr]] @@ -41,41 +45,143 @@ (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors))) (mf/defc color-row [{:keys [color format copy-data on-change-format]}] - (let [colors-library (get-colors-library color) - file-colors (get-file-colors) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + colors-library (get-colors-library color) + file-colors (get-file-colors) color-library-name (get-in (or colors-library file-colors) [(:id color) :name]) - color (assoc color :color-library-name color-library-name)] - [:div.attributes-color-row - (when color-library-name - [:div.attributes-color-id - [:& color-bullet {:color color}] - [:div color-library-name]]) + color (assoc color :color-library-name color-library-name)] - [:div.attributes-color-value {:class (when color-library-name "hide-color")} - [:& color-bullet {:color color}] + (if new-css-system + [:div {:class (stl/css :attributes-color-row)} + [:div {:class (stl/css :bullet-wrapper) + :style #js {"--bullet-size" "16px"}} + [:& cbn/color-bullet {:color color + :mini? true}]] - (if (:gradient color) - [:& color-name {:color color}] - (case format - :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))] - [:div (str/fmt "%s, %s, %s, %s" r g b a)]) - :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color)) - result (uc/format-hsla [h s l a])] - [:div result]) + [:div {:class (stl/css :format-wrapper)} + (when-not (and on-change-format (:gradient color)) + + [:div {:class (stl/css :select-format-wrapper)} + [:& select + {:default-value format + :options [{:value :hex :label (tr "inspect.attributes.color.hex")} + {:value :rgba :label (tr "inspect.attributes.color.rgba")} + {:value :hsla :label (tr "inspect.attributes.color.hsla")}] + :on-change on-change-format}]]) + (when (:gradient color) + [:div {:class (stl/css :format-info)} "rgba"])] + + (if copy-data + [:& copy-button {:data copy-data + :class (stl/css :color-row-copy-btn)} [:* - [:& color-name {:color color}] - (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])])) + [:div {:class (stl/css :first-row)} + [:div {:class (stl/css :name-opacity)} + [:span {:class (stl/css-case :color-value-wrapper true + :gradient-name (:gradient color))} + (if (:gradient color) + [:& cbn/color-name {:color color + :size 80}] + (case format + :hex [:& cbn/color-name {:color color + :size 80}] + :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))] + [:* (str/fmt "%s, %s, %s, %s" r g b a)]) + :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color)) + result (uc/format-hsla [h s l a])] + [:* result])))] - (when-not (and on-change-format (:gradient color)) - [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} - [:option {:value "hex"} - (tr "inspect.attributes.color.hex")] + (when-not (:gradient color) + [:span {:class (stl/css :opacity-info)} + (str (* 100 (:opacity color)) "%")])]] - [:option {:value "rgba"} - (tr "inspect.attributes.color.rgba")] + (when color-library-name + [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :color-name-library)} + color-library-name]])]] - [:option {:value "hsla"} - (tr "inspect.attributes.color.hsla")]])] - (when copy-data - [:& copy-button {:data copy-data}])])) + [:div {:class (stl/css :color-info)} + [:div {:class (stl/css :first-row)} + [:div {:class (stl/css :name-opacity)} + [:span {:class (stl/css-case :color-value-wrapper true + :gradient-name (:gradient color))} + (if (:gradient color) + [:& cbn/color-name {:color color + :size 80}] + (case format + :hex [:& cbn/color-name {:color color + :size 80}] + :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))] + [:* (str/fmt "%s, %s, %s, %s" r g b a)]) + :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color)) + result (uc/format-hsla [h s l a])] + [:* result])))] + + (when-not (:gradient color) + [:span {:class (stl/css :opacity-info)} + (str (* 100 (:opacity color)) "%")])]] + + (when color-library-name + [:div {:class (stl/css :second-row)} + [:div {:class (stl/css :color-name-library)} + color-library-name]]) + ;; [:span {:class (stl/css-case :color-name-wrapper true + ;; :gradient-color (:gradient color))} + + ;; [:div {:class (stl/css :color-value-wrapper)} + ;; (if (:gradient color) + ;; [:& cbn/color-name {:color color + ;; :size 80}] + ;; (case format + ;; :hex [:& cbn/color-name {:color color + ;; :size 80}] + ;; :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))] + ;; [:* (str/fmt "%s, %s, %s, %s" r g b a)]) + ;; :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color)) + ;; result (uc/format-hsla [h s l a])] + ;; [:* result])))] + + ;; (when color-library-name + ;; [:div {:class (stl/css :color-name-library)} + ;; color-library-name])] + + ;; (when-not (:gradient color) + ;; [:div {:class (stl/css :opacity-info)} + ;; (str (* 100 (:opacity color)) "%")]) + ])] + + + [:div.attributes-color-row + (when color-library-name + [:div.attributes-color-id + [:& color-bullet {:color color}] + [:div color-library-name]]) + + [:div.attributes-color-value {:class (when color-library-name "hide-color")} + [:& color-bullet {:color color}] + + (if (:gradient color) + [:& color-name {:color color}] + (case format + :rgba (let [[r g b a] (uc/hex->rgba (:color color) (:opacity color))] + [:div (str/fmt "%s, %s, %s, %s" r g b a)]) + :hsla (let [[h s l a] (uc/hex->hsla (:color color) (:opacity color)) + result (uc/format-hsla [h s l a])] + [:div result]) + [:* + [:& color-name {:color color}] + (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])])) + + (when-not (and on-change-format (:gradient color)) + [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)} + [:option {:value "hex"} + (tr "inspect.attributes.color.hex")] + + [:option {:value "rgba"} + (tr "inspect.attributes.color.rgba")] + + [:option {:value "hsla"} + (tr "inspect.attributes.color.hsla")]])] + (when copy-data + [:& copy-button {:data copy-data}])]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss new file mode 100644 index 000000000..94e960cff --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss @@ -0,0 +1,131 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-color-row { + display: grid; + grid-template-columns: $s-16 $s-72 $s-156; + gap: $s-4; + .bullet-wrapper { + @include flexCenter; + height: $s-32; + } + .format-wrapper { + width: $s-72; + height: $s-32; + .select-format-wrapper { + width: 100%; + div { + background-color: transparent; + border: none; + padding-left: $s-2; + color: var(--menu-foreground-color-rest); + } + } + .format-info { + @include tabTitleTipography; + display: flex; + align-items: center; + width: 100%; + height: 100%; + padding-left: $s-2; + font-size: $fs-12; + color: var(--menu-foreground-color-rest); + } + } +} + +.color-info { + display: flex; + align-items: flex-start; + gap: $s-4; + flex-grow: 1; + + .color-name-wrapper { + @include titleTipography; + @include flexColumn; + padding: $s-8 $s-4 $s-8 $s-8; + height: $s-32; + max-width: $s-80; + &.gradient-color { + max-width: $s-124; + } + .color-name-library { + @include titleTipography; + @include textEllipsis; + text-align: left; + height: $s-16; + color: var(--menu-foreground-color-rest); + } + .color-value-wrapper { + @include titleTipography; + height: $s-16; + color: var(--menu-foreground-color); + } + } + + .opacity-info { + @include titleTipography; + color: var(--menu-foreground-color); + padding: $s-8 0; + height: $s-32; + } + + button { + visibility: hidden; + min-width: $s-28; + } + &:hover button { + visibility: visible; + } +} + +.color-info, +.color-row-copy-btn { + @include copyWrapper; + .first-row { + display: grid; + grid-template-columns: 1fr $s-20; + grid-template-areas: "name button"; + height: fit-content; + width: 100%; + padding: 0; + margin: 0; + .name-opacity { + grid-area: name; + height: fit-content; + max-width: $s-124; + line-height: $s-16; + .color-value-wrapper { + @include inspectValue; + text-transform: uppercase; + max-width: $s-124; + padding-right: $s-8; + &.gradient-name { + text-transform: none; + } + } + .opacity-info { + @include inspectValue; + text-transform: uppercase; + } + } + } + + .second-row { + min-height: $s-16; + padding-right: $s-8; + width: 100%; + text-align: left; + margin: 0; + padding: 0; + .color-name-library { + @include inspectValue; + color: var(--menu-foreground-color-rest); + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs index a3bc2fd1d..e0982479a 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs @@ -5,7 +5,10 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.fill + (:require-macros [app.main.style :as stl]) (:require + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] @@ -30,33 +33,63 @@ (mf/defc fill-block {::mf/wrap-props false} [{:keys [objects shape]}] - (let [format* (mf/use-state :hex) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + format* (mf/use-state :hex) format (deref format*) color (shape->color shape) - on-change (mf/use-fn #(reset! format* %))] + on-change + (mf/use-fn + (fn [format] + (reset! format* format)))] + (if new-css-system + [:div {:class (stl/css :attributes-fill-block)} + [:& color-row + {:color color + :format format + :on-change-format on-change + :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]] - [:div.attributes-fill-block - [:& color-row - {:color color - :format format - :on-change-format on-change - :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]])) + + [:div.attributes-fill-block + [:& color-row + {:color color + :format format + :on-change-format on-change + :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))) (mf/defc fill-panel {::mf/wrap-props false} [{:keys [shapes]}] - (let [shapes (filter has-fill? shapes)] - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.fill")]] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (filter has-fill? shapes)] + (if new-css-system + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.fill") + :class (stl/css :title-spacing-fill)}] - [:div.attributes-fill-blocks - (for [shape shapes] - (if (seq (:fills shape)) - (for [value (:fills shape [])] - [:& fill-block {:key (str "fill-block-" (:id shape) value) - :shape value}]) - [:& fill-block {:key (str "fill-block-only" (:id shape)) - :shape shape}]))]]))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (if (seq (:fills shape)) + (for [value (:fills shape [])] + [:& fill-block {:key (str "fill-block-" (:id shape) value) + :shape value}]) + [:& fill-block {:key (str "fill-block-only" (:id shape)) + :shape shape}]))]]) + + + (when (seq shapes) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.fill")]] + + [:div.attributes-fill-blocks + (for [shape shapes] + (if (seq (:fills shape)) + (for [value (:fills shape [])] + [:& fill-block {:key (str "fill-block-" (:id shape) value) + :shape value}]) + [:& fill-block {:key (str "fill-block-only" (:id shape)) + :shape shape}]))]])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss new file mode 100644 index 000000000..6a0f53d67 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss @@ -0,0 +1,14 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-fill { + @extend .attr-title; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs index d24ea3e6a..98790d234 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs @@ -5,9 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.geometry + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -16,23 +19,51 @@ (mf/defc geometry-block [{:keys [objects shape]}] - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]) + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :geometry-row)} + [:div {:class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))] + + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div.attributes-unit-row + [:div.attributes-label (d/name property)] + [:div.attributes-value value] + [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) + (mf/defc geometry-panel [{:keys [objects shapes]}] - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.size")] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.size") + :class (stl/css :title-spacing-geometry)} - (for [shape shapes] - [:& geometry-block {:shape shape - :objects objects - :key (:id shape)}])]) + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + + (for [shape shapes] + [:& geometry-block {:shape shape + :objects objects + :key (:id shape)}])] + + + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.size")] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + + (for [shape shapes] + [:& geometry-block {:shape shape + :objects objects + :key (:id shape)}])]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss new file mode 100644 index 000000000..6f21ef2c7 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss @@ -0,0 +1,21 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-geometry { + @extend .attr-title; + } +} + +.geometry-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs index 878661a3f..0dc486d03 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs @@ -5,11 +5,13 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.image + (:require-macros [app.main.style :as stl]) (:require [app.common.media :as cm] [app.common.pages.helpers :as cph] [app.config :as cf] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [app.util.i18n :refer [tr]] [cuerdas.core :as str] @@ -20,26 +22,58 @@ (mf/defc image-panel [{:keys [objects shapes]}] - (for [shape (filter cph/image-shape? shapes)] - [:div.attributes-block {:key (str "image-" (:id shape))} - [:div.attributes-image-row - [:div.attributes-image - [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + (for [shape (filter cph/image-shape? shapes)] + [:div {:class (stl/css :attributes-block) + :key (str "image-" (:id shape))} + [:div {:class (stl/css :image-wrapper)} + [:img {:src (cf/resolve-file-media (-> shape :metadata))}]] - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.image.width")] - [:div.attributes-value (css/get-css-value objects (:metadata shape) :width)] - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}]] + [:div {:class (stl/css :image-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.image.width")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)} + [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]] - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.image.height")] - [:div.attributes-value (css/get-css-value objects (:metadata shape) :height)] - [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}]] + [:div {:class (stl/css :image-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.image.height")] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)} + [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]] - (let [mtype (-> shape :metadata :mtype) - name (:name shape) - extension (cm/mtype->extension mtype)] - [:a.download-button {:target "_blank" - :download (cond-> name extension (str/concat extension)) - :href (cf/resolve-file-media (-> shape :metadata))} - (tr "inspect.attributes.image.download")])])) + (let [mtype (-> shape :metadata :mtype) + name (:name shape) + extension (cm/mtype->extension mtype)] + [:a {:class (stl/css :download-button) + :target "_blank" + :download (cond-> name extension (str/concat extension)) + :href (cf/resolve-file-media (-> shape :metadata))} + (tr "inspect.attributes.image.download")])]) + + + (for [shape (filter cph/image-shape? shapes)] + [:div.attributes-block {:key (str "image-" (:id shape))} + [:div.attributes-image-row + [:div.attributes-image + [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]] + + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.image.width")] + [:div.attributes-value (css/get-css-value objects (:metadata shape) :width)] + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}]] + + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.image.height")] + [:div.attributes-value (css/get-css-value objects (:metadata shape) :height)] + [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}]] + + (let [mtype (-> shape :metadata :mtype) + name (:name shape) + extension (cm/mtype->extension mtype)] + [:a.download-button {:target "_blank" + :download (cond-> name extension (str/concat extension)) + :href (cf/resolve-file-media (-> shape :metadata))} + (tr "inspect.attributes.image.download")])])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss new file mode 100644 index 000000000..c9fb40d7e --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss @@ -0,0 +1,41 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + margin-bottom: $s-16; + .image-wrapper { + background-color: var(--menu-background-color); + position: relative; + @include flexCenter; + width: $s-248; + height: $s-160; + max-height: $s-160; + max-width: $s-248; + margin: $s-8 0; + border-radius: $br-8; + + img { + height: 100%; + width: 100%; + object-fit: contain; + } + } + .image-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } + } + .download-button { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + margin-top: $s-4; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs index 29dd38582..068d4aca0 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs @@ -5,10 +5,13 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.layout + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.types.shape.layout :as ctl] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [rumext.v2 :as mf])) @@ -27,25 +30,56 @@ (mf/defc layout-block [{:keys [objects shape]}] - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]) + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + + (if new-css-system + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :layout-row)} + [:div {:class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} + + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))] + + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div.attributes-unit-row + [:div.attributes-label (d/name property)] + [:div.attributes-value value] + [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) (mf/defc layout-panel [{:keys [objects shapes]}] - (let [shapes (->> shapes (filter ctl/any-layout?))] - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text "Layout"] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (let [shapes (->> shapes (filter ctl/any-layout?)) + new-css-system (mf/use-ctx ctx/new-css-system)] - (for [shape shapes] - [:& layout-block {:shape shape - :objects objects - :key (:id shape)}])]))) + (if new-css-system + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title "Layout" + :class (stl/css :title-spacing-layout)} + + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + + (for [shape shapes] + [:& layout-block {:shape shape + :objects objects + :key (:id shape)}])]) + + + (when (seq shapes) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text "Layout"] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + + (for [shape shapes] + [:& layout-block {:shape shape + :objects objects + :key (:id shape)}])])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss new file mode 100644 index 000000000..3c7497ce9 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss @@ -0,0 +1,21 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-layout { + @extend .attr-title; + } +} + +.layout-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs index f59e85656..da44dded6 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs @@ -5,10 +5,13 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.layout-element + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.types.shape.layout :as ctl] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.util.code-gen.style-css :as css] [rumext.v2 :as mf])) @@ -27,34 +30,66 @@ (mf/defc layout-element-block [{:keys [objects shape]}] - [:* - (for [property properties] - (when-let [value (css/get-css-value objects shape property)] - [:div.attributes-unit-row - [:div.attributes-label (d/name property)] - [:div.attributes-value value] - [:& copy-button {:data (css/get-css-property objects shape property)}]]))]) + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div {:class (stl/css :layout-element-row)} + [:div {:class (stl/css :global/attr-label)} (d/name property)] + [:div {:class (stl/css :global/attr-value)} + + [:& copy-button {:data (css/get-css-property objects shape property)} + [:div {:class (stl/css :button-children)} value]]]]))] + + [:* + (for [property properties] + (when-let [value (css/get-css-value objects shape property)] + [:div.attributes-unit-row + [:div.attributes-label (d/name property)] + [:div.attributes-value value] + [:& copy-button {:data (css/get-css-property objects shape property)}]]))]))) (mf/defc layout-element-panel [{:keys [objects shapes]}] - (let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes) only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)] - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (cond - only-flex? - "Flex element" - only-grid? - "Flex element" - :else - "Layout element" - )] - (when (= (count shapes) 1) - [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + (if new-css-system + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (cond + only-flex? + "Flex element" + only-grid? + "Flex element" + :else + "Layout element") + :class (stl/css :title-spacing-layout-element)} + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] - (for [shape shapes] - [:& layout-element-block {:shape shape - :objects objects - :key (:id shape)}])]))) + (for [shape shapes] + [:& layout-element-block {:shape shape + :objects objects + :key (:id shape)}])]) + + (when (seq shapes) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (cond + only-flex? + "Flex element" + only-grid? + "Flex element" + :else + "Layout element")] + (when (= (count shapes) 1) + [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] + + (for [shape shapes] + [:& layout-element-block {:shape shape + :objects objects + :key (:id shape)}])])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss new file mode 100644 index 000000000..4d9788544 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss @@ -0,0 +1,21 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-layout-element { + @extend .attr-title; + } +} + +.layout-element-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs index ff8cf5a80..4110a29f6 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs @@ -5,47 +5,71 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.shadow + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] + [app.util.code-gen.style-css-formats :as cssf] + [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) (defn has-shadow? [shape] (:shadow shape)) + + (mf/defc shadow-block [{:keys [shadow]}] (let [color-format (mf/use-state :hex)] - [:div.attributes-shadow-block - [:div.attributes-shadow-row - [:div.attributes-label (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))] - [:div.attributes-shadow {:title (tr "workspace.options.shadow-options.offsetx")} - [:div.attributes-value (str (:offset-x shadow) "px")]] + [:div {:class (stl/css :attributes-shadow-block)} + [:div {:class (stl/css :shadow-row)} + [:div {:class (stl/css :global/attr-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))] + [:div {:class (stl/css :global/attr-value)} - [:div.attributes-shadow {:title (tr "workspace.options.shadow-options.offsety")} - [:div.attributes-value (str (:offset-y shadow) "px")]] - - [:div.attributes-shadow {:title (tr "workspace.options.shadow-options.blur")} - [:div.attributes-value (str (:blur shadow) "px")]] - - [:div.attributes-shadow {:title (tr "workspace.options.shadow-options.spread")} - [:div.attributes-value (str (:spread shadow) "px")]] - - #_[:& copy-button {:data (shadow-copy-data shadow)}]] + [:& copy-button {:data (cssf/format-shadow (cssf/format-value :shadows shadow) shadow) + :class (stl/css :color-row-copy-btn)} + [:div {:class (stl/css :button-children) + :title (dm/str (tr "workspace.options.shadow-options.offsetx") " " + (tr "workspace.options.shadow-options.offsety") " " + (tr "workspace.options.shadow-options.blur") " " + (tr "workspace.options.shadow-options.spread"))} + (str (:offset-x shadow) "px") " " + (str (:offset-y shadow) "px") " " + (str (:blur shadow) "px") " " + (str (:spread shadow) "px")]]]] [:& color-row {:color (:color shadow) :format @color-format :on-change-format #(reset! color-format %)}]])) (mf/defc shadow-panel [{:keys [shapes]}] - (let [shapes (->> shapes (filter has-shadow?))] - (when (and (seq shapes) (> (count shapes) 0)) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.shadow")]] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (->> shapes (filter has-shadow?))] - [:div.attributes-shadow-blocks - (for [shape shapes] - (for [shadow (:shadow shape)] - [:& shadow-block {:shape shape - :shadow shadow}]))]]))) + (if new-css-system + (when (and (seq shapes) (> (count shapes) 0)) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.shadow") + :class (stl/css :title-spacing-shadow)}] + + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (for [shadow (:shadow shape)] + [:& shadow-block {:shape shape + :shadow shadow}]))]]) + + (when (and (seq shapes) (> (count shapes) 0)) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.shadow")]] + + [:div.attributes-shadow-blocks + (for [shape shapes] + (for [shadow (:shadow shape)] + [:& shadow-block {:shape shape + :shadow shadow}]))]])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss new file mode 100644 index 000000000..f96bd71cf --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss @@ -0,0 +1,22 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-shadow { + @extend .attr-title; + } +} +.attributes-shadow-block { + .shadow-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs index 59c08fa9c..07fe6bb51 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs @@ -5,10 +5,13 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.stroke + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css-formats :as cssf] @@ -29,42 +32,82 @@ (mf/defc stroke-block [{:keys [stroke]}] - (let [color-format (mf/use-state :hex) - color (stroke->color stroke)] - [:div.attributes-stroke-block - (let [{:keys [stroke-style stroke-alignment]} stroke - stroke-style (if (= stroke-style :svg) :solid stroke-style) - stroke-alignment (or stroke-alignment :center)] - [:div.attributes-stroke-row - [:div.attributes-label (tr "inspect.attributes.stroke.width")] - [:div.attributes-value (fmt/format-pixels (:stroke-width stroke))] - ;; Execution time translation strings: - ;; inspect.attributes.stroke.style.dotted - ;; inspect.attributes.stroke.style.mixed - ;; inspect.attributes.stroke.style.none - ;; inspect.attributes.stroke.style.solid - [:div.attributes-value (tr (dm/str "inspect.attributes.stroke.style." (d/name stroke-style)))] - ;; Execution time translation strings: - ;; inspect.attributes.stroke.alignment.center - ;; inspect.attributes.stroke.alignment.inner - ;; inspect.attributes.stroke.alignment.outer - [:div.attributes-label (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment)))] - [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}]]) - [:& color-row {:color color - :format @color-format - :copy-data (uc/color->background color) - :on-change-format #(reset! color-format %)}]])) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + color-format (mf/use-state :hex) + color (stroke->color stroke)] + (if new-css-system + [:div {:class (stl/css :attributes-stroke-block)} + (let [{:keys [stroke-style stroke-alignment]} stroke + stroke-style (if (= stroke-style :svg) :solid stroke-style) + stroke-alignment (or stroke-alignment :center) + stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " " + (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " " + (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))] + + [:* + [:& color-row {:color color + :format @color-format + :copy-data (uc/color->background color) + :on-change-format #(reset! color-format %)}] + + [:div {:class (stl/css :stroke-row)} + [:div {:class (stl/css :global/attr-label)} + "Border"] + [:div {:class (stl/css :global/attr-value)} + + [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))} + [:div {:class (stl/css :button-children)} stroke-def]]]]])] + + + [:div.attributes-stroke-block + (let [{:keys [stroke-style stroke-alignment]} stroke + stroke-style (if (= stroke-style :svg) :solid stroke-style) + stroke-alignment (or stroke-alignment :center)] + [:div.attributes-stroke-row + [:div.attributes-label (tr "inspect.attributes.stroke.width")] + [:div.attributes-value (fmt/format-pixels (:stroke-width stroke))] + ;; Execution time translation strings: + ;; inspect.attributes.stroke.style.dotted + ;; inspect.attributes.stroke.style.mixed + ;; inspect.attributes.stroke.style.none + ;; inspect.attributes.stroke.style.solid + [:div.attributes-value (tr (dm/str "inspect.attributes.stroke.style." (d/name stroke-style)))] + ;; Execution time translation strings: + ;; inspect.attributes.stroke.alignment.center + ;; inspect.attributes.stroke.alignment.inner + ;; inspect.attributes.stroke.alignment.outer + [:div.attributes-label (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment)))] + [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}]]) + [:& color-row {:color color + :format @color-format + :copy-data (uc/color->background color) + :on-change-format #(reset! color-format %)}]]))) (mf/defc stroke-panel [{:keys [shapes]}] - (let [shapes (->> shapes (filter has-stroke?))] - (when (seq shapes) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shapes (->> shapes (filter has-stroke?))] + (if new-css-system + (when (seq shapes) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.stroke") + :class (stl/css :title-spacing-stroke)}] - [:div.attributes-stroke-blocks - (for [shape shapes] - (for [value (:strokes shape)] - [:& stroke-block {:key (str "stroke-color-" (:id shape) value) - :stroke value}]))]]))) + [:div {:class (stl/css :attributes-content)} + (for [shape shapes] + (for [value (:strokes shape)] + [:& stroke-block {:key (str "stroke-color-" (:id shape) value) + :stroke value}]))]]) + + + (when (seq shapes) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]] + + [:div.attributes-stroke-blocks + (for [shape shapes] + (for [value (:strokes shape)] + [:& stroke-block {:key (str "stroke-color-" (:id shape) value) + :stroke value}]))]])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss new file mode 100644 index 000000000..b0d915775 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss @@ -0,0 +1,23 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-stroke { + @extend .attr-title; + } +} +.attributes-stroke-block { + @include flexColumn; + .stroke-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index 80731f37b..440768863 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -5,9 +5,12 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.svg + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.util.i18n :refer [tr]] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -18,19 +21,38 @@ (str/join "; "))) (mf/defc svg-attr [{:keys [attr value]}] - (if (map? value) - [:* - [:div.attributes-block-title - [:div.attributes-block-title-text (d/name attr)] - [:& copy-button {:data (map->css value)}]] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system - (for [[attr-key attr-value] value] - [:& svg-attr {:attr attr-key :value attr-value}])] + (if (map? value) + [:* + [:div {:class (stl/css :attributes-subtitle)} + [:span (d/name attr)] + [:& copy-button {:data (map->css value)}]] - [:div.attributes-unit-row - [:div.attributes-label (d/name attr)] - [:div.attributes-value (str value)] - [:& copy-button {:data (d/name value)}]])) + (for [[attr-key attr-value] value] + [:& svg-attr {:attr attr-key :value attr-value}])] + + [:div {:class (stl/css :svg-row)} + [:div {:class (stl/css :global/attr-label)} (d/name attr)] + [:div {:class (stl/css :global/attr-value)} + [:& copy-button {:data (d/name value)} + [:div {:class (stl/css :button-children)} (str value)]]]]) + + + (if (map? value) + [:* + [:div.attributes-block-title + [:div.attributes-block-title-text (d/name attr)] + [:& copy-button {:data (map->css value)}]] + + (for [[attr-key attr-value] value] + [:& svg-attr {:attr attr-key :value attr-value}])] + + [:div.attributes-unit-row + [:div.attributes-label (d/name attr)] + [:div.attributes-value (str value)] + [:& copy-button {:data (d/name value)}]])))) (mf/defc svg-block [{:keys [shape]}] @@ -42,9 +64,19 @@ (mf/defc svg-panel [{:keys [shapes]}] - (let [shape (first shapes)] - (when (seq (:svg-attrs shape)) - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "workspace.sidebar.options.svg-attrs.title")]] - [:& svg-block {:shape shape}]]))) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + shape (first shapes)] + (if new-css-system + (when (seq (:svg-attrs shape)) + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "workspace.sidebar.options.svg-attrs.title") + :class (stl/css :title-spacing-svg)}] + [:& svg-block {:shape shape}]]) + + + (when (seq (:svg-attrs shape)) + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "workspace.sidebar.options.svg-attrs.title")]] + [:& svg-block {:shape shape}]])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss new file mode 100644 index 000000000..12fdc3a1c --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss @@ -0,0 +1,40 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-svg { + @extend .attr-title; + } +} +.svg-row { + @extend .attr-row; + .button-children { + @extend .copy-button-children; + } +} +.attributes-subtitle { + @include tabTitleTipography; + display: flex; + justify-content: space-between; + height: $s-32; + span { + height: $s-32; + display: flex; + align-items: center; + } + button { + display: none; + } + + &:hover { + button { + display: block; + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs index 2721f2358..c0558c1b8 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs @@ -5,12 +5,16 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.attributes.text + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.common.text :as txt] [app.main.fonts :as fonts] + [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.copy-button :refer [copy-button]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.formats :as fmt] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.i18n :refer [tr]] @@ -39,105 +43,211 @@ (mf/defc typography-block [{:keys [text style]}] - (let [typography-library-ref + (let [new-css-system (mf/use-ctx ctx/new-css-system) + typography-library-ref (mf/use-memo (mf/deps (:typography-ref-file style)) (make-typographies-library-ref (:typography-ref-file style))) typography-library (mf/deref typography-library-ref) - file-typographies (mf/deref file-typographies-ref) + file-typographies-viewer (mf/deref file-typographies-ref) + file-typographies-workspace (mf/deref refs/workspace-file-typography) + + file-library-workspace (get (mf/deref refs/workspace-libraries) (:typography-ref-file style)) + typography-external-lib (get-in file-library-workspace [:data :typographies (:typography-ref-id style)]) + color-format (mf/use-state :hex) - typography (get (or typography-library file-typographies) (:typography-ref-id style))] + typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)] - [:div.attributes-text-block - (if (:typography-ref-id style) - [:div.attributes-typography-name-row - [:div.typography-entry - [:div.typography-sample - {:style {:font-family (:font-family typography) - :font-weight (:font-weight typography) - :font-style (:font-style typography)}} - (tr "workspace.assets.typography.text-styles")]] - [:div.typography-entry-name (:name typography)] - #_[:& copy-button {:data (copy-style-data typography)}]] + (if new-css-system + [:div {:class (stl/css :attributes-content)} + (when (:fills style) + (for [[idx fill] (map-indexed vector (:fills style))] + [:& color-row {:key idx + :format @color-format + :color (fill->color fill) + ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient) + :on-change-format #(reset! color-format %)}])) - [:div.attributes-typography-row - [:div.typography-sample - {:style {:font-family (:font-family style) - :font-weight (:font-weight style) - :font-style (:font-style style)}} - (tr "workspace.assets.typography.text-styles")] - #_[:& copy-button {:data (copy-style-data style)}]]) + (when (:typography-ref-id style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography")] + [:div {:class (stl/css :global/attr-value)} + [:div (:name typography)] + #_[:& copy-button {:data (copy-style-data typography)}]]]) - (when (:fills style) - (for [[idx fill] (map-indexed vector (:fills style))] - [:& color-row {:key idx - :format @color-format - :color (fill->color fill) - ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient) - :on-change-format #(reset! color-format %)}])) + (when (:font-id style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")] + [:div {:class (stl/css :global/attr-value)} + [:div (-> style :font-id fonts/get-font-data :name)] + #_[:& copy-button {:data (copy-style-data style :font-family)}]]]) - (when (:font-id style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-family")] - [:div.attributes-value (-> style :font-id fonts/get-font-data :name)] - #_[:& copy-button {:data (copy-style-data style :font-family)}]]) + (when (:font-style style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-style")] + [:div {:class (stl/css :global/attr-value)} + [:div (str (:font-style style))] + #_[:& copy-button {:data (copy-style-data style :font-style)}]]]) - (when (:font-style style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-style")] - [:div.attributes-value (str (:font-style style))] - #_[:& copy-button {:data (copy-style-data style :font-style)}]]) + (when (:font-size style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-size")] + [:div {:class (stl/css :global/attr-value)} + [:div (fmt/format-pixels (:font-size style))] + #_[:& copy-button {:data (copy-style-data style :font-size)}]]]) - (when (:font-size style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-size")] - [:div.attributes-value (fmt/format-pixels (:font-size style))] - #_[:& copy-button {:data (copy-style-data style :font-size)}]]) + (when (:font-weight style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.font-weight")] + [:div {:class (stl/css :global/attr-value)} + [:span (str (:font-weight style))] + #_[:& copy-button {:data (copy-style-data style :font-weight)}]]]) - (when (:font-weight style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.font-weight")] - [:div.attributes-value (str (:font-weight style))] - #_[:& copy-button {:data (copy-style-data style :font-weight)}]]) + (when (:line-height style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.line-height")] + [:div {:class (stl/css :global/attr-value)} + [:div (fmt/format-number (:line-height style))] + #_[:& copy-button {:data (copy-style-data style :line-height)}]]]) - (when (:line-height style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.line-height")] - [:div.attributes-value (fmt/format-number (:line-height style))] - #_[:& copy-button {:data (copy-style-data style :line-height)}]]) + (when (:letter-spacing style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.letter-spacing")] + [:div {:class (stl/css :global/attr-value)} + [:div (fmt/format-pixels (:letter-spacing style))] + #_[:& copy-button {:data (copy-style-data style :letter-spacing)}]]]) - (when (:letter-spacing style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")] - [:div.attributes-value (fmt/format-pixels (:letter-spacing style))] - #_[:& copy-button {:data (copy-style-data style :letter-spacing)}]]) + (when (:text-decoration style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.text-decoration")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-decoration.none + ;; inspect.attributes.typography.text-decoration.strikethrough + ;; inspect.attributes.typography.text-decoration.underline + [:div {:class (stl/css :global/attr-value)} + [:div (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] + #_[:& copy-button {:data (copy-style-data style :text-decoration)}]]]) - (when (:text-decoration style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-decoration.none - ;; inspect.attributes.typography.text-decoration.strikethrough - ;; inspect.attributes.typography.text-decoration.underline - [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] - #_[:& copy-button {:data (copy-style-data style :text-decoration)}]]) + (when (:text-transform style) + [:div {:class (stl/css :text-row)} + [:div {:class (stl/css :global/attr-label)} + (tr "inspect.attributes.typography.text-transform")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-transform.lowercase + ;; inspect.attributes.typography.text-transform.none + ;; inspect.attributes.typography.text-transform.titlecase + ;; inspect.attributes.typography.text-transform.uppercase + ;; inspect.attributes.typography.text-transform.unset + [:div {:class (stl/css :global/attr-value)} + [:div (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] + #_[:& copy-button {:data (copy-style-data style :text-transform)}]]]) - (when (:text-transform style) - [:div.attributes-unit-row - [:div.attributes-label (tr "inspect.attributes.typography.text-transform")] - ;; Execution time translation strings: - ;; inspect.attributes.typography.text-transform.lowercase - ;; inspect.attributes.typography.text-transform.none - ;; inspect.attributes.typography.text-transform.titlecase - ;; inspect.attributes.typography.text-transform.uppercase - [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] - #_[:& copy-button {:data (copy-style-data style :text-transform)}]]) + [:& copy-button {:data (str/trim text) + :class (stl/css :attributes-content-row)} + [:span {:class (stl/css :content) + :style {:font-family (:font-family style) + :font-weight (:font-weight style) + :font-style (:font-style style)}} + (str/trim text)]]] - [:div.attributes-content-row - [:pre.attributes-content (str/trim text)] - [:& copy-button {:data (str/trim text)}]]])) + + [:div.attributes-text-block + (if (:typography-ref-id style) + [:div.attributes-typography-name-row + [:div.typography-entry + [:div.typography-sample + {:style {:font-family (:font-family typography) + :font-weight (:font-weight typography) + :font-style (:font-style typography)}} + (tr "workspace.assets.typography.text-styles")]] + [:div.typography-entry-name (:name typography)] + #_[:& copy-button {:data (copy-style-data typography)}]] + + [:div.attributes-typography-row + [:div.typography-sample + {:style {:font-family (:font-family style) + :font-weight (:font-weight style) + :font-style (:font-style style)}} + (tr "workspace.assets.typography.text-styles")] + #_[:& copy-button {:data (copy-style-data style)}]]) + + (when (:fills style) + (for [[idx fill] (map-indexed vector (:fills style))] + [:& color-row {:key idx + :format @color-format + :color (fill->color fill) + ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient) + :on-change-format #(reset! color-format %)}])) + + (when (:font-id style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.font-family")] + [:div.attributes-value (-> style :font-id fonts/get-font-data :name)] + #_[:& copy-button {:data (copy-style-data style :font-family)}]]) + + (when (:font-style style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.font-style")] + [:div.attributes-value (str (:font-style style))] + #_[:& copy-button {:data (copy-style-data style :font-style)}]]) + + (when (:font-size style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.font-size")] + [:div.attributes-value (fmt/format-pixels (:font-size style))] + #_[:& copy-button {:data (copy-style-data style :font-size)}]]) + + (when (:font-weight style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.font-weight")] + [:div.attributes-value (str (:font-weight style))] + #_[:& copy-button {:data (copy-style-data style :font-weight)}]]) + + (when (:line-height style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.line-height")] + [:div.attributes-value (fmt/format-number (:line-height style))] + #_[:& copy-button {:data (copy-style-data style :line-height)}]]) + + (when (:letter-spacing style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")] + [:div.attributes-value (fmt/format-pixels (:letter-spacing style))] + #_[:& copy-button {:data (copy-style-data style :letter-spacing)}]]) + + (when (:text-decoration style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-decoration.none + ;; inspect.attributes.typography.text-decoration.strikethrough + ;; inspect.attributes.typography.text-decoration.underline + [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] + #_[:& copy-button {:data (copy-style-data style :text-decoration)}]]) + + (when (:text-transform style) + [:div.attributes-unit-row + [:div.attributes-label (tr "inspect.attributes.typography.text-transform")] + ;; Execution time translation strings: + ;; inspect.attributes.typography.text-transform.lowercase + ;; inspect.attributes.typography.text-transform.none + ;; inspect.attributes.typography.text-transform.titlecase + ;; inspect.attributes.typography.text-transform.uppercase + [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] + #_[:& copy-button {:data (copy-style-data style :text-transform)}]]) + + [:div.attributes-content-row + [:pre.attributes-content (str/trim text)] + [:& copy-button {:data (str/trim text)}]]]))) (mf/defc text-block [{:keys [shape]}] @@ -147,7 +257,7 @@ (mapv (fn [[style text]] (vector (merge txt/default-text-attrs style) text))))] (for [[idx [full-style text]] (map-indexed vector style-text-blocks)] - [:& typography-block {:key idx + [:& typography-block {:key idx :shape shape :style full-style :text text}]))) @@ -155,10 +265,21 @@ (mf/defc text-panel [{:keys [shapes]}] (when-let [shapes (seq (filter has-text? shapes))] - [:div.attributes-block - [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.typography")]] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:div {:class (stl/css :attributes-block)} + [:& title-bar {:collapsable? false + :title (tr "inspect.attributes.typography") + :class (stl/css :title-spacing-text)}] - (for [shape shapes] - [:& text-block {:shape shape - :key (str "text-block" (:id shape))}])])) + (for [shape shapes] + [:& text-block {:shape shape + :key (str "text-block" (:id shape))}])] + + [:div.attributes-block + [:div.attributes-block-title + [:div.attributes-block-title-text (tr "inspect.attributes.typography")]] + + (for [shape shapes] + [:& text-block {:shape shape + :key (str "text-block" (:id shape))}])])))) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss new file mode 100644 index 000000000..929ec17e0 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss @@ -0,0 +1,45 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.attributes-block { + @include flexColumn; + .title-spacing-text { + @extend .attr-title; + } +} +.attributes-content { + @include flexColumn; + .text-row { + @extend .attr-row; + :global(.attr-value) { + align-items: center; + } + } + .attributes-content-row { + width: $s-252; + max-width: $s-252; + min-height: calc($s-2 + $s-32); + border-radius: $br-8; + border: $s-1 solid var(--menu-border-color-disabled); + margin-top: $s-4; + .content { + @include titleTipography; + width: 100%; + padding: 0; + color: var(--color-foreground-secondary); + } + + &:hover { + border: $s-1 solid var(--color-background-tertiary); + background-color: var(--menu-background-color); + .content { + color: var(--menu-foreground-color-hover); + } + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index c26c698e8..b44da82c6 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.code + (:require-macros [app.main.style :as stl]) (:require ["js-beautify" :as beautify] [app.common.data :as d] @@ -14,13 +15,14 @@ [app.common.types.shape-tree :as ctst] [app.config :as cfg] [app.main.data.events :as ev] - ;; [app.main.data.preview :as dp] [app.main.fonts :as fonts] + ;; [app.main.data.preview :as dp] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.code-block :refer [code-block]] [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.select :refer [select]] + [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.icons :as i] @@ -108,7 +110,8 @@ (mf/defc code [{:keys [shapes frame on-expand from]}] - (let [style-type* (mf/use-state "css") + (let [new-css-system (mf/use-ctx ctx/new-css-system) + style-type* (mf/use-state "css") markup-type* (mf/use-state "html") fontfaces-css* (mf/use-state nil) images-data* (mf/use-state nil) @@ -227,55 +230,120 @@ (fn [result] (reset! images-data* result))))) - [:div.element-options - [:div.attributes-block - [:button.download-button {:on-click handle-copy-all-code} - "Copy all code"]] + (if new-css-system + [:div {:class (stl/css :element-options)} + [:div {:class (stl/css :attributes-block)} + [:button {:class (stl/css :download-button) + :on-click handle-copy-all-code} + "Copy all code"]] - #_[:div.attributes-block - [:button.download-button {:on-click handle-open-review} - "Preview"]] + #_[:div.attributes-block + [:button.download-button {:on-click handle-open-review} + "Preview"]] - [:div.code-block - [:div.code-row-lang - [:& select {:default-value style-type - :class "custom-select" - :options [{:label "CSS" :value "css"}] - :on-change set-style}] - [:button.expand-button - {:on-click on-expand} - i/full-screen] + [:div {:class (stl/css :code-block)} + [:div {:class (stl/css :code-row-lang)} + [:span {:class (stl/css :code-lang)} "CSS"] + ;; Active select when we have more than one option + ;; [:& select {:default-value style-type + ;; :class (stl/css :code-lang-select) + ;; :options [{:label "CSS" :value "css"}] + ;; :on-change set-style}] + [:div {:class (stl/css :action-btns)} + [:button {:class (stl/css :expand-button) + :on-click on-expand} + i/code-refactor] - [:& copy-button {:data style-code - :on-copied on-style-copied}]] + [:& copy-button {:data style-code + :on-copied on-style-copied}]]] - [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}} - [:& code-block {:type style-type - :code style-code}]] + [:div {:class (stl/css :code-row-display) + :style #js {"--code-height" (str (or style-size 400) "px")}} + [:& code-block {:type style-type + :code style-code}]] - [:div.resize-area {:on-pointer-down on-style-pointer-down - :on-lost-pointer-capture on-style-lost-pointer-capture - :on-pointer-move on-style-pointer-move}]] + [:div {:class (stl/css :resize-area) + :on-pointer-down on-style-pointer-down + :on-lost-pointer-capture on-style-lost-pointer-capture + :on-pointer-move on-style-pointer-move}]] - [:div.code-block - [:div.code-row-lang - [:& select {:default-value markup-type - :class "input-option" - :options [{:label "HTML" :value "html"} - {:label "SVG" :value "svg"}] - :on-change set-markup}] + [:div {:class (stl/css :code-block)} + [:div {:class (stl/css :code-row-lang)} + [:& select {:default-value markup-type + :class (stl/css :code-lang-select) + :options [{:label "HTML" :value "html"} + {:label "SVG" :value "svg"}] + :on-change set-markup}] - [:button.expand-button - {:on-click on-expand} - i/full-screen] + [:div {:class (stl/css :action-btns)} + [:button {:class (stl/css :expand-button) + :on-click on-expand} + i/code-refactor] - [:& copy-button {:data #(replace-map markup-code images-data) - :on-copied on-markup-copied}]] + [:& copy-button {:data #(replace-map markup-code images-data) + :on-copied on-markup-copied}]]] - [:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}} - [:& code-block {:type markup-type - :code markup-code}]] + [:div {:class (stl/css :code-row-display) + :style #js {"--code-height" (str (or markup-size 400) "px")}} + [:& code-block {:type markup-type + :code markup-code}]] - [:div.resize-area {:on-pointer-down on-markup-pointer-down - :on-lost-pointer-capture on-markup-lost-pointer-capture - :on-pointer-move on-markup-pointer-move}]]])) + [:div {:class (stl/css :resize-area) + :on-pointer-down on-markup-pointer-down + :on-lost-pointer-capture on-markup-lost-pointer-capture + :on-pointer-move on-markup-pointer-move}]]] + + + + [:div.element-options + [:div.attributes-block + [:button.download-button {:on-click handle-copy-all-code} + "Copy all code"]] + + #_[:div.attributes-block + [:button.download-button {:on-click handle-open-review} + "Preview"]] + + [:div.code-block + [:div.code-row-lang + [:& select {:default-value style-type + :class "custom-select" + :options [{:label "CSS" :value "css"}] + :on-change set-style}] + [:button.expand-button + {:on-click on-expand} + i/full-screen] + + [:& copy-button {:data style-code + :on-copied on-style-copied}]] + + [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}} + [:& code-block {:type style-type + :code style-code}]] + + [:div.resize-area {:on-pointer-down on-style-pointer-down + :on-lost-pointer-capture on-style-lost-pointer-capture + :on-pointer-move on-style-pointer-move}]] + + [:div.code-block + [:div.code-row-lang + [:& select {:default-value markup-type + :class "input-option" + :options [{:label "HTML" :value "html"} + {:label "SVG" :value "svg"}] + :on-change set-markup}] + + [:button.expand-button + {:on-click on-expand} + i/full-screen] + + [:& copy-button {:data #(replace-map markup-code images-data) + :on-copied on-markup-copied}]] + + [:div.code-row-display {:style #js {"--code-height" (str (or markup-size 400) "px")}} + [:& code-block {:type markup-type + :code markup-code}]] + + [:div.resize-area {:on-pointer-down on-markup-pointer-down + :on-lost-pointer-capture on-markup-lost-pointer-capture + :on-pointer-move on-markup-pointer-move}]]]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss new file mode 100644 index 000000000..a5a61e00d --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -0,0 +1,57 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-options { + .attributes-block { + .download-button { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + width: 100%; + margin: $s-8 0; + } + } + .code-block { + .code-row-lang { + display: flex; + justify-content: space-between; + gap: $s-4; + width: 100%; + .code-lang { + @include tabTitleTipography; + display: flex; + align-items: center; + } + .action-btns { + display: flex; + gap: $s-4; + .expand-button { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + + .code-lang-select { + @include tabTitleTipography; + width: $s-92; + border: $s-1 solid transparent; + background-color: transparent; + color: var(--menu-foreground-color-disabled); + } + } + + .code-row-display { + margin-bottom: $s-8; + } + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs index 4a3442134..af81e838e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs @@ -5,11 +5,15 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.exports + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.data.exports :as de] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.select :refer [select]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :refer [tr c]] @@ -19,7 +23,8 @@ (mf/defc exports {::mf/wrap [#(mf/memo % =)]} [{:keys [shapes page-id file-id share-id type] :as props}] - (let [exports (mf/use-state []) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + exports (mf/use-state []) xstate (mf/deref refs/export) vstate (mf/deref refs/viewer-data) page (get-in vstate [:pages page-id]) @@ -109,7 +114,20 @@ (fn [event] (let [esc? (kbd/esc? event)] (when esc? - (dom/blur! (dom/get-target event))))))] + (dom/blur! (dom/get-target event)))))) + + size-options [{:value "0.5" :label "0.5x"} + {:value "0.75" :label "0.75x"} + {:value "1" :label "1x"} + {:value "1.5" :label "1.5x"} + {:value "2" :label "2x"} + {:value "4" :label "4x"} + {:value "6" :label "6"}] + + format-options [{:value "png" :label "PNG"} + {:value "jpeg" :label "JPE"} + {:value "svg" :label "SVG"} + {:value "pdf" :label "PDF"}]] (mf/use-effect (mf/deps shapes) @@ -118,46 +136,111 @@ flatten distinct vec)))) + (if new-css-system + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? false + :title (tr "workspace.options.export") + :class (stl/css :title-spacing-export-viewer)} + [:button {:class (stl/css :add-export) + :on-click add-export} i/add-refactor]]] - [:div.element-set.exports-options - [:div.element-set-title - [:span (tr "workspace.options.export")] - [:div.add-page {:on-click add-export} i/close]] + (cond + (= :multiple exports) + [:div {:class (stl/css :multiple-exports)} + [:div {:class (stl/css :label)} (tr "settings.multiple")] + [:div {:class (stl/css :actions)} + [:button {:class (stl/css :action-btn) + :on-click ()} + i/remove-refactor]]] - (when (seq @exports) - [:div.element-set-content - (for [[index export] (d/enumerate @exports)] - [:div.element-set-options-group - {:key index} - (when (scale-enabled? export) - [:select.input-select {:on-change (partial on-scale-change index) - :value (:scale export)} - [:option {:value "0.5"} "0.5x"] - [:option {:value "0.75"} "0.75x"] - [:option {:value "1"} "1x"] - [:option {:value "1.5"} "1.5x"] - [:option {:value "2"} "2x"] - [:option {:value "4"} "4x"] - [:option {:value "6"} "6x"]]) + (seq @exports) + [:div {:class (stl/css :element-set-content)} + (for [[index export] (d/enumerate @exports)] + [:div {:class (stl/css :element-group) + :key index} + [:div {:class (stl/css :input-wrapper)} + [:div {:class (stl/css :format-select)} + [:& select + {:default-value (d/name (:type export)) + :options format-options + :dropdown-class (stl/css :dropdown-upwards) + :on-change (partial on-type-change index)}]] + (when (scale-enabled? export) + [:div {:class (stl/css :size-select)} + [:& select + {:default-value (str (:scale export)) + :options size-options + :dropdown-class (stl/css :dropdown-upwards) + :on-change (partial on-scale-change index)}]]) + [:label {:class (stl/css :suffix-input) + :for "suffix-export-input"} + [:input {:class (stl/css :type-input) + :id "suffix-export-input" + :type "text" + :value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") + :data-value index + :on-change on-suffix-change + :on-key-down manage-key-down}]]] - [:input.input-text {:value (:suffix export) - :placeholder (tr "workspace.options.export.suffix") - :on-change (partial on-suffix-change index) - :on-key-down manage-key-down}] - [:select.input-select {:value (d/name (:type export)) - :on-change (partial on-type-change index)} - [:option {:value "png"} "PNG"] - [:option {:value "jpeg"} "JPEG"] - [:option {:value "svg"} "SVG"] - [:option {:value "pdf"} "PDF"]] - [:div.delete-icon {:on-click (partial delete-export index)} - i/minus]]) + [:button {:class (stl/css :action-btn) + :on-click (partial delete-export index)} + i/remove-refactor]]) + ]) + (when (or (= :multiple exports) (seq @exports)) + [:button + {:on-click (when-not in-progress? on-download) + :class (stl/css-case + :export-btn true + :btn-disabled in-progress?) + :disabled in-progress?} + (if in-progress? + (tr "workspace.options.exporting-object") + (tr "workspace.options.export-object" (c (count shapes))))]) + ] - [:div.btn-icon-dark.download-button - {:on-click (when-not in-progress? on-download) - :class (dom/classnames :btn-disabled in-progress?) - :disabled in-progress?} - (if in-progress? - (tr "workspace.options.exporting-object") - (tr "workspace.options.export-object" (c (count shapes))))]])])) + + + [:div.element-set.exports-options + [:div.element-set-title + [:span (tr "workspace.options.export")] + [:div.add-page {:on-click add-export} i/close]] + + (when (seq @exports) + [:div.element-set-content + (for [[index export] (d/enumerate @exports)] + [:div.element-set-options-group + {:key index} + (when (scale-enabled? export) + [:select.input-select {:on-change (partial on-scale-change index) + :value (:scale export)} + [:option {:value "0.5"} "0.5x"] + [:option {:value "0.75"} "0.75x"] + [:option {:value "1"} "1x"] + [:option {:value "1.5"} "1.5x"] + [:option {:value "2"} "2x"] + [:option {:value "4"} "4x"] + [:option {:value "6"} "6x"]]) + + [:input.input-text {:value (:suffix export) + :placeholder (tr "workspace.options.export.suffix") + :on-change (partial on-suffix-change index) + :on-key-down manage-key-down}] + [:select.input-select {:value (d/name (:type export)) + :on-change (partial on-type-change index)} + [:option {:value "png"} "PNG"] + [:option {:value "jpeg"} "JPEG"] + [:option {:value "svg"} "SVG"] + [:option {:value "pdf"} "PDF"]] + [:div.delete-icon {:on-click (partial delete-export index)} + i/minus]]) + + [:div.btn-icon-dark.download-button + {:on-click (when-not in-progress? on-download) + :class (dom/classnames :btn-disabled in-progress?) + :disabled in-progress?} + (if in-progress? + (tr "workspace.options.exporting-object") + (tr "workspace.options.export-object" (c (count shapes))))]])]))) diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss new file mode 100644 index 000000000..8d5c74809 --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss @@ -0,0 +1,87 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-set { + .element-title { + .title-spacing-export-viewer { + @extend .attr-title; + } + .add-export { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + } + } + .element-set-content { + @include flexColumn; + margin-bottom: $s-4; + .multiple-exports { + @include flexRow; + .label { + @extend .mixed-bar; + } + .actions { + @include flexRow; + .action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + } + } + } + .element-group { + @include flexRow; + .input-wrapper { + @include flexRow; + .format-select { + width: $s-60; + padding: 0; + .dropdown-upwards { + bottom: $s-36; + width: $s-80; + top: unset; + } + } + .size-select { + width: $s-60; + padding: 0; + .dropdown-upwards { + bottom: $s-36; + top: unset; + width: $s-80; + } + } + .suffix-input { + @extend .input-element; + min-width: $s-92; + flex-grow: 1; + } + } + .action-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + } + } + } + .export-btn { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + width: $s-252; + } +} diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs index ef9947fa5..90a0c155a 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.cljs @@ -5,12 +5,15 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.viewer.inspect.right-sidebar + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.common.types.component :as ctk] [app.main.refs :as refs] [app.main.ui.components.shape-icon :as si] + [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.tabs-container :refer [tabs-container tabs-element]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.viewer.inspect.attributes :refer [attributes]] [app.main.ui.viewer.inspect.code :refer [code]] @@ -40,24 +43,25 @@ (mf/defc right-sidebar [{:keys [frame page objects file selected shapes page-id file-id share-id from on-change-section on-expand] :or {from :inspect}}] - (let [section (mf/use-state :info #_:code) - objects (or objects (:objects page)) - shapes (or shapes - (resolve-shapes objects selected)) - first-shape (first shapes) - page-id (or page-id (:id page)) - file-id (or file-id (:id file)) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + section (mf/use-state :info #_:code) + objects (or objects (:objects page)) + shapes (or shapes + (resolve-shapes objects selected)) + first-shape (first shapes) + page-id (or page-id (:id page)) + file-id (or file-id (:id file)) - libraries (get-libraries from) + libraries (get-libraries from) - file (mf/deref refs/viewer-file) - components-v2 (dm/get-in file [:data :options :components-v2]) - main-instance? (if components-v2 - (ctk/main-instance? first-shape) - true) + file (mf/deref refs/viewer-file) + components-v2 (dm/get-in file [:data :options :components-v2]) + main-instance? (if components-v2 + (ctk/main-instance? first-shape) + true) handle-change-tab - (mf/use-callback + (mf/use-fn (mf/deps from on-change-section) (fn [new-section] (reset! section new-section) @@ -65,10 +69,15 @@ (on-change-section new-section)))) handle-expand - (mf/use-callback + (mf/use-fn (mf/deps on-expand) (fn [] - (when on-expand (on-expand))))] + (when on-expand (on-expand)))) + + navigate-to-help + (mf/use-fn + (fn [] + (dom/open-new-window "https://help.penpot.app/user-guide/inspect/")))] (mf/use-effect (mf/deps shapes handle-change-tab) @@ -76,52 +85,113 @@ (when-not (seq shapes) (handle-change-tab :info)))) - [:aside.settings-bar.settings-bar-right - [:div.settings-bar-inside - (if (seq shapes) - [:div.tool-window - [:div.tool-window-bar.big - (if (> (count shapes) 1) - [:* - [:span.tool-window-bar-icon i/layers] - [:span.tool-window-bar-title (tr "inspect.tabs.code.selected.multiple" (count shapes))]] - [:* - [:span.tool-window-bar-icon - [:& si/element-icon {:shape first-shape :main-instance? main-instance?}]] - ;; Execution time translation strings: - ;; inspect.tabs.code.selected.circle - ;; inspect.tabs.code.selected.component - ;; inspect.tabs.code.selected.curve - ;; inspect.tabs.code.selected.frame - ;; inspect.tabs.code.selected.group - ;; inspect.tabs.code.selected.image - ;; inspect.tabs.code.selected.mask - ;; inspect.tabs.code.selected.path - ;; inspect.tabs.code.selected.rect - ;; inspect.tabs.code.selected.svg-raw - ;; inspect.tabs.code.selected.text - [:span.tool-window-bar-title (:name first-shape)]])] - [:div.tool-window-content.inspect - [:& tabs-container {:on-change-tab handle-change-tab - :selected @section} - [:& tabs-element {:id :info :title (tr "inspect.tabs.info")} - [:& attributes {:page-id page-id - :objects objects - :file-id file-id - :frame frame - :shapes shapes - :from from - :libraries libraries - :share-id share-id}]] + (if new-css-system + [:aside {:class (stl/css :settings-bar-right)} - [:& tabs-element {:id :code :title (tr "inspect.tabs.code")} - [:& code {:frame frame - :shapes shapes - :on-expand handle-expand - :from from}]]]]] - [:div.empty - [:span.tool-window-bar-icon i/code] - [:div (tr "inspect.empty.select")] - [:span.tool-window-bar-icon i/help] - [:div (tr "inspect.empty.help")] - [:button.btn-primary.action {:on-click #(dom/open-new-window "https://help.penpot.app/user-guide/inspect/")} (tr "inspect.empty.more-info")]])]])) + (if (seq shapes) + [:div {:class (stl/css :tool-windows)} + [:div {:class (stl/css :shape-row)} + (if (> (count shapes) 1) + [:* + [:span {:class (stl/css :layers-icon)} i/layers-refactor] + [:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]] + [:* + [:span {:class (stl/css :shape-icon)} + [:& si/element-icon-refactor {:shape first-shape :main-instance? main-instance?}]] + ;; Execution time translation strings: + ;; inspect.tabs.code.selected.circle + ;; inspect.tabs.code.selected.component + ;; inspect.tabs.code.selected.curve + ;; inspect.tabs.code.selected.frame + ;; inspect.tabs.code.selected.group + ;; inspect.tabs.code.selected.image + ;; inspect.tabs.code.selected.mask + ;; inspect.tabs.code.selected.path + ;; inspect.tabs.code.selected.rect + ;; inspect.tabs.code.selected.svg-raw + ;; inspect.tabs.code.selected.text + [:span {:class (stl/css :layer-title)} (:name first-shape)]])] + [:div {:class (stl/css :inspect-content)} + [:& tab-container {:on-change-tab handle-change-tab + :selected @section} + [:& tab-element {:id :info :title (tr "inspect.tabs.info")} + [:& attributes {:page-id page-id + :objects objects + :file-id file-id + :frame frame + :shapes shapes + :from from + :libraries libraries + :share-id share-id}]] + + [:& tab-element {:id :code :title (tr "inspect.tabs.code")} + [:& code {:frame frame + :shapes shapes + :on-expand handle-expand + :from from}]]]]] + [:div {:class (stl/css :empty)} + [:div {:class (stl/css :code-info)} + [:span {:class (stl/css :placeholder-icon)} + i/code-refactor] + [:span {:class (stl/css :placeholder-label)} + (tr "inspect.empty.select")]] + [:div {:class (stl/css :help-info)} + [:span {:class (stl/css :placeholder-icon)} + i/help-refactor] + [:span {:class (stl/css :placeholder-label)} + (tr "inspect.empty.help")]] + [:button {:class (stl/css :more-info-btn) + :on-click navigate-to-help} + (tr "inspect.empty.more-info")]])] + + + [:aside.settings-bar.settings-bar-right + [:div.settings-bar-inside + (if (seq shapes) + [:div.tool-window + [:div.tool-window-bar.big + (if (> (count shapes) 1) + [:* + [:span.tool-window-bar-icon i/layers] + [:span.tool-window-bar-title (tr "inspect.tabs.code.selected.multiple" (count shapes))]] + [:* + [:span.tool-window-bar-icon + [:& si/element-icon {:shape first-shape :main-instance? main-instance?}]] + ;; Execution time translation strings: + ;; inspect.tabs.code.selected.circle + ;; inspect.tabs.code.selected.component + ;; inspect.tabs.code.selected.curve + ;; inspect.tabs.code.selected.frame + ;; inspect.tabs.code.selected.group + ;; inspect.tabs.code.selected.image + ;; inspect.tabs.code.selected.mask + ;; inspect.tabs.code.selected.path + ;; inspect.tabs.code.selected.rect + ;; inspect.tabs.code.selected.svg-raw + ;; inspect.tabs.code.selected.text + [:span.tool-window-bar-title (:name first-shape)]])] + [:div.tool-window-content.inspect + [:& tabs-container {:on-change-tab handle-change-tab + :selected @section} + [:& tabs-element {:id :info :title (tr "inspect.tabs.info")} + [:& attributes {:page-id page-id + :objects objects + :file-id file-id + :frame frame + :shapes shapes + :from from + :libraries libraries + :share-id share-id}]] + + [:& tabs-element {:id :code :title (tr "inspect.tabs.code")} + [:& code {:frame frame + :shapes shapes + :on-expand handle-expand + :from from}]]]]] + [:div.empty + [:span.tool-window-bar-icon i/code] + [:div (tr "inspect.empty.select")] + [:span.tool-window-bar-icon i/help] + [:div (tr "inspect.empty.help")] + [:button.btn-primary.action {:on-click navigate-to-help} (tr "inspect.empty.more-info")]])]]) + )) diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss new file mode 100644 index 000000000..97fc2a1be --- /dev/null +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss @@ -0,0 +1,64 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.settings-bar-right { + min-width: $s-252; + width: 100%; + height: 100%; + position: relative; + left: unset; + right: unset; + grid-area: right-sidebar; + .tool-windows { + .shape-row { + display: flex; + gap: $s-8; + align-items: center; + margin-bottom: $s-16; + .layers-icon, + .shape-icon { + @include flexCenter; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + .layer-title { + @include titleTipography; + } + } + } + .empty { + display: flex; + flex-direction: column; + align-items: center; + gap: $s-40; + padding-top: $s-24; + .code-info, + .help-info { + @include flexColumn; + align-items: center; + justify-content: flex-start; + gap: $s-8; + .placeholder-icon { + @extend .empty-icon; + } + .placeholder-label { + @include titleTipography; + text-align: center; + width: $s-200; + } + } + .more-info-btn { + @extend .button-secondary; + @include tabTitleTipography; + height: $s-32; + padding: $s-8 $s-24; + } + } +} diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss index e66b883ee..564fc72d2 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss @@ -7,25 +7,19 @@ @import "refactor/common-refactor.scss"; .color-values { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; &.disable-opacity { grid-template-columns: 3.5rem repeat(3, 1fr); } .colors-row { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .input-wrapper { @extend .input-element; width: $s-84; } } .hex-alpha-wrapper { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .input-wrapper { @extend .input-element; width: $s-84; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss index 970c9ed5b..15b9f54d5 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.scss @@ -35,9 +35,7 @@ } .handlers-wrapper { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; height: $s-200; width: $s-52; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss index 49e5f2e9e..03e2d66b6 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss @@ -7,9 +7,7 @@ @import "refactor/common-refactor.scss"; .hsva-selector { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; padding: $s-4; grid-row-gap: $s-8; margin-bottom: $s-8; diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index 7f5e1c70c..7c45491e6 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -112,11 +112,9 @@ gap: $s-24; } .thread-group-placeholder { - display: flex; - flex-direction: column; + @include flexColumn; align-items: center; justify-content: flex-start; - gap: $s-4; margin-top: $s-36; .placeholder-icon { @include flexCenter; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 04f76cd0c..2f56d53a9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -80,12 +80,10 @@ } .sections-container { @include menuShadow; + @include flexColumn; position: absolute; top: $s-84; left: $s-12; - display: flex; - flex-direction: column; - gap: $s-4; width: $s-192; padding: $s-4; border-radius: $br-8; diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 175742a2d..1870531c2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -50,17 +50,9 @@ text-align: center; .history-entry-empty-icon { - @include flexCenter; - height: $s-48; - width: $s-48; - border-radius: $br-circle; - background-color: var(--empty-message-background-color); + @extend .empty-icon; svg { - @extend .button-icon; - height: $s-28; - width: $s-28; margin-left: calc(-1 * $s-2); - stroke: var(--empty-message-foreground-color); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 4469bd268..37e87b02e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -130,10 +130,8 @@ } } .active-filters { - display: flex; - align-items: center; + @include flexRow; flex-wrap: wrap; - gap: $s-4; margin: 0 $s-12; .layer-filter { @extend .button-tag; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss index 6bd698418..ce1ffb4d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.scss @@ -7,7 +7,5 @@ @import "refactor/common-refactor.scss"; .advanced-options-wrapper { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss index bee5c3079..d141e7fd5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss @@ -8,13 +8,11 @@ .align-options { display: flex; + gap: $s-4; height: $s-32; margin: 0 calc(-1 * $s-2); - gap: $s-4; .align-group { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .align-button { @extend .button-tertiary; height: $s-28; 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 888548156..5aaabc593 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 @@ -21,14 +21,10 @@ } } .element-set-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; margin-bottom: $s-4; .first-row { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; width: 100%; .blur-info { display: flex; @@ -65,9 +61,7 @@ } } .actions { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .action-btn { @extend .button-tertiary; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss index 4b09dc888..bf08806f5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -8,8 +8,8 @@ .boolean-options { display: flex; - height: $s-32; gap: $s-4; + height: $s-32; margin: 0 calc(-1 * $s-2); .bool-group { display: flex; 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 116eef94c..5563bea17 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 @@ -21,13 +21,9 @@ } } .element-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .selected-color-group { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .more-colors-btn { @extend .button-secondary; @include tabTitleTipography; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 5d74ad344..b6fadf3d3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -7,17 +7,13 @@ @import "refactor/common-refactor.scss"; .element-set { .element-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .component-wrapper { display: flex; gap: $s-4; .component-name-wrapper { @extend .asset-element; - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; flex-grow: 1; .component-icon { @include flexCenter; 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 1ed1fa93b..35c90e3c9 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 @@ -105,9 +105,7 @@ } } .contraints-selects { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .horizontal-select, .vertical-select { 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 78fe2b024..3e8465da7 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 @@ -21,21 +21,15 @@ } } .element-set-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; margin-bottom: $s-4; .multiple-exports { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .label { @extend .mixed-bar; } .actions { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .action-btn { @extend .button-tertiary; height: $s-32; @@ -47,13 +41,9 @@ } } .element-group { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .input-wrapper { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .format-select { width: $s-60; padding: 0; 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 e074bc78e..20c80fcfb 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 @@ -25,9 +25,7 @@ flex-direction: column; gap: $s-12; .element-set-options-group { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .group-label { @extend .mixed-bar; } 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 2c2021fa7..7fffb00bb 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 @@ -19,14 +19,10 @@ } } .element-set-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .grid-option { .grid-title { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .option-row { display: flex; align-items: center; @@ -130,9 +126,7 @@ } .actions { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .action-btn { @extend .button-tertiary; height: $s-32; @@ -145,15 +139,11 @@ } } .grid-advanced-options { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; margin-top: $s-4; .column-row, .square-row { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; position: relative; .advanced-row { position: relative; @@ -193,12 +183,10 @@ } .more-options { @include menuShadow; + @include flexColumn; position: absolute; top: $s-36; right: 0; - display: flex; - flex-direction: column; - gap: $s-4; width: $s-156; max-height: $s-300; padding: $s-2; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index 183d8a5f9..a941c3208 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -11,9 +11,7 @@ flex-direction: column; gap: $s-8; .interaction-options { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .element-title { .add-interaction-btn { @extend .button-tertiary; @@ -50,18 +48,12 @@ } } .groups { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .element-set-options-group { &.open { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .extended-options { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .property-row { @extend .attr-row; .interaction-name { @@ -155,9 +147,7 @@ } .inputs-wrapper { grid-area: content; - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .radio-btn { @extend .input-checkbox; } @@ -202,9 +192,7 @@ } } .element-set { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .add-flow-btn { @extend .button-tertiary; height: $s-32; 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 807de426b..f0e856994 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 @@ -62,9 +62,7 @@ margin-bottom: $s-12; } .forth-row { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .gap-group { display: flex; gap: $s-4; 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 7f1f016e3..6635273cd 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 @@ -19,9 +19,7 @@ } } .flex-element-menu { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .first-row { display: flex; gap: $s-4; @@ -111,9 +109,7 @@ } .forth-row .advanced-options { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .horizontal-fill, .vertical-fill { display: flex; 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 5e4127468..51b28c24d 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 @@ -7,9 +7,7 @@ @import "refactor/common-refactor.scss"; .element-set { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .presets { display: flex; align-items: flex-start; @@ -94,9 +92,7 @@ } } .size { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .height, .width { @extend .input-element; @@ -120,9 +116,7 @@ } } .position { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .x-position, .y-position { @extend .input-element; 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 13deb563b..6a0406a14 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 @@ -21,20 +21,14 @@ } } .element-set-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .multiple-shadows { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .label { @extend .mixed-bar; } .actions { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .action-btn { @extend .button-tertiary; height: $s-32; @@ -46,13 +40,9 @@ } } .shadow-element { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .basic-options { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .shadow-info { display: flex; align-items: center; @@ -85,9 +75,7 @@ } } .actions { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .action-btn { @extend .button-tertiary; height: $s-32; @@ -99,14 +87,10 @@ } } .shadow-advanced-options { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .first-row, .second-row { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .offset-x-input, .blur-input, .spread-input, 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 9738f5a35..669c614b1 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 @@ -26,9 +26,7 @@ flex-direction: column; gap: $s-12; .element-set-options-group { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .group-label { @extend .mixed-bar; } 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 806fadf67..72897cfce 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 @@ -11,9 +11,7 @@ padding-left: $s-12; } .element-set-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .attr-row { display: flex; gap: $s-4; 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 0edee08b4..2a35d7502 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 @@ -18,9 +18,7 @@ } } .element-content { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .multiple-typography { @extend .mixed-bar; .multiple-text { 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 e974a515f..85ab31fe2 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 @@ -143,9 +143,7 @@ width: 100%; background-color: var(--assets-title-background-color); .typography-info-wrapper { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; margin-bottom: $s-12; .typography-name-wrapper { @extend .asset-element; @@ -248,9 +246,7 @@ .text-options { position: relative; - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .font-option { @include titleTipography; @extend .asset-element; @@ -319,13 +315,9 @@ } } .typography-variations { - display: flex; - gap: $s-4; - align-items: center; + @include flexRow; .spacing-options { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .line-height, .letter-spacing { @extend .input-element; 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 b357a701b..1af2b9683 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 @@ -7,9 +7,7 @@ @import "refactor/common-refactor.scss"; .color-data { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .color-info { display: flex; align-items: center; @@ -103,7 +101,9 @@ } } .gradient-name-wrapper { + border-radius: 0 $br-8 $br-8 0; .color-name { + @include flexRow; border-radius: 0 $br-8 $br-8 0; } } 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 3c61be1b1..147df0fbb 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 @@ -7,13 +7,9 @@ @import "refactor/common-refactor.scss"; .stroke-data { - display: flex; - flex-direction: column; - gap: $s-4; + @include flexColumn; .stroke-options { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .stroke-width-input-element { @extend .input-element; width: $s-60; @@ -30,9 +26,7 @@ } } .stroke-caps-options { - display: flex; - align-items: center; - gap: $s-4; + @include flexRow; .cap-select { width: $s-124; } diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 5ab4655c1..380b360ec 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -115,8 +115,7 @@ body { ;; Grid cell properties :grid-column :grid-row - :grid-area - ]) + :grid-area]) (def text-node-css-properties [:font-family diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 8766883f2..2a6673501 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1190,6 +1190,9 @@ msgstr "Lower Case" msgid "inspect.attributes.typography.text-transform.none" msgstr "None" +msgid "inspect.attributes.typography.text-transform.unset" +msgstr "Unset" + msgid "inspect.attributes.typography.text-transform.titlecase" msgstr "Title Case" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 321496ae9..bbbeef995 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1228,6 +1228,9 @@ msgstr "Minúsculas" msgid "inspect.attributes.typography.text-transform.none" msgstr "Ninguna" +msgid "inspect.attributes.typography.text-transform.unset" +msgstr "Sin asignar" + msgid "inspect.attributes.typography.text-transform.titlecase" msgstr "Primera en mayúscula"