status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[fix][perf] fix typography on android 

- remove font-weight and font-style on mobile because otherwise android
falls back to default font and doesn't use the font-family
- since nested text inherits from parent, only put the needed styling
in nested text style
- use parens instead of brackets to resolve components
This commit is contained in:
yenda 2019-06-04 08:59:35 +02:00
parent 1ae42ea424
commit bd6583cb76
No known key found for this signature in database
GPG Key ID: 0095623C0069DCE6
2 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/src/status_im/ui/components/react.cljs
View File

@ -113,34 +113,35 @@
(update :style typography/get-style)
(assoc :max-font-size-multiplier max-font-size-multiplier)))
(defn prepare-nested-text-props [props]
(-> props
(update :style typography/get-nested-style)
(assoc :nested? true)))
;; Accessor methods for React Components
(defn text
"For nested text elements, use nested-text instead"
([text-element]
[text {} text-element])
(text {} text-element))
([options text-element]
[text-class (prepare-text-props options) text-element]))
(defn nested-text
([options & nested-text-elements]
(let [options-with-style (prepare-text-props options)]
(reduce (fn [acc text-element]
(conj acc
(cond
(string? text-element)
[text-class options-with-style text-element]
(vector? text-element)
(let [[options nested-text-elements] text-element]
[(if (string? nested-text-elements)
text-class
nested-text)
(prepare-text-props
(utils.core/deep-merge options-with-style
options))
nested-text-elements]))))
[text-class options-with-style]
nested-text-elements))))
"Returns nested text elements with proper styling and typography
Do not use the nested? option, it is for internal usage of the function only"
[options & nested-text-elements]
(let [options-with-style (if (:nested? options)
(prepare-nested-text-props options)
(prepare-text-props options))]
(reduce (fn [acc text-element]
(conj acc
(if (string? text-element)
text-element
(let [[options & nested-text-elements] text-element]
(apply nested-text (prepare-nested-text-props options)
nested-text-elements)))))
[text-class (dissoc options-with-style :nested?)]
nested-text-elements)))
(defn text-input
[options text]

50
src/status_im/ui/components/typography.cljs
View File

@ -61,22 +61,44 @@
[{:keys [typography] :as style}]
{:pre [(or (nil? typography) (contains? typography-styles typography))]}
(let [{:keys [font-weight font-style font-size line-height]
:or {line-height (get-line-height font-size)}
:as style}
(merge default-style
(get typography-styles
typography)
(dissoc style :typography :nested?))]
(if platform/desktop?
(assoc style :font-family default-font-family)
(-> style
(assoc :font-family
(str default-font-family "-"
(case font-weight
"400" (when-not (= font-style :italic)
"Regular")
"500" "Medium"
"600" "SemiBold"
"700" "Bold")
(when (= font-style :italic)
"Italic")))
(dissoc :font-weight :font-style)))))
(defn get-nested-style
[{:keys [typography] :as style}]
{:pre [(or (nil? typography) (contains? typography-styles typography))]}
(let [{:keys [font-weight font-style font-size] :as style}
(merge (get typography-styles
typography)
(dissoc style :typography))]
(assoc style
:font-family (if platform/desktop?
default-font-family
(str default-font-family "-"
(case font-weight
"400" (when-not (= font-style :italic)
"Regular")
"500" "Medium"
"600" "SemiBold"
"700" "Bold")
(when (= font-style :italic)
"Italic")))
:line-height line-height)))
(if platform/desktop?
style
(cond-> (dissoc style :font-weight :font-style)
(or font-weight font-style)
(assoc :font-family
(str default-font-family "-"
(case font-weight
"500" "Medium"
"600" "SemiBold"
"700" "Bold"
(when-not (= font-style :italic)
"Regular"))
(when (= font-style :italic)
"Italic")))))))