From 07981487bfe312f18e592efd89ebc80f43f60a6f Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 28 Apr 2020 13:24:53 +0200 Subject: [PATCH] :bug: Fix variants naming and handling of gfonts variants. --- frontend/src/uxbox/main/fonts.clj | 8 +- frontend/src/uxbox/main/fonts.cljs | 78 +++++++++---------- frontend/src/uxbox/main/ui/shapes/text.cljs | 3 +- .../ui/workspace/sidebar/options/text.cljs | 4 +- 4 files changed, 46 insertions(+), 47 deletions(-) diff --git a/frontend/src/uxbox/main/fonts.clj b/frontend/src/uxbox/main/fonts.clj index b5a26202e..f1d510ad3 100644 --- a/frontend/src/uxbox/main/fonts.clj +++ b/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"} - {:name a :width b :style c})))) + {:id a :name b :weight b :style "normal"} + {:id a :name (str b " (" c ")") :weight b :style c})))) (defn- parse-gfont [font] diff --git a/frontend/src/uxbox/main/fonts.cljs b/frontend/src/uxbox/main/fonts.cljs index eb7f5e640..2b89e33c6 100644 --- a/frontend/src/uxbox/main/fonts.cljs +++ b/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"} - {:name "100italic" :weight "100" :style "italic"} - {:name "200" :weight "200" :style "normal"} - {:name "200italic" :weight "200" :style "italic"} - {:name "300" :weight "300" :style "normal"} - {:name "300italic" :weight "300" :style "italic"} - {:name "regular" :weight "400" :style "normal"} - {:name "italic" :weight "400" :style "italic"} - {:name "500" :weight "500" :style "normal"} - {:name "500italic" :weight "500" :style "italic"} - {:name "bold" :weight "bold" :style "normal"} - {:name "bolditalic" :weight "bold" :style "italic"} - {:name "black" :weight "900" :style "normal"} - {:name "blackitalic" :weight "900" :style "italic"}]} + :variants [{:id "100" :name "100" :weight "100" :style "normal"} + {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"} + {:id "200" :name "200" :weight "200" :style "normal"} + {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"} + {:id "300" :name "300" :weight "300" :style "normal"} + {:id "300italic" :name "300 (italic)" :weight "300" :style "italic"} + {:id "regular" :name "regular" :weight "400" :style "normal"} + {:id "italic" :name "italic" :weight "400" :style "italic"} + {:id "500" :name "500" :weight "500" :style "normal"} + {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"} + {:id "bold" :name "bold" :weight "bold" :style "normal"} + {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"} + {:id "black" :name "black" :weight "900" :style "normal"} + {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]} {:id "roboto" :family "roboto" :name "Roboto" - :variants [{:name "100" :weight "100" :style "normal"} - {:name "100italic" :weight "100" :style "italic"} - {:name "200" :weight "200" :style "normal"} - {:name "200italic" :weight "200" :style "italic"} - {:name "regular" :weight "400" :style "normal"} - {:name "italic" :weight "400" :style "italic"} - {:name "500" :weight "500" :style "normal"} - {:name "500italic" :weight "500" :style "italic"} - {:name "bold" :weight "bold" :style "normal"} - {:name "bolditalic" :weight "bold" :style "italic"} - {:name "black" :weight "900" :style "normal"} - {:name "blackitalic" :weight "900" :style "italic"}]} + :variants [{:id "100" :name "100" :weight "100" :style "normal"} + {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"} + {:id "200" :name "200" :weight "200" :style "normal"} + {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"} + {:id "regular" :name "regular" :weight "400" :style "normal"} + {:id "italic" :name "italic" :weight "400" :style "italic"} + {:id "500" :name "500" :weight "500" :style "normal"} + {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"} + {:id "bold" :name "bold" :weight "bold" :style "normal"} + {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"} + {:id "black" :name "black" :weight "900" :style "normal"} + {:id "blackitalic" :name "black (italic)" :weight "900" :style "italic"}]} {:id "robotocondensed" :family "robotocondensed" :name "Roboto Condensed" - :variants [{:name "100" :weight "100" :style "normal"} - {:name "100italic" :weight "100" :style "italic"} - {:name "200" :weight "200" :style "normal"} - {:name "200italic" :weight "200" :style "italic"} - {:name "regular" :weight "400" :style "normal"} - {:name "italic" :weight "400" :style "italic"} - {:name "500" :weight "500" :style "normal"} - {:name "500italic" :weight "500" :style "italic"} - {:name "bold" :weight "bold" :style "normal"} - {:name "bolditalic" :weight "bold" :style "italic"} - {:name "black" :weight "900" :style "normal"} - {:name "blackitalic" :weight "900" :style "italic"}]}]) + :variants [{:id "100" :name "100" :weight "100" :style "normal"} + {:id "100italic" :name "100 (italic)" :weight "100" :style "italic"} + {:id "200" :name "200" :weight "200" :style "normal"} + {:id "200italic" :name "200 (italic)" :weight "200" :style "italic"} + {:id "regular" :name "regular" :weight "400" :style "normal"} + {:id "italic" :name "italic" :weight "400" :style "italic"} + {:id "500" :name "500" :weight "500" :style "normal"} + {:id "500italic" :name "500 (italic)" :weight "500" :style "italic"} + {:id "bold" :name "bold" :weight "bold" :style "normal"} + {:id "bolditalic" :name "bold (italic)" :weight "bold" :style "italic"} + {:id "black" :name "black" :weight "900" :style "normal"} + {: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) diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index 877d5c481..11d24d159 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/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")) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs index 169070ea9..342a21fe2 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs +++ b/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)])]]]))