Merge branch 'i18n/multicanvas' of git://github.com/Monogramm/uxbox into Monogramm-i18n/multicanvas

docker/docker-compose.yml

@@ -41,10 +41,10 @@ services:
       - backend_m2:/root/.m2
       # - /etc/localtime:/etc/localtime:ro
       # - /etc/timezone:/etc/timezone:ro
-
     environment:
       # HTTP setup
       - UXBOX_HTTP_SERVER_DEBUG=false
+      - UXBOX_HTTP_SERVER_CORS=*
       - UXBOX_MEDIA_URI="/media/"
       - UXBOX_ASSETS_URI="/static/"
       - UXBOX_MEDIA_DIRECTORY="data/media"

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

@@ -14,6 +14,7 @@
                       "%s projects"]
    "ds.project-title" "Your projects"
    "ds.project-new" "+ New project"
+   "ds.project-thumbnail.alt" "Project title"
 
    "ds.ordering" "Sort by"
    "ds.ordering.by-name" "name"
@@ -21,6 +22,7 @@
    "ds.ordering.by-creation-date" "creation date"
    "ds.search.placeholder" "Search..."
    "ds.uploaded-at" "Uploaded at %s"
+   "ds.updated-at" "Updated %s"
 
    "ds.confirm-title" "Are you sure?"
    "ds.confirm-ok" "Ok"
@@ -71,10 +73,50 @@
    "ds.your-libraries-title" "YOUR LIBRARIES"
    "ds.default-library-title" "Unnamed Collection (%s)"
 
-   "ds.element-options" "Element options"
+   "ds.project.placeholder" "New project name"
-   "ds.draw-tools" "Draw tools"
+   "ds.project.new" "New project"
-   "ds.sitemap" "Sitemap"
+
-   "ds.document-history" "Document history"
+   "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"
+   "ds.cancel" "Cancel"
+
+   "ds.settings.icons" "Icons"
+   "ds.settings.element-options" "Element options"
+   "ds.settings.draw-tools" "Draw tools"
+   "ds.settings.sitemap" "Sitemap"
+   "ds.settings.layers" "Layers"
+   "ds.settings.document-history" "Document history"
+
+   "ds.page.placeholder" "Page name"
+   "ds.page.new" "New page"
+   "ds.page.edit" "Edit page"
+
+   "ds.history.versions" "History"
+   "ds.history.pinned" "Pinned"
 
    "ds.help.rect" "Box (Ctrl + B)"
    "ds.help.circle" "Circle (Ctrl + E)"
@@ -83,12 +125,43 @@
    "ds.help.path" "Path"
    "ds.help.curve" "Curve"
    "ds.help.ruler" "Ruler"
+   "ds.help.canvas" "Canvas"
 
    "ds.user.profile" "Profile"
    "ds.user.password" "Password"
    "ds.user.notifications" "Notifications"
    "ds.user.exit" "Exit"
 
+   "header.sitemap" "Sitemap (Ctrl + Shift + M)"
+   "header.draw-tools" "Draw tools (Ctrl + Shift + S)"
+   "header.color-palette" "Color Palette (---)"
+   "header.icons" "Icons (Ctrl + Shift + I)"
+   "header.layers" "Layers (Ctrl + Shift + L)"
+   "header.element-options" "Element options (Ctrl + Shift + O)"
+   "header.document-history" "History (Ctrl + Shift + H)"
+   "header.undo" "Undo (Ctrl + Z)"
+   "header.redo" "Redo (Ctrl + Shift + Z)"
+   "header.download" "Download (Ctrl + E)"
+   "header.image" "Image (Ctrl + I)"
+   "header.rules" "Rules"
+   "header.grid" "Grid (Ctrl + G)"
+   "header.grid-snap" "Snap to grid"
+   "header.align" "Align (Ctrl + A)"
+   "header.view-mode" "View mode (Ctrl + P)"
+
+   "element.measures" "Size, position & rotation"
+   "element.fill" "Fill"
+   "element.stroke" "Stroke"
+   "element.text" "Text"
+   "element.interactions" "Interactions"
+   "element.page-measures" "Page settings"
+   "element.page-grid-options" "Grid settings"
+
+   "image.new" "New image"
+   "image.select" "Select from library"
+   "image.upload" "Upload file"
+   "image.import-library" "Import image from library"
+
    "auth.email-or-username" "Email or Username"
    "auth.password" "Password"
    "auth.signin" "Sign in"
