From 461e5cb3761329747c91ae3c8abadaca1ae13eac Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Tue, 15 Nov 2022 18:36:47 +0100 Subject: [PATCH] :sparkles: Add several improvements to handoff --- CHANGES.md | 1 + .../styles/main/partials/color-bullet.scss | 2 +- frontend/src/app/main/ui/measurements.cljs | 4 +- .../ui/viewer/handoff/attributes/text.cljs | 62 ++++++++----------- .../main/ui/viewer/handoff/right_sidebar.cljs | 14 +---- frontend/translations/en.po | 3 + frontend/translations/es.po | 3 + 7 files changed, 39 insertions(+), 50 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f3b1c6a82..6c2f5e038 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -8,6 +8,7 @@ - Adds layout flex functionality for boards - Better overlays interactions on boards inside boards [Taiga #4386](https://tree.taiga.io/project/penpot/us/4386) - Show board miniature in manual overlay setting [Taiga #4475](https://tree.taiga.io/project/penpot/issue/4475) +- Handoff visual improvements [Taiga #3124](https://tree.taiga.io/project/penpot/us/3124) ### :bug: Bugs fixed diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index b7b3e8cdb..7b1c98800 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -182,7 +182,7 @@ ul.palette-menu .color-bullet { } } -.color-data .color-bullet.is-not-library-color { +.color-bullet.is-not-library-color { border-radius: $br-small; & .color-bullet-wrapper { diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 3cd60d6de..19752f0f9 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -19,7 +19,7 @@ ;; CONSTANTS ;; ------------------------------------------------ -(def font-size 10) +(def font-size 11) (def selection-rect-width 1) (def select-color "var(--color-select)") @@ -40,7 +40,7 @@ (def distance-color "var(--color-distance)") (def distance-text-color "var(--color-white)") (def distance-border-radius 2) -(def distance-pill-width 40) +(def distance-pill-width 50) (def distance-pill-height 16) (def distance-line-stroke 1) diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs index b536610de..283d7ee1a 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.viewer.handoff.attributes.text (:require + [app.common.data :as d] [app.common.text :as txt] [app.main.fonts :as fonts] [app.main.store :as st] @@ -14,6 +15,7 @@ [app.util.code-gen :as cg] [app.util.color :as uc] [app.util.i18n :refer [tr]] + [app.util.strings :as ust] [cuerdas.core :as str] [okulary.core :as l] [rumext.v2 :as mf])) @@ -30,6 +32,11 @@ (get-in state [:viewer-libraries file-id :data :typographies]))] #(l/derived get-library st/state))) +(defn format-number [number] + (-> number + d/parse-double + (ust/format-precision 2))) + (def properties [:fill-color :fill-color-gradient :font-family @@ -52,9 +59,9 @@ :fill-color-gradient "color"} :format {:font-family #(str "'" % "'") :font-style #(str "'" % "'") - :font-size #(str % "px") - :line-height #(str % "px") - :letter-spacing #(str % "px") + :font-size #(str (format-number %) "px") + :line-height #(format-number %) + :letter-spacing #(str (format-number %) "px") :text-decoration name :text-transform name :fill-color #(-> %2 shape->color uc/color->background) @@ -66,7 +73,7 @@ ([style & properties] (cg/generate-css-props style properties params))) -(mf/defc typography-block [{:keys [text style full-style]}] +(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))) @@ -86,21 +93,18 @@ {:style {:font-family (:font-family typography) :font-weight (:font-weight typography) :font-style (:font-style typography)}} - (tr "workspace.assets.typography.sample")]] + (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 full-style) - :font-weight (:font-weight full-style) - :font-style (:font-style full-style)}} - (tr "workspace.assets.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)}]]) - [:div.attributes-content-row - [:pre.attributes-content (str/trim text)] - [:& copy-button {:data (str/trim text)}]] (when (:fills style) (for [fill (:fills style)] @@ -124,19 +128,19 @@ (when (:font-size style) [:div.attributes-unit-row [:div.attributes-label (tr "handoff.attributes.typography.font-size")] - [:div.attributes-value (str (:font-size style)) "px"] + [:div.attributes-value (str (format-number (:font-size style))) "px"] [:& copy-button {:data (copy-style-data style :font-size)}]]) (when (:line-height style) [:div.attributes-unit-row [:div.attributes-label (tr "handoff.attributes.typography.line-height")] - [:div.attributes-value (str (:line-height style)) "px"] + [:div.attributes-value (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 "handoff.attributes.typography.letter-spacing")] - [:div.attributes-value (str (:letter-spacing style)) "px"] + [:div.attributes-value (str (format-number (:letter-spacing style))) "px"] [:& copy-button {:data (copy-style-data style :letter-spacing)}]]) (when (:text-decoration style) @@ -158,16 +162,12 @@ ;; handoff.attributes.typography.text-transform.titlecase ;; handoff.attributes.typography.text-transform.uppercase [:div.attributes-value (->> style :text-transform (str "handoff.attributes.typography.text-transform.") (tr))] - [:& 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)] + [:& copy-button {:data (str/trim text)}]]])) -(defn- remove-equal-values - [m1 m2] - (if (and (map? m1) (map? m2) (not (nil? m1)) (not (nil? m2))) - (->> m1 - (remove (fn [[k v]] (= (k m2) v))) - (into {})) - m1)) (mf/defc text-block [{:keys [shape]}] (let [style-text-blocks (->> (keys txt/default-text-attrs) @@ -175,18 +175,10 @@ (remove (fn [[_ text]] (str/empty? (str/trim text)))) (mapv (fn [[style text]] (vector (merge txt/default-text-attrs style) text))))] - (for [[idx [full-style text]] (map-indexed vector style-text-blocks)] - (let [previous-style (first (nth style-text-blocks (dec idx) nil)) - style (remove-equal-values full-style previous-style) - - ;; If the color is set we need to add opacity otherwise the display will not work - style (cond-> style - (:fill-color style) - (assoc :fill-opacity (:fill-opacity full-style)))] - [:& typography-block {:shape shape - :full-style full-style - :style style - :text text}])))) + (for [[_ [full-style text]] (map-indexed vector style-text-blocks)] + [:& typography-block {:shape shape + :style full-style + :text text}]))) (mf/defc text-panel [{:keys [shapes]}] diff --git a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs index d40599c1c..f2b2288b9 100644 --- a/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs @@ -6,7 +6,6 @@ (ns app.main.ui.viewer.handoff.right-sidebar (:require - [app.common.data :as d] [app.main.ui.components.shape-icon :as si] [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.icons :as i] @@ -22,16 +21,7 @@ section (mf/use-state :info #_:code) shapes (resolve-shapes (:objects page) selected) - first-shape (first shapes) - - selected-type (or (:type first-shape) :not-found) - selected-type (if (= selected-type :group) - (if (some? (:component-id first-shape)) - :component - (if (:masked-group? first-shape) - :mask - :group)) - selected-type)] + first-shape (first shapes)] [:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")} [:div.settings-bar-inside @@ -57,7 +47,7 @@ ;; handoff.tabs.code.selected.rect ;; handoff.tabs.code.selected.svg-raw ;; handoff.tabs.code.selected.text - [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])] + [:span.tool-window-bar-title (:name first-shape)]])] [:div.tool-window-content [:& tab-container {:on-change-tab #(do (reset! expanded false) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 5176b36ae..ff785bab8 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2699,6 +2699,9 @@ msgstr "Line Height" msgid "workspace.assets.typography.sample" msgstr "Ag" +msgid "workspace.assets.typography.text-styles" +msgstr "Text styles" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs msgid "workspace.assets.typography.text-transform" msgstr "Text Transform" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 0e833ab0b..52cb5c0b7 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -3061,6 +3061,9 @@ msgstr "Interlineado" msgid "workspace.assets.typography.sample" msgstr "Ag" +msgid "workspace.assets.typography.text-styles" +msgstr "Estilos de texto" + #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs msgid "workspace.assets.typography.text-transform" msgstr "Transformar texto"