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

🐛 Fix ellipsis in library color names

Browse source
This commit is contained in:
Eva Marco 2024-02-29 16:46:10 +01:00 • committed by Belén Albeza
parent 9645ffba40
commit add0bed3ca
2 changed files with 24 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

@ -224,10 +224,10 @@
:on-double-click rename-color-clicked} :on-double-click rename-color-clicked}
(if (= (:name color) default-name) (if (= (:name color) default-name)
[:span {:class (stl/css :default-name-only)} default-name] [:span {:class (stl/css :default-name)} default-name]
[:* [:*
[:span {:class (stl/css :name)} (:name color)] (:name color)
[:span {:class (stl/css :default-name)} default-name]])]) [:span {:class (stl/css :default-name :default-name-with-color)} default-name]])])
(when local? (when local?
[:& cmm/assets-context-menu [:& cmm/assets-context-menu

37
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

@ -6,10 +6,15 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
// TODO: we should be using subgrid in the common "assets component" to avoid
// using this SCSS variable here (we cannot use a CSS var in this CSS module because
// the elements are not part of the same cascade).
$assets-button-width: $s-28;
.assets-btn { .assets-btn {
@extend .button-tertiary; @extend .button-tertiary;
height: $s-32; height: $s-32;
width: $s-28; width: $assets-button-width;
padding: 0; padding: 0;
border-radius: $br-8; border-radius: $br-8;
svg { svg {
@ -28,10 +33,12 @@
.asset-list-item { .asset-list-item {
position: relative; position: relative;
display: flex; display: grid;
grid-template-columns: auto 1fr #{$assets-button-width};
align-items: center; align-items: center;
height: $s-32; height: $s-32;
padding: $s-8; padding: $s-8;
padding-inline-end: 0;
margin-bottom: $s-4; margin-bottom: $s-4;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--assets-item-background-color); background-color: var(--assets-item-background-color);
@ -63,25 +70,23 @@
@include flexCenter; @include flexCenter;
height: 100%; height: 100%;
justify-content: flex-start; justify-content: flex-start;
margin-right: $s-4; margin-inline-end: $s-4;
} }
.name-block { .name-block {
@include bodySmallTypography; @include bodySmallTypography;
display: grid; @include textEllipsis;
grid-template-columns: auto 1fr;
margin: 0; margin: 0;
overflow: hidden; color: var(--assets-item-name-foreground-color);
.default-name-only, }
.name {
color: var(--assets-item-name-foreground-color); .default-name {
margin-right: $s-6; margin-inline-start: $s-4;
@include textEllipsis; color: var(--assets-item-name-foreground-color-rest);
} }
.default-name {
min-width: 0; .default-name-with-color {
color: var(--assets-item-name-foreground-color-rest); margin-left: $s-6;
}
} }
.element-name { .element-name {