Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

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

Browse source 
✨ Add several improvements to handoff
This commit is contained in:
Andrey Antukh 2022-11-23 13:49:36 +01:00 committed by GitHub
commit 6b7adec617
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 39 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -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

2
frontend/resources/styles/main/partials/color-bullet.scss
View file

@ -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 {

4
frontend/src/app/main/ui/measurements.cljs
View file

@ -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)

62
frontend/src/app/main/ui/viewer/handoff/attributes/text.cljs
View file

@ -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]}]

14
frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs
View file

@ -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)

3
frontend/translations/en.po
View file

@ -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"

3
frontend/translations/es.po
View file

@ -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"