✨ Adds locale to new strings

frontend/src/app/main/data/workspace/libraries.cljs

@@ -33,15 +33,18 @@
 
 (declare sync-file)
 
+(defn default-color-name [color]
+  (or (:color color)
+      (case (get-in color [:gradient :type])
+        :linear (tr "workspace.gradients.linear")
+        :radial (tr "workspace.gradients.radial"))))
+
 (defn add-color
   [color]
   (let [id   (uuid/next)
         color (assoc color
                      :id id
-                     :name (or (:color color)
-                               (case (get-in color [:gradient :type])
-                                 :linear "Linear gradient"
-                                 :radial "Radial gradient")))]
+                     :name (default-color-name color))]
     (us/assert ::cp/color color)
     (ptk/reify ::add-color
       ptk/WatchEvent

frontend/src/app/main/ui/components/color_bullet.cljs

@@ -10,6 +10,7 @@
 (ns app.main.ui.components.color-bullet
   (:require
    [rumext.alpha :as mf]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.color :as uc]))
 
 (mf/defc color-bullet [{:keys [color on-click]}]
@@ -24,16 +25,16 @@
 
        [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])))
 
-(defn gradient-type->string [{:keys [type]}]
+(defn gradient-type->string [type]
   (case type
-    :linear "Linear"
-    :radial "Radial"))
+    :linear (tr "workspace.gradients.linear")
+    :radial (tr "workspace.gradients.radial")
+    (str "???" type)))
 
 (mf/defc color-name [{:keys [color size on-click on-double-click]}]
   (let [color (if (string? color) {:color color :opacity 1} color)
         {:keys [name color opacity gradient]} color
-        color-str (or name color (gradient-type->string gradient))]
-    #_(when (= size :big) [:span.color-text {:title (:name color) } (or (:name color) (:value color))])
+        color-str (or name color (gradient-type->string (:type gradient)))]
     (when (= size :big)
       [:span.color-text {:on-click #(when on-click (on-click %))
                          :on-double-click #(when on-double-click (on-double-click %))

frontend/src/app/main/ui/workspace/colorpalette.cljs

@@ -19,7 +19,7 @@
    [app.main.data.workspace :as udw]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]
+   [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.icons :as i]
    [app.main.ui.keyboard :as kbd]
    [app.util.color :refer [hex->rgb]]
@@ -61,8 +61,8 @@
 
     [:div.color-cell {:class (str "cell-"(name size))
                       :on-click select-color}
-     [:& color-bullet {:color color}]
-     [:& color-name {:color color :size size}]]))
+     [:& cb/color-bullet {:color color}]
+     [:& cb/color-name {:color color :size size}]]))
 
 (mf/defc palette
   [{:keys [left-sidebar? current-colors recent-colors file-colors shared-libs selected size]}]
@@ -139,8 +139,8 @@
             [:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))]
             [:div.color-sample
              (for [[idx {:keys [id color]}] (map-indexed vector (take 7 colors))]
-               [:& color-bullet {:key (str "color-" idx)
-                                 :color color}])]]))
+               [:& cb/color-bullet {:key (str "color-" idx)
+                                    :color color}])]]))
 
 
        [:li.palette-library
@@ -150,8 +150,8 @@
                                 (str/format " (%s)" (count file-colors)))]
         [:div.color-sample
          (for [[idx color] (map-indexed vector (take 7 (vals file-colors))) ]
-           [:& color-bullet {:key (str "color-" idx)
-                             :color color}])]]
+           [:& cb/color-bullet {:key (str "color-" idx)
+                                :color color}])]]
 
        [:li.palette-library
         {:on-click #(st/emit! (mdc/change-palette-selected :recent))}
@@ -160,8 +160,8 @@
                                 (str/format " (%s)" (count recent-colors)))]
         [:div.color-sample
          (for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
-           [:& color-bullet {:key (str "color-" idx)
-                             :color color}])]]
+           [:& cb/color-bullet {:key (str "color-" idx)
+                                :color color}])]]
 
        [:hr.dropdown-separator]
 

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -28,7 +28,7 @@
    [app.main.ui.components.file-uploader :refer [file-uploader]]
    [app.main.ui.components.tab-container :refer [tab-container tab-element]]
    [app.main.ui.workspace.sidebar.options.typography :refer [typography-entry]]
-   [app.main.ui.components.color-bullet :refer [color-bullet color-name gradient-type->string]]
+   [app.main.ui.components.color-bullet :as bc]
    [app.main.ui.icons :as i]
    [app.main.ui.keyboard :as kbd]
    [app.main.data.modal :as modal]
@@ -201,7 +201,7 @@
                                  :editing rename?})
 
         default-name (cond
-                       (:gradient color) (gradient-type->string (:gradient color))
+                       (:gradient color) (bc/gradient-type->string (get-in color [:gradient :type]))
                        (:color color) (:color color)
                        :else (:value color))
 
@@ -276,7 +276,7 @@
          nil))
 
     [:div.group-list-item {:on-context-menu on-context-menu}
-     [:& color-bullet {:color color}]
+     [:& bc/color-bullet {:color color}]
 
      (if (:editing @state)
        [:input.element-name

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -20,7 +20,7 @@
    [app.util.color :as uc]
    [app.main.refs :as refs]
    [app.main.data.modal :as modal]
-   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]))
+   [app.main.ui.components.color-bullet :as cb]))
 
 (defn color-picker-callback
   [color disable-gradient disable-opacity handle-change-color handle-open handle-close]
@@ -127,7 +127,7 @@
        (modal/update-props! :colorpicker {:data (parse-color color)})))
 
     [:div.row-flex.color-data
-     [:& color-bullet {:color color
+     [:& cb/color-bullet {:color color
                        :on-click handle-click-color}]
 
      (cond
@@ -140,10 +140,7 @@
        (and (not (uc/multiple? color))
             (:gradient color) (get-in color [:gradient :type]))
        [:div.color-info
-        [:div.color-name
-         (case (get-in color [:gradient :type])
-           :linear "Linear gradient"
-           :radial "Radial gradient")]]
+        [:div.color-name (cb/gradient-type->string (get-in color [:gradient :type]))]]
 
        ;; Rendering a plain color/opacity
        :else