✨ Add grid cell options

frontend/resources/images/icons/grid-layout-mode.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+  <path d="M0 0h500v500H0Zm50 50v400h400V50Zm241.416 73.877c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zM291.416 281.77c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234z"/>
+</svg>

frontend/resources/images/icons/set-thumbnail.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
-  <path d="M0 0h500v500H0Zm50 50v400h400V50Zm241.416 73.877c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.637c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.637c0-5.652-4.582-10.234-10.234-10.234zM291.416 281.77c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.638c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234zm-157.894 0c-5.652 0-10.234 4.582-10.234 10.234v71.638c0 5.652 4.582 10.234 10.234 10.234h71.637c5.652 0 10.234-4.582 10.234-10.234v-71.638c0-5.652-4.582-10.234-10.234-10.234z"/>
+  <path d="M0 0v35.454L35.454 0Zm44 0v11.232h77.06v77.642h11.232V0ZM0 43.418v88.874h88.292V121.06h-77.06V43.418Zm132.292 53.42-35.454 35.454h35.454Zm-86.73-57.15a5.877 5.877 0 0 0-5.874 5.873v41.17a5.877 5.877 0 0 0 5.873 5.873h41.17a5.877 5.877 0 0 0 5.873-5.873V45.56a5.877 5.877 0 0 0-5.873-5.873z"/>
 </svg>

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 {

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))

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
+                     :auto     i/minus
-                     :end    i/align-self-row-right
+                     :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
+                     :auto     i/minus
-                     :end   i/align-self-column-bottom
+                     :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}]

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
+  (let [position-mode (mf/use-state :auto) ;; TODO this should come from shape
-   [:div.element-set-title
-    [:span "Grid Cell"]]
 
-   [:div.element-set-content.layout-item-menu
+        set-position-mode (fn [mode]
-    [:div.layout-row
+                            (reset! position-mode mode))
-     [:div.row-title.sizing "Position"]
+
-     [:div (str row "," column)]]]])
+
+        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}]]]]]))