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

🐛 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 0e81dfaedb
6 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,14 +12,17 @@
flex-direction: column; flex-direction: column;
gap: var(--sp-l); gap: var(--sp-l);
width: 100%; 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-top: var(--sp-s);
padding-inline: var(--sp-m);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
scrollbar-gutter: stable; scrollbar-gutter: stable;
background-color: var(--low-emphasis-background);
} }
.workspace-element-options { .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); padding-inline: var(--sp-m);
background-color: var(--low-emphasis-background);
} }

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

@@ -185,6 +185,7 @@
[:> styles-tab* {:color-space color-space [:> styles-tab* {:color-space color-space
:objects objects :objects objects
:shapes shapes :shapes shapes
:from from
:libraries libraries :libraries libraries
:file-id file-id}] :file-id file-id}]
:computed :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 { .tool-windows {
block-size: 100%; block-size: 100%;
display: grid; display: grid;

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

@@ -90,7 +90,7 @@
:multiple)) :multiple))
(mf/defc styles-tab* (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]) (let [data (dm/get-in libraries [file-id :data])
first-shape (first shapes) first-shape (first shapes)
first-component (ctkl/get-component data (:component-id first-shape)) first-component (ctkl/get-component data (:component-id first-shape))
@@ -131,7 +131,8 @@
(mf/deps shorthands*) (mf/deps shorthands*)
(fn [shorthand] (fn [shorthand]
(swap! shorthands* assoc (:panel shorthand) (:property 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 ;; TOKENS PANEL
(when (or (seq active-themes) (seq active-sets)) (when (or (seq active-themes) (seq active-sets))
[:li [:li

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

@@ -7,5 +7,9 @@
@use "ds/_utils.scss" as *; @use "ds/_utils.scss" as *;
.styles-tab { .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 { .property-detail-text {
@include use-typography("body-small");
color: var(--detail-color); color: var(--detail-color);
} }