@@ -147,6 +220,7 @@
    "settings.update-settings" "Update settings"
 
    "history.alert-message" "You are seeing version %s"
+
    "errors.api.form.old-password-not-match" "Incorrect old password"
    "errors.api.form.registration-disabled" "The registration is currently disabled."
    "errors.api.form.email-already-exists" "The email is already in use by another user."

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

@@ -14,6 +14,7 @@
                       "%s projets"]
    "ds.project-title" "Vos projets"
    "ds.project-new" "+ Nouveau projet"
+   "ds.project-thumbnail.alt" "Titre du projet"
 
    "ds.ordering" "Trier par"
    "ds.ordering.by-name" "nom"
@@ -21,6 +22,7 @@
    "ds.ordering.by-creation-date" "date de création"
    "ds.search.placeholder" "Rechercher..."
    "ds.uploaded-at" "Mise en ligne : %s"
+   "ds.updated-at" "Mis à jour %s"
 
    "ds.confirm-title" "Êtes-vous sûr ?"
    "ds.confirm-ok" "Ok"
@@ -71,10 +73,50 @@
    "ds.your-libraries-title" "VOS LIBRAIRIES"
    "ds.default-library-title" "Collection sans nom (%s)"
 
-   "ds.element-options" "Options d'élément"
+   "ds.project.placeholder" "Nom du nouveau projet"
-   "ds.draw-tools" "Outils de dessin"
+   "ds.project.new" "Nouveau projet"
-   "ds.sitemap" "Plan du site"
+
-   "ds.document-history" "Historique du document"
+   "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"
+   "ds.cancel" "Annuler"
+
+   "ds.settings.icons" "Icônes"
+   "ds.settings.element-options" "Options d'élément"
+   "ds.settings.draw-tools" "Outils de dessin"
+   "ds.settings.sitemap" "Plan du site"
+   "ds.settings.layers" "Couches"
+   "ds.settings.document-history" "Historique du document"
+
+   "ds.page.placeholder" "Nom de la page"
+   "ds.page.new" "Nouvelle page"
+   "ds.page.edit" "Éditer la page"
+
+   "ds.history.versions" "Historique"
+   "ds.history.pinned" "Épinglés"
 
    "ds.help.rect" "Boîte (Ctrl + B)"
    "ds.help.circle" "Cercle (Ctrl + E)"
@@ -83,12 +125,43 @@
    "ds.help.path" "Chemin"
    "ds.help.curve" "Courbe"
    "ds.help.ruler" "Règle"
+   "ds.help.canvas" "Calque"
 
    "ds.user.profile" "Profil"
    "ds.user.password" "Mot de passe"
    "ds.user.notifications" "Notifications"
    "ds.user.exit" "Quitter"
 
