johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Merge pull request #7344 from penpot/elenatorro-11542-truncate-long-font-names-on-fonts-menu

Browse Source 
🔧 Use two lines text ellipsis on custom font names
This commit is contained in:
Elena Torró
2025-09-25 15:25:50 +02:00
committed by GitHub
parent adf7b0df50 97b4491a27
commit 3827aa6bd4
2 changed files with 90 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
frontend/src/app/main/ui/dashboard/fonts.scss
View File

@@ -4,35 +4,41 @@
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "common/refactor/common-dashboard";
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;
@use "ds/spacing.scss" as *;
@use "ds/mixins.scss" as *;
.dashboard-fonts {
border-top: deprecated.$s-1 solid var(--color-background-quaternary);
border-top: $b-1 solid var(--color-background-quaternary);
display: flex;
flex-direction: column;
padding-left: deprecated.$s-120;
padding-left: px2rem(120);
padding-bottom: px2rem(120);
overflow-y: auto;
padding-bottom: deprecated.$s-120;
.btn-primary {
font-size: deprecated.$fs-11;
height: deprecated.$s-32;
min-width: deprecated.$s-100;
font-size: px2rem(11);
height: $sz-32;
min-width: px2rem(100);
}
}
.dashboard-installed-fonts {
max-width: deprecated.$s-1000;
max-width: px2rem(1000);
width: 100%;
display: flex;
margin-top: deprecated.$s-24;
margin-top: var(--sp-xxl);
flex-direction: column;
h3 {
font-size: deprecated.$fs-14;
@include t.use-typography("title-small");
color: var(--color-foreground-secondary);
margin: deprecated.$s-4;
margin: var(--sp-xs);
}
.font-item {
@@ -41,21 +47,21 @@
}
.installed-fonts-header {
@include t.use-typography("headline-small");
align-items: center;
color: var(--color-foreground-secondary);
display: flex;
font-size: deprecated.$fs-12;
height: deprecated.$s-40;
padding-left: deprecated.$s-24;
text-transform: uppercase;
height: $sz-40;
padding-left: var(--sp-xxl);
> .family {
min-width: deprecated.$s-200;
width: deprecated.$s-200;
@include twoLineTextEllipsis;
min-width: $sz-200;
width: $sz-200;
}
> .variants {
padding-left: deprecated.$s-12;
padding-left: var(--sp-m);
}
}
@@ -65,19 +71,19 @@
justify-content: flex-end;
input {
@include t.use-typography("body-medium");
background-color: var(--color-background-tertiary);
border-color: transparent;
border-radius: deprecated.$br-8;
border: deprecated.$s-1 solid transparent;
border-radius: $br-8;
border: $b-1 solid transparent;
color: var(--color-foreground-primary);
font-size: deprecated.$fs-14;
height: deprecated.$s-32;
height: $sz-32;
margin: 0;
padding: 0 deprecated.$s-8;
width: deprecated.$s-152;
padding: 0 var(--sp-s);
width: px2rem(152);
&:focus {
outline: deprecated.$s-1 solid var(--color-accent-primary);
outline: $b-1 solid var(--color-accent-primary);
}
&::placeholder {
color: var(--color-foreground-secondary);
@@ -86,67 +92,72 @@
}
.font-item {
@include t.use-typography("body-medium");
align-items: center;
background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-4;
border-radius: $br-4;
color: var(--color-foreground-secondary);
display: flex;
font-size: deprecated.$fs-14;
justify-content: space-between;
margin-top: deprecated.$s-4;
max-width: deprecated.$s-1000;
padding: deprecated.$s-12 deprecated.$s-24;
margin-top: var(--sp-xs);
max-width: px2rem(1000);
padding: var(--sp-m) var(--sp-xxl);
width: 100%;
input {
border: deprecated.$s-1 solid transparent;
@include t.use-typography("body-medium");
@include textEllipsis;
border: $b-1 solid transparent;
margin: 0;
padding: deprecated.$s-8;
padding: var(--sp-s);
background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-8;
border-radius: $br-8;
color: var(--color-foreground-primary);
font-size: deprecated.$fs-14;
&:focus {
outline: deprecated.$s-1 solid var(--color-accent-primary);
outline: $b-1 solid var(--color-accent-primary);
overflow: visible;
text-overflow: unset;
}
}
> .family {
min-width: deprecated.$s-200;
width: deprecated.$s-200;
@include twoLineTextEllipsis;
min-width: $sz-200;
width: $sz-200;
}
> .filenames {
min-width: deprecated.$s-200;
@include textEllipsis;
min-width: $sz-200;
}
> .variants {
font-size: deprecated.$fs-14;
@include t.use-typography("body-medium");
display: flex;
flex-wrap: wrap;
flex-grow: 1;
padding-left: deprecated.$s-16;
gap: deprecated.$s-6;
padding-left: var(--sp-l);
gap: $sz-6;
.variant {
display: flex;
justify-content: space-between;
align-items: center;
padding: deprecated.$s-8 deprecated.$s-12;
padding: var(--sp-s) var(--sp-m);
cursor: pointer;
gap: deprecated.$s-4;
gap: var(--sp-xs);
.icon {
display: flex;
align-items: center;
justify-content: center;
height: deprecated.$s-16;
width: deprecated.$s-16;
height: $sz-16;
width: $sz-16;
svg {
fill: none;
width: deprecated.$s-12;
height: deprecated.$s-12;
width: $sz-12;
height: $sz-12;
transform: rotate(45deg);
}
}
@@ -166,37 +177,38 @@
color: var(--color-foreground-primary);
.variant {
background-color: var(--color-background-quaternary);
border-radius: deprecated.$br-8;
border-radius: $br-8;
}
}
.filenames {
display: flex;
flex-direction: column;
font-size: deprecated.$fs-12;
@include t.use-typography("body-small");
@include textEllipsis;
min-width: $sz-400;
padding-left: var(--sp-xxxl);
}
.options {
display: flex;
justify-content: flex-end;
min-width: deprecated.$s-180;
min-width: px2rem(180);
.icon {
width: deprecated.$s-24;
width: $sz-24;
cursor: pointer;
display: flex;
margin-left: deprecated.$s-12;
margin-left: var(--sp-m);
justify-content: center;
align-items: center;
svg {
width: deprecated.$s-16;
height: deprecated.$s-16;
width: $sz-16;
height: $sz-16;
stroke: var(--color-foreground-secondary);
fill: none;
}
&.failure {
margin-right: deprecated.$s-12;
margin-right: var(--sp-m);
svg {
stroke: var(--element-foreground-warning);
}
@@ -214,46 +226,47 @@
}
.dashboard-fonts-upload {
max-width: deprecated.$s-1000;
max-width: px2rem(1000);
width: 100%;
display: flex;
flex-direction: column;
.upload-button {
width: deprecated.$s-100;
width: px2rem(100);
}
.btn-secondary {
margin-left: deprecated.$s-12;
margin-left: var(--sp-m);
}
}
.dashboard-fonts-hero {
font-size: deprecated.$fs-14;
padding: deprecated.$s-32 0;
margin-top: deprecated.$s-80;
@include t.use-typography("body-medium");
padding: var(--sp-xxxl) 0;
margin-top: px2rem(80);
display: flex;
justify-content: space-between;
.btn-primary {
height: deprecated.$s-40;
height: $sz-40;
width: 100%;
}
.desc {
display: flex;
flex-direction: column;
gap: deprecated.$s-24;
gap: var(--sp-xxl);
color: var(--color-background-secondary);
width: deprecated.$s-500;
width: $sz-500;
h2 {
color: var(--color-foreground-primary);
font-weight: 400;
}
p {
@include t.use-typography("body-large");
color: var(--color-foreground-secondary);
font-size: deprecated.$fs-16;
}
}
@@ -264,25 +277,25 @@
.fonts-placeholder {
align-items: center;
border-radius: deprecated.$br-8;
border: deprecated.$s-1 solid var(--color-background-quaternary);
border-radius: $br-8;
border: $b-1 solid var(--color-background-quaternary);
display: flex;
flex-direction: column;
height: deprecated.$s-160;
height: $sz-160;
justify-content: center;
margin-top: deprecated.$s-16;
max-width: deprecated.$s-1000;
margin-top: var(--sp-l);
max-width: px2rem(1000);
width: 100%;
.icon svg {
stroke: var(--color-foreground-secondary);
fill: none;
width: deprecated.$s-32;
height: deprecated.$s-32;
width: $sz-32;
height: $sz-32;
}
.label {
@include t.use-typography("body-medium");
color: var(--color-foreground-secondary);
font-size: deprecated.$fs-14;
}
}

2
frontend/src/app/main/ui/ds/_sizes.scss
View File

@@ -9,6 +9,8 @@
// TODO: create actual tokens once we have them from design
$sz-1: px2rem(1);
$sz-6: px2rem(6);
$sz-12: px2rem(12);
$sz-14: px2rem(14);
$sz-16: px2rem(16);
$sz-24: px2rem(24);
$sz-28: px2rem(28);