Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Add horizontal/vertical padding toggle

Browse source
This commit is contained in:
Florian Schroedl 2024-07-23 10:37:51 +02:00
parent 2411eeb644
commit 0e858d880d
1 changed files with 68 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -259,33 +259,76 @@
(defn spacing-attribute-actions [{:keys [token-id selected-shapes] :as _props}] (defn spacing-attribute-actions [{:keys [token-id selected-shapes] :as _props}]
(let [token {:id token-id} (let [token {:id token-id}
on-update-shape (fn [resolved-value shape-ids attrs]
(dwsl/update-layout shape-ids {:layout-padding (zipmap attrs (repeat resolved-value))}))
padding-attrs (:padding spacing) padding-attrs (:padding spacing)
all-padding-attrs (into #{} (keys padding-attrs)) all-padding-attrs (into #{} (keys padding-attrs))
{:keys [all-selected? selected-pred shape-ids]} (attribute-actions token selected-shapes all-padding-attrs) {:keys [all-selected? selected-pred shape-ids]} (attribute-actions token selected-shapes all-padding-attrs)
single-padding (->> padding-attrs horizontal-attributes #{:p1 :p3}
(map (fn [[attr title]] horizontal-padding-selected? (and
(let [selected? (selected-pred attr)] (not all-selected?)
{:title title (every? selected-pred horizontal-attributes))
:selected? (and (not all-selected?) selected?) vertical-attributes #{:p2 :p4}
:action #(let [props {:attributes #{attr} vertical-padding-selected? (and
:token token (not all-selected?)
:shape-ids shape-ids} (every? selected-pred vertical-attributes))
event (cond padding-items [{:title "All"
all-selected? (-> (assoc props :attributes-to-remove #{:r1 :r2 :r3 :r4 :rx :ry}) :selected? all-selected?
(wtc/apply-token)) :action (fn []
selected? (wtc/unapply-token props) (let [props {:attributes all-padding-attrs
:else (-> (assoc props :on-update-shape wtc/update-shape-radius-single-corner) :token token
(wtc/apply-token)))] :shape-ids shape-ids}]
(st/emit! event))}))) (if all-selected?
(into)) (st/emit! (wtc/unapply-token props))
all-padding (let [props {:attributes all-padding-attrs (st/emit! (wtc/apply-token (assoc props :on-update-shape on-update-shape))))))}
:token token {:title "Horizontal"
:shape-ids shape-ids}] :selected? horizontal-padding-selected?
{:title "All" :action (fn []
:selected? all-selected? (let [props {:token token
:action #(if all-selected? :shape-ids shape-ids}
(st/emit! (wtc/unapply-token props)) event (cond
(st/emit! (wtc/apply-token (assoc props :on-update-shape wtc/update-shape-radius-all))))}) all-selected? (wtc/apply-token (assoc props :attributes-to-remove vertical-attributes))
horizontal-padding-selected? (wtc/apply-token (assoc props :attributes-to-remove horizontal-attributes))
:else (wtc/apply-token (assoc props
:attributes horizontal-attributes
:on-update-shape on-update-shape)))]
(st/emit! event)))}
{:title "Vertical"
:selected? vertical-padding-selected?
:action (fn []
(let [props {:token token
:shape-ids shape-ids}
event (cond
all-selected? (wtc/apply-token (assoc props :attributes-to-remove vertical-attributes))
vertical-padding-selected? (wtc/apply-token (assoc props :attributes-to-remove vertical-attributes))
:else (wtc/apply-token (assoc props
:attributes vertical-attributes
:on-update-shape on-update-shape)))]
(st/emit! event)))}]
;; single-padding (->> padding-attrs
;; (map (fn [[attr title]]
;; (let [selected? (selected-pred attr)]
;; {:title title
;; :selected? (and (not all-selected?) selected?)
;; :action #(let [props {:attributes #{attr}
;; :token token
;; :shape-ids shape-ids}
;; event (cond
;; all-selected? (-> (assoc props :attributes-to-remove all-padding-attrs)
;; (wtc/apply-token))
;; selected? (wtc/unapply-token props)
;; :else (-> (assoc props :on-update-shape wtc/update-shape-radius-single-corner)
;; (wtc/apply-token)))]
;; (st/emit! event))})))
;; (into))
;; all-padding (let [props {:attributes all-padding-attrs
;; :token token
;; :shape-ids shape-ids}]
;; {:title "All"
;; :selected? all-selected?
;; :action #(if all-selected?
;; (st/emit! (wtc/unapply-token props))
;; (st/emit! (wtc/apply-token (assoc props :on-update-shape wtc/update-shape-radius-all))))})
gap-attrs (:gap spacing) gap-attrs (:gap spacing)
all-gap-attrs (into #{} (keys gap-attrs)) all-gap-attrs (into #{} (keys gap-attrs))
{:keys [all-selected? selected-pred shape-ids]} (attribute-actions token selected-shapes all-gap-attrs) {:keys [all-selected? selected-pred shape-ids]} (attribute-actions token selected-shapes all-gap-attrs)
@ -313,8 +356,7 @@
:action #(if all-selected? :action #(if all-selected?
(st/emit! (wtc/unapply-token props)) (st/emit! (wtc/unapply-token props))
(st/emit! (wtc/apply-token (assoc props :on-update-shape wtc/update-shape-radius-all))))})] (st/emit! (wtc/apply-token (assoc props :on-update-shape wtc/update-shape-radius-all))))})]
(concat [all-padding] (concat padding-items
single-padding
[:separator] [:separator]
[all-gap] [all-gap]
single-gap))) single-gap)))