3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 18:11:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 fix substyles and collapsing in imported svg attributes

Browse source
This commit is contained in:
Belén Albeza 2023-12-11 17:10:17 +01:00 • committed by Alonso Torres
parent 93815e1b0d
commit bd2a3dc937
3 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -58,7 +58,7 @@
[{:keys [shape]}] [{:keys [shape]}]
[:* [:*
(for [[attr-key attr-value] (:svg-attrs shape)] (for [[attr-key attr-value] (:svg-attrs shape)]
[:& svg-attr {:attr attr-key :value attr-value}])] ) [:& svg-attr {:attr attr-key :value attr-value}])])
(mf/defc svg-panel (mf/defc svg-panel

27
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

@ -46,18 +46,16 @@
[:button {:class (stl/css :attr-action-btn) [:button {:class (stl/css :attr-action-btn)
:on-click handle-delete} :on-click handle-delete}
i/remove-refactor]]] i/remove-refactor]]]
[:div {:class (stl/css :attr-row)} [:div {:class (stl/css :attr-nested-content)}
[:span {:class (stl/css :attr-title)} [:div {:class (stl/css :attr-title)}
(str (d/name (last attr)))] (str (d/name (last attr)))]
(for [[key value] value]
(for [[key value] value] [:div {:class (stl/css :attr-row) :key key}
[:& attribute-value {:key key [:& attribute-value {:key key
:attr (conj attr key) :attr (conj attr key)
:value value :value value
:on-change on-change :on-change on-change
:on-delete on-delete}])])] :on-delete on-delete}]])])]
[:div.element-set-content [:div.element-set-content
(if (string? value) (if (string? value)
[:div.row-flex.row-flex-removable [:div.row-flex.row-flex-removable
@ -122,13 +120,14 @@
:on-collapsed toggle-content :on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title") :title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]] :class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
[:div {:class (stl/css :element-set-content)} (when open?
[:div {:class (stl/css :element-set-content)}
(for [[attr-key attr-value] attrs] (for [[attr-key attr-value] attrs]
[:& attribute-value {:key attr-key [:& attribute-value {:key attr-key
:attr [attr-key] :attr [attr-key]
:value attr-value :value attr-value
:on-change handle-change :on-change handle-change
:on-delete handle-delete}])]] :on-delete handle-delete}])])]
[:div.element-set [:div.element-set
[:div.element-set-title [:div.element-set-title

28
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

@ -12,14 +12,6 @@
} }
.element-set-content { .element-set-content {
@include flexColumn; @include flexColumn;
.attr-row {
display: flex;
gap: $s-4;
.attr-title {
@include tabTitleTipography;
border-bottom: $s-1 solid var(--color-foreground-secondary);
}
}
.attr-content { .attr-content {
display: flex; display: flex;
@ -27,9 +19,10 @@
.attr-name { .attr-name {
@include titleTipography; @include titleTipography;
@include twoLineTextEllipsis; @include twoLineTextEllipsis;
width: $s-92; width: $s-88;
margin: auto $s-4; margin: auto $s-4;
margin-right: 0; margin-right: 0;
display: inline-block;
} }
.attr-input { .attr-input {
@extend .input-element; @extend .input-element;
@ -50,3 +43,20 @@
} }
} }
} }
.attr-nested-content {
display: grid;
row-gap: $s-4;
}
.attr-title {
@include titleTipography;
font-size: $fs-10;
text-transform: uppercase;
margin-inline-start: $s-4;
}
.attr-row {
display: flex;
gap: $s-4;
}