🐛 Fix variants naming and handling of gfonts variants.

frontend/src/uxbox/main/fonts.clj

@@ -18,16 +18,16 @@
   [variant]
   (cond
     (= "regular" variant)
-    {:name "regular" :width "400" :style "normal"}
+    {:name "regular" :weight "400" :style "normal"}
 
     (= "italic" variant)
-    {:name "italic" :width "400" :style "italic"}
+    {:name "italic" :weight "400" :style "italic"}
 
     :else
     (when-let [[a b c] (re-find #"^(\d+)(.*)$" variant)]
       (if (str/empty? c)
-        {:name a :width b :style "normal"}
+        {:id a :name b :weight b :style "normal"}
-        {:name a :width b :style c}))))
+        {:id a :name (str b " (" c ")") :weight b :style c}))))
 
 (defn- parse-gfont
   [font]

frontend/src/uxbox/main/fonts.cljs

@@ -27,50 +27,50 @@
   [{:id "sourcesanspro"
     :name "Source Sans Pro"
     :family "sourcesanspro"
-    :variants [{:name "100" :weight "100" :style "normal"}
+    :variants [{:id "100" :name "100" :weight "100" :style "normal"}
-               {:name "100italic" :weight "100" :style "italic"}
+               {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"}
-               {:name "200" :weight "200" :style "normal"}
+               {:id "200" :name "200" :weight "200" :style "normal"}
-               {:name "200italic" :weight "200" :style "italic"}
+               {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"}
-               {:name "300" :weight "300" :style "normal"}
+               {:id "300" :name "300" :weight "300" :style "normal"}
-               {:name "300italic" :weight "300" :style "italic"}
+               {:id "300italic" :name "300 (italic)"  :weight "300" :style "italic"}
-               {:name "regular" :weight "400" :style "normal"}
+               {:id "regular" :name "regular" :weight "400" :style "normal"}
-               {:name "italic" :weight "400" :style "italic"}
+               {:id "italic" :name "italic" :weight "400" :style "italic"}
-               {:name "500" :weight "500" :style "normal"}
+               {:id "500" :name "500" :weight "500" :style "normal"}
-               {:name "500italic" :weight "500" :style "italic"}
+               {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"}
-               {:name "bold" :weight "bold" :style "normal"}
+               {:id "bold" :name "bold" :weight "bold" :style "normal"}
-               {:name "bolditalic" :weight "bold" :style "italic"}
+               {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"}
-               {:name "black" :weight "900" :style "normal"}
+               {:id "black" :name "black" :weight "900" :style "normal"}
-               {:name "blackitalic" :weight "900" :style "italic"}]}
+               {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]}
    {:id "roboto"
     :family "roboto"
     :name "Roboto"
-    :variants [{:name "100" :weight "100" :style "normal"}
+    :variants [{:id "100" :name "100" :weight "100" :style "normal"}
-               {:name "100italic" :weight "100" :style "italic"}
+               {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"}
-               {:name "200" :weight "200" :style "normal"}
+               {:id "200" :name "200" :weight "200" :style "normal"}
-               {:name "200italic" :weight "200" :style "italic"}
+               {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"}
-               {:name "regular" :weight "400" :style "normal"}
+               {:id "regular" :name "regular" :weight "400" :style "normal"}
-               {:name "italic" :weight "400" :style "italic"}
+               {:id "italic" :name "italic" :weight "400" :style "italic"}
-               {:name "500" :weight "500" :style "normal"}
+               {:id "500" :name "500" :weight "500" :style "normal"}
-               {:name "500italic" :weight "500" :style "italic"}
+               {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"}
-               {:name "bold" :weight "bold" :style "normal"}
+               {:id "bold" :name "bold" :weight "bold" :style "normal"}
-               {:name "bolditalic" :weight "bold" :style "italic"}
+               {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"}
-               {:name "black" :weight "900" :style "normal"}
+               {:id "black" :name "black" :weight "900" :style "normal"}
-               {:name "blackitalic" :weight "900" :style "italic"}]}
+               {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]}
    {:id "robotocondensed"
     :family "robotocondensed"
     :name "Roboto Condensed"
-    :variants [{:name "100" :weight "100" :style "normal"}
+    :variants [{:id "100" :name "100" :weight "100" :style "normal"}
-               {:name "100italic" :weight "100" :style "italic"}
+               {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"}
-               {:name "200" :weight "200" :style "normal"}
+               {:id "200" :name "200" :weight "200" :style "normal"}
-               {:name "200italic" :weight "200" :style "italic"}
+               {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"}
-               {:name "regular" :weight "400" :style "normal"}
+               {:id "regular" :name "regular" :weight "400" :style "normal"}
-               {:name "italic" :weight "400" :style "italic"}
+               {:id "italic" :name "italic" :weight "400" :style "italic"}
-               {:name "500" :weight "500" :style "normal"}
+               {:id "500" :name "500" :weight "500" :style "normal"}
-               {:name "500italic" :weight "500" :style "italic"}
+               {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"}
-               {:name "bold" :weight "bold" :style "normal"}
+               {:id "bold" :name "bold" :weight "bold" :style "normal"}
-               {:name "bolditalic" :weight "bold" :style "italic"}
+               {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"}
-               {:name "black" :weight "900" :style "normal"}
+               {:id "black" :name "black" :weight "900" :style "normal"}
-               {:name "blackitalic" :weight "900" :style "italic"}]}])
+               {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]}])
 
 (defonce fontsdb (l/atom {}))
 (defonce fontsview (l/atom {}))
@@ -126,7 +126,7 @@
   [{:keys [id family variants ::on-loaded] :as font}]
   (js/console.log "[debug:fonts]: loading google font" id)
   (let [base (str "https://fonts.googleapis.com/css?family=" family)
-        variants (str/join "," (map :name variants))
+        variants (str/join "," (map :id variants))
         uri (str base ":" variants "&display=block")
         node (create-link-node uri)]
     (.addEventListener node "load" (fn [event] (when (fn? on-loaded)

frontend/src/uxbox/main/ui/shapes/text.cljs

@@ -152,7 +152,6 @@
         font-size  (obj/get data "fontSize")
         fill (obj/get data "fill")
         opacity (obj/get data "opacity")
-
         fontsdb (mf/deref fonts/fontsdb)
 
         base #js {:textDecoration text-decoration
@@ -174,7 +173,7 @@
         (fonts/ensure-loaded! font-id)
         (let [font-family (or (:family font)
                               (obj/get data "fontFamily"))
-              font-variant (d/seek #(= font-variant-id (:name %))
+              font-variant (d/seek #(= font-variant-id (:id %))
                                    (:variants font))
               font-style  (or (:style font-variant)
                               (obj/get data "fontStyle"))

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

@@ -76,7 +76,7 @@
         (fn [event]
           (let [id (-> (dom/get-target event)
                        (dom/get-value))
-                variant (d/seek #(= id (:name %)) (:variants font))]
+                variant (d/seek #(= id (:id %)) (:variants font))]
             (dwt/set-font! editor (:id font) (:family font))
             (dwt/set-font-variant! editor id (:weight variant) (:style variant))))
         ]
@@ -112,7 +112,7 @@
       [:select.input-select {:value font-var
                              :on-change on-font-variant-change}
        (for [variant (:variants font)]
-         [:option {:value (:name variant)
+         [:option {:value (:id variant)
                    :key (pr-str variant)}
           (:name variant)])]]]))