Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 18:48:37 -05:00
Code Issues Activity

Merge pull request #3720 from penpot/alotor-fix-inspect

Browse source 
🐛 Fix problem with inspect
This commit is contained in:
Eva Marco 2023-10-23 09:57:23 +02:00 • committed by GitHub
commit a421e39b6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
View file

@ -24,6 +24,9 @@
:align-self :align-self
:justify-self :justify-self
:flex-shrink
:flex
;; Grid cell properties ;; Grid cell properties
:grid-column :grid-column
:grid-row]) :grid-row])
@ -40,7 +43,7 @@
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)} [:& 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] (for [property properties]
@ -55,18 +58,28 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [new-css-system (mf/use-ctx ctx/new-css-system)
shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %))) shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes) 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 (if new-css-system
(when (seq shapes) (when some-layout-prop?
[:div {:class (stl/css :attributes-block)} [:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable? false [:& title-bar {:collapsable? false
:title (cond :title menu-title
only-flex?
"Flex element"
only-grid?
"Flex element"
:else
"Layout element")
:class (stl/css :title-spacing-layout-element)} :class (stl/css :title-spacing-layout-element)}
(when (= (count shapes) 1) (when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
@ -76,16 +89,10 @@
:objects objects :objects objects
:key (:id shape)}])]) :key (:id shape)}])])
(when (seq shapes) (when some-layout-prop?
[:div.attributes-block [:div.attributes-block
[:div.attributes-block-title [:div.attributes-block-title
[:div.attributes-block-title-text (cond [:div.attributes-block-title-text menu-title]
only-flex?
"Flex element"
only-grid?
"Flex element"
:else
"Layout element")]
(when (= (count shapes) 1) (when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])] [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]

11
frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
View file

@ -13,15 +13,19 @@
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.viewer.inspect.attributes.common :refer [color-row]] [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]] [app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defn has-shadow? [shape] (defn has-shadow? [shape]
(: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]}] (mf/defc shadow-block [{:keys [shadow]}]
(let [color-format (mf/use-state :hex)] (let [color-format (mf/use-state :hex)]
@ -29,8 +33,7 @@
[:div {:class (stl/css :shadow-row)} [: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-label)} (->> shadow :style d/name (str "workspace.options.shadow-options.") (tr))]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (shadow-copy-data shadow)
[:& copy-button {:data (cssf/format-shadow (cssf/format-value :shadows shadow) shadow)
:class (stl/css :color-row-copy-btn)} :class (stl/css :color-row-copy-btn)}
[:div {:class (stl/css :button-children) [:div {:class (stl/css :button-children)
:title (dm/str (tr "workspace.options.shadow-options.offsetx") " " :title (dm/str (tr "workspace.options.shadow-options.offsetx") " "

115
frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.viewer.inspect.attributes.text (ns app.main.ui.viewer.inspect.attributes.text
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.text :as txt] [app.common.text :as txt]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
@ -41,6 +42,12 @@
:id fill-color-ref-id :id fill-color-ref-id
:file-id fill-color-ref-file}) :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 (mf/defc typography-block
[{:keys [text style]}] [{:keys [text style]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system) (let [new-css-system (mf/use-ctx ctx/new-css-system)
@ -67,7 +74,7 @@
[:& color-row {:key idx [:& color-row {:key idx
:format @color-format :format @color-format
:color (fill->color fill) :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 %)}])) :on-change-format #(reset! color-format %)}]))
(when (:typography-ref-id style) (when (:typography-ref-id style)
@ -75,81 +82,89 @@
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography")] (tr "inspect.attributes.typography")]
[:div {:class (stl/css :global/attr-value)} [:div {:class (stl/css :global/attr-value)}
[:div (:name typography)] [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
#_[:& copy-button {:data (copy-style-data typography)}]]]) [:div {:class (stl/css :button-children)} (:name typography)]]]])
(when (:font-id style) (when (:font-id style)
[:div {:class (stl/css :text-row)} [: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-label)} (tr "inspect.attributes.typography.font-family")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(-> style :font-id fonts/get-font-data :name)]]]])
(when (:font-style style) (when (:font-style style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-style")] (tr "inspect.attributes.typography.font-style")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(str (:font-style style))]]]])
(when (:font-size style) (when (:font-size style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-size")] (tr "inspect.attributes.typography.font-size")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(fmt/format-pixels (:font-size style))]]]])
(when (:font-weight style) (when (:font-weight style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.font-weight")] (tr "inspect.attributes.typography.font-weight")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(str (:font-weight style))]]]])
(when (:line-height style) (when (:line-height style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.line-height")] (tr "inspect.attributes.typography.line-height")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(fmt/format-number (:line-height style))]]]])
(when (:letter-spacing style) (when (:letter-spacing style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.letter-spacing")] (tr "inspect.attributes.typography.letter-spacing")]
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(fmt/format-pixels (:letter-spacing style))]]]])
(when (:text-decoration style) (when (:text-decoration style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.text-decoration")] (tr "inspect.attributes.typography.text-decoration")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-decoration.none ;; inspect.attributes.typography.text-decoration.none
;; inspect.attributes.typography.text-decoration.strikethrough ;; inspect.attributes.typography.text-decoration.strikethrough
;; inspect.attributes.typography.text-decoration.underline ;; inspect.attributes.typography.text-decoration.underline
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
(when (:text-transform style) (when (:text-transform style)
[:div {:class (stl/css :text-row)} [:div {:class (stl/css :text-row)}
[:div {:class (stl/css :global/attr-label)} [:div {:class (stl/css :global/attr-label)}
(tr "inspect.attributes.typography.text-transform")] (tr "inspect.attributes.typography.text-transform")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-transform.lowercase ;; inspect.attributes.typography.text-transform.lowercase
;; inspect.attributes.typography.text-transform.none ;; inspect.attributes.typography.text-transform.none
;; inspect.attributes.typography.text-transform.titlecase ;; inspect.attributes.typography.text-transform.titlecase
;; inspect.attributes.typography.text-transform.uppercase ;; inspect.attributes.typography.text-transform.uppercase
;; inspect.attributes.typography.text-transform.unset ;; inspect.attributes.typography.text-transform.unset
[:div {:class (stl/css :global/attr-value)} [: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)}]]]) [:div {:class (stl/css :button-children)}
(tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
[:& copy-button {:data (str/trim text) [:& copy-button {:data (str/trim text)
:class (stl/css :attributes-content-row)} :class (stl/css :attributes-content-row)}
@ -170,7 +185,7 @@
:font-style (:font-style typography)}} :font-style (:font-style typography)}}
(tr "workspace.assets.typography.text-styles")]] (tr "workspace.assets.typography.text-styles")]]
[:div.typography-entry-name (:name typography)] [: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.attributes-typography-row
[:div.typography-sample [:div.typography-sample
@ -178,72 +193,72 @@
:font-weight (:font-weight style) :font-weight (:font-weight style)
:font-style (:font-style style)}} :font-style (:font-style style)}}
(tr "workspace.assets.typography.text-styles")] (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) (when (:fills style)
(for [[idx fill] (map-indexed vector (:fills style))] (for [[idx fill] (map-indexed vector (:fills style))]
[:& color-row {:key idx [:& color-row {:key idx
:format @color-format :format @color-format
:color (fill->color fill) :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 %)}])) :on-change-format #(reset! color-format %)}]))
(when (:font-id style) (when (:font-id style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.font-family")] [:div.attributes-label (tr "inspect.attributes.typography.font-family")]
[:div.attributes-value (-> style :font-id fonts/get-font-data :name)] [: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) (when (:font-style style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.font-style")] [:div.attributes-label (tr "inspect.attributes.typography.font-style")]
[:div.attributes-value (str (:font-style 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) (when (:font-size style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.font-size")] [:div.attributes-label (tr "inspect.attributes.typography.font-size")]
[:div.attributes-value (fmt/format-pixels (:font-size style))] [: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) (when (:font-weight style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.font-weight")] [:div.attributes-label (tr "inspect.attributes.typography.font-weight")]
[:div.attributes-value (str (:font-weight style))] [: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) (when (:line-height style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.line-height")] [:div.attributes-label (tr "inspect.attributes.typography.line-height")]
[:div.attributes-value (fmt/format-number (:line-height style))] [: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) (when (:letter-spacing style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")] [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")]
[:div.attributes-value (fmt/format-pixels (:letter-spacing style))] [: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) (when (:text-decoration style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.text-decoration")] [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-decoration.none ;; inspect.attributes.typography.text-decoration.none
;; inspect.attributes.typography.text-decoration.strikethrough ;; inspect.attributes.typography.text-decoration.strikethrough
;; inspect.attributes.typography.text-decoration.underline ;; inspect.attributes.typography.text-decoration.underline
[:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))] [: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) (when (:text-transform style)
[:div.attributes-unit-row [:div.attributes-unit-row
[:div.attributes-label (tr "inspect.attributes.typography.text-transform")] [:div.attributes-label (tr "inspect.attributes.typography.text-transform")]
;; Execution time translation strings: ;; Execution time translation strings:
;; inspect.attributes.typography.text-transform.lowercase ;; inspect.attributes.typography.text-transform.lowercase
;; inspect.attributes.typography.text-transform.none ;; inspect.attributes.typography.text-transform.none
;; inspect.attributes.typography.text-transform.titlecase ;; inspect.attributes.typography.text-transform.titlecase
;; inspect.attributes.typography.text-transform.uppercase ;; inspect.attributes.typography.text-transform.uppercase
[:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))] [: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 [:div.attributes-content-row
[:pre.attributes-content (str/trim text)] [:pre.attributes-content (str/trim text)]

3
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -19,6 +19,9 @@
:global(.attr-value) { :global(.attr-value) {
align-items: center; align-items: center;
} }
.button-children {
@extend .copy-button-children;
}
} }
.attributes-content-row { .attributes-content-row {
width: $s-252; width: $s-252;

17
frontend/src/app/util/code_gen/style_css.cljs
View file

@ -16,7 +16,7 @@
[app.common.types.shape.layout :as ctl] [app.common.types.shape.layout :as ctl]
[app.main.ui.shapes.text.styles :as sts] [app.main.ui.shapes.text.styles :as sts]
[app.util.code-gen.common :as cgc] [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]] [app.util.code-gen.style-css-values :refer [get-value]]
[cuerdas.core :as str])) [cuerdas.core :as str]))
@ -117,17 +117,6 @@ body {
:grid-row :grid-row
:grid-area]) :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 (defn shape->css-property
[shape objects property] [shape objects property]
(when-let [value (get-value property shape objects)] (when-let [value (get-value property shape objects)]
@ -317,3 +306,7 @@ body {
(->> shapes (->> shapes
(keep #(get-shape-css-selector % objects options)) (keep #(get-shape-css-selector % objects options))
(str/join "\n\n"))))) (str/join "\n\n")))))
(defn shadow->css
[shadow]
(dm/str "box-shadow: " (format-shadow shadow {})))