Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor toast component to use theme context #16711

Merged
merged 6 commits into from
Jul 25, 2023
Merged

Refactor toast component to use theme context #16711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
85b0221
[Refactor] Toast - Rename override theme to theme
smohamedjavid Jul 17, 2023
114ffd2
[Fix] Icon name in Toast
smohamedjavid Jul 17, 2023
9702be1
[Refactor] Toast component to use theme context
smohamedjavid Jul 20, 2023
2b661dc
Update theme on permission request
smohamedjavid Jul 25, 2023
821cab1
[Fix] Shadows in toast
smohamedjavid Jul 25, 2023
8f3693a
[Fix] Update theme in Activity Center
smohamedjavid Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/quo2/components/avatars/user_avatar/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
:border-radius dimensions}))

(defn initials-avatar
[size draw-ring? customization-color]
[size draw-ring? customization-color theme]
(let [outer-dimensions (get-in sizes [size :outer])
inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
{:position :absolute
Expand All @@ -52,7 +52,7 @@
:border-radius inner-dimensions
:justify-content :center
:align-items :center
:background-color (colors/custom-color-by-theme customization-color 50 60)}))
:background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))

(def initials-avatar-text
{:color colors/white-opa-70})
Expand All @@ -67,7 +67,7 @@
:background-color background}))

(defn dot
[size ring?]
[size ring? theme]
(let [dimensions (get-in sizes [size :status-indicator])
border-width (get-in sizes [size :status-indicator-border])
right (case size
Expand All @@ -89,5 +89,5 @@
:height dimensions
:border-width border-width
:border-radius dimensions
:background-color (colors/theme-colors colors/white colors/neutral-100)
:border-color (colors/theme-colors colors/white colors/neutral-100)}))
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)
:border-color (colors/theme-colors colors/white colors/neutral-100 theme)}))
16 changes: 10 additions & 6 deletions src/quo2/components/avatars/user_avatar/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
(ns quo2.components.avatars.user-avatar.view
(:require [quo2.components.avatars.user-avatar.style :as style]
[quo2.components.markdown.text :as text]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
utils.string))

(defn initials-avatar
[{:keys [full-name size draw-ring? customization-color]}]
[{:keys [full-name size draw-ring? customization-color theme]}]
(let [font-size (get-in style/sizes [size :font-size])
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
[rn/view
{:accessibility-label :initials-avatar
:style (style/initials-avatar size draw-ring? customization-color)}
:style (style/initials-avatar size draw-ring? customization-color theme)}
[text/text
{:style style/initials-avatar-text
:size font-size
Expand All @@ -20,12 +21,12 @@

(def valid-ring-sizes #{:big :medium :small})

(defn user-avatar
(defn- user-avatar-internal
"If no `profile-picture` is given, draws the initials based on the `full-name` and
uses `ring-background` to display the ring behind the initials when given. Otherwise,
shows the `profile-picture` which already comes with the ring drawn."
[{:keys [full-name status-indicator? online? size profile-picture ring-background
customization-color static? muted?]
customization-color static? muted? theme]
:or {status-indicator? true
online? true
size :big
Expand All @@ -49,11 +50,14 @@
{:full-name full-name
:size size
:draw-ring? draw-ring?
:customization-color customization-color}])
:customization-color customization-color
:theme theme}])
(when status-indicator?
[rn/view
{:accessibility-label :status-indicator
:style (style/dot size draw-ring?)}
:style (style/dot size draw-ring? theme)}
[rn/view
{:accessibility-label :inner-status-indicator-dot
:style (style/inner-dot size online?)}]])]))

(def user-avatar (quo.theme/with-theme user-avatar-internal))
14 changes: 7 additions & 7 deletions src/quo2/components/icon.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
[quo2.components.icons.icons :as icons]
[quo2.components.icons.svg :as icons.svg]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn]))

(defn- valid-color?
Expand All @@ -12,11 +13,10 @@
(not (string/blank? color)))))

