mirror of
https://github.com/penpot/penpot.git
synced 2025-05-19 20:46:11 +02:00
✨ Add options to sidebar
This commit is contained in:
Eva
alonso.torres
parent
eb425dc4f2
commit
cc8347a871
13 changed files with 794 additions and 15 deletions
|
|
@ -114,6 +114,16 @@
|
|||
(def full-screen-off (icon-xref :full-screen-off))
|
||||
(def grid (icon-xref :grid))
|
||||
(def grid-snap (icon-xref :grid-snap))
|
||||
(def grid-justify-content-column-around (icon-xref :grid-justify-content-column-around))
|
||||
(def grid-justify-content-column-between (icon-xref :grid-justify-content-column-between))
|
||||
(def grid-justify-content-column-center (icon-xref :grid-justify-content-column-center))
|
||||
(def grid-justify-content-column-end (icon-xref :grid-justify-content-column-end))
|
||||
(def grid-justify-content-column-start (icon-xref :grid-justify-content-column-start))
|
||||
(def grid-justify-content-row-around (icon-xref :grid-justify-content-row-around))
|
||||
(def grid-justify-content-row-between (icon-xref :grid-justify-content-row-between))
|
||||
(def grid-justify-content-row-center (icon-xref :grid-justify-content-row-center))
|
||||
(def grid-justify-content-row-end (icon-xref :grid-justify-content-row-end))
|
||||
(def grid-justify-content-row-start (icon-xref :grid-justify-content-row-start))
|
||||
(def go-next (icon-xref :go-next))
|
||||
(def go-prev (icon-xref :go-prev))
|
||||
(def help (icon-xref :help))
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -94,8 +95,25 @@
|
|||
:stretch i/align-self-column-strech
|
||||
:baseline i/align-self-column-baseline))))
|
||||
|
||||
(defn get-layout-grid-icon
|
||||
[type val is-col?]
|
||||
(case type
|
||||
:justify-content (if is-col?
|
||||
(case val
|
||||
:start i/grid-justify-content-column-start
|
||||
:end i/grid-justify-content-column-end
|
||||
:center i/grid-justify-content-column-center
|
||||
:space-around i/grid-justify-content-column-around
|
||||
:space-between i/grid-justify-content-column-between)
|
||||
(case val
|
||||
:start i/grid-justify-content-row-start
|
||||
:end i/grid-justify-content-row-end
|
||||
:center i/grid-justify-content-row-center
|
||||
:space-around i/grid-justify-content-row-around
|
||||
:space-between i/grid-justify-content-row-between))))
|
||||
|
||||
(mf/defc direction-btn
|
||||
[{:keys [dir saved-dir set-direction] :as props}]
|
||||
[{:keys [dir saved-dir set-direction icon?] :as props}]
|
||||
(let [handle-on-click
|
||||
(mf/use-callback
|
||||
(mf/deps set-direction dir)
|
||||
|
|
@ -112,7 +130,9 @@
|
|||
:key (dm/str "direction-" dir)
|
||||
:alt (str/replace (str/capital (d/name dir)) "-" " ")
|
||||
:on-click handle-on-click}
|
||||
i/auto-direction]))
|
||||
(if icon?
|
||||
i/auto-direction
|
||||
(str/replace (str/capital (d/name dir)) "-" " "))]))
|
||||
|
||||
(mf/defc wrap-row
|
||||
[{:keys [wrap-type set-wrap] :as props}]
|
||||
|
|
@ -299,6 +319,108 @@
|
|||
:value (:row-gap gap-value)
|
||||
:disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])
|
||||
|
||||
(mf/defc grid-edit-mode
|
||||
[{:keys [active toggle-edit-mode] :as props}]
|
||||
[:*
|
||||
[:button.tooltip.tooltip-bottom-left
|
||||
{:class (dom/classnames :active (= active true))
|
||||
:alt "Grid edit mode"
|
||||
:on-click #(toggle-edit-mode)
|
||||
:style {:padding 0}}
|
||||
i/set-thumbnail]])
|
||||
|
||||
(mf/defc align-grid-row
|
||||
[{:keys [is-col? align-items set-align] :as props}]
|
||||
(let [type (if is-col?
|
||||
:column
|
||||
:row)]
|
||||
[:div.align-items-style
|
||||
(for [align [:start :center :end :stretch :baseline]]
|
||||
[:button.align-start.tooltip
|
||||
{:class (dom/classnames :active (= align-items align)
|
||||
:tooltip-bottom-left (not= align :start)
|
||||
:tooltip-bottom (= align :start))
|
||||
:alt (dm/str "Align items " (d/name align))
|
||||
:on-click #(set-align align % type)
|
||||
:key (dm/str "align-items" (d/name align))}
|
||||
(get-layout-flex-icon :align-items align is-col?)])]))
|
||||
|
||||
(mf/defc justify-grid-row
|
||||
[{:keys [is-col? justify-items set-justify] :as props}]
|
||||
(let [type (if is-col?
|
||||
:column
|
||||
:row)]
|
||||
[:div.justify-content-style
|
||||
(for [align [:start :center :end :space-around :space-between]]
|
||||
[:button.align-start.tooltip
|
||||
{:class (dom/classnames :active (= justify-items align)
|
||||
:tooltip-bottom-left (not= align :start)
|
||||
:tooltip-bottom (= align :start))
|
||||
:alt (dm/str "Justify content " (d/name align))
|
||||
:on-click #(set-justify align % type)
|
||||
:key (dm/str "justify-content" (d/name align))}
|
||||
(get-layout-grid-icon :justify-content align is-col?)])]))
|
||||
|
||||
(defn manage-values [value]
|
||||
(let [quantity (:value value)
|
||||
unit (:unit value)]
|
||||
(case unit
|
||||
:auto (d/name unit)
|
||||
:perc (str/join [quantity "%"])
|
||||
(str/join [quantity (d/name unit)]))))
|
||||
|
||||
(mf/defc grid-columns-row
|
||||
[{:keys [is-col? expanded? column-values toggle add-new-element set-column-value handle-focus handle-blur on-unit-change remove-column] :as props}]
|
||||
(let [column-num (count column-values)
|
||||
direction (if (< 1 column-num)
|
||||
(if is-col?
|
||||
"Columns "
|
||||
"Rows ")
|
||||
(if is-col?
|
||||
"Column "
|
||||
"Row "))
|
||||
column-vals (str/join ", " (map manage-values column-values))
|
||||
generated-name (str direction column-num " (" column-vals ")")]
|
||||
[:div.grid-columns
|
||||
[:div.grid-columns-header
|
||||
[:button.expand-icon
|
||||
{:on-click toggle}
|
||||
i/actions]
|
||||
|
||||
[:div.columns-info
|
||||
generated-name]
|
||||
[:button.add-column
|
||||
{:on-click add-new-element}
|
||||
i/plus]]
|
||||
(when expanded?
|
||||
[:div.columns-info-wrapper
|
||||
(for [column column-values]
|
||||
[:div.column-info
|
||||
[:div.direction-grid-icon
|
||||
(if is-col?
|
||||
i/layout-rows
|
||||
i/layout-columns)]
|
||||
|
||||
[:div.grid-column-value
|
||||
[:> numeric-input {:no-validate true
|
||||
:value (:value column)
|
||||
:on-change set-column-value
|
||||
:on-focus handle-focus
|
||||
:on-blur handle-blur
|
||||
:placeholder "--"}]]
|
||||
[:div.grid-column-unit
|
||||
[:& select
|
||||
{:class "grid-column-unit-selector"
|
||||
:default-value (:unit column)
|
||||
:options [{:value :fr :label "fr"}
|
||||
{:value :auto :label "auto"}
|
||||
{:value :px :label "px"}
|
||||
{:value :perc :label "%"}]
|
||||
:on-change on-unit-change}]]
|
||||
[:button.remove-grid-column
|
||||
{:on-change remove-column}
|
||||
i/minus]])])]))
|
||||
|
||||
(mf/defc layout-container-menu
|
||||
{::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "multiple"]))]}
|
||||
[{:keys [ids _type values multiple] :as props}]
|
||||
|
|
@ -322,7 +444,7 @@
|
|||
set-flex (fn []
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(on-add-layout :flex))
|
||||
|
||||
|
||||
set-grid (fn []
|
||||
(st/emit! (dwsl/remove-layout ids))
|
||||
(on-add-layout :grid))
|
||||
|
|
@ -331,9 +453,6 @@
|
|||
|
||||
saved-dir (:layout-flex-dir values)
|
||||
is-col? (or (= :column saved-dir) (= :column-reverse saved-dir))
|
||||
set-direction
|
||||
(fn [dir]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})))
|
||||
|
||||
;; Wrap type
|
||||
|
||||
|
|
@ -386,7 +505,63 @@
|
|||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||
|
||||
:else
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))]
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
|
||||
|
||||
;; Grid-direction
|
||||
|
||||
saved-grid-dir (:layout-grid-dir values)
|
||||
|
||||
set-direction
|
||||
(fn [dir type]
|
||||
(if (= :flex type)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-dir dir}))))
|
||||
|
||||
;; Align grid
|
||||
align-items-row (:layout-grid-align-row values)
|
||||
align-items-column (:layout-grid-align-column values)
|
||||
set-align-grid (fn [value type]
|
||||
(if (= type :row)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-align-row value}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-align-column value}))))
|
||||
|
||||
;; Justify grid
|
||||
grid-justify-content-row (:layout-grid-justify-row values)
|
||||
grid-justify-content-column (:layout-grid-justify-column values)
|
||||
set-justify-grid (fn [value type]
|
||||
(if (= type :row)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-justify-row value}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-justify-column value}))))
|
||||
|
||||
|
||||
;;Grid columns
|
||||
|
||||
column-grid-values (:layout-grid-column-values values)
|
||||
grid-columns-open? (mf/use-state false)
|
||||
toggle-columns-info (mf/use-callback
|
||||
(fn [_]
|
||||
(swap! grid-columns-open? not)))
|
||||
|
||||
|
||||
|
||||
; Grid rows / columns
|
||||
rows-grid-values (:layout-grid-row-values values)
|
||||
grid-rows-open? (mf/use-state false)
|
||||
toggle-rows-info (mf/use-callback
|
||||
(fn [_]
|
||||
(swap! grid-rows-open? not)))
|
||||
|
||||
;; TODO -> fix this, is doing nothing
|
||||
add-new-element (fn [value type]
|
||||
(if (= type :row)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-row-values value}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-grid-column-values value}))))
|
||||
|
||||
set-column-value (fn[] )
|
||||
handle-focus (fn [])
|
||||
handle-blur (fn [])
|
||||
set-colum-unit (fn [])
|
||||
remove-column (fn [])]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
|
|
@ -395,12 +570,12 @@
|
|||
(if (and (not multiple) (:layout values))
|
||||
[:div.title-actions
|
||||
[:div.layout-btns
|
||||
[:button {:on-click set-flex
|
||||
:class (dom/classnames
|
||||
:active (= :flex layout-type))} "Flex"]
|
||||
[:button {:on-click set-grid
|
||||
:class (dom/classnames
|
||||
:active (= :grid layout-type))} "Grid"]]
|
||||
[:button {:on-click set-flex
|
||||
:class (dom/classnames
|
||||
:active (= :flex layout-type))} "Flex"]
|
||||
[:button {:on-click set-grid
|
||||
:class (dom/classnames
|
||||
:active (= :grid layout-type))} "Grid"]]
|
||||
[:button.remove-layout {:on-click on-remove-layout} i/minus]]
|
||||
|
||||
[:button.add-page {:on-click #(on-add-layout :flex)} i/close])]]
|
||||
|
|
@ -418,7 +593,8 @@
|
|||
[:& direction-btn {:key (d/name dir)
|
||||
:dir dir
|
||||
:saved-dir saved-dir
|
||||
:set-direction set-direction}])]]
|
||||
:set-direction #(set-direction dir :flex)
|
||||
:icon? true}])]]
|
||||
|
||||
[:div.wrap-type
|
||||
[:& wrap-row {:wrap-type wrap-type
|
||||
|
|
@ -456,4 +632,73 @@
|
|||
:on-change-style change-padding-type
|
||||
:on-change on-padding-change}]]
|
||||
|
||||
[:div "GRID TO COME"])))]))
|
||||
[:div.element-set-content.layout-menu
|
||||
[:div.layout-row
|
||||
[:div.direction-wrap.row-title "Direction"]
|
||||
[:div.btn-wrapper
|
||||
[:div.direction
|
||||
[:*
|
||||
(for [dir [:row :column]]
|
||||
[:& direction-btn {:key (d/name dir)
|
||||
:dir dir
|
||||
:saved-dir saved-grid-dir
|
||||
:set-direction #(set-direction dir :grid)
|
||||
:icon? false}])]]
|
||||
|
||||
[:div.edit-mode
|
||||
[:& grid-edit-mode
|
||||
{:active false
|
||||
:toggle-edit-mode ()}]]]]
|
||||
|
||||
[:div.layout-row
|
||||
[:div.align-items-grid.row-title "Align"]
|
||||
[:div.btn-wrapper.align-grid
|
||||
[:& align-grid-row {:is-col? false
|
||||
:align-items align-items-row
|
||||
:set-align set-align-grid}]
|
||||
|
||||
[:& align-grid-row {:is-col? true
|
||||
:align-items align-items-column
|
||||
:set-align set-align-grid}]]]
|
||||
|
||||
[:div.layout-row
|
||||
[:div.jusfiy-content-grid.row-title "Justify"]
|
||||
[:div.btn-wrapper.align-grid
|
||||
[:& justify-grid-row {:is-col? true
|
||||
:align-items grid-justify-content-column
|
||||
:set-justify set-justify-grid}]
|
||||
[:& justify-grid-row {:is-col? false
|
||||
:align-items grid-justify-content-row
|
||||
:set-justify set-justify-grid}]]]
|
||||
|
||||
[:& grid-columns-row {:is-col? true
|
||||
:expanded? @grid-columns-open?
|
||||
:toggle toggle-columns-info
|
||||
:column-values [{:value 1 :unit :fr} {:value 1 :unit :fr}];; column-grid-values
|
||||
:add-new-column add-new-element
|
||||
:set-column-value set-column-value
|
||||
:handle-focus handle-focus
|
||||
:handle-blur handle-blur
|
||||
:set-colum-unit set-colum-unit
|
||||
:remove-column remove-column}]
|
||||
|
||||
[:& grid-columns-row {:is-col? false
|
||||
:expanded? @grid-rows-open?
|
||||
:toggle toggle-rows-info
|
||||
:column-values [{:value "--" :unit :auto} {:value "--" :unit :auto}] ;; column-grid-values
|
||||
:add-new-column add-new-element
|
||||
:set-column-value set-column-value
|
||||
:handle-focus handle-focus
|
||||
:handle-blur handle-blur
|
||||
:set-colum-unit set-colum-unit
|
||||
:remove-column remove-column}]
|
||||
|
||||
[:& gap-section {:is-col? is-col?
|
||||
:wrap-type wrap-type
|
||||
:gap-selected? gap-selected?
|
||||
:set-gap set-gap
|
||||
:gap-value (:layout-gap values)}]
|
||||
|
||||
[:& padding-section {:values values
|
||||
:on-change-style change-padding-type
|
||||
:on-change on-padding-change}]])))]))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue