mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-23 22:48:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix inspect tab styles on viewer

Browse Source
This commit is contained in:
Eva Marco
2025-12-11 18:22:54 +01:00
parent 2f46cbc0d4
commit aa5f762a73
33 changed files with 231 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGES.md
View File

@@ -94,7 +94,7 @@ example. It's still usable as before, we just removed the example.
- Fix incorrect interaction betwen hower and scroll on assets sidebar [Taiga #12389](https://tree.taiga.io/project/penpot/issue/12389)
- Fix switch variants with paths [Taiga #12841](https://tree.taiga.io/project/penpot/issue/12841)
- Fix referencing typography tokens on font-family tokens [Taiga #12492](https://tree.taiga.io/project/penpot/issue/12492)
- Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915)
## 2.11.1
- Fix WEBP shape export on docker images [Taiga #3838](https://tree.taiga.io/project/penpot/issue/3838)

6
frontend/playwright/ui/specs/inspect-tab.spec.js
View File

@@ -301,7 +301,7 @@ test.describe("Inspect tab - Styles", () => {
);
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Size & position");
const panel = await getPanelByTitle(workspacePage, "Size and position");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");
@@ -331,7 +331,7 @@ test.describe("Inspect tab - Styles", () => {
);
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Size & position");
const panel = await getPanelByTitle(workspacePage, "Size and position");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");
@@ -371,7 +371,7 @@ test.describe("Inspect tab - Styles", () => {
);
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Size & position");
const panel = await getPanelByTitle(workspacePage, "Size and position");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");

4
frontend/src/app/main/ui/components/title_bar.cljs
View File

@@ -53,6 +53,6 @@
(mf/defc inspect-title-bar*
[{:keys [class title]}]
[{:keys [class title title-class]}]
[:div {:class [(stl/css :title-bar) class]}
[:div {:class (stl/css :title-only :inspect-title)} title]])
[:div {:class [title-class (stl/css :title-only :inspect-title)]} title]])

7
frontend/src/app/main/ui/inspect/attributes.scss
View File

@@ -12,14 +12,17 @@
flex-direction: column;
gap: var(--sp-l);
width: 100%;
height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
max-height: calc(100vh - px2rem(128)); // TODO: Fix this hardcoded value
padding-top: var(--sp-s);
padding-inline: var(--sp-m);
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
background-color: var(--low-emphasis-background);
}
.workspace-element-options {
height: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
max-height: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
padding-inline: var(--sp-m);
background-color: var(--low-emphasis-background);
}

3
frontend/src/app/main/ui/inspect/attributes/blur.cljs
View File

@@ -24,7 +24,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.blur")
:class (stl/css :title-spacing-blur)}
:class (stl/css :title-wrapper)
:title-class (stl/css :blur-attr-title)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-css-property objects (first shapes) :filter)
:class (stl/css :copy-btn-title)}])]

19
frontend/src/app/main/ui/inspect/attributes/blur.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-blur {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.blur-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.blur-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,5 +34,5 @@
}
.copy-btn-title {
max-width: deprecated.$s-28;
max-inline-size: $sz-28;
}

3
frontend/src/app/main/ui/inspect/attributes/fill.cljs
View File

@@ -68,7 +68,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]
:class (stl/css :title-wrapper)
:class-title (stl/css :fill-attr-title)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

20
frontend/src/app/main/ui/inspect/attributes/fill.scss
View File

@@ -5,16 +5,30 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-fill {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.fill-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.attributes-content {
display: grid;
gap: deprecated.$s-4;
}
.attributes-fill-block {
block-size: $sz-36;
}

3
frontend/src/app/main/ui/inspect/attributes/geometry.cljs
View File

@@ -44,7 +44,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.size")
:class (stl/css :title-spacing-geometry)}
:class (stl/css :title-wrapper)
:title-class (stl/css :geometry-attr-title)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

19
frontend/src/app/main/ui/inspect/attributes/geometry.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-geometry {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.geometry-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.geometry-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,5 +34,5 @@
}
.copy-btn-title {
max-width: deprecated.$s-28;
max-inline-size: $sz-28;
}

3
frontend/src/app/main/ui/inspect/attributes/layout.cljs
View File

@@ -57,7 +57,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title "Layout"
:class (stl/css :title-spacing-layout)}
:class (stl/css :title-wrapper)
:title-class (stl/css :layout-attr-title)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

19
frontend/src/app/main/ui/inspect/attributes/layout.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-layout {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.layout-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.layout-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,5 +34,5 @@
}
.copy-btn-title {
max-width: deprecated.$s-28;
max-inline-size: $sz-28;
}

