Merge pull request #2592 from penpot/palba-handoff-improvements

✨ Add several improvements to handoff

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
 

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 {

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)
 

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")
+             :font-size #(str (format-number %) "px")
-             :line-height #(str % "px")
+             :line-height #(format-number %)
-             :letter-spacing #(str % "px")
+             :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)
+         {:style {:font-family (:font-family style)
-                  :font-weight (:font-weight full-style)
+                  :font-weight (:font-weight style)
-                  :font-style (:font-style full-style)}}
+                  :font-style (:font-style style)}}
-         (tr "workspace.assets.typography.sample")]
+         (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)]
+    (for [[_ [full-style text]] (map-indexed vector style-text-blocks)]
-      (let [previous-style (first (nth style-text-blocks (dec idx) nil))
+      [:& typography-block {:shape shape
-            style (remove-equal-values full-style previous-style)
+                            :style full-style
-
+                            :text text}])))
-            ;; 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}]))))
 
 (mf/defc text-panel
   [{:keys [shapes]}]

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)
+        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)]
 
     [: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)

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"

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"