diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs index 440768863..c6dc88e92 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs index 0399ea390..792b83f94 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 72897cfce..8dc2d5bb6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -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; +}