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 da44dded6..f629428f8 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 @@ -24,6 +24,9 @@ :align-self :justify-self + :flex-shrink + :flex + ;; Grid cell properties :grid-column :grid-row]) @@ -40,7 +43,7 @@ [:div {:class (stl/css :global/attr-value)} [:& copy-button {:data (css/get-css-property objects shape property)} - [:div {:class (stl/css :button-children)} value]]]]))] + [:div {:class (stl/css :button-children)} value]]]]))] [:* (for [property properties] @@ -55,18 +58,28 @@ (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)] + only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes) + + some-layout-prop? + (->> shapes + (mapcat (fn [shape] + (keep #(css/get-css-value objects shape %) properties))) + (seq)) + + menu-title + (cond + only-flex? + "Flex element" + only-grid? + "Flex element" + :else + "Layout element")] + (if new-css-system - (when (seq shapes) + (when some-layout-prop? [:div {:class (stl/css :attributes-block)} [:& title-bar {:collapsable? false - :title (cond - only-flex? - "Flex element" - only-grid? - "Flex element" - :else - "Layout element") + :title menu-title :class (stl/css :title-spacing-layout-element)} (when (= (count shapes) 1) [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] @@ -76,16 +89,10 @@ :objects objects :key (:id shape)}])]) - (when (seq shapes) + (when some-layout-prop? [:div.attributes-block [:div.attributes-block-title - [:div.attributes-block-title-text (cond - only-flex? - "Flex element" - only-grid? - "Flex element" - :else - "Layout element")] + [:div.attributes-block-title-text menu-title] (when (= (count shapes) 1) [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] 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 4110a29f6..54f3875e0 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs @@ -13,15 +13,19 @@ [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.code-gen.style-css :as css] [app.util.i18n :refer [tr]] + [cuerdas.core :as str] [rumext.v2 :as mf])) (defn has-shadow? [shape] (:shadow shape)) +(defn shape-copy-data [shape] + (str/join ", " (map css/shadow->css (:shadow shape)))) +(defn shadow-copy-data [shadow] + (css/shadow->css shadow)) (mf/defc shadow-block [{:keys [shadow]}] (let [color-format (mf/use-state :hex)] @@ -29,8 +33,7 @@ [: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)} - - [:& copy-button {:data (cssf/format-shadow (cssf/format-value :shadows shadow) shadow) + [:& copy-button {:data (shadow-copy-data shadow) :class (stl/css :color-row-copy-btn)} [:div {:class (stl/css :button-children) :title (dm/str (tr "workspace.options.shadow-options.offsetx") " " 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 c0558c1b8..4bc6ee505 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-macros [app.main.style :as stl]) (:require + [app.common.data :as d] [app.common.data.macros :as dm] [app.common.text :as txt] [app.main.fonts :as fonts] @@ -41,6 +42,12 @@ :id fill-color-ref-id :file-id fill-color-ref-file}) +(defn copy-style-data + [style & properties] + (->> properties + (map #(dm/str (d/name %) ": " (get style %) ";")) + (str/join "\n"))) + (mf/defc typography-block [{:keys [text style]}] (let [new-css-system (mf/use-ctx ctx/new-css-system) @@ -67,7 +74,7 @@ [:& color-row {:key idx :format @color-format :color (fill->color fill) - ;;:copy-data (copy-style-data fill :fill-color :fill-color-gradient) + :copy-data (copy-style-data fill :fill-color :fill-color-gradient) :on-change-format #(reset! color-format %)}])) (when (:typography-ref-id style) @@ -76,14 +83,14 @@ (tr "inspect.attributes.typography")] [:div {:class (stl/css :global/attr-value)} [:div (:name typography)] - #_[:& copy-button {:data (copy-style-data typography)}]]]) + [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}]]]) (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)}]]]) + [:& copy-button {:data (copy-style-data style :font-family)}]]]) (when (:font-style style) [:div {:class (stl/css :text-row)} @@ -91,7 +98,7 @@ (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)}]]]) + [:& copy-button {:data (copy-style-data style :font-style)}]]]) (when (:font-size style) [:div {:class (stl/css :text-row)} @@ -99,7 +106,7 @@ (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)}]]]) + [:& copy-button {:data (copy-style-data style :font-size)}]]]) (when (:font-weight style) [:div {:class (stl/css :text-row)} @@ -107,7 +114,7 @@ (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)}]]]) + [:& copy-button {:data (copy-style-data style :font-weight)}]]]) (when (:line-height style) [:div {:class (stl/css :text-row)} @@ -115,7 +122,7 @@ (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)}]]]) + [:& copy-button {:data (copy-style-data style :line-height)}]]]) (when (:letter-spacing style) [:div {:class (stl/css :text-row)} @@ -123,33 +130,33 @@ (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)}]]]) + [:& 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 + ;; 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)}]]]) + [:& 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 + ;; 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)}]]]) + [:& copy-button {:data (copy-style-data style :text-transform)}]]]) [:& copy-button {:data (str/trim text) :class (stl/css :attributes-content-row)} @@ -170,7 +177,7 @@ :font-style (:font-style typography)}} (tr "workspace.assets.typography.text-styles")]] [:div.typography-entry-name (:name typography)] - #_[:& copy-button {:data (copy-style-data typography)}]] + [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]] [:div.attributes-typography-row [:div.typography-sample @@ -178,72 +185,72 @@ :font-weight (:font-weight style) :font-style (:font-style style)}} (tr "workspace.assets.typography.text-styles")] - #_[:& copy-button {:data (copy-style-data style)}]]) + [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-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) + :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)}]]) + [:& 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)}]]) + [:& 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)}]]) + [:& 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)}]]) + [:& 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)}]]) + [:& 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)}]]) + [:& 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 + ;; 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)}]]) + [:& 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 + ;; 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 (copy-style-data style :text-transform)}]]) [:div.attributes-content-row [:pre.attributes-content (str/trim text)] diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 380b360ec..eb51ddc04 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -16,7 +16,7 @@ [app.common.types.shape.layout :as ctl] [app.main.ui.shapes.text.styles :as sts] [app.util.code-gen.common :as cgc] - [app.util.code-gen.style-css-formats :refer [format-value]] + [app.util.code-gen.style-css-formats :refer [format-value format-shadow]] [app.util.code-gen.style-css-values :refer [get-value]] [cuerdas.core :as str])) @@ -117,17 +117,6 @@ body { :grid-row :grid-area]) -(def text-node-css-properties - [:font-family - :font-style - :font-size - :font-weight - :line-height - :letter-spacing - :text-decoration - :text-transform - :color]) - (defn shape->css-property [shape objects property] (when-let [value (get-value property shape objects)] @@ -317,3 +306,7 @@ body { (->> shapes (keep #(get-shape-css-selector % objects options)) (str/join "\n\n"))))) + +(defn shadow->css + [shadow] + (dm/str "box-shadow: " (format-shadow shadow {})))