3
frontend/src/app/main/ui/inspect/attributes/layout_element.cljs
View File

@@ -69,7 +69,8 @@
[:div {:class (stl/css :attributes-block)}
[:> title-bar* {:collapsable false
:title menu-title
:class (stl/css :title-spacing-layout-element)}
:class (stl/css :title-wrapper)
:title-class (stl/css :layout-element-attr-title)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]

20
frontend/src/app/main/ui/inspect/attributes/layout_element.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-layout-element {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.layout-element-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.layout-element-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,5 +34,6 @@
}
.copy-btn-title {
max-width: deprecated.$s-28;
max-inline-size: $sz-28;
max-inline-size: $sz-28;
}

3
frontend/src/app/main/ui/inspect/attributes/shadow.cljs
View File

@@ -63,7 +63,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}]
:class (stl/css :title-wrapper)
:title-class (stl/css :shadow-attr-title)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

17
frontend/src/app/main/ui/inspect/attributes/shadow.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-shadow {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.shadow-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.shadow-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {

3
frontend/src/app/main/ui/inspect/attributes/stroke.cljs
View File

@@ -88,7 +88,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]
:class (stl/css :title-wrapper)
:title-class (stl/css :stroke-attr-title)}]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]

23
frontend/src/app/main/ui/inspect/attributes/stroke.scss
View File

@@ -5,21 +5,34 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-stroke {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.stroke-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.attributes-stroke-block {
@include deprecated.flexColumn;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.stroke-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -28,5 +41,5 @@
.attributes-content {
display: grid;
gap: deprecated.$s-4;
gap: var(--sp-xs);
}

3
frontend/src/app/main/ui/inspect/attributes/svg.cljs
View File

@@ -54,5 +54,6 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}]
:class (stl/css :title-wrapper)
:title-class (stl/css :svg-attr-title)}]
[:& svg-block {:shape shape}]])))

24
frontend/src/app/main/ui/inspect/attributes/svg.scss
View File

@@ -5,17 +5,29 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-svg {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.svg-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.svg-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,12 +35,12 @@
}
.attributes-subtitle {
@include deprecated.uppercaseTitleTipography;
@include use-typography("headline-small");
display: flex;
justify-content: space-between;
height: deprecated.$s-32;
block-size: $sz-32;
span {
height: deprecated.$s-32;
block-size: $sz-32;
display: flex;
align-items: center;
}

3
frontend/src/app/main/ui/inspect/attributes/text.cljs
View File

@@ -157,7 +157,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]
:class (stl/css :title-wrapper)
:title-class (stl/css :text-atrr-title)}]
(for [shape shapes]
[:& text-block {:shape shape

42
frontend/src/app/main/ui/inspect/attributes/text.scss
View File

@@ -5,23 +5,37 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/typography.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-text {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.text-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.attributes-content {
@include deprecated.flexColumn;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
}
.text-row {
@extend .attr-row;
height: unset;
min-height: deprecated.$s-32;
block-size: unset;
min-block-size: $sz-36;
:global(.attr-value) {
align-items: center;
}
@@ -32,20 +46,20 @@
}
.attributes-content-row {
max-width: deprecated.$s-240;
min-height: calc(deprecated.$s-2 + deprecated.$s-32);
border-radius: deprecated.$br-8;
border: deprecated.$s-1 solid var(--menu-border-color-disabled);
margin-top: deprecated.$s-4;
max-inline-size: px2rem(240);
min-block-size: px2rem(34);
border-radius: $br-8;
border: $b-1 solid var(--menu-border-color-disabled);
margin-block-start: var(--sp-xs);
.content {
@include deprecated.bodySmallTypography;
@include use-typography("body-small");
width: 100%;
padding: deprecated.$s-4 0;
padding: var(--sp-xs) 0;
color: var(--color-foreground-secondary);
}
&:hover {
border: deprecated.$s-1 solid var(--color-background-tertiary);
border: $b-1 solid var(--color-background-tertiary);
background-color: var(--menu-background-color);
.content {
color: var(--menu-foreground-color-hover);

3
frontend/src/app/main/ui/inspect/attributes/variant.cljs
View File

@@ -42,7 +42,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title (if is-container? (tr "inspect.attributes.variants") (tr "inspect.attributes.variant"))
:class (stl/css :title-spacing-variant)}]
:class (stl/css :title-wrapper)
:title-class (stl/css :variant-attr-title)}]
(for [[pos property] (map-indexed vector properties)]
[:> variant-block* {:key (dm/str "variant-property-" pos) :name (:name property) :value (:value property)}])]))

