From 60f9b4711573d41c6adfe8244141bde149d9c172 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 23 Mar 2021 10:53:40 +0100 Subject: [PATCH] :bug: Fix default font loading. --- .../styles/common/dependencies/fonts.scss | 95 ++++++------------- .../partials/sidebar-element-options.scss | 4 +- frontend/src/app/main/fonts.cljs | 53 ++++------- .../src/app/main/ui/shapes/text/embed.cljs | 25 +++-- 4 files changed, 64 insertions(+), 113 deletions(-) diff --git a/frontend/resources/styles/common/dependencies/fonts.scss b/frontend/resources/styles/common/dependencies/fonts.scss index d0dfc685a..dedb85bf4 100644 --- a/frontend/resources/styles/common/dependencies/fonts.scss +++ b/frontend/resources/styles/common/dependencies/fonts.scss @@ -2,8 +2,7 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at http://mozilla.org/MPL/2.0/. // -// Copyright (c) 2015-2016 Andrey Antukh -// Copyright (c) 2015-2016 Juan de la Cruz +// Copyright (c) UXBOX Labs SL // Font sizes $fs8: 0.5rem; @@ -41,71 +40,31 @@ $title-lh: 1.25; $title-lh-sm: 1.15; // Work Sans -@include font-face("worksans","WorkSans-ExtraLight", "100"); -@include font-face("worksans","WorkSans-ExtraLightitalic","100",italic); -@include font-face("worksans","WorkSans-Light","200"); -@include font-face("worksans","WorkSans-LightItalic","200",italic); -@include font-face("worksans","WorkSans-Regular",normal); -@include font-face("worksans","WorkSans-Italic",normal,italic); -@include font-face("worksans","WorkSans-SemiBold","500"); -@include font-face("worksans","WorkSans-SemiBoldItalic","500",italic); -@include font-face("worksans","WorkSans-Bold",bold); -@include font-face("worksans","WorkSans-BoldItalic",bold,italic); -@include font-face("worksans","WorkSans-Black","900"); -@include font-face("worksans","WorkSans-BlackItalic","900",italic); +@include font-face("worksans","WorkSans-Thin", "100"); +@include font-face("worksans","WorkSans-ThinItalic", "100", italic); +@include font-face("worksans","WorkSans-ExtraLight", "200"); +@include font-face("worksans","WorkSans-ExtraLightitalic", "200", italic); +@include font-face("worksans","WorkSans-Light", "300"); +@include font-face("worksans","WorkSans-LightItalic", "300", italic); +@include font-face("worksans","WorkSans-Regular", normal); +@include font-face("worksans","WorkSans-Italic", normal, italic); +@include font-face("worksans","WorkSans-SemiBold", "600"); +@include font-face("worksans","WorkSans-SemiBoldItalic", "600", italic); +@include font-face("worksans","WorkSans-Bold", bold); +@include font-face("worksans","WorkSans-BoldItalic", bold, italic); +@include font-face("worksans","WorkSans-Black", "900"); +@include font-face("worksans","WorkSans-BlackItalic","900", italic); // Source Sans Pro -@include font-face("sourcesanspro","sourcesanspro-extralight", "100"); -@include font-face("sourcesanspro","sourcesanspro-extralightitalic","100",italic); -@include font-face("sourcesanspro","sourcesanspro-light","200"); -@include font-face("sourcesanspro","sourcesanspro-lightitalic","200",italic); -@include font-face("sourcesanspro","sourcesanspro-regular",normal); -@include font-face("sourcesanspro","sourcesanspro-italic",normal,italic); -@include font-face("sourcesanspro","sourcesanspro-semibold","500"); -@include font-face("sourcesanspro","sourcesanspro-semibolditalic","500",italic); -@include font-face("sourcesanspro","sourcesanspro-bold",bold); -@include font-face("sourcesanspro","sourcesanspro-bolditalic",bold,italic); -@include font-face("sourcesanspro","sourcesanspro-black","900"); -@include font-face("sourcesanspro","sourcesanspro-blackitalic","900",italic); - -// Open Sans -@include font-face("opensans","opensans-extralight","100"); -@include font-face("opensans","opensans-extralightitalic","100",italic); -@include font-face("opensans","opensans-light","200"); -@include font-face("opensans","opensans-lightitalic","200",italic); -@include font-face("opensans","opensans-regular",normal); -@include font-face("opensans","opensans-italic",normal,italic); -@include font-face("opensans","opensans-semibold","500"); -@include font-face("opensans","opensans-semibolditalic","500",italic); -@include font-face("opensans","opensans-bold",bold); -@include font-face("opensans","opensans-bolditalic",bold,italic); -@include font-face("opensans","opensans-black","900"); -@include font-face("opensans","opensans-blackitalic","900",italic); - -// Roboto -@include font-face("roboto","roboto-thin","100"); -@include font-face("roboto","roboto-thinitalic","100",italic); -@include font-face("roboto","roboto-light","200"); -@include font-face("roboto","roboto-lightitalic","200",italic); -@include font-face("roboto","roboto-regular",normal); -@include font-face("roboto","roboto-italic",normal,italic); -@include font-face("roboto","roboto-semibold","500"); -@include font-face("roboto","roboto-semibolditalic","500",italic); -@include font-face("roboto","roboto-bold",bold); -@include font-face("roboto","roboto-bolditalic",bold,italic); -@include font-face("roboto","roboto-black","900"); -@include font-face("roboto","roboto-blackitalic","900",italic); - -// Roboto Condensed -@include font-face("robotocondensed","robotocondensed-thin","100"); -@include font-face("robotocondensed","robotocondensed-thinitalic","100",italic); -@include font-face("robotocondensed","robotocondensed-light","200"); -@include font-face("robotocondensed","robotocondensed-lightitalic","200",italic); -@include font-face("robotocondensed","robotocondensed-regular",normal); -@include font-face("robotocondensed","robotocondensed-italic",normal,italic); -@include font-face("robotocondensed","robotocondensed-semibold","500"); -@include font-face("robotocondensed","robotocondensed-semibolditalic","500",italic); -@include font-face("robotocondensed","robotocondensed-bold",bold); -@include font-face("robotocondensed","robotocondensed-bolditalic",bold,italic); -@include font-face("robotocondensed","robotocondensed-black","900"); -@include font-face("robotocondensed","robotocondensed-blackitalic","900",italic); +@include font-face("sourcesanspro","sourcesanspro-extralight", "200"); +@include font-face("sourcesanspro","sourcesanspro-extralightitalic", "200", italic); +@include font-face("sourcesanspro","sourcesanspro-light", "300"); +@include font-face("sourcesanspro","sourcesanspro-lightitalic", "300", italic); +@include font-face("sourcesanspro","sourcesanspro-regular", normal); +@include font-face("sourcesanspro","sourcesanspro-italic", normal, italic); +@include font-face("sourcesanspro","sourcesanspro-semibold", "600"); +@include font-face("sourcesanspro","sourcesanspro-semibolditalic", "600", italic); +@include font-face("sourcesanspro","sourcesanspro-bold", bold); +@include font-face("sourcesanspro","sourcesanspro-bolditalic", bold, italic); +@include font-face("sourcesanspro","sourcesanspro-black", "900"); +@include font-face("sourcesanspro","sourcesanspro-blackitalic", "900", italic); diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 778d4b313..80dddb37a 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -745,7 +745,7 @@ &:hover { background: $color-gray-60; - + .custom-select, .editable-select, input { @@ -1016,7 +1016,7 @@ .typography-name { font-size: 14px; } - + .row-flex { padding: 0.5rem 0; } diff --git a/frontend/src/app/main/fonts.cljs b/frontend/src/app/main/fonts.cljs index 209350233..be8622cfd 100644 --- a/frontend/src/app/main/fonts.cljs +++ b/frontend/src/app/main/fonts.cljs @@ -5,21 +5,21 @@ ;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; defined by the Mozilla Public License, v. 2.0. ;; -;; Copyright (c) 2020 UXBOX Labs SL +;; Copyright (c) UXBOX Labs SL (ns app.main.fonts "Fonts management and loading logic." (:require-macros [app.main.fonts :refer [preload-gfonts]]) (:require - [beicon.core :as rx] - [promesa.core :as p] - [okulary.core :as l] - [cuerdas.core :as str] - [app.util.dom :as dom] - [app.util.timers :as ts] [app.common.data :as d] + [app.util.dom :as dom] + [app.util.object :as obj] + [app.util.timers :as ts] + [beicon.core :as rx] [clojure.set :as set] - [app.util.object :as obj])) + [cuerdas.core :as str] + [okulary.core :as l] + [promesa.core :as p])) (def google-fonts (preload-gfonts "fonts/gfonts.2020.04.23.json")) @@ -28,20 +28,17 @@ [{:id "sourcesanspro" :name "Source Sans Pro" :family "sourcesanspro" - :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"}]}]) + :variants + [{:id "200" :name "200" :weight "200" :style "normal" :suffix "extralight"} + {:id "200italic" :name "200 (italic)" :weight "200" :style "italic" :suffix "extralightitalic"} + {:id "300" :name "300" :weight "300" :style "normal" :suffix "light"} + {:id "300italic" :name "300 (italic)" :weight "300" :style "italic" :suffix "lightitalic"} + {:id "regular" :name "regular" :weight "400" :style "normal"} + {:id "italic" :name "italic" :weight "400" :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 {})) @@ -75,7 +72,6 @@ [backend] (get @fontsview backend)) - ;; --- Fonts Loader (defonce loaded (l/atom #{})) @@ -93,12 +89,6 @@ variants (str/join "," (map :id variants))] (str base ":" variants "&display=block"))) -(defn font-url [font-id font-variant-id] - (let [{:keys [backend family] :as entry} (get @fontsdb font-id)] - (case backend - :google (gfont-url family {:id font-variant-id}) - (str "/fonts/" family "-" (or font-variant-id "regular") ".woff")))) - (defmulti ^:private load-font :backend) (defmethod load-font :builtin @@ -140,8 +130,3 @@ (or (d/seek #(or (= (:id %) "regular") (= (:name %) "regular")) variants) (first variants))) - -(defn fetch-font [font-id font-variant-id] - (let [font-url (font-url font-id font-variant-id)] - (-> (js/fetch font-url) - (p/then (fn [res] (.text res)))))) diff --git a/frontend/src/app/main/ui/shapes/text/embed.cljs b/frontend/src/app/main/ui/shapes/text/embed.cljs index 8e6a0b46f..a8f7d9ab8 100644 --- a/frontend/src/app/main/ui/shapes/text/embed.cljs +++ b/frontend/src/app/main/ui/shapes/text/embed.cljs @@ -5,7 +5,7 @@ ;; This Source Code Form is "Incompatible With Secondary Licenses", as ;; defined by the Mozilla Public License, v. 2.0. ;; -;; Copyright (c) 2020-2021 UXBOX Labs SL +;; Copyright (c) UXBOX Labs SL (ns app.main.ui.shapes.text.embed (:require @@ -26,7 +26,7 @@ font-style: %(style)s; font-weight: %(weight)s; font-display: block; - src: url(/fonts/%(family)s-%(style)s.woff) format('woff'); + src: url(/fonts/%(family)s-%(suffix)s.woff) format('woff'); } ") @@ -42,10 +42,19 @@ (defn get-local-font-css [font-id font-variant-id] (let [{:keys [family variants] :as font} (get @fonts/fontsdb font-id) - {:keys [name weight style] :as variant} (d/seek #(= (:id %) font-variant-id) variants)] - (-> (str/format font-face-template {:family family :style style :width weight}) + {:keys [name weight style suffix] :as variant} (d/seek #(= (:id %) font-variant-id) variants)] + (-> (str/format font-face-template {:family family :suffix (or suffix font-variant-id) :width weight}) (p/resolved)))) +(defn fetch-font-css + [font-id font-variant-id] + (let [{:keys [backend family] :as entry} (get @fonts/fontsdb font-id)] + (if (= :google backend) + (-> (fonts/gfont-url family [{:id font-variant-id}]) + (js/fetch) + (p/then (fn [res] (.text res))))) + (get-local-font-css font-id font-variant-id))) + (defn get-text-font-data [text] (->> text (re-seq #"url\(([^)]+)\)") @@ -54,11 +63,9 @@ (p/all))) (defn embed-font [{:keys [font-id font-variant-id] :or {font-variant-id "regular"}}] - (let [{:keys [backend]} (get @fonts/fontsdb font-id)] - (p/let [font-text (case backend - :google (fonts/fetch-font font-id font-variant-id) - (get-local-font-css font-id font-variant-id)) - url-to-data (get-text-font-data font-text) + (let [{:keys [backend family]} (get @fonts/fontsdb font-id)] + (p/let [font-text (fetch-font-css font-id font-variant-id) + url-to-data (get-text-font-data font-text) replace-text (fn [text [url data]] (str/replace text url data))] (reduce replace-text font-text url-to-data))))