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

🎉 Add ability to change shadows order and place new shadows at top by default

Browse source 
Signed-off-by: Akshay Gupta <gravity.akshay@gmail.com>
This commit is contained in:
Akshay Gupta 2023-05-17 23:22:38 +05:30 • committed by Andrey Antukh
parent 68c1d9afaf
commit 1eb6e30369
2 changed files with 164 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -255,6 +255,16 @@
new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
(assoc-in shape [:shadow index :color] new-attrs))))))))
(defn add-shadow
[ids shadow]
(ptk/reify ::add-shadow
ptk/WatchEvent
(watch [_ _ _]
(let [add (fn [shape attrs] (assoc shape :shadow (into [attrs] (:shadow shape))))]
(rx/of (dch/update-shapes
ids
#(add % shadow)))))))
(defn add-stroke
[ids stroke]
(ptk/reify ::add-stroke
@ -289,6 +299,15 @@
ids
#(remove-all %)))))))
(defn reorder-shadows
[ids index new-index]
(ptk/reify ::reorder-shadow
ptk/WatchEvent
(watch [_ _ _]
(rx/of (dch/update-shapes
ids
#(swap-attrs % :shadow index new-index))))))
(defn reorder-strokes
[ids index new-index]
(ptk/reify ::reorder-strokes

58
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -10,9 +10,11 @@
[app.common.data :as d]
[app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.colors :as dc]
[app.main.data.workspace.undo :as dwu]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@ -37,7 +39,7 @@
(or (number? value) (not (js/isNaN (js/parseInt value)))))
(mf/defc shadow-entry
[{:keys [ids index value]}]
[{:keys [ids index value on-reorder select-all disable-drag on-blur]}]
(let [open-shadow (mf/use-state false)
basic-offset-x-ref (mf/use-ref nil)
@ -64,6 +66,21 @@
select-text
(fn [ref] (fn [_] (dom/select-text! (mf/ref-val ref))))
on-drop
(fn [_ data]
(on-reorder (:index data)))
[dprops dref] (if (some? on-reorder)
(h/use-sortable
:data-type "penpot/shadow-entry"
:on-drop on-drop
:disabled @disable-drag
:detect-center? false
:data {:id (str "shadow-" index)
:index index
:name (str "Border row" index)})
[nil nil])
update-attr
(fn update-attr
([index attr valid?]
@ -98,6 +115,10 @@
(fn []
(st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))]
[:*
[:div.border-data {:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:div.element-set-options-group {:style {:display (when @open-shadow "none")}}
[:div.element-set-actions-button
{:on-click #(reset! open-shadow true)}
@ -152,6 +173,7 @@
:placeholder "--"
:on-focus (select-text adv-offset-x-ref)
:on-change (update-attr index :offset-x valid-number? basic-offset-x-ref)
:on-blur on-blur
:value (:offset-x value)}]
[:span.after (tr "workspace.options.shadow-options.offsetx")]]
@ -161,6 +183,7 @@
:placeholder "--"
:on-focus (select-text adv-offset-y-ref)
:on-change (update-attr index :offset-y valid-number? basic-offset-y-ref)
:on-blur on-blur
:value (:offset-y value)}]
[:span.after (tr "workspace.options.shadow-options.offsety")]]]
@ -171,6 +194,7 @@
:placeholder "--"
:on-focus (select-text adv-blur-ref)
:on-change (update-attr index :blur valid-number? basic-blur-ref)
:on-blur on-blur
:min 0
:value (:blur value)}]
[:span.after (tr "workspace.options.shadow-options.blur")]]
@ -181,6 +205,7 @@
:placeholder "--"
:on-focus (select-text adv-spread-ref)
:on-change (update-attr index :spread valid-number?)
:on-blur on-blur
:value (:spread value)}]
[:span.after (tr "workspace.options.shadow-options.spread")]]]
@ -194,15 +219,33 @@
:on-change (update-color index)
:on-detach (detach-color index)
:on-open #(st/emit! (dwu/start-undo-transaction :color-row))
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]]]))
:on-close #(st/emit! (dwu/commit-undo-transaction :color-row))}]]]]]))
(mf/defc shadow-menu
[{:keys [ids type values] :as props}]
(let [on-remove-all-shadows
(fn [_] (st/emit! (dch/update-shapes ids #(dissoc % :shadow))))
handle-reorder
(mf/use-callback
(mf/deps ids)
(fn [new-index]
(fn [index]
(st/emit! (dc/reorder-shadows ids index new-index)))))
disable-drag (mf/use-state false)
select-all (fn [event]
(when (not @disable-drag)
(dom/select-text! (dom/get-target event)))
(reset! disable-drag true))
on-blur (fn [_]
(reset! disable-drag false))
on-add-shadow
(fn []
(st/emit! (dch/update-shapes ids #(update % :shadow (fnil conj []) (create-shadow)) )))]
(fn [_]
(st/emit! (dc/add-shadow ids (create-shadow))))]
[:div.element-set.shadow-options
[:div.element-set-title
[:span
@ -224,9 +267,14 @@
i/minus]]]]
(seq (:shadow values))
[:& h/sortable-container {}
[:div.element-set-content
(for [[index value] (d/enumerate (:shadow values []))]
[:& shadow-entry {:key (str "shadow-" index)
:ids ids
:value value
:index index}])])]))
:on-reorder (handle-reorder index)
:select-all select-all
:disable-drag disable-drag
:on-blur on-blur
:index index}])]])]))