github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-10 14:09:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔧 Use two lines text ellipsis on custom font names

Browse Source
This commit is contained in:
Elena Torro 2025-09-17 17:55:30 +02:00
parent 015bd9e453
commit 97b4491a27
2 changed files with 90 additions and 75 deletions
Show Stats 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 // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "common/refactor/common-dashboard"; @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 { .dashboard-fonts {
border-top: deprecated.$s-1 solid var(--color-background-quaternary); border-top: $b-1 solid var(--color-background-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-left: deprecated.$s-120; padding-left: px2rem(120);
padding-bottom: px2rem(120);
overflow-y: auto; overflow-y: auto;
padding-bottom: deprecated.$s-120;
.btn-primary { .btn-primary {
font-size: deprecated.$fs-11; font-size: px2rem(11);
height: deprecated.$s-32; height: $sz-32;
min-width: deprecated.$s-100; min-width: px2rem(100);
} }
} }
.dashboard-installed-fonts { .dashboard-installed-fonts {
max-width: deprecated.$s-1000; max-width: px2rem(1000);
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: deprecated.$s-24; margin-top: var(--sp-xxl);
flex-direction: column; flex-direction: column;
h3 { h3 {
font-size: deprecated.$fs-14; @include t.use-typography("title-small");
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
margin: deprecated.$s-4; margin: var(--sp-xs);
} }
.font-item { .font-item {
@ -41,21 +47,21 @@
} }
.installed-fonts-header { .installed-fonts-header {
@include t.use-typography("headline-small");
align-items: center; align-items: center;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
display: flex; display: flex;
font-size: deprecated.$fs-12; height: $sz-40;
height: deprecated.$s-40; padding-left: var(--sp-xxl);
padding-left: deprecated.$s-24;
text-transform: uppercase;
> .family { > .family {
min-width: deprecated.$s-200; @include twoLineTextEllipsis;
width: deprecated.$s-200; min-width: $sz-200;
width: $sz-200;
} }
> .variants { > .variants {
padding-left: deprecated.$s-12; padding-left: var(--sp-m);
} }
} }
@ -65,19 +71,19 @@
justify-content: flex-end; justify-content: flex-end;
input { input {
@include t.use-typography("body-medium");
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
border-color: transparent; border-color: transparent;
border-radius: deprecated.$br-8; border-radius: $br-8;
border: deprecated.$s-1 solid transparent; border: $b-1 solid transparent;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-size: deprecated.$fs-14; height: $sz-32;
height: deprecated.$s-32;
margin: 0; margin: 0;
padding: 0 deprecated.$s-8; padding: 0 var(--sp-s);
width: deprecated.$s-152; width: px2rem(152);
&:focus { &:focus {
outline: deprecated.$s-1 solid var(--color-accent-primary); outline: $b-1 solid var(--color-accent-primary);
} }
&::placeholder { &::placeholder {
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
@ -86,67 +92,72 @@
} }
.font-item { .font-item {
@include t.use-typography("body-medium");
align-items: center; align-items: center;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-4; border-radius: $br-4;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
display: flex; display: flex;
font-size: deprecated.$fs-14;
justify-content: space-between; justify-content: space-between;
margin-top: deprecated.$s-4; margin-top: var(--sp-xs);
max-width: deprecated.$s-1000; max-width: px2rem(1000);
padding: deprecated.$s-12 deprecated.$s-24; padding: var(--sp-m) var(--sp-xxl);
width: 100%; width: 100%;
input { input {
border: deprecated.$s-1 solid transparent; @include t.use-typography("body-medium");
@include textEllipsis;
border: $b-1 solid transparent;
margin: 0; margin: 0;
padding: deprecated.$s-8; padding: var(--sp-s);
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
border-radius: deprecated.$br-8; border-radius: $br-8;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-size: deprecated.$fs-14;
&:focus { &:focus {
outline: deprecated.$s-1 solid var(--color-accent-primary); outline: $b-1 solid var(--color-accent-primary);
overflow: visible;
text-overflow: unset;
} }
} }
> .family { > .family {
min-width: deprecated.$s-200; @include twoLineTextEllipsis;
width: deprecated.$s-200; min-width: $sz-200;
width: $sz-200;
} }
> .filenames { > .filenames {
min-width: deprecated.$s-200; @include textEllipsis;
min-width: $sz-200;
} }
> .variants { > .variants {
font-size: deprecated.$fs-14; @include t.use-typography("body-medium");
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-grow: 1; flex-grow: 1;
padding-left: deprecated.$s-16; padding-left: var(--sp-l);
gap: deprecated.$s-6; gap: $sz-6;
.variant { .variant {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: deprecated.$s-8 deprecated.$s-12; padding: var(--sp-s) var(--sp-m);
cursor: pointer; cursor: pointer;
gap: deprecated.$s-4; gap: var(--sp-xs);
.icon { .icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: deprecated.$s-16; height: $sz-16;
width: deprecated.$s-16; width: $sz-16;
svg { svg {
fill: none; fill: none;
width: deprecated.$s-12; width: $sz-12;
height: deprecated.$s-12; height: $sz-12;
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
@ -166,37 +177,38 @@
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
.variant { .variant {
background-color: var(--color-background-quaternary); background-color: var(--color-background-quaternary);
border-radius: deprecated.$br-8; border-radius: $br-8;
} }
} }
.filenames { .filenames {
display: flex; @include t.use-typography("body-small");
flex-direction: column; @include textEllipsis;
font-size: deprecated.$fs-12; min-width: $sz-400;
padding-left: var(--sp-xxxl);
} }
.options { .options {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
min-width: deprecated.$s-180; min-width: px2rem(180);
.icon { .icon {
width: deprecated.$s-24; width: $sz-24;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-left: deprecated.$s-12; margin-left: var(--sp-m);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
svg { svg {
width: deprecated.$s-16; width: $sz-16;
height: deprecated.$s-16; height: $sz-16;
stroke: var(--color-foreground-secondary); stroke: var(--color-foreground-secondary);
fill: none; fill: none;
} }
&.failure { &.failure {
margin-right: deprecated.$s-12; margin-right: var(--sp-m);
svg { svg {
stroke: var(--element-foreground-warning); stroke: var(--element-foreground-warning);
} }
@ -214,46 +226,47 @@
} }
.dashboard-fonts-upload { .dashboard-fonts-upload {
max-width: deprecated.$s-1000; max-width: px2rem(1000);
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.upload-button { .upload-button {
width: deprecated.$s-100; width: px2rem(100);
} }
.btn-secondary { .btn-secondary {
margin-left: deprecated.$s-12; margin-left: var(--sp-m);
} }
} }
.dashboard-fonts-hero { .dashboard-fonts-hero {
font-size: deprecated.$fs-14; @include t.use-typography("body-medium");
padding: deprecated.$s-32 0; padding: var(--sp-xxxl) 0;
margin-top: deprecated.$s-80; margin-top: px2rem(80);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-primary { .btn-primary {
height: deprecated.$s-40; height: $sz-40;
width: 100%; width: 100%;
} }
.desc { .desc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: deprecated.$s-24; gap: var(--sp-xxl);
color: var(--color-background-secondary); color: var(--color-background-secondary);
width: deprecated.$s-500; width: $sz-500;
h2 { h2 {
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-weight: 400; font-weight: 400;
} }
p { p {
@include t.use-typography("body-large");
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
font-size: deprecated.$fs-16;
} }
} }
@ -264,25 +277,25 @@
.fonts-placeholder { .fonts-placeholder {
align-items: center; align-items: center;
border-radius: deprecated.$br-8; border-radius: $br-8;
border: deprecated.$s-1 solid var(--color-background-quaternary); border: $b-1 solid var(--color-background-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: deprecated.$s-160; height: $sz-160;
justify-content: center; justify-content: center;
margin-top: deprecated.$s-16; margin-top: var(--sp-l);
max-width: deprecated.$s-1000; max-width: px2rem(1000);
width: 100%; width: 100%;
.icon svg { .icon svg {
stroke: var(--color-foreground-secondary); stroke: var(--color-foreground-secondary);
fill: none; fill: none;
width: deprecated.$s-32; width: $sz-32;
height: deprecated.$s-32; height: $sz-32;
} }
.label { .label {
@include t.use-typography("body-medium");
color: var(--color-foreground-secondary); 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 // TODO: create actual tokens once we have them from design
$sz-1: px2rem(1); $sz-1: px2rem(1);
$sz-6: px2rem(6); $sz-6: px2rem(6);
$sz-12: px2rem(12);
$sz-14: px2rem(14);
$sz-16: px2rem(16); $sz-16: px2rem(16);
$sz-24: px2rem(24); $sz-24: px2rem(24);
$sz-28: px2rem(28); $sz-28: px2rem(28);