🌐 Sidebar options i18n

Signed-off-by: mathieu.brunot <mathieu.brunot@monogramm.io>

frontend/src/uxbox/main/locales/en.cljs

@@ -76,8 +76,29 @@
    "ds.project.placeholder" "New project name"
    "ds.project.new" "New project"
 
+   "ds.radius" "Radius"
+   "ds.size" "Size"
    "ds.width" "Width"
    "ds.height" "Height"
+   "ds.style" "Style"
+   "ds.none" "None"
+   "ds.solid" "Solid"
+   "ds.dotted" "Dotted"
+   "ds.dashed" "Dashed"
+   "ds.mixed" "Mixed"
+   "ds.position" "Position"
+   "ds.rotation" "Rotation"
+   "ds.opacity" "Opacity"
+   "ds.color" "Color"
+   "ds.background-color" "Background color"
+   "ds.font-family" "Font family"
+   "ds.size-weight" "Size and Weight"
+   "ds.font-size" "Font Size"
+   "ds.line-height-letter-spacing" "Line height and Letter spacing"
+   "ds.line-height" "Line height"
+   "ds.letter-spacing" "Letter spacing"
+   "ds.text-align" "Text align"
+   "ds.name" "Name"
    "ds.go" "Go go go!"
 
    "ds.accept" "Accept"

frontend/src/uxbox/main/locales/fr.cljs

@@ -76,8 +76,29 @@
    "ds.project.placeholder" "Nom du nouveau projet"
    "ds.project.new" "Nouveau projet"
 
+   "ds.radius" "Rayon"
+   "ds.size" "Taille"
    "ds.width" "Largeur"
    "ds.height" "Hauteur"
+   "ds.style" "Style"
+   "ds.none" "Aucun"
+   "ds.solid" "Solide"
+   "ds.dotted" "Pointillé"
+   "ds.dashed" "Tiré"
+   "ds.mixed" "Mixte"
+   "ds.position" "Position"
+   "ds.rotation" "Rotation"
+   "ds.opacity" "Opacité"
+   "ds.color" "Couleur"
+   "ds.background-color" "Couleur d'arrière-plan"
+   "ds.font-family" "Police de caractères"
+   "ds.size-weight" "Taille et graisse"
+   "ds.font-size" "Taille de police"
+   "ds.line-height-letter-spacing" "Hauteur de ligne et Espacement de caractères"
+   "ds.line-height" "Hauteur de ligne"
+   "ds.letter-spacing" "Espacement de caractères"
+   "ds.text-align" "Alignement de texte"
+   "ds.name" "Nom"
    "ds.go" "C'est parti !"
 
    "ds.accept" "Accepter"

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

@@ -28,7 +28,7 @@
    [uxbox.main.ui.workspace.sidebar.options.text :as options-text]
    [uxbox.util.data :as data]
    [uxbox.util.dom :as dom]
-   [uxbox.util.i18n :refer (tr)]))
+   [uxbox.util.i18n :refer [tr]]))
 
 ;; --- Constants
 

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