+   "header.sitemap" "Plan du site (Ctrl + Maj + M)"
+   "header.draw-tools" "Outils de dessin (Ctrl + Maj + S)"
+   "header.color-palette" "Palette de couleurs (---)"
+   "header.icons" "Icônes (Ctrl + Maj + I)"
+   "header.layers" "Couches (Ctrl + Maj + L)"
+   "header.element-options" "Options d'élément (Ctrl + Maj + O)"
+   "header.document-history" "Historique du document (Ctrl + Maj + H)"
+   "header.undo" "Annuler (Ctrl + Z)"
+   "header.redo" "Rétablir (Ctrl + Maj + Z)"
+   "header.download" "Télécharger (Ctrl + E)"
+   "header.image" "Image (Ctrl + I)"
+   "header.rules" "Règles"
+   "header.grid" "Grille (Ctrl + G)"
+   "header.grid-snap" "Coller à la grille"
+   "header.align" "Aligner (Ctrl + A)"
+   "header.view-mode" "Mode visualisation (Ctrl + P)"
+
+   "element.measures" "Taille, position et rotation"
+   "element.fill" "Fond"
+   "element.stroke" "Contour"
+   "element.text" "Texte"
+   "element.interactions" "Interactions"
+   "element.page-measures" "Paramètres de la page"
+   "element.page-grid-options" "Paramètres de la grille"
+
+   "image.new" "Nouvelle image"
+   "image.select" "Choisir depuis une librairie"
+   "image.upload" "Envoyer un fichier"
+   "image.import-library" "Importer une image depuis une librairie"
+
    "auth.email-or-username" "adresse email ou nom d'utilisateur"
    "auth.password" "Mot de passe"
    "auth.signin" "Se connecter"
@@ -147,6 +220,7 @@
    "settings.update-settings" "Mettre à jour les paramètres"
 
    "history.alert-message" "Vous voyez la version %s"
+
    "errors.api.form.old-password-not-match" "Ancien mot de passe incorrect"
    "errors.api.form.registration-disabled" "L'enregistrement est actuellement désactivé."
    "errors.api.form.email-already-exists" "L'email est déjà utilisé par un autre utilisateur."
@@ -169,4 +243,4 @@
    "errors.generic" "Quelque chose c'est mal passé."
    "errors.conflict" "Conflit sur la sauvegarde des données, actualisez et réessayez."
 
-})
+   })

frontend/src/uxbox/main/ui/dashboard/projects.cljs

@@ -116,7 +116,7 @@
   [{:keys [project] :as props}]
   [:div.grid-item-th
    [:img.img-th {:src "/images/project-placeholder.svg"
-                 :alt "Project title"}]])
+                 :alt (tr "ds.project-thumbnail.alt")}]])
 
 ;; --- Grid Item
 
