✨ Add locales for grid options

frontend/resources/locales.json

@@ -355,7 +355,7 @@
     }
   },
   "header.sitemap" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:68" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:67" ],
     "translations" : {
       "en" : null,
       "fr" : null
@@ -822,91 +822,91 @@
     }
   },
   "workspace.header.menu.disable-dynamic-alignment" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:116" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:113" ],
     "translations" : {
       "en" : "Disable dynamic alignment"
     }
   },
   "workspace.header.menu.disable-snap-grid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:92" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:89" ],
     "translations" : {
       "en" : "Disable snap to grid"
     }
   },
   "workspace.header.menu.enable-dynamic-alignment" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:117" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:114" ],
     "translations" : {
       "en" : "Enable dynamic aligment"
     }
   },
   "workspace.header.menu.enable-snap-grid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:93" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:90" ],
     "translations" : {
       "en" : "Snap to grid"
     }
   },
   "workspace.header.menu.hide-grid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:86" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:83" ],
     "translations" : {
       "en" : "Hide grid"
     }
   },
   "workspace.header.menu.hide-layers" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:98" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:95" ],
     "translations" : {
       "en" : "Hide layers"
     }
   },
   "workspace.header.menu.hide-libraries" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:110" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:107" ],
     "translations" : {
       "en" : "Hide libraries"
     }
   },
   "workspace.header.menu.hide-palette" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:104" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:101" ],
     "translations" : {
       "en" : "Hide color palette"
     }
   },
   "workspace.header.menu.hide-rules" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:80" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:77" ],
     "translations" : {
       "en" : "Hide rules"
     }
   },
   "workspace.header.menu.show-grid" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:87" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:84" ],
     "translations" : {
       "en" : "Show grid"
     }
   },
   "workspace.header.menu.show-layers" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:99" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:96" ],
     "translations" : {
       "en" : "Show layers"
     }
   },
   "workspace.header.menu.show-libraries" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:111" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:108" ],
     "translations" : {
       "en" : "Show libraries"
     }
   },
   "workspace.header.menu.show-palette" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:105" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:102" ],
     "translations" : {
       "en" : "Show color palette"
     }
   },
   "workspace.header.menu.show-rules" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:81" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:78" ],
     "translations" : {
       "en" : "Show rules"
     }
   },
   "workspace.header.viewer" : {
-    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:154" ],
+    "used-in" : [ "src/uxbox/main/ui/workspace/header.cljs:151" ],
     "translations" : {
       "en" : "View mode (Ctrl + P)",
       "fr" : "Mode visualisation (Ctrl + P)"
@@ -1104,6 +1104,120 @@
     },
     "unused" : true
   },
+  "workspace.options.grid.auto" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:40" ],
+    "translations" : {
+      "en" : "Auto"
+    }
+  },
+  "workspace.options.grid.column" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:125" ],
+    "translations" : {
+      "en" : "Columns"
+    }
+  },
+  "workspace.options.grid.params.columns" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:164" ],
+    "translations" : {
+      "en" : "Columns"
+    }
+  },
+  "workspace.options.grid.params.gutter" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:191" ],
+    "translations" : {
+      "en" : "Gutter"
+    }
+  },
+  "workspace.options.grid.params.height" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ],
+    "translations" : {
+      "en" : "Height"
+    }
+  },
+  "workspace.options.grid.params.margin" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:196" ],
+    "translations" : {
+      "en" : "Margin"
+    }
+  },
+  "workspace.options.grid.params.rows" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ],
+    "translations" : {
+      "en" : "Rows"
+    }
+  },
+  "workspace.options.grid.params.set-default" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:208" ],
+    "translations" : {
+      "en" : "Set as default"
+    }
+  },
+  "workspace.options.grid.params.size" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:149" ],
+    "translations" : {
+      "en" : "Size"
+    }
+  },
+  "workspace.options.grid.params.type" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:172" ],
+    "translations" : {
+      "en" : "Type"
+    }
+  },
+  "workspace.options.grid.params.type.center" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:176" ],
+    "translations" : {
+      "en" : "Center"
+    }
+  },
+  "workspace.options.grid.params.type.left" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:175" ],
+    "translations" : {
+      "en" : "Left"
+    }
+  },
+  "workspace.options.grid.params.type.right" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:177" ],
+    "translations" : {
+      "en" : "Right"
+    }
+  },
+  "workspace.options.grid.params.type.stretch" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:174" ],
+    "translations" : {
+      "en" : "Stretch"
+    }
+  },
+  "workspace.options.grid.params.use-default" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:206" ],
+    "translations" : {
+      "en" : "Use default"
+    }
+  },
+  "workspace.options.grid.params.width" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ],
+    "translations" : {
+      "en" : "Width"
+    }
+  },
+  "workspace.options.grid.row" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:126" ],
+    "translations" : {
+      "en" : "Rows"
+    }
+  },
+  "workspace.options.grid.square" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:124" ],
+    "translations" : {
+      "en" : "Square"
+    }
+  },
+  "workspace.options.grid.title" : {
+    "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:220" ],
+    "translations" : {
+      "en" : "Grid & Layouts"
+    }
+  },
   "workspace.options.line-height-letter-spacing" : {
     "translations" : {
       "en" : "Line height and Letter spacing",

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -285,7 +285,6 @@
       position: absolute;
       left: 0;
       z-index: 12;
-      // width: 200px;
       max-height: 30rem;
       min-width: 7rem;
       overflow-y: auto;

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -21,7 +21,7 @@
    [uxbox.main.ui.workspace.images :refer [import-image-modal]]
    [uxbox.main.ui.components.dropdown :refer [dropdown]]
    [uxbox.main.ui.workspace.presence :as presence]
-   [uxbox.util.i18n :as i18n :refer [tr t]]
+   [uxbox.util.i18n :as i18n :refer [t]]
    [uxbox.util.data :refer [classnames]]
    [uxbox.util.math :as mth]
    [uxbox.util.router :as rt]))

frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs

@@ -23,7 +23,8 @@
    [uxbox.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
    [uxbox.main.ui.components.select :refer [select]]
    [uxbox.main.ui.components.editable-select :refer [editable-select]]
-   [uxbox.main.ui.components.dropdown :refer [dropdown]]))
+   [uxbox.main.ui.components.dropdown :refer [dropdown]]
+   [uxbox.util.i18n :as i18n :refer [tr t]]))
 
 (mf/defc advanced-options [{:keys [visible? on-close children]}]
   (when visible?
@@ -36,12 +37,13 @@
       children]]))
 
 (def ^:private size-options
-  [{:value :auto :label "Auto"}
+  [{:value :auto :label (tr "workspace.options.grid.auto")}
    :separator
    18 12 10 8 6 4 3 2])
 
 (mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}]
-  (let [state (mf/use-state {:show-advanced-options false
+  (let [locale (i18n/use-locale)
+        state (mf/use-state {:show-advanced-options false
                              :changes {}})
         {:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
 
@@ -119,9 +121,9 @@
 
       [:& select {:class "flex-grow"
                   :default-value type
-                  :options [{:value :square :label "Square"}
+                  :options [{:value :square :label (t locale "workspace.options.grid.square")}
-                            {:value :column :label "Columns"}
+                            {:value :column :label (t locale "workspace.options.grid.column")}
-                            {:value :row :label "Rows"}]
+                            {:value :row :label (t locale "workspace.options.grid.row")}]
                   :on-change handle-change-type}]
 
       (if (= type :square)
@@ -144,14 +146,14 @@
      [:& advanced-options {:visible? (:show-advanced-options @state)
                            :on-close toggle-advanced-options}
       (when (= :square type)
-        [:& input-row {:label "Size"
+        [:& input-row {:label (t locale "workspace.options.grid.params.size")
                        :class "pixels"
                        :min 1
                        :value (:size params)
                        :on-change (handle-change :params :size)}])
 
       (when (= :row type)
-        [:& input-row {:label "Rows"
+        [:& input-row {:label (t locale "workspace.options.grid.params.rows")
                        :type :editable-select
                        :options size-options
                        :value (:size params)
@@ -159,7 +161,7 @@
                        :on-change handle-change-size}])
 
       (when (= :column type)
-        [:& input-row {:label "Columns"
+        [:& input-row {:label (t locale "workspace.options.grid.params.columns")
                        :type :editable-select
                        :options size-options
                        :value (:size params)
@@ -167,29 +169,31 @@
                        :on-change handle-change-size}])
 
       (when (#{:row :column} type)
-        [:& input-row {:label "Type"
+        [:& input-row {:label (t locale "workspace.options.grid.params.type")
                        :type :select
-                       :options [{:value :stretch :label "Stretch"}
+                       :options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")}
-                                 {:value :left :label "Left"}
+                                 {:value :left :label (t locale "workspace.options.grid.params.type.left")}
-                                 {:value :center :label "Center"}
+                                 {:value :center :label (t locale "workspace.options.grid.params.type.center")}
-                                 {:value :right :label "Right"}]
+                                 {:value :right :label (t locale "workspace.options.grid.params.type.right")}]
                        :value (:type params)
                        :on-change (handle-change :params :type)}])
 
       (when (#{:row :column} type)
-        [:& input-row {:label (if (= :row type) "Height" "Width")
+        [:& input-row {:label (if (= :row type)
+                                (t locale "workspace.options.grid.params.width")
+                                (t locale "workspace.options.grid.params.height"))
                        :class "pixels"
                        :value (or (:item-length params) "")
                        :on-change handle-change-item-length}])
 
       (when (#{:row :column} type)
         [:*
-         [:& input-row {:label "Gutter"
+         [:& input-row {:label (t locale "workspace.options.grid.params.gutter")
                         :class "pixels"
                         :value (:gutter params)
                         :min 0
                         :on-change (handle-change :params :gutter)}]
-         [:& input-row {:label "Margin"
+         [:& input-row {:label (t locale "workspace.options.grid.params.margin")
                         :class "pixels"
                         :min 0
                         :value (:margin params)
@@ -199,12 +203,13 @@
                      :on-change (handle-change :params :color)}]
       [:div.row-flex
        [:button.btn-options {:disabled is-default
-                             :on-click handle-use-default} "Use default"]
+                             :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]
        [:button.btn-options {:disabled is-default
-                             :on-click handle-set-as-default} "Set as default"]]]]))
+                             :on-click handle-set-as-default} (t locale "workspace.options.grid.params.set-default")]]]]))
 
 (mf/defc frame-grid [{:keys [shape]}]
-  (let [id (:id shape)
+  (let [locale (i18n/use-locale)
+        id (:id shape)
         default-grid-params (merge dw/default-grid-params (mf/deref refs/workspace-saved-grids))
         handle-create-grid #(st/emit! (dw/add-frame-grid id))
         handle-remove-grid (fn [index] #(st/emit! (dw/remove-frame-grid id index)))
@@ -212,7 +217,7 @@
         handle-save-grid (fn [grid] (st/emit! (dw/set-default-grid (:type grid) (:params grid))))]
     [:div.element-set
      [:div.element-set-title
-      [:span "Grids"]
+      [:span (t locale "workspace.options.grid.title")]
       [:div.add-page {:on-click handle-create-grid} i/close]]
 
      (when (not (empty? (:grids shape)))