(defn memo-icon-fn
[icon-name
{:keys [color color-2 no-color
container-style size accessibility-label]
[{:keys [color color-2 no-color
container-style size accessibility-label theme]
:or {accessibility-label :icon}}
_]
icon-name]
(let [size (or size 20)]
^{:key icon-name}
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
Expand All @@ -34,15 +34,15 @@
(when (not no-color)
{:tint-color (if (and (string? color) (not (string/blank? color)))
color
(colors/theme-colors colors/neutral-100 colors/white))})
(colors/theme-colors colors/neutral-100 colors/white theme))})

container-style)
:accessibility-label accessibility-label
:source (icons/icon-source (str (name icon-name) size))}])))

(def themed-icon (memoize memo-icon-fn))
(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn)))

(defn icon
([icon-name] (icon icon-name nil))
([icon-name params]
(themed-icon icon-name params (colors/dark?))))
(themed-icon params icon-name)))
29 changes: 19 additions & 10 deletions src/quo2/components/markdown/text.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
(ns quo2.components.markdown.text
(:require [quo2.foundations.colors :as colors]
[quo2.foundations.typography :as typography]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))

(defn text-style
[{:keys [size align weight style]}]
[{:keys [size align weight style theme]}]
(merge (case (or weight :regular)
:regular typography/font-regular
:medium typography/font-medium
Expand All @@ -25,14 +25,23 @@
{:text-align (or align :auto)}
(if (:color style)
style
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100)))))
(assoc style
:color
(if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100)))))

(defn text
[]
(let [this (reagent/current-component)
props (reagent/props this)
style (text-style props)]
(defn- text-view-internal
[props & children]
(let [style (text-style props)]
(into [rn/text
(merge {:style style}
(dissoc props :style :size :align :weight :color))]
(reagent/children this))))
(dissoc props :style :size :align :weight :color :theme))]
children)))

(def ^:private text-view (quo.theme/with-theme text-view-internal))

(defn text
[]
(let [this (reagent/current-component)
props (reagent/props this)
children (reagent/children this)]
(into [text-view props] children)))
10 changes: 6 additions & 4 deletions src/quo2/components/notifications/count_down_circle.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(ns quo2.components.notifications.count-down-circle
(:require [goog.string :as gstring]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.svg :as svg]
[reagent.core :as reagent]))
Expand Down Expand Up @@ -48,8 +48,8 @@
{:color {:dark colors/neutral-80-opa-40
:light colors/white-opa-40}})

(defn circle-timer
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}]
(defn- circle-timer-internal
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}]
(let [rotation (or rotation :clockwise)
duration (or duration 4)
stroke-width (or stroke-width 1)
Expand Down Expand Up @@ -98,8 +98,10 @@
[svg/path
{:d path
:fill :none
:stroke (or color (get-in themes [:color (theme/get-theme)]))
:stroke (or color (get-in themes [:color theme]))
:stroke-linecap :square
:stroke-width stroke-width
:stroke-dasharray path-length
:stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])})))

(def circle-timer (quo.theme/with-theme circle-timer-internal))
42 changes: 21 additions & 21 deletions src/quo2/components/notifications/toast/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@
[quo2.foundations.colors :as colors]
[quo2.foundations.shadows :as shadows]))

(def box-container
{:margin-horizontal 12
:border-radius 12
:overflow :hidden})
(defn box-container
[theme]
(merge (shadows/get 1 theme)
{:margin-horizontal 12
:border-radius 12
:overflow :hidden}))

(def blur-container
{:height "100%"
Expand All @@ -19,35 +21,33 @@

(defn content-container
[theme]
(merge
(shadows/get 1 theme)
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
:flex-direction :row
:justify-content :space-between
:padding-vertical 8
:padding-left 10
:padding-right 8
:border-radius 12}))
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
:flex-direction :row
:justify-content :space-between
:padding-vertical 8
:padding-left 10
:padding-right 8
:border-radius 12})