@@ -30,11 +30,11 @@
    [:div.element-set-title (:name menu)]
    [:div.element-set-content
     ;; SLIDEBAR FOR ROTATION AND OPACITY
-    [:span "Size"]
+    [:span (tr "ds.size")]
     [:div.row-flex
      [:div.input-element.pixels
       [:input.input-text
-       {:placeholder "Width"
+       {:placeholder (tr "ds.width")
         :type "number"
         :min "0"
         :value (precision-or-0 (:rx shape 0) 2)
@@ -45,13 +45,13 @@
 
      [:div.input-element.pixels
       [:input.input-text
-       {:placeholder "Height"
+       {:placeholder (tr "ds.height")
         :type "number"
         :min "0"
         :value (precision-or-0 (:ry shape 0) 2)
         :on-change #(on-size-change % shape :ry)}]]]
 
-    [:span "Position"]
+    [:span (tr "ds.position")]
     [:div.row-flex
      [:div.input-element.pixels
       [:input.input-text
@@ -66,7 +66,7 @@
         :value (precision-or-0 (:cy shape 0) 2)
         :on-change #(on-position-change % shape :y)}]]]
 
-    [:span "Rotation"]
+    [:span (tr "ds.rotation")]
     [:div.row-flex
      [:input.slidebar
       {:type "range"

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

@@ -15,7 +15,7 @@
    [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
    [uxbox.util.data :refer [parse-float]]
    [uxbox.util.dom :as dom]
-   [uxbox.util.i18n :refer (tr)]))
+   [uxbox.util.i18n :refer [tr]]))
 
 (mf/defc fill-menu
   [{:keys [menu shape]}]
@@ -42,7 +42,7 @@
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
 
-      [:span "Color"]
+      [:span (tr "ds.color")]
       [:div.row-flex.color-data
        [:span.color-th
         {:style {:background-color (:fill-color shape)}
@@ -53,7 +53,7 @@
           :value (:fill-color shape "")}]]]
 
       ;; SLIDEBAR FOR ROTATION AND OPACITY
-      [:span "Opacity"]
+      [:span (tr "ds.opacity")]
       [:div.row-flex
        [:input.slidebar
         {:type "range"

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

@@ -31,10 +31,10 @@
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
       ;; SLIDEBAR FOR ROTATION AND OPACITY
-      [:span "Size"]
+      [:span (tr "ds.size")]
       [:div.row-flex
        [:div.input-element.pixels
-        [:input.input-text {:placeholder "Width"
+        [:input.input-text {:placeholder (tr "ds.width")
                             :type "number"
                             :min "0"
                             :value (precision-or-0 (:width size) 2)
@@ -44,13 +44,13 @@
         (if (:proportion-lock shape) i/lock i/unlock)]
 
        [:div.input-element.pixels
-        [:input.input-text {:placeholder "Height"
+        [:input.input-text {:placeholder (tr "ds.height")
                             :type "number"
                             :min "0"
                             :value (precision-or-0 (:height size) 2)
                             :on-change #(on-size-change % shape :height)}]]]
 
-      [:span "Position"]
+      [:span (tr "ds.position")]
       [:div.row-flex
        [:div.input-element.pixels
         [:input.input-text
@@ -65,7 +65,7 @@
           :value (precision-or-0 (:y1 shape 0) 2)
           :on-change #(on-position-change % shape :y)}]]]
 
-      [:span "Rotation"]
+      [:span (tr "ds.rotation")]
       [:div.row-flex
        [:input.slidebar
         {:type "range"

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

@@ -32,11 +32,11 @@
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
       ;; SLIDEBAR FOR ROTATION AND OPACITY
-      [:span "Size"]
+      [:span (tr "ds.size")]
       [:div.row-flex
        [:div.input-element.pixels
         [:input.input-text
-         {:placeholder "Width"
+         {:placeholder (tr "ds.width")
           :type "number"
           :min "0"
           :value (precision-or-0 (:width size) 2)
@@ -47,13 +47,13 @@
         (if (:proportion-lock shape) i/lock i/unlock)]
        [:div.input-element.pixels
         [:input.input-text
-         {:placeholder "Height"
+         {:placeholder (tr "ds.height")
           :type "number"
           :min "0"
           :value (precision-or-0 (:height size) 2)
           :on-change #(on-size-change % shape :height)}]]]
 
-      [:span "Position"]
+      [:span (tr "ds.position")]
       [:div.row-flex
        [:div.input-element.pixels
         [:input.input-text
@@ -68,7 +68,7 @@
           :value (precision-or-0 (:y1 shape 0) 2)
           :on-change #(on-position-change % shape :y)}]]]
 
-      ;; [:span "Rotation"]
+      ;; [:span (tr "ds.rotation")]
       ;; [:div.row-flex
       ;;  [:input.slidebar
       ;;   {:type "range"
@@ -91,7 +91,7 @@
       ;;   {:style {:visibility "hidden"}}]]
 
 
-      [:span "Opacity"]
+      [:span (tr "ds.opacity")]
       [:div.row-flex
        [:input.slidebar
         {:type "range"

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

@@ -60,7 +60,7 @@
       [:div.element-set
        [:div.element-set-title (:name menu)]
        [:div.element-set-content
-        [:span "Name"]
+        [:span (tr "ds.name")]
         [:div.row-flex
          [:div.input-element
           [:input.input-text
@@ -69,22 +69,22 @@
             :value (str (:name page))
             :placeholder "page name"}]]]
 
-        [:span "Size"]
+        [:span (tr "ds.size")]
         [:div.row-flex
          [:div.input-element.pixels
           [:input.input-text
            {:type "number"
             :on-change #(on-size-change % :width)
             :value (str (:width metadata))
-            :placeholder "width"}]]
+            :placeholder (tr "ds.width")}]]
          [:div.input-element.pixels
           [:input.input-text
            {:type "number"
             :on-change #(on-size-change % :height)
             :value (str (:height metadata))
-            :placeholder "height"}]]]
+            :placeholder (tr "ds.height")}]]]
 
-        [:span "Background color"]
+        [:span (tr "ds.background-color")]
         [:div.row-flex.color-data
          [:span.color-th
           {:style {:background-color (:background metadata)}
@@ -128,7 +128,7 @@
       [:div.element-set
        [:div.element-set-title (:name menu)]
        [:div.element-set-content
-        [:span "Size"]
+        [:span (tr "ds.size")]
         [:div.row-flex
          [:div.input-element.pixels
           [:input.input-text
@@ -142,7 +142,7 @@
             :value (:grid-y-axis metadata)
             :on-change on-y-change
             :placeholder "y"}]]]
-        [:span "Color"]
+        [:span (tr "ds.color")]
         [:div.row-flex.color-data
          [:span.color-th
           {:style {:background-color (:grid-color metadata)}

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

@@ -31,10 +31,10 @@
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
       ;; SLIDEBAR FOR ROTATION AND OPACITY
-      [:span "Size"]
+      [:span (tr "ds.size")]
       [:div.row-flex
        [:div.input-element.pixels
-        [:input.input-text {:placeholder "Width"
+        [:input.input-text {:placeholder (tr "ds.width")
                             :type "number"
                             :min "0"
                             :value (precision-or-0 (:width size) 2)
@@ -45,13 +45,13 @@
         (if (:proportion-lock shape) i/lock i/unlock)]
 
        [:div.input-element.pixels
-        [:input.input-text {:placeholder "Height"
+        [:input.input-text {:placeholder (tr "ds.height")
                             :type "number"
                             :min "0"
                             :value (precision-or-0 (:height size) 2)
                             :on-change #(on-size-change % shape :height)}]]]
 
-      [:span "Position"]
+      [:span (tr "ds.position")]
       [:div.row-flex
        [:div.input-element.pixels
         [:input.input-text {:placeholder "x"
@@ -64,7 +64,7 @@
                             :value (precision-or-0 (:y1 shape 0) 2)
                             :on-change #(on-position-change % shape :y)}]]]
 
-      [:span "Rotation"]
+      [:span (tr "ds.rotation")]
       [:div.row-flex
        [:input.slidebar {:type "range"
                          :min 0

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

@@ -39,25 +39,25 @@
     [:div.element-set
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
-      [:span "Style"]
+      [:span (tr "ds.style")]
       [:div.row-flex
-       [:select#style.input-select {:placeholder "Style"
+       [:select#style.input-select {:placeholder (tr "ds.style")
                                     :value (pr-str (:stroke-style shape))
                                     :on-change on-stroke-style-change}
-        [:option {:value ":none"} "None"]
+        [:option {:value ":none"} (tr "ds.none")]
-        [:option {:value ":solid"} "Solid"]
+        [:option {:value ":solid"} (tr "ds.solid")]
-        [:option {:value ":dotted"} "Dotted"]
+        [:option {:value ":dotted"} (tr "ds.dotted")]
-        [:option {:value ":dashed"} "Dashed"]
+        [:option {:value ":dashed"} (tr "ds.dashed")]
-        [:option {:value ":mixed"} "Mixed"]]
+        [:option {:value ":mixed"} (tr "ds.mixed")]]
        [:div.input-element.pixels
         [:input.input-text
-         {:placeholder "Width"
+         {:placeholder (tr "ds.width")
           :type "number"
           :min "0"
           :value (precision-or-0 (:stroke-width shape 1) 2)
           :on-change on-width-change}]]]
 
-      [:span "Color"]
+      [:span (tr "ds.color")]
       [:div.row-flex.color-data
        [:span.color-th
         {:style {:background-color (:stroke-color shape)}
@@ -67,7 +67,7 @@
          {:on-change on-stroke-color-change
           :value (:stroke-color shape "")}]]]
 
-      [:span "Radius"]
+      [:span (tr "ds.radius")]
       [:div.row-flex
        [:div.input-element.pixels
         [:input.input-text
@@ -86,7 +86,7 @@
           :value (precision-or-0 (:ry shape 0) 2)
           :on-change on-border-change-ry}]]]
 
-      [:span "Opacity"]
+      [:span (tr "ds.opacity")]
       [:div.row-flex
        [:input.slidebar
         {:type "range"

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

@@ -75,7 +75,7 @@
        [:div.element-set-title (:name menu)]
        [:div.element-set-content
 
-        [:span "Font family"]
+        [:span (tr "ds.font-family")]
         [:div.row-flex
          [:select.input-select {:value (pr-str font-family)
                                 :on-change on-font-family-change}
@@ -83,7 +83,7 @@
             [:option {:value (pr-str (:id font))
                       :key (:id font)} (:name font)])]]
 
-        [:span "Size and Weight"]
+        [:span (tr "ds.size-weight")]
         [:div.row-flex
          [:div.editable-select
           [:select.input-select
@@ -102,7 +102,7 @@
            [:option {:value "48"} "48"]
            [:option {:value "72"} "72"]]
           [:input.input-text
-           {:placeholder "Font Size"
+           {:placeholder (tr "ds.font-size")
             :type "number"
             :min "0"
             :max "200"
@@ -115,10 +115,10 @@
             [:option {:value (pr-str data)
                       :key (:name style)} (:name style)])]]
 
-        [:span "Line height and Letter spacing"]
+        [:span (tr "ds.line-height-letter-spacing")]
         [:div.row-flex
          [:input.input-text
-          {:placeholder "Line height"
+          {:placeholder (tr "ds.line-height")
            :type "number"
            :step "0.1"
            :min "0"
@@ -126,7 +126,7 @@
            :value (precision-or-0 line-height 2)
            :on-change on-font-line-height-change}]
          [:input.input-text
-          {:placeholder "Letter spacing"
+          {:placeholder (tr "ds.letter-spacing")
            :type "number"
            :step "0.1"
            :min "0"
@@ -134,7 +134,7 @@
            :value (precision-or-0 letter-spacing 2)
            :on-change on-font-letter-spacing-change}]]
 
-        [:span "Text align"]
+        [:span (tr "ds.text-align")]
         [:div.row-flex.align-icons
          [:span {:class (when (= text-align "left") "current")
                  :on-click #(on-font-align-change % "left")}