Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

♻️ Refactor frame grid options

Browse source
This commit is contained in:
Andrés Moya 2021-01-08 11:24:12 +01:00
parent b9e4861f16
commit f75ec43b71
1 changed files with 37 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs
View file

@ -37,74 +37,72 @@
:separator :separator
18 12 10 8 6 4 3 2]) 18 12 10 8 6 4 3 2])
(mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}] (mf/defc grid-options
[{:keys [grid frame default-grid-params on-change on-remove on-save-grid]}]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
size-options (get-size-options locale) size-options (get-size-options locale)
state (mf/use-state {:show-advanced-options false state (mf/use-state {:show-advanced-options false})
:changes {}}) {:keys [type display params]} grid
{:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
toggle-advanced-options #(swap! state update :show-advanced-options not) toggle-advanced-options
#(swap! state update :show-advanced-options not)
emit-changes!
(fn [update-fn]
(swap! state update :changes update-fn)
(when on-change (on-change (d/deep-merge grid (-> @state :changes update-fn)))))
handle-toggle-visibility handle-toggle-visibility
(fn [event] (fn [event]
(emit-changes! (fn [changes] (update changes :display #(if (nil? %) false (not %)))))) (when on-change
(on-change (update grid :display #(if (nil? %) false (not %))))))
handle-remove-grid handle-remove-grid
(fn [event] (fn [event]
(when on-remove (on-remove))) (when on-remove (on-remove)))
handle-change-type handle-change-type
(fn [type] (fn [grid-type]
(let [defaults (type default-grid-params) (let [defaults (grid-type default-grid-params)]
keys (keys defaults) (when on-change
current-changes (-> @state :changes :params (select-keys keys)) (on-change (assoc grid
;; We give more priority to the current changes :type grid-type
params (merge defaults current-changes) :params defaults)))))
to-merge {:type type :params params}]
(emit-changes! #(d/deep-merge % to-merge))))
handle-change handle-change
(fn [& keys] (fn [& keys]
(fn [value] (fn [value]
(emit-changes! #(assoc-in % keys value)))) (when on-change
(on-change (assoc-in grid keys value)))))
handle-change-size handle-change-size
(fn [size] (fn [size]
(let [grid (d/deep-merge grid (:changes @state)) (let [{:keys [margin gutter item-length]} (:params grid)
{:keys [margin gutter item-length]} (:params grid)
frame-length (if (= :column (:type grid)) (:width frame) (:height frame)) frame-length (if (= :column (:type grid)) (:width frame) (:height frame))
item-length (if (or (nil? size) (= :auto size)) item-length (if (or (nil? size) (= :auto size))
(-> (gg/calculate-default-item-length frame-length margin gutter) (-> (gg/calculate-default-item-length frame-length margin gutter)
(mth/precision 2)) (mth/precision 2))
item-length)] item-length)]
(emit-changes! #(-> % (when on-change
(assoc-in [:params :size] size) (on-change (-> grid
(assoc-in [:params :item-length] item-length))))) (assoc-in [:params :size] size)
(assoc-in [:params :item-length] item-length))))))
handle-change-item-length handle-change-item-length
(fn [item-length] (fn [item-length]
(let [{:keys [margin gutter size]} (->> @state :changes :params (d/deep-merge (:params grid))) (let [{:keys [margin gutter size]} (:params grid)
size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)] size (if (and (nil? item-length) (or (nil? size) (= :auto size))) 12 size)]
(emit-changes! #(-> % (when on-change
(assoc-in [:params :size] size) (on-change (-> grid
(assoc-in [:params :item-length] item-length))))) (assoc-in [:params :size] size)
(assoc-in [:params :item-length] item-length))))))
handle-change-color handle-change-color
(fn [color] (fn [color]
(emit-changes! #(-> % (assoc-in [:params :color] color)))) (when on-change
(on-change (assoc-in grid [:params :color] color))))
handle-detach-color handle-detach-color
(fn [] (fn []
(emit-changes! #(-> % (assoc-in [:params :color] (when on-change
(-> (:color params) (on-change (-> grid
(assoc :id nil) (d/dissoc-in [:params :color :id])
(assoc :file-id nil)))))) (d/dissoc-in [:params :color :file-id])))))
handle-use-default handle-use-default
(fn [] (fn []
@ -113,14 +111,15 @@
params (-> params params (-> params
(assoc-in [:color :color] color) (assoc-in [:color :color] color)
(update :color dissoc :value))] (update :color dissoc :value))]
(emit-changes! #(hash-map :params params)))) (when on-change
(on-change (assoc grid :params params)))))
handle-set-as-default handle-set-as-default
(fn [] (fn []
(let [current-grid (d/deep-merge grid (-> @state :changes))] (when on-save-grid
(on-save-grid current-grid))) (on-save-grid grid)))
is-default (= (->> @state :changes (d/deep-merge grid) :params) is-default (= (->> grid :params)
(->> grid :type default-grid-params))] (->> grid :type default-grid-params))]
[:div.grid-option [:div.grid-option