3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-10 04:47:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add grid cell options

Browse source
This commit is contained in:
Eva 2023-02-21 14:33:15 +01:00 • committed by alonso.torres
parent cc8347a871
commit 284fc2acbc
6 changed files with 225 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main/ui/icons.cljs
View file

@ -113,7 +113,6 @@
(def full-screen (icon-xref :full-screen))
(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))
@ -124,6 +123,8 @@
(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 grid-layout-mode (icon-xref :grid-layout-mode))
(def grid-snap (icon-xref :grid-snap))
(def go-next (icon-xref :go-next))
(def go-prev (icon-xref :go-prev))
(def help (icon-xref :help))

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

@ -83,16 +83,18 @@
:align-self (if is-col?
(case val
:start i/align-self-row-left
:end i/align-self-row-right
:auto i/minus
:start i/align-self-row-left
:end i/align-self-row-right
:center i/align-self-row-center
:stretch i/align-self-row-strech
:stretch i/align-self-row-strech
:baseline i/align-self-row-baseline)
(case val
:start i/align-self-column-top
:end i/align-self-column-bottom
:auto i/minus
:start i/align-self-column-top
:end i/align-self-column-bottom
:center i/align-self-column-center
:stretch i/align-self-column-strech
:stretch i/align-self-column-strech
:baseline i/align-self-column-baseline))))
(defn get-layout-grid-icon
@ -327,7 +329,7 @@
:alt "Grid edit mode"
:on-click #(toggle-edit-mode)
:style {:padding 0}}
i/set-thumbnail]])
i/grid-layout-mode]])
(mf/defc align-grid-row
[{:keys [is-col? align-items set-align] :as props}]

159
frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs
View file

@ -6,17 +6,162 @@
(ns app.main.ui.workspace.sidebar.options.shapes.grid-cell
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.components.numeric-input :refer [numeric-input]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.layout-container :as lyc]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
(mf/defc set-self-alignment
[{:keys [is-col? alignment set-alignment] :as props}]
(let [dir-v [:auto :start :center :end :stretch #_:baseline]]
[:div.align-self-style
(for [align dir-v]
[:button.align-self.tooltip.tooltip-bottom
{:class (dom/classnames :active (= alignment align)
:tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start))
:alt (dm/str "Align self " (d/name align)) ;; TODO fix this tooltip
:on-click #(set-alignment align)
:key (str "align-self" align)}
(lyc/get-layout-flex-icon :align-self align is-col?)])]))
(mf/defc options
{::mf/wrap [mf/memo]}
[{:keys [shape row column] :as props}]
[:div.element-set
[:div.element-set-title
[:span "Grid Cell"]]
(let [position-mode (mf/use-state :auto) ;; TODO this should come from shape
[:div.element-set-content.layout-item-menu
[:div.layout-row
[:div.row-title.sizing "Position"]
[:div (str row "," column)]]]])
set-position-mode (fn [mode]
(reset! position-mode mode))
align-self (mf/use-state :auto) ;; TODO this should come from shape
justify-alignment (mf/use-state :auto) ;; TODO this should come from shape
set-alignment (fn [value]
(reset! align-self value)
#_(if (= align-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
set-justify-self (fn [value]
(reset! justify-alignment value)
#_(if (= align-self value)
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
(st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
column-start (mf/use-state 1)
column-end (mf/use-state 1)
row-start (mf/use-state 1)
row-end (mf/use-state 1)
on-change (fn [side orientation value]
(if (= orientation :column)
(case side
:all ((reset! column-start value)
(reset! column-end value))
:start (reset! column-start value)
:end (reset! column-end value))
(case side
:all ((reset! row-start value)
(reset! row-end value))
:start (reset! row-start value)
:end (reset! row-end value))))
area-name (mf/use-state "header") ;; TODO this should come from shape
on-area-name-change (fn [value]
(reset! area-name value))
on-key-press (fn [event])]
[:div.element-set
[:div.element-set-title
[:span "Grid Cell"]]
[:div.element-set-content.layout-grid-item-menu
[:div.layout-row
[:div.row-title.sizing "Position"]
[:div.position-wrapper
[:button.position-btn
{:on-click #(set-position-mode :auto)
:class (dom/classnames :active (= :auto @position-mode))} "Auto"]
[:button.position-btn
{:on-click #(set-position-mode :manual)
:class (dom/classnames :active (= :manual @position-mode))} "Manual"]
[:button.position-btn
{:on-click #(set-position-mode :area)
:class (dom/classnames :active (= :area @position-mode))} "Area"]]]
[:div.manage-grid-columns
(when (= :auto @position-mode)
[:div.grid-auto
[:div.grid-columns-auto
[:spam.icon i/layout-rows]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :all :column) ;; TODO cambiar este on-change y el value
:value @column-start}]]]
[:div.grid-rows-auto
[:spam.icon i/layout-columns]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :all :row) ;; TODO cambiar este on-change y el value
:value @row-start}]]]])
(when (= :area @position-mode)
[:div.input-wrapper
[:input.input-text
{:key "grid-area-name"
:id "grid-area-name"
:type "text"
:aria-label "grid-area-name"
:placeholder "--"
:default-value @area-name
:auto-complete "off"
:on-change on-area-name-change
:on-key-press on-key-press}]])
(when (or (= :manual @position-mode) (= :area @position-mode))
[:div.grid-manual
[:div.grid-columns-auto
[:spam.icon i/layout-rows]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :start :column) ;; TODO cambiar este on-change y el value
:value @column-start}]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :end :column) ;; TODO cambiar este on-change y el value
:value @column-end}]]]
[:div.grid-rows-auto
[:spam.icon i/layout-columns]
[:div.input-wrapper
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :start :row) ;; TODO cambiar este on-change y el value
:value @row-start}]
[:> numeric-input
{:placeholder "--"
:on-click #(dom/select-target %)
:on-change (partial on-change :end :row) ;; TODO cambiar este on-change y el value
:value @row-end}]]]])]
[:div.layout-row
[:div.row-title "Align"]
[:div.btn-wrapper
[:& set-self-alignment {:is-col? false
:alignment @align-self
:set-alignment set-alignment}]]]
[:div.layout-row
[:div.row-title "Justify"]
[:div.btn-wrapper
[:& set-self-alignment {:is-col? true
:alignment @justify-alignment
:set-alignment set-justify-self}]]]]]))