3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-30 21:46:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improved svg options handling

Browse source
This commit is contained in:
alonso.torres 2021-03-05 10:46:36 +01:00 • committed by Andrey Antukh
parent 29f421d867
commit 6f07b4ea80
3 changed files with 52 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/common/framework.scss
View file

@ -451,8 +451,7 @@ ul.slider-dots {
}
&.large {
width: auto;
min-width: 9rem;
min-width: 7rem;
}
}

2
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -711,6 +711,7 @@
width: 5.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -912,6 +913,7 @@
}
.row-flex-removable:hover .element-set-actions,
.element-set-options-group:hover .element-set-actions {
visibility: visible;
}

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

@ -16,29 +16,46 @@
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[rumext.alpha :as mf]))
[rumext.alpha :as mf]
[app.main.ui.icons :as i]))
(mf/defc attribute-value [{:keys [attr value on-change] :as props}]
(mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}]
(let [handle-change
(mf/use-callback
(mf/deps attr on-change)
(fn [event]
(on-change attr (dom/get-target-val event))))
label (->> attr (map name) (str/join "."))]
handle-delete
(mf/use-callback
(mf/deps attr on-delete)
(fn []
(on-delete attr)))
label (->> attr last name)]
[:div.element-set-content
(if (string? value)
[:& input-row {:label label
:type :text
:class "large"
:value (str value)
:on-change handle-change}]
[:div.row-flex.row-flex-removable
[:& input-row {:label label
:type :text
:class "large"
:value (str value)
:on-change handle-change}]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click handle-delete}
i/minus]]]
(for [[key value] value]
[:& attribute-value {:key key
:attr (conj attr key)
:value value
:on-change handle-change}]))]))
[:*
[:div.element-set-title
{:style {:border-bottom "1px solid #444" :margin-bottom "0.5rem"}}
[:span (str (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}])])]))
(mf/defc svg-attrs-menu [{:keys [ids type values]}]
(let [handle-change
@ -47,8 +64,24 @@
(fn [attr value]
(let [update-fn
(fn [shape] (assoc-in shape (concat [:svg-attrs] attr) value))]
(st/emit! (dwc/update-shapes ids update-fn)))))
(st/emit! (dwc/update-shapes ids update-fn)))))]
handle-delete
(mf/use-callback
(mf/deps ids)
(fn [attr]
(let [update-fn
(fn [shape]
(let [update-path (concat [:svg-attrs] (butlast attr))
shape (update-in shape update-path dissoc (last attr))
shape (cond-> shape
(empty? (get-in shape [:svg-attrs :style]))
(update :svg-attrs dissoc :style))]
shape))]
(st/emit! (dwc/update-shapes ids update-fn)))))
]
(when-not (empty? (:svg-attrs values))
[:div.element-set
@ -59,4 +92,5 @@
[:& attribute-value {:key attr-key
:attr [attr-key]
:value attr-value
:on-change handle-change}])])))
:on-change handle-change
:on-delete handle-delete}])])))