diff --git a/frontend/src/app/main/ui/inspect/attributes/text.cljs b/frontend/src/app/main/ui/inspect/attributes/text.cljs index 0736babeba..0d293bf0ef 100644 --- a/frontend/src/app/main/ui/inspect/attributes/text.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/text.cljs @@ -13,29 +13,18 @@ [app.common.types.fills :as types.fills] [app.common.types.text :as types.text] [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 [inspect-title-bar*]] [app.main.ui.formats :as fmt] [app.main.ui.inspect.attributes.common :refer [color-row]] + [app.main.ui.inspect.common.typography :as ict] [app.util.i18n :refer [tr]] [cuerdas.core :as str] - [okulary.core :as l] [rumext.v2 :as mf])) (defn- has-text? [shape] (:content shape)) -(def ^:private file-typographies-ref - (l/derived (l/in [:viewer :file :data :typographies]) st/state)) - -(defn- make-typographies-library-ref [file-id] - (let [get-library - (fn [state] - (get-in state [:viewer-libraries file-id :data :typographies]))] - #(l/derived get-library st/state))) - (defn- copy-style-data [style & properties] (->> properties @@ -44,24 +33,10 @@ (mf/defc typography-block [{:keys [text style]}] - (let [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) - - ;; FIXME: too many duplicate operations - file-typographies-viewer (mf/deref file-typographies-ref) - file-typographies-workspace (mf/deref refs/workspace-file-typography) - - file-library-workspace (get (mf/deref refs/files) (:typography-ref-file style)) - typography-external-lib (get-in file-library-workspace [:data :typographies (:typography-ref-id style)]) - - color-format* (mf/use-state :hex) + (let [color-format* (mf/use-state :hex) color-format (deref color-format*) - typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)] + typography (ict/get-typography style)] [:div {:class (stl/css :attributes-content)} (when (:fills style) diff --git a/frontend/src/app/main/ui/inspect/common/typography.cljs b/frontend/src/app/main/ui/inspect/common/typography.cljs new file mode 100644 index 0000000000..c25a02b815 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/common/typography.cljs @@ -0,0 +1,38 @@ +;; 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 + +(ns app.main.ui.inspect.common.typography + (:require + [app.main.refs :as refs] + [app.main.store :as st] + [okulary.core :as l] + [rumext.v2 :as mf])) + +(defn- make-typographies-library-ref + [file-id] + (let [get-library + (fn [state] + (get-in state [:viewer-libraries file-id :data :typographies]))] + #(l/derived get-library st/state))) + +(def ^:private file-typographies-ref + (l/derived (l/in [:viewer :file :data :typographies]) st/state)) + +(defn get-typography + [style] + (let [typography-library-ref + (mf/use-memo + (mf/deps (:typography-ref-file style)) + (make-typographies-library-ref (:typography-ref-file style))) + + ; FIXME: too many duplicate operations + typography-library (mf/deref typography-library-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/files) (:typography-ref-file style)) + typography-external-lib (get-in file-library-workspace [:data :typographies (:typography-ref-id style)]) + typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)] + typography)) diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index f25d766feb..d8b416530d 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/frontend/src/app/main/ui/inspect/styles.cljs @@ -22,6 +22,7 @@ [app.main.ui.inspect.styles.panels.layout-element :refer [layout-element-panel*]] [app.main.ui.inspect.styles.panels.stroke :refer [stroke-panel*]] [app.main.ui.inspect.styles.panels.svg :refer [svg-panel*]] + [app.main.ui.inspect.styles.panels.text :refer [text-panel*]] [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]] [app.main.ui.inspect.styles.panels.variants-panel :refer [variants-panel*]] [app.main.ui.inspect.styles.panels.visibility :refer [visibility-panel*]] @@ -71,6 +72,9 @@ (defn- has-blur? [shape] (:blur shape)) +(defn- has-text? [shape] + (:content shape)) + (defn- get-shape-type [shapes first-shape first-component] (if (= (count shapes) 1) @@ -195,6 +199,14 @@ [:> style-box* {:panel :blur} [:> blur-panel* {:shapes shapes :objects objects}]])) + :text + (let [shapes (filter has-text? shapes)] + (when (seq shapes) + [:> style-box* {:panel :text} + [:> text-panel* {:shapes shapes + :color-space color-space + :objects objects + :resolved-tokens resolved-active-tokens}]])) ;; DEFAULT WIP [:> style-box* {:panel panel} [:div color-space]])])])) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs b/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs index 79ab7d4a71..9dfe7fd3d6 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs +++ b/frontend/src/app/main/ui/inspect/styles/panels/svg.cljs @@ -30,9 +30,9 @@ :term (d/name sub-attr-key) :detail (dm/str sub-attr-value) :property property-value - :copiable false}])) + :copiable true}])) [:> properties-row* {:key (dm/str "svg-property-" (d/name attr-key)) :term (d/name attr-key) :detail (dm/str attr-value) :property (dm/str attr-key ": " attr-value ";") - :copiable false}]))]]) + :copiable true}]))]]) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs new file mode 100644 index 0000000000..9b38efb44a --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs @@ -0,0 +1,171 @@ +;; 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 + +(ns app.main.ui.inspect.styles.panels.text + (:require-macros [app.main.style :as stl]) + (:require + [app.common.types.fills :as types.fills] + [app.common.types.text :as txt] + [app.main.fonts :as fonts] + [app.main.ui.formats :as fmt] + [app.main.ui.inspect.common.typography :as ict] + [app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]] + [app.main.ui.inspect.styles.rows.color-properties-row :refer [color-properties-row*]] + [app.main.ui.inspect.styles.rows.properties-row :refer [properties-row*]] + [app.util.timers :as tm] + [app.util.webapi :as wapi] + [cuerdas.core :as str] + [rumext.v2 :as mf])) + +(defn- get-applied-tokens-in-shape + [shape-tokens property] + (get shape-tokens property)) + +(defn- get-resolved-token + [property shape resolved-tokens] + (let [shape-tokens (:applied-tokens shape) + applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property) + token (get resolved-tokens applied-tokens-in-shape)] + token)) + +(defn- get-style-text + [shape] + (->> (:content shape) + (txt/content->text+styles) + (remove (fn [[_ text]] (str/empty? (str/trim text)))) + (mapv (fn [[style text]] (vector (merge (txt/get-default-text-attrs) style) text))))) + +(mf/defc typography-name-block* + [{:keys [style]}] + (let [typography (ict/get-typography style) + property-value (:name typography)] + (when typography + [:> properties-row* {:term "Typography" + :detail (:name typography) + :property property-value + :copiable true}]))) + +(mf/defc typography-color-row* + [{:keys [fill shape resolved-tokens color-space]}] + (let [color (types.fills/fill->color fill) + resolved-token (get-resolved-token :fill shape resolved-tokens)] + [:> color-properties-row* {:term "Font Color" + :color color + :token resolved-token + :format color-space + :copiable true}])) + +(mf/defc text-panel* + [{:keys [shapes _ resolved-tokens color-space]}] + [:div {:class (stl/css :text-panel)} + (for [shape shapes] + (let [style-text-blocks (get-style-text shape)] + + [:div {:key (:id shape) :class "text-shape"} + (for [[style text] style-text-blocks] + + [:div {:key (:id shape) :class "text-properties"} + + (when (:fills style) + (for [[idx fill] (map-indexed vector (:fills style))] + [:> typography-color-row* {:key idx + :fill fill + :shape shape + :resolved-tokens resolved-tokens + :color-space color-space}])) + (when (:typography-ref-id style) + [:> typography-name-block* {:style style}]) + + (when (:font-id style) + (let [name (get (fonts/get-font-data (:font-id style)) :name) + resolved-token (get-resolved-token :font-family shape resolved-tokens)] + [:> properties-row* {:term "Font Family" + :detail name + :token resolved-token + :property (str "font-family: \"" name "\";") + :copiable true}])) + + (when (:font-style style) + [:> properties-row* {:term "Font Style" + :detail (:font-style style) + :property (str "font-style: " (:font-style style) ";") + :copiable true}]) + + (when (:font-size style) + (let [font-size (fmt/format-pixels (:font-size style)) + resolved-token (get-resolved-token :font-size shape resolved-tokens)] + [:> properties-row* {:term "Font Size" + :detail font-size + :token resolved-token + :property (str "font-size: " font-size ";") + :copiable true}])) + (when (:font-weight style) + (let [resolved-token (get-resolved-token :font-weight shape resolved-tokens)] + [:> properties-row* {:term "Font Weight" + :detail (:font-weight style) + :token resolved-token + :property (str "font-weight: " (:font-weight style) ";") + :copiable true}])) + + (when (:line-height style) + (let [line-height (:line-height style) + resolved-token (get-resolved-token :line-height shape resolved-tokens)] + [:> properties-row* {:term "Line Height" + :detail (str line-height) + :token resolved-token + :property (str "line-height: " line-height ";") + :copiable true}])) + + (when (:letter-spacing style) + (let [letter-spacing (fmt/format-pixels (:letter-spacing style)) + resolved-token (get-resolved-token :letter-spacing shape resolved-tokens)] + [:> properties-row* {:term "Letter Spacing" + :detail letter-spacing + :token resolved-token + :property (str "letter-spacing: " letter-spacing ";") + :copiable true}])) + + (when (:text-decoration style) + (let [resolved-token (get-resolved-token :text-decoration shape resolved-tokens)] + [:> properties-row* {:term "Text Decoration" + :detail (:text-decoration style) + :token resolved-token + :property (str "text-decoration: " (:text-decoration style) ";") + :copiable true}])) + + (when (:text-transform style) + (let [resolved-token (get-resolved-token :text-case shape resolved-tokens)] + [:> properties-row* {:term "Text Transform" + :detail (:text-transform style) + :token resolved-token + :property (str "text-transform: " (:text-transform style) ";") + :copiable true}])) + (when text + (let [copied* (mf/use-state false) + copied (deref copied*) + + text (str/trim text) + + copy-text + (mf/use-fn + (mf/deps copied) + (fn [] + (let [formatted-text (if (= (:text-transform style) "uppercase") + (.toUpperCase text) + text)] + (reset! copied* true) + (wapi/write-to-clipboard formatted-text) + (tm/schedule 1000 #(reset! copied* false)))))] + [:div {:class (stl/css :text-content-wrapper)} + [:> property-detail-copiable* {:copied copied + :on-click copy-text} + [:span {:class (stl/css :text-content) + :style {:font-family (:font-family style) + :font-weight (:font-weight style) + :text-transform (:text-transform style) + :letter-spacing (fmt/format-pixels (:letter-spacing style)) + :font-style (:font-style style)}} + text]]]))])]))]) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.scss b/frontend/src/app/main/ui/inspect/styles/panels/text.scss new file mode 100644 index 0000000000..a1dbdeabd7 --- /dev/null +++ b/frontend/src/app/main/ui/inspect/styles/panels/text.scss @@ -0,0 +1,17 @@ +// 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 + +@use "ds/_borders.scss" as *; + +.text-content-wrapper { + --border-color: var(--color-background-quaternary); + --border-radius: ${$br-8}; + --text-color: var(--color-foreground-secondary); + + border: $b-1 solid var(--border-color); + border-radius: var(--border-radius); + color: var(--text-color); +} diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs index 337ac35e9a..cd524379fa 100644 --- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs +++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.cljs @@ -16,7 +16,6 @@ (def ^:private schema:property-detail-copiable [:map - [:detail :string] [:color {:optional true} :any] ;; color object with :color, :gradient or :image [:token {:optional true} :any] ;; resolved token object [:copied :boolean] @@ -24,7 +23,7 @@ (mf/defc property-detail-copiable* {::mf/schema schema:property-detail-copiable} - [{:keys [detail color token copied on-click]}] + [{:keys [color token copied on-click children]}] [:button {:class (stl/css-case :property-detail-copiable true :property-detail-copied copied :property-detail-copiable-color (some? color)) @@ -45,7 +44,7 @@ color-library-name (get-in (or colors-library file-colors) [(:ref-id color) :name]) color (assoc color :name color-library-name)] [:span {:class (stl/css :property-detail-text)} (:name color)]) - [:span {:class (stl/css :property-detail-text)} detail])) + [:span {:class (stl/css :property-detail-text)} children])) [:> icon* {:class (stl/css :property-detail-icon) :icon-id (if copied i/tick i/clipboard) :size "s" diff --git a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs index dc99c16703..b764452711 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs @@ -101,18 +101,16 @@ [:div {:class (stl/css :tooltip-token-title)} (tr "inspect.tabs.styles.token.resolved-value")] [:div {:class (stl/css :tooltip-token-value)} - (:value token)]])} - [:> property-detail-copiable* {:detail formatted-color-value - :color color + (:resolved-value token)]])} + [:> property-detail-copiable* {:color color :token token :copied copied - :on-click copy-attr}]] + :on-click copy-attr} formatted-color-value]] - [:> property-detail-copiable* {:detail formatted-color-value - :color color + [:> property-detail-copiable* {:color color :copied copied - :on-click copy-attr}])]] + :on-click copy-attr} formatted-color-value])]] (when (:image color) [:div {:class (stl/css :color-image-preview)} [:div {:class (stl/css :color-image-preview-wrapper)} diff --git a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs index 91c50d04bd..82b5b86d0b 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.inspect.styles.rows.properties-row (:require-macros [app.main.style :as stl]) (:require + [app.common.data :as d] [app.main.ui.ds.tooltip :refer [tooltip*]] [app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]] [app.util.i18n :refer [tr]] @@ -26,7 +27,7 @@ (mf/defc properties-row* {::mf/schema schema:properties-row} [{:keys [class term detail token property copiable]}] - (let [copiable? (or copiable false) + (let [copiable? (d/nilv copiable false) detail? (not (or (nil? detail) (str/blank? detail))) detail (if detail? detail "-") copied* (mf/use-state false) @@ -51,12 +52,10 @@ :content #(mf/html [:div {:class (stl/css :tooltip-token)} [:div {:class (stl/css :tooltip-token-title)} (tr "inspect.tabs.styles.token.resolved-value")] - [:div {:class (stl/css :tooltip-token-value)} (:value token)]])} - [:> property-detail-copiable* {:detail detail - :token token + [:div {:class (stl/css :tooltip-token-value)} (:resolved-value token)]])} + [:> property-detail-copiable* {:token token :copied copied - :on-click copy-attr}]] - [:> property-detail-copiable* {:detail detail - :copied copied - :on-click copy-attr}]) + :on-click copy-attr} detail]] + [:> property-detail-copiable* {:copied copied + :on-click copy-attr} detail]) detail)]]))