3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-09 18:46:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix problems with inspect and texts

Browse source
This commit is contained in:
alonso.torres 2024-02-01 11:32:35 +01:00
parent b0d723282b
commit f1768c5a07
5 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
common/src/app/common/text.cljc
View file

@ -53,6 +53,9 @@
(def text-transform-attrs (def text-transform-attrs
[:text-transform]) [:text-transform])
(def text-fills
[:fills])
(def shape-attrs (def shape-attrs
[:grow-type]) [:grow-type])
@ -70,7 +73,8 @@
text-font-attrs text-font-attrs
text-spacing-attrs text-spacing-attrs
text-decoration-attrs text-decoration-attrs
text-transform-attrs)) text-transform-attrs
text-fills))
(def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs)) (def text-all-attrs (d/concat-set shape-attrs root-attrs paragraph-attrs text-node-attrs))

9
frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -79,11 +79,9 @@
[:span {:class (stl/css-case :color-value-wrapper true [:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))} :gradient-name (:gradient color))}
(if (:gradient color) (if (:gradient color)
[:& cbn/color-name {:color color [:& cbn/color-name {:color color :size 80}]
:size 80}]
(case format (case format
:hex [:& cbn/color-name {:color color :hex [:& cbn/color-name {:color color}]
:size 80}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))] :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
[:* (str/fmt "%s, %s, %s, %s" r g b a)]) [:* (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color)) :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
@ -105,8 +103,7 @@
[:span {:class (stl/css-case :color-value-wrapper true [:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))} :gradient-name (:gradient color))}
(if (:gradient color) (if (:gradient color)
[:& cbn/color-name {:color color [:& cbn/color-name {:color color}]
:size 80}]
(case format (case format
:hex [:& cbn/color-name {:color color :hex [:& cbn/color-name {:color color
:size 80}] :size 80}]

10
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -58,6 +58,11 @@
} }
} }
.name-opacity {
display: flex;
align-items: baseline;
}
.color-name-wrapper { .color-name-wrapper {
@include titleTipography; @include titleTipography;
@include flexColumn; @include flexColumn;
@ -113,8 +118,11 @@
.color-value-wrapper { .color-value-wrapper {
@include inspectValue; @include inspectValue;
text-transform: uppercase; text-transform: uppercase;
max-width: $s-124; max-width: $s-80;
padding-right: $s-8; padding-right: $s-8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.gradient-name { &.gradient-name {
text-transform: none; text-transform: none;
} }

6
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]] [app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.util.code-gen.style-css :as css] [app.util.code-gen.style-css :as css]
@ -19,9 +20,10 @@
(mf/defc geometry-block (mf/defc geometry-block
[{:keys [objects shape]}] [{:keys [objects shape]}]
[:* [:*
(for [property properties] (for [[idx property] (d/enumerate properties)]
(when-let [value (css/get-css-value objects shape property)] (when-let [value (css/get-css-value objects shape property)]
[:div {:class (stl/css :geometry-row)} [:div {:key (dm/str "block-" idx "-" (d/name property))
:class (stl/css :geometry-row)}
[:div {:class (stl/css :global/attr-label)} (d/name property)] [:div {:class (stl/css :global/attr-label)} (d/name property)]
[: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)}

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

@ -30,7 +30,6 @@
} }
.attributes-content-row { .attributes-content-row {
width: $s-252;
max-width: $s-252; max-width: $s-252;
min-height: calc($s-2 + $s-32); min-height: calc($s-2 + $s-32);
border-radius: $br-8; border-radius: $br-8;
@ -39,7 +38,7 @@
.content { .content {
@include titleTipography; @include titleTipography;
width: 100%; width: 100%;
padding: 0; padding: $s-4 0;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }