3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 19:21:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Adds internationalization to typography

Browse source
This commit is contained in:
alonso.torres 2020-10-01 14:31:30 +02:00 • committed by Hirunatan
parent bd92936a64
commit f45845cf85
11 changed files with 230 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/data/workspace.cljs
View file

@ -73,10 +73,9 @@
(s/def ::layout-flags (s/coll-of ::layout-flag))
(def default-layout
#{;; :sitemap
;; :sitemap-pages
;; :layers
:assets
#{:sitemap
:sitemap-pages
:layers
:element-options
:rules
:display-grid

13
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -520,19 +520,6 @@
:callback do-dismiss}]
:sync-dialog))))))
(def default-typography
{:name "Source Sans Pro Regular"
:font-id "sourcesanspro"
:font-family "sourcesanspro"
:font-variant-id "regular"
:font-size "14"
:font-weight "400"
:font-style "normal"
:line-height "1.2"
:letter-spacing "0"
:text-transform "none"})
(defn add-typography
[typography]
(let [typography (update typography :id #(or % (uuid/next)))]

19
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -19,7 +19,8 @@
[app.common.geom.shapes :as geom]
[app.main.data.workspace.common :as dwc]
[app.main.fonts :as fonts]
[app.util.object :as obj]))
[app.util.object :as obj]
[app.util.text :as ut]))
(defn create-editor
[]
@ -117,26 +118,12 @@
(->> (tree-seq map? :children node)
(filter match?)))
(defonce default-text-attrs
{:name "Source Sans Pro Regular"
:font-id "sourcesanspro"
:font-family "sourcesanspro"
:font-variant-id "regular"
:font-size "14"
:font-weight "400"
:font-style "normal"
:line-height "1.2"
:letter-spacing "0"
:text-transform "none"
:text-align "left"
:text-decoration "none"})
(defn- shape-current-values
[shape pred attrs]
(let [root (:content shape)
nodes (->> (nodes-seq pred root)
(map #(if (is-text-node? %)
(merge default-text-attrs %)
(merge ut/default-text-attrs %)
%)))]
(geom/get-attrs-multi nodes attrs)))

2
frontend/src/app/main/fonts.cljs
View file

@ -21,8 +21,6 @@
[clojure.set :as set]
[app.util.object :as obj]))
(defonce default-font "sourcesanspro")
(def google-fonts
(preload-gfonts "fonts/gfonts.2020.04.23.json"))

