github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-12 23:19:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix typography asset name color and ellipsis (#9784)

Browse Source
This commit is contained in:
Eva Marco 2026-05-25 07:48:49 +02:00 committed by GitHub
parent dac98c0625
commit 841ad69d26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
View File

@ -27,7 +27,6 @@
margin-bottom: deprecated.$s-4; margin-bottom: deprecated.$s-4;
border-radius: deprecated.$br-8; border-radius: deprecated.$br-8;
background-color: var(--assets-item-background-color); background-color: var(--assets-item-background-color);
max-inline-size: var(--options-width);
} }
.dragging { .dragging {

16
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@ -686,13 +686,15 @@
:font-style (:font-style typography)}} :font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")] (tr "workspace.assets.typography.sample")]
[:div {:class (stl/css :typography-name) [:div {:class (stl/css :name-block)
:title (:name typography)} (:name typography)] :title (if name-only?
(:name typography)
(when-not name-only? (dm/str (:name typography) " (" (:name font-data) ")"))}
[:div {:class (stl/css :typography-font) (if name-only?
:title (:name font-data)} [:span {:class (stl/css :typography-name)} (:name typography)]
(:name font-data)])]) [:*
(:name typography)
[:span {:class (stl/css :typography-name :typography-font)} (:name font-data)]])]])
[:div {:class (stl/css :element-set-actions)} [:div {:class (stl/css :element-set-actions)}
(when ^boolean on-detach (when ^boolean on-detach
[:> icon-button* {:variant "action" [:> icon-button* {:variant "action"

39
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View File

@ -61,7 +61,7 @@
flex: 1; flex: 1;
block-size: 100%; block-size: 100%;
inline-size: 100%; inline-size: 100%;
padding: 0 var(--sp-m); padding-inline-start: var(--sp-m);
&.is-selectable { &.is-selectable {
cursor: pointer; cursor: pointer;
@ -77,24 +77,10 @@
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
.typography-name,
.typography-font {
@include t.use-typography("body-small");
@include text-ellipsis;
display: block;
align-self: center;
margin-inline-start: px2rem(6);
}
.typography-name { .typography-name {
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.typography-font {
color: var(--color-foreground-secondary);
}
.font-name-wrapper { .font-name-wrapper {
--font-name-wrapper-foreground-color: var(--color-foreground-primary); --font-name-wrapper-foreground-color: var(--color-foreground-primary);
--font-name-wrapper-background-color: var(--color-background-tertiary); --font-name-wrapper-background-color: var(--color-background-tertiary);
@ -186,19 +172,30 @@
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.typography-name, .name-block {
.typography-font {
@include t.use-typography("body-small"); @include t.use-typography("body-small");
@include text-ellipsis; @include text-ellipsis;
display: flex; margin: 0;
align-items: center; min-inline-size: px2rem(6);
justify-content: flex-start; padding: 8px 0 8px 6px;
margin-inline-start: px2rem(6); max-width: 100%;
color: var(--color-foreground-primary);
}
.typography-name,
.typography-font {
@include t.use-typography("body-small");
min-inline-size: 0; min-inline-size: 0;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
} }
.typography-font {
margin-inline-start: px2rem(6);
color: var(--color-foreground-secondary);
}
.info-row { .info-row {
--calculated-width: calc(var(--right-sidebar-width) - $sz-48); --calculated-width: calc(var(--right-sidebar-width) - $sz-48);