From 284fc2acbcfcb47f790e7a15018933e3bc56d2d0 Mon Sep 17 00:00:00 2001 From: Eva Date: Tue, 21 Feb 2023 14:33:15 +0100 Subject: [PATCH] :sparkles: Add grid cell options --- .../images/icons/grid-layout-mode.svg | 3 + .../resources/images/icons/set-thumbnail.svg | 4 +- .../partials/sidebar-element-options.scss | 58 ++++++- frontend/src/app/main/ui/icons.cljs | 3 +- .../options/menus/layout_container.cljs | 16 +- .../sidebar/options/shapes/grid_cell.cljs | 159 +++++++++++++++++- 6 files changed, 225 insertions(+), 18 deletions(-) create mode 100644 frontend/resources/images/icons/grid-layout-mode.svg diff --git a/frontend/resources/images/icons/grid-layout-mode.svg b/frontend/resources/images/icons/grid-layout-mode.svg new file mode 100644 index 000000000..c90cf5c85 --- /dev/null +++ b/frontend/resources/images/icons/grid-layout-mode.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/set-thumbnail.svg b/frontend/resources/images/icons/set-thumbnail.svg index c90cf5c85..e82fa55b1 100644 --- a/frontend/resources/images/icons/set-thumbnail.svg +++ b/frontend/resources/images/icons/set-thumbnail.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index f5265b7bd..2f7991f9b 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1624,7 +1624,8 @@ } .layout-menu, -.layout-item-menu { +.layout-item-menu, +.layout-grid-item-menu { font-family: "worksans", sans-serif; svg { height: 16px; @@ -1660,6 +1661,7 @@ display: flex; width: 100%; max-width: 185px; + &.wrap { flex-direction: column; gap: 5px; @@ -1783,6 +1785,32 @@ margin: 7px 0; } } + .position-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + width: 100%; + max-width: 185px; + height: 26px; + border-radius: 4px; + border: 1px solid $color-gray-60; + .position-btn { + display: flex; + justify-content: center; + align-items: center; + background: transparent; + border: none; + cursor: pointer; + color: $color-gray-20; + border-right: 1px solid $color-gray-60; + &:last-child { + border-right: none; + } + &.active, + &:hover { + color: $color-primary; + } + } + } } .no-wrap { display: flex; @@ -2220,6 +2248,34 @@ } } } + .manage-grid-columns { + margin-left: 60px; + margin-bottom: 10px; + .grid-auto, + .grid-manual { + display: grid; + grid-template-columns: 1fr 1fr; + .grid-columns-auto, + .grid-rows-auto { + display: grid; + grid-template-columns: 20px 1fr; + .icon { + display: flex; + justify-content: center; + align-items: center; + } + input { + width: 80%; + } + } + } + .grid-manual { + .input-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + } + } + } } .advanced-ops { diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 6d511b0d8..edc033bfc 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index fd4f032e1..1643228d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -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}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs index 7f46e045b..838e10794 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs @@ -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}]]]]]))