7
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -16,7 +16,8 @@
[app.common.data :as d]
[app.common.geom.shapes :as geom]
[app.common.geom.matrix :as gmt]
[app.util.object :as obj]))
[app.util.object :as obj]
[app.util.text :as ut]))
;; --- Text Editor Rendering
@ -54,7 +55,7 @@
text-transform (obj/get data "text-transform")
line-height (obj/get data "line-height")
font-id (obj/get data "font-id" fonts/default-font)
font-id (obj/get data "font-id" (:font-id ut/default-text-attrs))
font-variant-id (obj/get data "font-variant-id")
font-family (obj/get data "font-family")
@ -149,7 +150,7 @@
(fn []
(when (and embed-resources? (= type "root"))
(let [font-to-embed (get-all-fonts node)
font-to-embed (if (empty? font-to-embed) #{{:font-id fonts/default-font}} font-to-embed)
font-to-embed (if (empty? font-to-embed) #{ut/default-text-attrs} font-to-embed)
embeded (map embed-font font-to-embed)]
(-> (p/all embeded)
(p/then (fn [result] (reset! embeded-fonts (str/join "\n" result)))))))))

9
frontend/src/app/main/ui/workspace/shapes/text.cljs
View file

@ -28,6 +28,7 @@
[app.main.fonts :as fonts]
[app.util.color :as color]
[app.util.dom :as dom]
[app.util.text :as ut]
[app.common.geom.shapes :as geom]
[app.util.object :as obj]
[app.util.timers :as timers]
@ -135,7 +136,7 @@
text-transform (obj/get data "text-transform")
line-height (obj/get data "line-height")
font-id (obj/get data "font-id" fonts/default-font)
font-id (obj/get data "font-id" (:font-id ut/default-text-attrs))
font-variant-id (obj/get data "font-variant-id")
font-family (obj/get data "font-family")
@ -296,9 +297,9 @@
self (mf/ref-val self-ref)
target (dom/get-target event)
selecting? (mf/ref-val selecting-ref)]
(when-not (or (.contains sidebar target)
(.contains assets target)
(.contains self target)
(when-not (or (and sidebar (.contains sidebar target))
(and assets (.contains assets target))
(and self (.contains self target))
(and cpicker (.contains cpicker target)))
(if selecting?
(mf/set-ref-val! selecting-ref false)

11
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -38,6 +38,7 @@
[app.util.i18n :as i18n :refer [tr t]]
[app.util.router :as rt]
[app.util.timers :as timers]
[app.util.text :as ut]
[cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf]))
@ -330,7 +331,7 @@
:locale locale}])])]))
(mf/defc typography-box
[{:keys [file-id local? typographies locale open? on-open on-close] :as props}]
[{:keys [file file-id local? typographies locale open? on-open on-close] :as props}]
(let [state (mf/use-state {:detail-open? false
:menu-open? false
@ -344,7 +345,7 @@
(mf/use-callback
(mf/deps file-id)
(fn [value opacity]
(st/emit! (dwl/add-typography dwl/default-typography))))
(st/emit! (dwl/add-typography ut/default-typography))))
handle-change
(mf/use-callback
@ -402,7 +403,7 @@
[:div.asset-group
[:div.group-title {:class (when (not open?) "closed")}
[:span {:on-click #(if open? (on-close) (on-open))} i/arrow-slide "Typography" #_(t locale "workspace.assets.typography")]
[:span {:on-click #(if open? (on-close) (on-open))} i/arrow-slide (t locale "workspace.assets.typography")]
[:span.num-assets (str "\u00A0(") (count typographies) ")"] ;; Unicode 00A0 is non-breaking space
(when local?
[:div.group-button {:on-click add-typography} i/plus])]
@ -422,6 +423,7 @@
[:& typography-entry
{:key (:id typography)
:typography typography
:file file
:read-only? (not local?)
:on-context-menu #(on-context-menu (:id typography) %)
:on-change #(handle-change typography %)
@ -563,7 +565,8 @@
:on-close #(swap! toggles disj :colors)}])
(when show-typography?
[:& typography-box {:file-id (:id file)
[:& typography-box {:file file
:file-id (:id file)
:local? local?
:locale locale
:typographies typographies

9
frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
View file

@ -28,6 +28,7 @@
[app.util.dom :as dom]
[app.main.fonts :as fonts]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.text :as ut]
["slate" :refer [Transforms]]))
(def text-typography-attrs [:typography-ref-id :typography-ref-file])
@ -223,7 +224,7 @@
(d/concat text-font-attrs
text-spacing-attrs
text-transform-attrs)))
typography (merge dwl/default-typography setted-values)
typography (merge ut/default-typography setted-values)
typography (generate-typography-name typography)]
(let [id (uuid/next)]
(st/emit! (dwl/add-typography (assoc typography :id id)))
@ -255,14 +256,16 @@
(cond
typography
[:& typography-entry {:typography typography
:read-only? (some? (:typography-ref-file values))
:file (get shared-libs (:typography-ref-file values))
:on-deattach handle-deattach-typography
:on-change handle-change-typography}]
(= (:typography-ref-id values) :multiple)
[:div.multiple-typography
[:div.multiple-typography-text "Multiple typographies"]
[:div.multiple-typography-text (t locale "workspace.libraries.text.multiple-typography")]
[:div.multiple-typography-button {:on-click handle-deattach-typography
:title "Unlink all typographies"} i/unchain]]
:title (t locale "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
:else
[:> typography-options opts])

45
frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
View file

@ -20,8 +20,10 @@
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.fonts :as fonts]
[app.util.dom :as dom]
[app.util.text :as ut]
[app.util.timers :as ts]
[app.util.i18n :as i18n :refer [t]]))
[app.util.i18n :as i18n :refer [t]]
[app.util.router :as rt]))
(defn- attr->string [value]
(if (= value :multiple)
@ -49,9 +51,9 @@
font-size
font-variant-id]} values
font-id (or font-id "sourcesanspro")
font-size (or font-size "14")
font-variant-id (or font-variant-id "regular")
font-id (or font-id (:font-id ut/default-text-attrs))
font-size (or font-size (:font-size ut/default-text-attrs))
font-variant-id (or font-variant-id (:font-variant-id ut/default-text-attrs))
fonts (mf/deref fonts/fontsdb)
font (get fonts font-id)
@ -209,11 +211,21 @@
(mf/defc typography-entry
[{:keys [typography read-only? on-select on-change on-deattach on-context-menu editting? focus-name?]}]
(let [open? (mf/use-state editting?)
[{:keys [typography read-only? on-select on-change on-deattach on-context-menu editting? focus-name? file]}]
(let [locale (mf/deref i18n/locale)
open? (mf/use-state editting?)
selected (mf/deref refs/selected-shapes)
hover-deattach (mf/use-state false)
name-input-ref (mf/use-ref nil)]
name-input-ref (mf/use-ref nil)
#_(rt/resolve router :workspace
{:project-id (:project-id file)
:file-id (:id file)}
{:page-id (get-in file [:data :pages 0])})
handle-go-to-edit
(fn [] (st/emit! (rt/nav :workspace {:project-id (:project-id file)
:file-id (:id file)}
{:page-id (get-in file [:data :pages 0])})))]
(mf/use-effect
(mf/deps editting?)
@ -240,7 +252,7 @@
{:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
"Ag"]
(t locale "workspace.assets.typography.sample")]
[:div.typography-name (:name typography)]]
[:div.element-set-actions
(when on-deattach
@ -262,27 +274,32 @@
[:spang (:name typography)]]
[:div.row-flex
[:span.label "Font"]
[:span.label (t locale "workspace.assets.typography.font-id")]
[:span (:font-id typography)]]
[:div.row-flex
[:span.label "Size"]
[:span.label (t locale "workspace.assets.typography.font-variant-id")]
[:span (:font-variant-id typography)]]
[:div.row-flex
[:span.label (t locale "workspace.assets.typography.font-size")]
[:span (:font-size typography)]]
[:div.row-flex
[:span.label "Line Height"]
[:span.label (t locale "workspace.assets.typography.line-height")]
[:span (:line-height typography)]]
[:div.row-flex
[:span.label "Letter spacing"]
[:span.label (t locale "workspace.assets.typography.letter-spacing")]
[:span (:letter-spacing typography)]]
[:div.row-flex
[:span.label "Text transform"]
[:span.label (t locale "workspace.assets.typography.text-transform")]
[:span (:text-transform typography)]]
[:div.go-to-lib-button
"Go to style library file to edit"]]
{:on-click handle-go-to-edit}
(t locale "workspace.assets.typography.go-to-edit")]]
[:*
[:div.element-set-content

29
frontend/src/app/util/text.cljs
View file

@ -1,5 +1,34 @@
(ns app.util.text)
(defonce default-text-attrs
{:font-id "sourcesanspro"
:font-family "sourcesanspro"
:font-variant-id "regular"
:font-size "14"
:font-weight "400"
:font-style "normal"
:line-height "1.2"
:letter-spacing "0"
:text-transform "none"
:text-align "left"
:text-decoration "none"})
(def typography-fields
[:font-id
:font-family
:font-variant-id
:font-size
:font-weight
:font-style
:line-height
:letter-spacing
:text-transform])
(def default-typography
(merge
{:name "Source Sans Pro Regular"}
(select-keys default-text-attrs typography-fields)))
(defn some-node
[predicate node]
(or (predicate node)