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

⚡ Add performance enhacenements to layout-container menu (part 4)

Browse source 
Mainly improve performance and minor code refactor on column and row
justify buttons.
This commit is contained in:
Andrey Antukh 2024-02-21 12:16:27 +01:00
parent 2d5500d96f
commit 0735fa93f6
1 changed files with 75 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

116
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -642,7 +642,7 @@
(mf/defc align-grid-row (mf/defc align-grid-row
{::mf/props :obj} {::mf/props :obj}
[{:keys [is-column align-items set-align]}] [{:keys [is-column align-items set-align]}]
(let [type (if is-column :column :row)] (let [type (if ^boolean is-column :column :row)]
[:& radio-buttons {:selected (d/name align-items) [:& radio-buttons {:selected (d/name align-items)
:on-change #(set-align % type) :on-change #(set-align % type)
:name (dm/str "flex-align-items-" (d/name type))} :name (dm/str "flex-align-items-" (d/name type))}
@ -661,18 +661,48 @@
(mf/defc justify-grid-row (mf/defc justify-grid-row
{::mf/props :obj} {::mf/props :obj}
[{:keys [is-column justify-items set-justify]}] [{:keys [is-column value on-change]}]
(let [type (if is-column :column :row)] (let [type (if ^boolean is-column "column" "row")]
[:& radio-buttons {:selected (name value)
:on-change on-change
:decode-fn keyword
:name (dm/str "grid-justify-items-" type)}
[:& radio-buttons {:selected (d/name justify-items) [:& radio-button {:key "justify-item-start"
:on-change #(set-justify % type) :value "start"
:name (dm/str "grid-justify-items-" (d/name type))} :icon (get-layout-grid-icon-refactor :justify-items :start is-column)
(for [justify [:start :center :end :space-around :space-between :stretch]] :title "Justify items start"
[:& radio-button {:key (dm/str "justify-item-" (d/name justify)) :id (dm/str "justify-items-start-" type)}]
:value (d/name justify)
:icon (get-layout-grid-icon-refactor :justify-items justify is-column) [:& radio-button {:key "justify-item-center"
:title (dm/str "Justify items " (d/name justify)) :value "center"
:id (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])])) :icon (get-layout-grid-icon-refactor :justify-items :center is-column)
:title "Justify items center"
:id (dm/str "justify-items-center-" type)}]
[:& radio-button {:key "justify-item-end"
:value "end"
:icon (get-layout-grid-icon-refactor :justify-items :end is-column)
:title "Justify items end"
:id (dm/str "justify-items-end-" type)}]
[:& radio-button {:key "justify-item-space-around"
:value "space-around"
:icon (get-layout-grid-icon-refactor :justify-items :space-around is-column)
:title "Justify items space-around"
:id (dm/str "justify-items-space-around-" type)}]
[:& radio-button {:key "justify-item-space-between"
:value "space-between"
:icon (get-layout-grid-icon-refactor :justify-items :space-between is-column)
:title "Justify items space-between"
:id (dm/str "justify-items-space-between-" type)}]
[:& radio-button {:key "justify-item-stretch"
:value "stretch"
:icon (get-layout-grid-icon-refactor :justify-items :stretch is-column)
:title "Justify items stretch"
:id (dm/str "justify-items-stretch-" type)}]]))
(defn- manage-values (defn- manage-values
[{:keys [type value]}] [{:keys [type value]}]
@ -978,14 +1008,17 @@
grid-enabled? (features/use-feature "layout/grid") grid-enabled? (features/use-feature "layout/grid")
set-justify-grid on-column-justify-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value type] (fn [value]
(let [value (keyword value)] (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))
(if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-justify-content value})) on-row-justify-change
(st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) (mf/use-fn
(mf/deps ids)
(fn [value]
(st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))
handle-show-layout-dropdown handle-show-layout-dropdown
(mf/use-fn (mf/use-fn
@ -1087,7 +1120,7 @@
:on-change on-gap-change :on-change on-gap-change
:value (:layout-gap values)}] :value (:layout-gap values)}]
[:& padding-section {:padding (:layout-padding values) [:& padding-section {:values (:layout-padding values)
:type (:layout-padding-type values) :type (:layout-padding-type values)
:on-type-change change-padding-type :on-type-change change-padding-type
:on-change on-padding-change}]]] :on-change on-padding-change}]]]
@ -1115,15 +1148,14 @@
[:div {:class (stl/css :row :grid-layout-align)} [:div {:class (stl/css :row :grid-layout-align)}
[:& justify-grid-row {:is-column true [:& justify-grid-row {:is-column true
:justify-items grid-justify-content-column :value grid-justify-content-column
:set-justify set-justify-grid}] :on-change on-column-justify-change}]
[:& justify-grid-row {:is-column false [:& justify-grid-row {:is-column false
:justify-items grid-justify-content-row :value grid-justify-content-row
:set-justify set-justify-grid}]] :on-change on-row-justify-change}]]
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:& gap-section {:gap-selected? gap-selected? [:& gap-section {:on-change on-gap-change
:on-change set-gap :value (:layout-gap values)}]]
:gap-value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)} [:div {:class (stl/css :row :padding-section)}
[:& padding-section {:values values [:& padding-section {:values values
@ -1185,19 +1217,21 @@
(st/emit! (dwsl/update-layout ids {:layout-align-items value})) (st/emit! (dwsl/update-layout ids {:layout-align-items value}))
(st/emit! (dwsl/update-layout ids {:layout-justify-items value})))))) (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))))
;; Justify grid ;; Justify grid
grid-justify-content-row (:layout-justify-content values) grid-justify-content-row (:layout-justify-content values)
grid-justify-content-column (:layout-align-content values) grid-justify-content-column (:layout-align-content values)
set-justify-grid on-column-justify-change
(mf/use-fn (mf/use-fn
(mf/deps ids) (mf/deps ids)
(fn [value type] (fn [value]
(let [value (keyword value)] (st/emit! (dwsl/update-layout ids {:layout-align-content value}))))
(if (= type :row)
(st/emit! (dwsl/update-layout ids {:layout-justify-content value})) on-row-justify-change
(st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) (mf/use-fn
(mf/deps ids)
(fn [value]
(st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))
columns-open? (mf/use-state false) columns-open? (mf/use-state false)
rows-open? (mf/use-state false) rows-open? (mf/use-state false)
@ -1293,23 +1327,23 @@
[:div {:class (stl/css :row :grid-layout-align)} [:div {:class (stl/css :row :grid-layout-align)}
[:& justify-grid-row {:is-column true [:& justify-grid-row {:is-column true
:justify-items grid-justify-content-column :value grid-justify-content-column
:set-justify set-justify-grid}] :on-change on-column-justify-change}]
[:& justify-grid-row {:is-column false [:& justify-grid-row {:is-column false
:justify-items grid-justify-content-row :value grid-justify-content-row
:set-justify set-justify-grid}] :on-change on-row-justify-change}]
[:button {:on-click handle-locate-grid [:button {:on-click handle-locate-grid
:class (stl/css :locate-button)} :class (stl/css :locate-button)}
i/locate-refactor]] i/locate-refactor]]
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
[:& gap-section {:gap-selected? gap-selected? [:& gap-section {:on-change on-gap-change
:on-change set-gap :value (:layout-gap values)}]]
:gap-value (:layout-gap values)}]]
[:div {:class (stl/css :row :padding-section)} [:div {:class (stl/css :row :padding-section)}
[:& padding-section {:values values [:& padding-section {:value (:layout-padding values)
:type (:layout-padding-type values)
:on-change-style change-padding-type :on-change-style change-padding-type
:on-change on-padding-change}]] :on-change on-padding-change}]]