Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues 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
Show stats 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}
(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)]
[:span {:class (stl/css :default-name)} default-name]])])
(:name color)
[:span {:class (stl/css :default-name :default-name-with-color)} default-name]])])
(when local?
[:& 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";
// 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 {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
width: $assets-button-width;
padding: 0;
border-radius: $br-8;
svg {
@ -28,10 +33,12 @@
.asset-list-item {
position: relative;
display: flex;
display: grid;
grid-template-columns: auto 1fr #{$assets-button-width};
align-items: center;
height: $s-32;
padding: $s-8;
padding-inline-end: 0;
margin-bottom: $s-4;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
@ -63,25 +70,23 @@
@include flexCenter;
height: 100%;
justify-content: flex-start;
margin-right: $s-4;
margin-inline-end: $s-4;
}
.name-block {
@include bodySmallTypography;
display: grid;
grid-template-columns: auto 1fr;
@include textEllipsis;
margin: 0;
overflow: hidden;
.default-name-only,
.name {
color: var(--assets-item-name-foreground-color);
margin-right: $s-6;
@include textEllipsis;
}
.default-name {
min-width: 0;
color: var(--assets-item-name-foreground-color-rest);
}
color: var(--assets-item-name-foreground-color);
}
.default-name {
margin-inline-start: $s-4;
color: var(--assets-item-name-foreground-color-rest);
}
.default-name-with-color {
margin-left: $s-6;
}
.element-name {