19
frontend/src/app/main/ui/inspect/attributes/variant.scss
View File

@@ -5,18 +5,29 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-variant {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.variant-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.variant-row {
@extend .attr-row;
height: fit-content;
block-size: fit-content;
min-block-size: $sz-36;
}
.button-children {

3
frontend/src/app/main/ui/inspect/attributes/visibility.cljs
View File

@@ -51,7 +51,8 @@
[:div {:class (stl/css :attributes-block)}
[:> inspect-title-bar*
{:title "Visibility"
:class (stl/css :title-spacing-visibility)}
:class (stl/css :title-wrapper)
:title-class (stl/css :visibility-attr-title)}
(when (= (count shapes) 1)
[:> copy-button* {:data (css/get-shape-properties-css objects (first shapes) properties)

19
frontend/src/app/main/ui/inspect/attributes/visibility.scss
View File

@@ -5,17 +5,28 @@
// Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
.attributes-block {
@include deprecated.flexColumn;
--box-border-color: var(--color-background-primary);
display: flex;
flex-direction: column;
border-block-end: $b-2 solid var(--box-border-color);
}
.title-spacing-visibility {
@extend .attr-title;
.title-wrapper {
margin-inline-start: 0;
}
.visibility-attr-title {
color: var(--entry-foreground-color-hover);
padding-block: var(--sp-s);
}
.visibility-row {
@extend .attr-row;
block-size: $sz-36;
}
.button-children {
@@ -23,5 +34,5 @@
}
.copy-btn-title {
max-width: deprecated.$s-28;
max-inline-size: $sz-28;
}

1
frontend/src/app/main/ui/inspect/right_sidebar.cljs
View File

@@ -185,6 +185,7 @@
[:> styles-tab* {:color-space color-space
:objects objects
:shapes shapes
:from from
:libraries libraries
:file-id file-id}]
:computed

4
frontend/src/app/main/ui/inspect/right_sidebar.scss
View File

@@ -24,10 +24,6 @@
}
}
.viewer-code {
padding-inline-start: var(--sp-s);
}
.tool-windows {
block-size: 100%;
display: grid;

5
frontend/src/app/main/ui/inspect/styles.cljs
View File

@@ -90,7 +90,7 @@
:multiple))
(mf/defc styles-tab*
[{:keys [color-space shapes libraries objects file-id]}]
[{:keys [color-space shapes libraries objects file-id from]}]
(let [data (dm/get-in libraries [file-id :data])
first-shape (first shapes)
first-component (ctkl/get-component data (:component-id first-shape))
@@ -131,7 +131,8 @@
(mf/deps shorthands*)
(fn [shorthand]
(swap! shorthands* assoc (:panel shorthand) (:property shorthand))))]
[:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
[:ol {:class (stl/css-case :styles-tab true
:styles-tab-workspace (= from :workspace)) :aria-label (tr "labels.styles")}
;; TOKENS PANEL
(when (or (seq active-themes) (seq active-sets))
[:li

6
frontend/src/app/main/ui/inspect/styles.scss
View File

@@ -7,5 +7,9 @@
@use "ds/_utils.scss" as *;
.styles-tab {
block-size: calc(100vh - px2rem(200)); // TODO: Fix this hardcoded value
block-size: calc(100vh - px2rem(140)); // TODO: Fix this hardcoded value
}
.styles-tab-workspace {
block-size: calc(100vh - px2rem(180)); // TODO: Fix this hardcoded value
}

1
frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
View File

@@ -60,6 +60,7 @@
}
.property-detail-text {
@include use-typography("body-small");
color: var(--detail-color);
}

2
frontend/src/app/main/ui/inspect/styles/style_box.cljs
View File

@@ -19,7 +19,7 @@
(case type
:variant (tr "inspect.tabs.styles.variants-panel")
:token (tr "inspect.tabs.styles.token-panel")
:geometry (tr "inspect.tabs.styles.geometry-panel")
:geometry (tr "inspect.attributes.size")
:fill (tr "labels.fill")
:stroke (tr "labels.stroke")
:text (tr "labels.text")

2
frontend/src/app/main/ui/inspect/styles/style_box.scss
View File

@@ -33,7 +33,6 @@
display: flex;
align-items: center;
gap: var(--title-gap);
padding-block: var(--title-padding);
}
.disclosure-button {
@@ -52,4 +51,5 @@
@include use-typography("headline-small");
flex: 1;
color: var(--title-color);
padding-block: var(--title-padding);
}