From a45380a91c497903a0a326022c68ae559a96e308 Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 27 Jan 2023 11:58:15 +0100 Subject: [PATCH 1/4] :bug: Fix typo --- frontend/translations/en.po | 4 ++-- frontend/translations/es.po | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index b2621e701..27496247b 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2598,7 +2598,7 @@ msgid "shortcuts.toggle-layers" msgstr "Toggle layers" msgid "shortcuts.toggle-layout-flex" -msgstr "Add/remove layout flex" +msgstr "Add/remove flex layout" msgid "shortcuts.toggle-lock" msgstr "Lock selected" @@ -4316,7 +4316,7 @@ msgstr "Path" #: src/app/main/ui/workspace/context_menu.cljs msgid "workspace.shape.menu.remove-flex" -msgstr "Remove layout flex" +msgstr "Remove flex layout" #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs, src/app/main/ui/workspace/context_menu.cljs msgid "workspace.shape.menu.reset-overrides" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1ec99c6a6..4fae8acc9 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2690,7 +2690,7 @@ msgid "shortcuts.toggle-layers" msgstr "Mostrar/ocultar capas" msgid "shortcuts.toggle-layout-flex" -msgstr "Añadir/eliminar layout flex" +msgstr "Añadir/eliminar flex layout" msgid "shortcuts.toggle-lock" msgstr "Bloquear/Desbloquear" @@ -4463,7 +4463,7 @@ msgstr "Ruta" #: src/app/main/ui/workspace/context_menu.cljs msgid "workspace.shape.menu.remove-flex" -msgstr "Eliminar layout flex" +msgstr "Eliminar flex layout" #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, #: src/app/main/ui/workspace/context_menu.cljs, From aa3438f800a69d8279cc498a0381f3ea14aba926 Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 27 Jan 2023 12:00:27 +0100 Subject: [PATCH 2/4] :recycle: Improve some functions --- .../inspect/attributes/layout_flex.cljs | 12 ++--- .../attributes/layout_flex_element.cljs | 2 +- .../ui/viewer/inspect/attributes/text.cljs | 15 +++--- frontend/src/app/util/code_gen.cljs | 53 ++++++++++--------- 4 files changed, 42 insertions(+), 40 deletions(-) diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs index 491ad056a..92ae1521e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs @@ -38,18 +38,18 @@ :layout-wrap-type "flex-wrap" :layout-gap "gap" :layout-padding "padding"} - :format {:layout name - :layout-flex-dir name - :layout-align-items name - :layout-justify-content name - :layout-wrap-type name + :format {:layout d/name + :layout-flex-dir d/name + :layout-align-items d/name + :layout-justify-content d/name + :layout-wrap-type d/name :layout-gap fm/format-gap :layout-padding fm/format-padding}}) (def layout-align-content-params {:props [:layout-align-content] :to-prop {:layout-align-content "align-content"} - :format {:layout-align-content name}}) + :format {:layout-align-content d/name}}) (defn copy-data ([shape] diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex_element.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex_element.cljs index 79b5ca63a..9e23c6a4c 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex_element.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex_element.cljs @@ -43,7 +43,7 @@ :layout-item-max-w "max-width" :layout-item-min-w "min-width"} :format {:layout-item-margin format-margin - :layout-item-align-self name}}) + :layout-item-align-self d/name}}) (defn copy-data ([shape] 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 9e7d93a3f..d5c1c87b4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.viewer.inspect.attributes.text (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.text :as txt] [app.main.fonts :as fonts] [app.main.store :as st] @@ -58,14 +59,14 @@ (def params {:to-prop {:fill-color "color" :fill-color-gradient "color"} - :format {:font-family #(str "'" % "'") - :font-style #(str % ) - :font-size #(str (format-number %) "px") - :font-weight name + :format {:font-family #(dm/str "'" % "'") + :font-style #(dm/str % ) + :font-size #(dm/str (format-number %) "px") + :font-weight d/name :line-height #(format-number %) - :letter-spacing #(str (format-number %) "px") - :text-decoration name - :text-transform name + :letter-spacing #(dm/str (format-number %) "px") + :text-decoration d/name + :text-transform d/name :fill-color #(-> %2 shape->color uc/color->background) :fill-color-gradient #(-> %2 shape->color uc/color->background)}}) diff --git a/frontend/src/app/util/code_gen.cljs b/frontend/src/app/util/code_gen.cljs index 5ebbecb23..acbd5ebfc 100644 --- a/frontend/src/app/util/code_gen.cljs +++ b/frontend/src/app/util/code_gen.cljs @@ -7,6 +7,7 @@ (ns app.util.code-gen (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.pages.helpers :as cph] [app.common.text :as txt] [app.main.ui.formats :as fmt] @@ -16,7 +17,7 @@ (defn shadow->css [shadow] (let [{:keys [style offset-x offset-y blur spread]} shadow css-color (uc/color->background (:color shadow))] - (str + (dm/str (if (= style :inner-shadow) "inset " "") (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) @@ -49,7 +50,7 @@ (let [first-stroke (first (:strokes shape)) width (:stroke-width first-stroke) style (let [style (:stroke-style first-stroke)] - (when (keyword? style) (name style))) + (when (keyword? style) (d/name style))) color {:color (:stroke-color first-stroke) :opacity (:stroke-opacity first-stroke) :gradient (:stroke-color-gradient first-stroke)}] @@ -118,11 +119,11 @@ :layout-wrap-type "flex-wrap" :layout-gap "gap" :layout-padding "padding"} - :format {:layout name - :layout-flex-dir name - :layout-align-items name - :layout-justify-content name - :layout-wrap-type name + :format {:layout d/name + :layout-flex-dir d/name + :layout-align-items d/name + :layout-justify-content d/name + :layout-wrap-type d/name :layout-gap format-gap :layout-padding fmt/format-padding}}}) @@ -137,14 +138,14 @@ :text-decoration :text-transform] :to-prop {:fills "color"} - :format {:font-family #(str "'" % "'") - :font-style #(str %) - :font-size #(str % "px") - :font-weight #(str %) - :line-height #(str %) - :letter-spacing #(str % "px") - :text-decoration name - :text-transform name + :format {:font-family #(dm/str "'" % "'") + :font-style #(dm/str %) + :font-size #(dm/str % "px") + :font-weight #(dm/str %) + :line-height #(dm/str %) + :letter-spacing #(dm/str % "px") + :text-decoration d/name + :text-transform d/name :fills format-fill-color}}) (def layout-flex-item-params @@ -161,16 +162,16 @@ :layout-item-min-w "min-width" :layout-item-align-self "align-self"} :format {:layout-item-margin fmt/format-margin - :layout-item-max-h #(str % "px") - :layout-item-min-h #(str % "px") - :layout-item-max-w #(str % "px") - :layout-item-min-w #(str % "px") - :layout-item-align-self name}}) + :layout-item-max-h #(dm/str % "px") + :layout-item-min-h #(dm/str % "px") + :layout-item-max-w #(dm/str % "px") + :layout-item-min-w #(dm/str % "px") + :layout-item-align-self d/name}}) (def layout-align-content {:props [:layout-align-content] :to-prop {:layout-align-content "align-content"} - :format {:layout-align-content name}}) + :format {:layout-align-content d/name}}) (defn get-specific-value [values prop] @@ -217,13 +218,13 @@ (every? #(or (nil? %) (= % 0)) value) (or (nil? value) (= value 0)))) - default-format (fn [value] (str (fmt/format-pixels value))) + default-format (fn [value] (dm/str (fmt/format-pixels value))) format-property (fn [prop] - (let [css-prop (or (prop to-prop) (name prop)) + (let [css-prop (or (prop to-prop) (d/name prop)) format-fn (or (prop format) default-format) css-val (format-fn (get-value prop) values)] (when css-val - (str + (dm/str (str/repeat " " tab-size) (str/fmt "%s: %s;" css-prop css-val)))))] @@ -281,13 +282,13 @@ (cons [node-style (:text node "")] acc) :else - (cons [node-style (str head-text "" (:text node))] (rest acc))) + (cons [node-style (dm/str head-text "" (:text node))] (rest acc))) ;; We add an end-of-line when finish a paragraph new-acc (if (= (:type node) "paragraph") (let [[hs ht] (first new-acc)] - (cons [hs (str ht "\n")] (rest new-acc))) + (cons [hs (dm/str ht "\n")] (rest new-acc))) new-acc)] new-acc))] From e7ddd6055fc164afec71ad6f5a260692e3c037f0 Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 27 Jan 2023 12:04:30 +0100 Subject: [PATCH 3/4] :recycle: Improve a case --- frontend/src/app/main/ui/formats.cljs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/ui/formats.cljs b/frontend/src/app/main/ui/formats.cljs index d26e7652a..c4867a9b5 100644 --- a/frontend/src/app/main/ui/formats.cljs +++ b/frontend/src/app/main/ui/formats.cljs @@ -67,11 +67,11 @@ (let [sizing (if (= type :width) (:layout-item-h-sizing shape) (:layout-item-v-sizing shape))] - (if (string? value) - value - (if (= sizing :fill) - "100%" - (str (format-pixels value)))))) + (cond + (= sizing :fill) "100%" + (= sizing :auto) "auto" + (number? value) (format-pixels value) + :else value))) (defn format-padding [padding-values type] From 15e62ff6493c568ab2d7e94b8a256f1d129003e6 Mon Sep 17 00:00:00 2001 From: Eva Date: Fri, 27 Jan 2023 12:54:18 +0100 Subject: [PATCH 4/4] :bug: Remove copy all button in fills and strokes --- .../styles/main/partials/inspect.scss | 8 +++++-- .../ui/viewer/inspect/attributes/fill.cljs | 19 ++++++++-------- .../ui/viewer/inspect/attributes/stroke.cljs | 22 +++++++++---------- 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss index 8e0eaa949..28d4fb9fc 100644 --- a/frontend/resources/styles/main/partials/inspect.scss +++ b/frontend/resources/styles/main/partials/inspect.scss @@ -314,11 +314,15 @@ } } - .attributes-shadow-block { + .attributes-shadow-block, + .attributes-stroke-block, + .attributes-fill-block { border-top: 1px solid $color-gray-60; } - .attributes-shadow-blocks :first-child { + .attributes-shadow-blocks :first-child, + .attributes-stroke-blocks :first-child, + .attributes-fill-blocks :first-child { border-top: none; } } 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 29784559c..500ddd500 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs @@ -6,7 +6,6 @@ (ns app.main.ui.viewer.inspect.attributes.fill (:require - [app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [app.util.code-gen :as cg] [app.util.color :as uc] @@ -40,10 +39,11 @@ (let [color-format (mf/use-state :hex) color (shape->color shape)] - [:& color-row {:color color - :format @color-format - :on-change-format #(reset! color-format %) - :copy-data (copy-data shape)}])) + [:div.attributes-fill-block + [:& color-row {:color color + :format @color-format + :on-change-format #(reset! color-format %) + :copy-data (copy-data shape)}]])) (mf/defc fill-panel [{:keys [shapes]}] @@ -51,14 +51,13 @@ (when (seq shapes) [:div.attributes-block [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.fill")] - (when (= (count shapes) 1) - [:& copy-button {:data (copy-data (first shapes))}])] + [:div.attributes-block-title-text (tr "inspect.attributes.fill")]] - (for [shape shapes] + [: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}]))]))) + :shape shape}]))]]))) 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 f38b2c4aa..34e1f70bc 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs @@ -55,12 +55,7 @@ [{:keys [shape]}] (let [color-format (mf/use-state :hex) color (shape->color shape)] - [:* - [:& color-row {:color color - :format @color-format - :copy-data (copy-color-data shape) - :on-change-format #(reset! color-format %)}] - + [:div.attributes-stroke-block (let [{:keys [stroke-style stroke-alignment]} shape stroke-style (if (= stroke-style :svg) :solid stroke-style) stroke-alignment (or stroke-alignment :center)] @@ -78,7 +73,11 @@ ;; inspect.attributes.stroke.alignment.inner ;; inspect.attributes.stroke.alignment.outer [:div.attributes-label (->> stroke-alignment d/name (str "inspect.attributes.stroke.alignment.") (tr))] - [:& copy-button {:data (copy-stroke-data shape)}]])])) + [:& copy-button {:data (copy-stroke-data shape)}]]) + [:& color-row {:color color + :format @color-format + :copy-data (copy-color-data shape) + :on-change-format #(reset! color-format %)}]])) (mf/defc stroke-panel [{:keys [shapes]}] @@ -86,14 +85,13 @@ (when (seq shapes) [:div.attributes-block [:div.attributes-block-title - [:div.attributes-block-title-text (tr "inspect.attributes.stroke")] - (when (= (count shapes) 1) - [:& copy-button {:data (copy-stroke-data (first shapes))}])] + [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]] - (for [shape shapes] + [:div.attributes-stroke-blocks + (for [shape shapes] (if (seq (:strokes shape)) (for [value (:strokes shape [])] [:& stroke-block {:key (str "stroke-color-" (:id shape) value) :shape value}]) [:& stroke-block {:key (str "stroke-color-only" (:id shape)) - :shape shape}]))]))) + :shape shape}]))]])))