github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-06 08:38:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Improve copy and add detach buttons

Browse Source
This commit is contained in:
Eva Marco 2026-05-05 10:55:03 +02:00
parent 18161cba31
commit 56a0f25a78
8 changed files with 149 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/playwright/ui/specs/multiseleccion.spec.js
View File

@ -245,14 +245,14 @@ test("Multiselection of text and typographies", async ({ page }) => {
await expect(textSection).toBeVisible();
await expect(
textSection.getByText("Multiple typographies"),
textSection.getByText("Mixed assets"),
).not.toBeVisible();
// Select two plain text layer with different font family
await plainTextLayerTwo.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(
textSection.getByTitle("Font family").getByText("--"),
textSection.getByTitle("Font family").getByText("Mixed Font Families"),
).toBeVisible();
// Select typography text layer
@ -263,7 +263,7 @@ test("Multiselection of text and typographies", async ({ page }) => {
// Select two typography text layer with different typography
await typographyTextLayerTwo.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(textSection.getByText("Multiple typographies")).toBeVisible();
await expect(textSection.getByText("Mixed assets")).toBeVisible();
// Select token typography text layer
// TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY
@ -276,32 +276,32 @@ test("Multiselection of text and typographies", async ({ page }) => {
await tokenTypographyTextLayerTwo.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(
textSection.getByTitle("Font family").getByText("--"),
textSection.getByTitle("Font family").getByText("Mixed Font Families"),
).toBeVisible();
//Select plain text layer and typography text layer together
await plainTextLayer.click();
await typographyTextLayerOne.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(textSection.getByText("Multiple typographies")).toBeVisible();
await expect(textSection.getByText("Mixed assets")).toBeVisible();
//Select plain text layer and typography text layer together on reverse order
await typographyTextLayerOne.click();
await plainTextLayer.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(textSection.getByText("Multiple typographies")).toBeVisible();
await expect(textSection.getByText("Mixed assets")).toBeVisible();
//Selen token typography text layer and typography text layer together
await tokenTypographyTextLayerOne.click();
await typographyTextLayerOne.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(textSection.getByText("Multiple typographies")).toBeVisible();
await expect(textSection.getByText("Mixed assets")).toBeVisible();
//Select token typography text layer and typography text layer together on reverse order
await typographyTextLayerOne.click();
await tokenTypographyTextLayerOne.click({ modifiers: ["Control"] });
await expect(textSection).toBeVisible();
await expect(textSection.getByText("Multiple typographies")).toBeVisible();
await expect(textSection.getByText("Mixed assets")).toBeVisible();
// Select rectangle and elipse together
await rectangleLayer.click();

13
frontend/src/app/main/data/workspace/tokens/application.cljs
View File

@ -772,6 +772,19 @@
(fn [shape]
(update shape :applied-tokens remove-token))))))))
(defn unapply-multiple-tokens
"Removes `attributes` for `shape-ids` without knowing the token, used when a token is deleted."
[{:keys [attributes shape-ids] :as _props}]
(ptk/reify ::unapply-multiple-tokens
ptk/WatchEvent
(watch [_ _ _]
(rx/of
(dwsh/update-shapes
shape-ids
(fn [shape]
(update shape :applied-tokens #(when % (apply dissoc % attributes)))))))))
(defn toggle-token
[{:keys [token attrs shape-ids expand-with-children]}]

42
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View File

@ -417,6 +417,24 @@
:attributes #{:typography}
:shape-ids ids}))))
handle-detach-all-tokens
(mf/use-fn
(mf/deps ids)
(fn []
(st/emit! (dwta/unapply-multiple-tokens {:attributes #{:typography}
:shape-ids ids}))))
handle-detach-all-tokens-and-assets
(mf/use-fn
(mf/deps ids on-change)
(fn []
(let [undo-id (js/Symbol)]
(st/emit! (dwu/start-undo-transaction undo-id)
(dwta/unapply-multiple-tokens {:attributes #{:typography}
:shape-ids ids}))
(on-change {:typography-ref-file nil :typography-ref-id nil})
(ts/schedule #(st/emit! (dwu/commit-undo-transaction undo-id))))))
expand-stream
(mf/with-memo []
(->> st/stream (rx/filter (ptk/type? :expand-text-more-options))))
@ -479,10 +497,24 @@
[:div {:class (stl/css :element-content)}
(cond
(and token-typography-row-enabled? (= :multiple current-token-name) (= typography-id :multiple))
[:div "Texts have multiple typography assets and typography tokens applied"]
[:div {:class (stl/css :multiple-typography)}
[:span {:class (stl/css :multiple-text)}
(tr "workspace.libraries.text.mixed-tokens-and-assets")]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.libraries.text.multiple-token-and-asset-tooltip")
:tooltip-placement "top-left"
:on-click handle-detach-all-tokens-and-assets
:icon i/detach}]]
(and token-typography-row-enabled? (= :multiple current-token-name))
[:div "token-multiple"]
[:div {:class (stl/css :multiple-typography)}
[:span {:class (stl/css :multiple-text)}
(tr "workspace.libraries.text.mixed-tokens")]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.libraries.text.multiple-token-tooltip")
:tooltip-placement "top-left"
:on-click handle-detach-all-tokens
:icon i/detach}]]
(and token-typography-row-enabled? current-token-name)
[:> token-typography-row* {:token-name current-token-name
@ -491,10 +523,12 @@
(= typography-id :multiple)
[:div {:class (stl/css :multiple-typography)}
[:span {:class (stl/css :multiple-text)} (tr "workspace.libraries.text.multiple-typography")]
[:span {:class (stl/css :multiple-text)}
(tr "workspace.libraries.text.mixed-typography")]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.libraries.text.multiple-typography-tooltip")
:aria-label (tr "workspace.libraries.text.multiple-assets-tooltip")
:on-click handle-detach-typography
:tooltip-placement "top-left"
:icon i/detach}]]
typography

47
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View File

@ -4,8 +4,13 @@
//
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@use "ds/typography.scss" as t;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/mixins.scss" as *;
.element-set {
@include sidebar.option-grid-structure;
@ -18,37 +23,37 @@
}
.element-content {
@include deprecated.flex-column;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
grid-column: span 8;
margin-top: deprecated.$s-4;
margin-block-start: var(--sp-xs);
}
.multiple-typography {
@extend %mixed-bar;
@include t.use-typography("body-small");
display: flex;
align-items: center;
flex-grow: 1;
border-radius: $br-8;
block-size: $sz-32;
padding-block: var(--sp-s);
padding-inline: var(--sp-s) 0;
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
}
.multiple-text {
@include deprecated.body-small-typography;
@include t.use-typography("body-small");
flex-grow: 1;
color: var(--input-foreground-color-active);
}
.multiple-typography-button {
@extend %button-tertiary;
height: deprecated.$s-32;
width: deprecated.$s-28;
svg {
@extend %button-icon;
}
color: var(--color-foreground-secondary);
}
.text-align-options {
display: flex;
gap: deprecated.$s-4;
gap: var(--sp-xs);
}
.align-options,
@ -56,10 +61,10 @@
.vertical-align-options,
.grow-options,
.text-decoration-options {
height: deprecated.$s-32;
block-size: $sz-32;
}
.text-decoration-options {
display: flex;
gap: deprecated.$s-4;
gap: var(--sp-xs);
}

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

@ -315,7 +315,12 @@
:on-click #(reset! open-selector? true)}
(cond
(or (= :multiple font-id) (= "mixed" font-id))
"--"
[:*
[:span {:class (stl/css :font-option-name :font-family-mixed)}
(tr "inspect.attributes.typography.mixed-font-family")]
[:> icon* {:icon-id i/arrow-down
:class (stl/css :dropdown-icon)
:size "s"}]]
(some? font)
[:*

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

@ -51,6 +51,10 @@
visibility: var(--actions-visibility);
}
.font-family-mixed {
color: var(--color-foreground-secondary);
}
.typography-selection-wrapper {
display: grid;
grid-template-columns: $sz-24 auto 1fr;

28
frontend/translations/en.po
View File

@ -1998,6 +1998,10 @@ msgstr "Typography"
msgid "inspect.attributes.typography.font-family"
msgstr "Font Family"
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:308
msgid "inspect.attributes.typography.mixed-font-family"
msgstr "Mixed Font Families"
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:326, src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:332
msgid "inspect.attributes.typography.font-size"
msgstr "Font Size"
@ -6284,10 +6288,34 @@ msgstr "Connect library"
msgid "workspace.libraries.text.multiple-typography"
msgstr "Multiple typographies"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.mixed-typography"
msgstr "Mixed assets"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.mixed-tokens"
msgstr "Mixed tokens"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.mixed-tokens-and-assets"
msgstr "Mixed assets and tokens"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-typography-tooltip"
msgstr "Unlink all typographies"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-assets-tooltip"
msgstr "Unlink all assets"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-token-tooltip"
msgstr "Detach all tokens"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-token-and-asset-tooltip"
msgstr "Detach all tokens & unlink all typographies"
#: src/app/main/ui/workspace/libraries.cljs:103, src/app/main/ui/workspace/libraries.cljs:130
msgid "workspace.libraries.typography"
msgid_plural "workspace.libraries.typography"

28
frontend/translations/es.po
View File

@ -1951,6 +1951,10 @@ msgstr "Tipografía"
msgid "inspect.attributes.typography.font-family"
msgstr "Familia tipográfica"
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:308
msgid "inspect.attributes.typography.mixed-font-family"
msgstr "Varias Familias tipográficas"
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:326, src/app/main/ui/workspace/sidebar/options/menus/typography.cljs:332
msgid "inspect.attributes.typography.font-size"
msgstr "Tamaño de fuente"
@ -6167,13 +6171,33 @@ msgid "workspace.libraries.shared-library-btn"
msgstr "Conectar biblioteca"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.multiple-typography"
msgstr "Varias tipografías"
msgid "workspace.libraries.text.mixed-typography"
msgstr "Varios recursos"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.mixed-tokens"
msgstr "Varios tokens"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:332
msgid "workspace.libraries.text.mixed-tokens-and-assets"
msgstr "Varios tokens y recursos"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-typography-tooltip"
msgstr "Desvincular todas las tipografías"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-assets-tooltip"
msgstr "Desvincular todos los recursos"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-token-tooltip"
msgstr "Desvincular todos los tokens"
#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:335
msgid "workspace.libraries.text.multiple-token-and-asset-tooltip"
msgstr "Desvincular todos los tokens y recursos"
#: src/app/main/ui/workspace/libraries.cljs:103, src/app/main/ui/workspace/libraries.cljs:130
msgid "workspace.libraries.typography"
msgid_plural "workspace.libraries.typography"