Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 20:09:04 -05:00
Code Issues 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
Show stats 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]}]
[:*
(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

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)
:on-click handle-delete}
i/remove-refactor]]]
[:div {:class (stl/css :attr-row)}
[:span {:class (stl/css :attr-title)}
(str (d/name (last attr)))]
(for [[key value] value]
[:& attribute-value {:key key
:attr (conj attr key)
:value value
:on-change on-change
:on-delete on-delete}])])]
[:div {:class (stl/css :attr-nested-content)}
[:div {:class (stl/css :attr-title)}
(str (d/name (last attr)))]
(for [[key value] value]
[:div {:class (stl/css :attr-row) :key key}
[:& attribute-value {:key key
:attr (conj attr key)
:value value
:on-change on-change
:on-delete on-delete}]])])]
[:div.element-set-content
(if (string? value)
[:div.row-flex.row-flex-removable
@ -122,13 +120,14 @@
:on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title")
: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]
[:& attribute-value {:key attr-key
:attr [attr-key]
:value attr-value
:on-change handle-change
:on-delete handle-delete}])]]
:on-delete handle-delete}])])]
[:div.element-set
[: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 {
@include flexColumn;
.attr-row {
display: flex;
gap: $s-4;
.attr-title {
@include tabTitleTipography;
border-bottom: $s-1 solid var(--color-foreground-secondary);
}
}
.attr-content {
display: flex;
@ -27,9 +19,10 @@
.attr-name {
@include titleTipography;
@include twoLineTextEllipsis;
width: $s-92;
width: $s-88;
margin: auto $s-4;
margin-right: 0;
display: inline-block;
}
.attr-input {
@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;
}