(defn title
[override-theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
[theme]
{:color (colors/theme-colors colors/white colors/neutral-100 theme)})

(defn text
[override-theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
[theme]
{:color (colors/theme-colors colors/white colors/neutral-100 theme)})

(defn icon
[override-theme]
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)
[theme]
{:color (colors/theme-colors colors/white colors/neutral-100 theme)
:container-style {:width 20 :height 20}})

(def left-side-container {:padding 2})
(def right-side-container {:padding 4 :flex 1})

(defn action-container
[override-theme]
{:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme)
[theme]
{:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 theme)
:flex-direction :row
:padding-vertical 3
:padding-horizontal 8
Expand Down
72 changes: 42 additions & 30 deletions src/quo2/components/notifications/toast/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,88 @@
[quo2.components.markdown.text :as text]
[quo2.components.notifications.count-down-circle :as count-down-circle]
[quo2.components.notifications.toast.style :as style]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[react-native.blur :as blur]
[react-native.core :as rn]
[utils.i18n :as i18n]))

(defn toast-action-container
[{:keys [on-press style]} & children]
[{:keys [on-press style theme]} & children]
[rn/touchable-highlight
{:on-press on-press
:underlay-color :transparent}
[into
[rn/view
{:style (merge (style/action-container (theme/get-theme)) style)}]
{:style (merge (style/action-container theme) style)}]
children]])

(defn toast-undo-action
[duration on-press override-theme]
[toast-action-container {:on-press on-press :accessibility-label :toast-undo-action}
(defn toast-undo-action-internal
[{:keys [undo-duration undo-on-press theme]}]
[toast-action-container
{:on-press undo-on-press
:accessibility-label :toast-undo-action
:theme theme}
[rn/view {:style {:margin-right 5}}
[count-down-circle/circle-timer {:duration duration}]]
[count-down-circle/circle-timer {:duration undo-duration}]]
[text/text
{:size :paragraph-2 :weight :medium :style (style/text override-theme)}
{:size :paragraph-2
:weight :medium
:style (style/text theme)}
[i18n/label :t/undo]]])

(defn- toast-container
[{:keys [left title text right container-style override-theme]}]
[rn/view {:style (merge style/box-container container-style)}
(def ^:private toast-undo-action (quo.theme/with-theme toast-undo-action-internal))

(defn- toast-container-internal
[{:keys [left title text right container-style theme]}]
[rn/view {:style (merge (style/box-container theme) container-style)}
[blur/view
{:style style/blur-container
:blur-amount 13
:blur-radius 10
:blur-type :transparent
:overlay-color :transparent}]

[rn/view {:style (style/content-container override-theme)}
[rn/view {:style (style/content-container theme)}
[rn/view {:style style/left-side-container}
left]
[rn/view {:style style/right-side-container}
(when title
[text/text
{:size :paragraph-1
:weight :semi-bold
:style (style/title override-theme)
:style (style/title theme)
:accessibility-label :toast-title}
title])
(when text
[text/text
{:size :paragraph-2
:weight :medium
:style (style/text override-theme)
:style (style/text theme)
:accessibility-label :toast-content}
text])]
right]])

(def ^:private toast-container (quo.theme/with-theme toast-container-internal))

(defn toast
[{:keys [icon icon-color title text action undo-duration undo-on-press container-style
override-theme user]}]
[toast-container
{:left (cond icon
[icon/icon icon
(cond-> (style/icon override-theme)
icon-color
(assoc :color icon-color))]
theme user]}]
(let [context-theme (or theme (quo.theme/get-theme))]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this a temporary solution while we update uses across the codebase? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, That's for the theme provider below that line.
Fallback to user-theme if a theme is not specified.

It's similar to what we do with screens or bottom sheets.

status-mobile/src/status_im2/navigation/view.cljs

Line 66 in 33d41dc

[theme/provider {:theme (or theme user-theme)}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah you are right, maybe we should make it a sub instead? 🤔 across all places

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

anyway it's beyond this pr 👍

[quo.theme/provider {:theme context-theme}
[toast-container
{:left (cond icon
[icon/icon icon
(cond-> (style/icon context-theme)
icon-color
(assoc :color icon-color))]

user
[user-avatar/user-avatar user])
:title title
:text text
:right (if undo-duration
[toast-undo-action undo-duration undo-on-press override-theme]
action)
:container-style container-style
:override-theme override-theme}])
user
[user-avatar/user-avatar user])
:title title
:text text
:right (if undo-duration
[toast-undo-action
{:undo-duration undo-duration
:undo-on-press undo-on-press}]
action)
:container-style container-style}]]))
Loading