@@ -152,7 +152,7 @@
                               :default-value (:name project)}]
         [:h3 (:name project)])
       [:span.date
-       (str "Updated " (dt/timeago (:modified-at project)))]]
+       (str (tr "ds.updated-at" (dt/timeago (:modified-at project))))]]
      [:div.project-th-actions
       [:div.project-th-icon.pages
        i/page

frontend/src/uxbox/main/ui/dashboard/projects_forms.cljs

@@ -49,7 +49,7 @@
   (let [{:keys [data] :as form} (fm/use-form ::project-form defaults)]
     [:form {:on-submit #(on-submit % form)}
      [:input.input-text
-      {:placeholder "New project name"
+      {:placeholder (tr "ds.project.placeholder")
        :type "text"
        :name "name"
        :value (:name data)
@@ -59,9 +59,9 @@
        :auto-focus true}]
      [:div.project-size
       [:div.input-element.pixels
-       [:span "Width"]
+       [:span (tr "ds.width")]
        [:input#project-witdh.input-text
-        {:placeholder "Width"
+        {:placeholder (tr "ds.width")
          :name "width"
          :type "number"
          :min 0
@@ -72,9 +72,9 @@
          :value (:width data)}]]
       [:a.toggle-layout {:on-click #(swap-size % form)} i/toggle]
       [:div.input-element.pixels
-       [:span "Height"]
+       [:span (tr "ds.height")]
        [:input#project-height.input-text
-        {:placeholder "Height"
+        {:placeholder (tr "ds.height")
          :type "number"
          :name "height"
          :min 0
@@ -86,7 +86,7 @@
 
      ;; Submit
      [:input#project-btn.btn-primary
-      {:value "Go go go!"
+      {:value (tr "ds.go")
        :class (when-not (:valid form) "btn-disabled")
        :disabled (not (:valid form))
        :type "submit"}]]))
@@ -96,7 +96,7 @@
 (mf/defc create-project-dialog
   [props]
   [:div.lightbox-body
-   [:h3 "New project"]
+   [:h3 (tr "ds.project.new")]
    [:& create-project-form]
    [:a.close {:on-click modal/hide!} i/close]])
 

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

@@ -22,6 +22,7 @@
    [uxbox.main.ui.users :refer [user]]
    [uxbox.main.ui.workspace.clipboard]
    [uxbox.util.data :refer [index-of]]
+   [uxbox.util.i18n :refer (tr)]
    [uxbox.util.geom.point :as gpt]
    [uxbox.util.math :as mth]
    [uxbox.util.router :as rt]))
@@ -53,7 +54,7 @@
      [:div.main-icon
       [:a {:on-click #(st/emit! (rt/nav :dashboard/projects))} i/logo-icon]]
      [:div.project-tree-btn
-      {:alt "Sitemap (Ctrl + Shift + M)"
+      {:alt (tr "header.sitemap")
        :class (when (contains? flags :sitemap) "selected")
        :on-click (partial toggle :sitemap)}
       i/project-tree
@@ -61,76 +62,76 @@
      [:div.workspace-options
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
-        {:alt "Draw tools (Ctrl + Shift + S)"
+        {:alt (tr "header.draw-tools")
          :class (when (contains? flags :drawtools) "selected")
          :on-click (partial toggle :drawtools)}
         i/shapes]
        [:li.tooltip.tooltip-bottom
-        {:alt "Color Palette (---)"
+        {:alt (tr "header.color-palette")
          :class (when (contains? flags :colorpalette) "selected")
          :on-click (partial toggle :colorpalette)}
         i/palette]
        [:li.tooltip.tooltip-bottom
-        {:alt "Icons (Ctrl + Shift + I)"
+        {:alt (tr "header.icons")
          :class (when (contains? flags :icons) "selected")
          :on-click (partial toggle :icons)}
         i/icon-set]
        [:li.tooltip.tooltip-bottom
-        {:alt "Layers (Ctrl + Shift + L)"
+        {:alt (tr "header.layers")
          :class (when (contains? flags :layers) "selected")
          :on-click (partial toggle :layers)}
         i/layers]
        [:li.tooltip.tooltip-bottom
-        {:alt "Element options (Ctrl + Shift + O)"
+        {:alt (tr "header.element-options")
          :class (when (contains? flags :element-options) "selected")
          :on-click (partial toggle :element-options)}
         i/options]
        [:li.tooltip.tooltip-bottom
-        {:alt "History (Ctrl + Shift + H)"
+        {:alt (tr "header.document-history")
          :class (when (contains? flags :document-history) "selected")
          :on-click (partial toggle :document-history)}
         i/undo-history]]
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
-        {:alt "Undo (Ctrl + Z)"
+        {:alt (tr "header.undo")
          :on-click on-undo}
         i/undo]
        [:li.tooltip.tooltip-bottom
-        {:alt "Redo (Ctrl + Shift + Z)"
+        {:alt (tr "header.redo")
          :on-click on-redo}
         i/redo]]
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
-        {:alt "Download (Ctrl + E)"
+        {:alt (tr "header.download")
          ;; :on-click on-download
          }
         i/download]
        [:li.tooltip.tooltip-bottom
-        {:alt "Image (Ctrl + I)"
+        {:alt (tr "header.image")
          :on-click on-image}
         i/image]]
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
-        {:alt "Rules"
+        {:alt (tr "header.rules")
          :class (when (contains? flags :rules) "selected")
          :on-click (partial toggle :rules)}
         i/ruler]
        [:li.tooltip.tooltip-bottom
-        {:alt "Grid (Ctrl + G)"
+        {:alt (tr "header.grid")
          :class (when (contains? flags :grid) "selected")
          :on-click (partial toggle :grid)}
         i/grid]
        [:li.tooltip.tooltip-bottom
-        {:alt "Snap to grid"
+        {:alt (tr "header.grid-snap")
          :class (when (contains? flags :grid-snap) "selected")
          :on-click (partial toggle :grid-snap)}
         i/grid-snap]]
       ;; [:li.tooltip.tooltip-bottom
-      ;; {:alt "Align (Ctrl + A)"}
+      ;; {:alt (tr "header.align")}
       ;; i/alignment]]
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom.view-mode
-        {:alt "View mode (Ctrl + P)"
+        {:alt (tr "header.view-mode")
          :on-click #(st/emit! (dw/->OpenView (:id page)))
          }
         i/play]]

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

@@ -68,16 +68,16 @@
               (dom/prevent-default event)
               (modal/hide!))]
       [:div.lightbox-body
-       [:h3 "New image"]
+       [:h3 (tr "image.new")]
        [:div.row-flex
         [:div.lightbox-big-btn {:on-click on-select-from-library}
          [:span.big-svg i/image]
-         [:span.text "Select from library"]]
+         [:span.text (tr "image.select")]]
         [:div.lightbox-big-btn {:on-click on-upload-click}
          (if uploading?
            [:span.big-svg.upload i/loader-pencil]
            [:span.big-svg.upload i/exit])
-         [:span.text "Upload file"]
+         [:span.text (tr "image.upload")]
          [:input.upload-image-input
           {:style {:display "none"}
            :accept "image/jpeg,image/png"
@@ -138,16 +138,16 @@
       :fn #(st/emit! (udi/fetch-images id))})
 
     [:div.lightbox-body.big-lightbox
-     [:h3 "Import image from library"]
+     [:h3 (tr "image.import-library")]
      [:div.import-img-library
       [:div.library-actions
        [:ul.toggle-library
         [:li.your-images {:class (when own? "current")
                           :on-click #(select-type :own)}
-         "YOUR IMAGES"]
+         (tr "ds.your-images-title")]
         [:li.standard {:class (when builtin? "current")
                        :on-click #(select-type :builtin)}
-         "IMAGES STORE"]]
+         (tr "ds.store-images-title")]]
        [:select.input-select {:on-change on-change}
         (when own?
           [:option {:value (pr-str nil)} "Storage"])

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

@@ -65,7 +65,7 @@
       [:div.tool-window.drawing-tools
        [:div.tool-window-bar
         [:div.tool-window-icon i/window]
-        [:span (tr "ds.draw-tools")]
+        [:span (tr "ds.settings.draw-tools")]
         [:div.tool-window-close {:on-click close} i/close]]
        [:div.tool-window-content
         (for [item tools]

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

@@ -14,7 +14,7 @@
             [uxbox.main.data.workspace :as dw]
             [uxbox.util.data :refer [read-string]]
             [uxbox.util.dom :as dom]
-            [uxbox.util.i18n :refer [tr]]
+            [uxbox.util.i18n :refer (tr)]
             [rumext.alpha :as mf]
             [uxbox.util.router :as r]
             [uxbox.util.time :as dt]))
@@ -102,16 +102,16 @@
       [:div.document-history.tool-window {}
        [:div.tool-window-bar {}
         [:div.tool-window-icon {} i/undo-history]
-        [:span {} (tr "ds.document-history")]
+        [:span {} (tr "ds.settings.document-history")]
         [:div.tool-window-close {:on-click close} i/close]]
        [:div.tool-window-content {}
         [:ul.history-tabs {}
          [:li {:on-click show-main
                :class (when main? "selected")}
-          "History"]
+          (tr "ds.history.versions")]
          [:li {:on-click show-pinned
                :class (when pinned? "selected")}
-          "Pinned"]]
+          (tr "ds.history.pinned")]]
         (if (= section :pinned)
           (history-pinned-list history)
           (history-list history))]])))
@@ -131,5 +131,5 @@
          {:class (when (:deselecting history) "hide-message")}
          [:span {} (tr "history.alert-message" (or version "00"))
           [:div.message-action {}
-           [:a.btn-transparent {:on-click on-accept} "Accept"]
+           [:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
-           [:a.btn-transparent {:on-click on-cancel} "Cancel"]]]]))))
+           [:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]]))))

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

@@ -17,7 +17,8 @@
    [uxbox.main.ui.shapes.icon :as icon]
    [uxbox.util.data :refer (read-string)]
    [uxbox.util.dom :as dom]
-   [uxbox.util.router :as r]))
+   [uxbox.util.router :as r]
+   [uxbox.util.i18n :refer (tr)]))
 
 ;; --- Refs
 
@@ -68,7 +69,7 @@
       [:div#form-figures.tool-window
        [:div.tool-window-bar
         [:div.tool-window-icon i/icon-set]
-        [:span "Icons"]
+        [:span (tr "ds.settings.icons")]
         [:div.tool-window-close {:on-click on-close} i/close]]
        [:div.tool-window-content
         [:div.figures-catalog

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

@@ -18,7 +18,8 @@
    [uxbox.main.ui.shapes.icon :as icon]
    [uxbox.main.ui.workspace.sortable :refer [use-sortable]]
    [uxbox.util.data :refer [classnames]]
-   [uxbox.util.dom :as dom]))
+   [uxbox.util.dom :as dom]
+   [uxbox.util.i18n :refer (tr)]))
 
 ;; --- Helpers
 
@@ -198,7 +199,7 @@
     [:div#layers.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/layers]
-      [:span "Layers"]
+      [:span (tr "ds.settings.layers")]
       [:div.tool-window-close {:on-click on-click} i/close]]
      [:& layers-list {:shapes (:shapes page)
                       :selected selected}]]))

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

@@ -42,43 +42,43 @@
    ::page  [::page-measures ::page-grid-options]})
 
 (def ^:private +menus+
-  [{:name "Size, position & rotation"
+  [{:name "element.measures"
     :id ::icon-measures
     :icon i/infocard
     :comp options-iconm/icon-measures-menu}
-   {:name "Size, position & rotation"
+   {:name "element.measures"
     :id ::image-measures
     :icon i/infocard
     :comp options-imagem/image-measures-menu}
-   {:name "Size, position & rotation"
+   {:name "element.measures"
     :id ::rect-measures
     :icon i/infocard
     :comp options-rectm/rect-measures-menu}
-   {:name "Size, position & rotation"
+   {:name "element.measures"
     :id ::circle-measures
     :icon i/infocard
     :comp options-circlem/circle-measures-menu}
-   {:name "Fill"
+   {:name "element.fill"
     :id ::fill
     :icon i/fill
     :comp options-fill/fill-menu}
-   {:name "Stroke"
+   {:name "element.stroke"
     :id ::stroke
     :icon i/stroke
     :comp options-stroke/stroke-menu}
-   {:name "Text"
+   {:name "element.text"
     :id ::text
     :icon i/text
     :comp options-text/text-menu}
-   {:name "Interactions"
+   {:name "element.interactions"
     :id ::interactions
     :icon i/action
     :comp options-interactions/interactions-menu}
-   {:name "Page settings"
+   {:name "element.page-measures"
     :id ::page-measures
     :icon i/page
     :comp options-page/measures-menu}
-   {:name "Grid settings"
+   {:name "element.page-grid-options"
     :id ::page-grid-options
     :icon i/grid
     :comp options-page/grid-options-menu}])
@@ -116,7 +116,7 @@
     [:div.elementa-options.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/options]
-      [:span (tr "ds.element-options")]
+      [:span (tr "ds.settings.element-options")]
       [:div.tool-window-close {:on-click close} i/close]]
      [:div.tool-window-content
       [:div.element-options

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

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

@@ -31,11 +31,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)
@@ -46,13 +46,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
@@ -67,7 +67,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"
@@ -90,7 +90,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

@@ -20,6 +20,7 @@
    [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
    [uxbox.util.data :refer [parse-int]]
    [uxbox.util.dom :as dom]
+   [uxbox.util.i18n :refer [tr]]
    [uxbox.util.spec :refer [color?]]))
 
 (mf/defc measures-menu
@@ -57,9 +58,9 @@
                 (modal/show! colorpicker-modal props)))]
 
       [:div.element-set
-       [:div.element-set-title (:name menu)]
+       [:div.element-set-title (tr (:name menu))]
        [:div.element-set-content
-        [:span "Name"]
+        [:span (tr "ds.name")]
         [:div.row-flex
          [:div.input-element
           [:input.input-text
@@ -68,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)}
@@ -125,9 +126,9 @@
                            :on-change change-color}]
                 (modal/show! colorpicker-modal props)))]
       [:div.element-set
-       [:div.element-set-title (:name menu)]
+       [:div.element-set-title (tr (:name menu))]
        [:div.element-set-content
-        [:span "Size"]
+        [:span (tr "ds.size")]
         [:div.row-flex
          [:div.input-element.pixels
           [:input.input-text
@@ -141,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")}

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

@@ -101,7 +101,7 @@
     [:div.sitemap.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/project-tree]
-      [:span (tr "ds.sitemap")]
+      [:span (tr "ds.settings.sitemap")]
       [:div.tool-window-close {:on-click close} i/close]]
      [:div.tool-window-content
       [:div.project-title

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

@@ -63,7 +63,7 @@
   (let [{:keys [data] :as form} (fm/use-form ::page-form #(initial-data page))]
     [:form {:on-submit #(on-submit % form)}
      [:input.input-text
-      {:placeholder "Page name"
+      {:placeholder (tr "ds.page.placeholder")
        :type "text"
        :name "name"
        :class (fm/error-class form :name)
@@ -73,9 +73,9 @@
        :auto-focus true}]
      [:div.project-size
       [:div.input-element.pixels
-       [:span "Width"]
+       [:span (tr "ds.width")]
        [:input#project-witdh.input-text
-        {:placeholder "Width"
+        {:placeholder (tr "ds.width")
          :name "width"
          :type "number"
          :min 0
@@ -86,9 +86,9 @@
          :value (:width data)}]]
       [:a.toggle-layout {:on-click #(swap-size % form)} i/toggle]
       [:div.input-element.pixels
-       [:span "Height"]
+       [:span (tr "ds.height")]
        [:input#project-height.input-text
-        {:placeholder "Height"
+        {:placeholder (tr "ds.height")
          :name "height"
          :type "number"
          :min 0
@@ -98,7 +98,7 @@
          :on-change (fm/on-input-change form :height)
          :value (:height data)}]]]
      [:input.btn-primary
-      {:value "Go go go!"
+      {:value (tr "ds.go")
        :type "submit"
        :class (when-not (:valid form) "btn-disabled")
        :disabled (not (:valid form))}]]))
@@ -107,8 +107,8 @@
   [{:keys [page] :as props}]
   [:div.lightbox-body
    (if (nil? (:id page))
-     [:h3 "New page"]
+     [:h3 (tr "ds.page.new")]
-     [:h3 "Edit page"])
+     [:h3 (tr "ds.page.edit")])
    [:& page-form {:page page}]
    [:a.close {:on-click modal/hide!} i/close]])
 

frontend/src/uxbox/util/messages.cljs

@@ -15,7 +15,8 @@
    [uxbox.builtins.icons :as i]
    [uxbox.util.data :refer [classnames]]
    [uxbox.util.dom :as dom]
-   [uxbox.util.timers :as ts]))
+   [uxbox.util.timers :as ts]
+   [uxbox.util.i18n :refer [tr]]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Data Events
@@ -131,10 +132,10 @@
         [:div.message-action
          [:a.btn-transparent.btn-small
           {:on-click accept}
-          "Accept"]
+          (tr "ds.accept")]
          [:a.btn-transparent.btn-small
           {:on-click cancel}
-          "Cancel"]]]])))
+          (tr "ds.cancel")]]]])))
 
 ;; --- Main Component (entry point)