Skip to content

Commit

Permalink
fix: action/reaction drawer UI issue (#19630)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yqrashawn
yqrashawn authored May 17, 2024
1 parent afd92d2 commit cfe9d6e
Show file tree
Hide file tree
Showing 15 changed files with 289 additions and 240 deletions.
16 changes: 10 additions & 6 deletions src/quo/components/drawers/drawer_action/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,26 @@

(h/describe "Drawers: drawer-action"
(h/test "default render"
(h/render-with-theme-provider [drawer-action/view {}])
(h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
(h/is-truthy (h/query-by-label-text :container)))

(h/test "on-press-in changes internal state to :pressed"
(h/render-with-theme-provider [drawer-action/view {}])
(h/render-with-theme-provider [drawer-action/view {:accessibility-label :container}])
(h/fire-event :on-press-in (h/get-by-label-text :container))
(h/wait-for #(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 5)})))

(h/test "render default action with state :selected"
(h/render-with-theme-provider [drawer-action/view {:state :selected}])
(h/render-with-theme-provider [drawer-action/view
{:state :selected :accessibility-label :container}])
(h/has-style (h/query-by-label-text :container)
{:backgroundColor (colors/resolve-color :blue :light 5)})
(h/is-truthy (h/query-by-label-text :check-icon)))

(h/test "call on-press"
(let [on-press (h/mock-fn)]
(h/render-with-theme-provider [drawer-action/view {:on-press on-press}])
(h/render-with-theme-provider [drawer-action/view
{:on-press on-press :accessibility-label :container}])
(h/fire-event :on-press (h/get-by-label-text :container))
(h/was-called on-press)))

Expand All @@ -38,8 +40,9 @@

(h/test "render :toggle action with state :selected"
(h/render-with-theme-provider [drawer-action/view
{:action :toggle
:state :selected}])
{:accessibility-label :container
:action :toggle
:state :selected}])
(h/is-truthy (h/query-by-label-text "toggle-on"))
(h/has-style (h/query-by-label-text :container)
{:backgroundColor :transparent}))
Expand All @@ -51,4 +54,5 @@
:description "Just a small desc"}])
(h/is-truthy (h/query-by-label-text :left-icon))
(h/is-truthy (h/query-by-text "Check contact"))
(h/has-style (h/query-by-text "Check contact") {:color colors/neutral-100})
(h/is-truthy (h/query-by-text "Just a small desc"))))
2 changes: 2 additions & 0 deletions src/quo/components/drawers/drawer_action/schema.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
[:=>
[:cat
[:map {:closed true}
[:accessibility-label {:optional true} [:maybe :keyword]]
[:type {:optional true} [:maybe [:enum :main :danger]]]
[:action {:optional true} [:maybe [:enum :arrow :toggle]]]
[:icon {:optional true} [:maybe :keyword]]
[:description {:optional true} [:maybe :string]]
Expand Down
27 changes: 25 additions & 2 deletions src/quo/components/drawers/drawer_action/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,23 @@
{:flex 1
:margin-right 12})

(defn text
[{:keys [theme blur? type]}]
(let [base {:weight :medium}
theme-with-blur (if blur? :blue theme)
matcher [theme-with-blur type]
color
(case matcher
([:dark :main] [:light :main]) (colors/theme-colors colors/neutral-100
colors/white
theme)
[:blur :main] colors/white-70-blur
([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50
colors/danger-60
theme)
[:blur :danger] colors/danger-60)]
(assoc-in base [:style :color] color)))

(defn- neutral-color
[theme blur?]
(if blur?
Expand All @@ -41,8 +58,14 @@
:margin-top 1})

(defn icon-color
[{:keys [theme blur?]}]
(neutral-color theme blur?))
[{:keys [theme blur? type]}]
(let [theme-with-blur (if blur? :blue theme)
matcher [theme-with-blur type]]
(case matcher
([:dark :main] [:light :main]) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
[:blur :main] colors/white-70-blur
([:dark :danger] [:light :danger]) (colors/theme-colors colors/danger-50 colors/danger-60 theme)
[:blur :danger] colors/danger-60)))

(defn desc
[{:keys [theme blur?]}]
Expand Down
22 changes: 15 additions & 7 deletions src/quo/components/drawers/drawer_action/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@
[schema.core :as schema]))

(defn view-internal
[{:keys [action icon description state title on-press
customization-color blur?]
:or {customization-color :blue
blur? false}}]
[{:keys [action icon description state title on-press customization-color
blur? accessibility-label]
action-type :type
:or {customization-color :blue
blur? false}}]
(let [theme (quo.theme/use-theme)
action-type (or action-type :main)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
Expand All @@ -29,16 +31,21 @@
:pressed? pressed?
:description? (not-empty description)
:blur? blur?})
:accessibility-label :container}
:accessibility-label accessibility-label}
(when icon
[icon/icon icon
{:accessibility-label :left-icon
:container-style (style/left-icon)
:color (style/icon-color {:theme theme
:type action-type
:blur? blur?})}])

[rn/view {:style (style/text-container)}
[text/text {:weight :medium}
[rn/view
{:style (style/text-container)}
[text/text
(style/text {:theme theme
:type action-type
:blur? blur?})
title]

(when (seq description)
Expand All @@ -61,6 +68,7 @@
[icon/icon :i/chevron-right
{:accessibility-label :arrow-icon
:color (style/icon-color {:theme theme
:type action-type
:blur? blur?})}]

(= state :selected)
Expand Down
59 changes: 17 additions & 42 deletions src/quo/components/messages/author/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,14 @@
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))

(defn- primary-name-top-offset
[size]
(when (= size 15)
(cond platform/ios? 1
platform/android? -0.5
:else 0)))

(defn- primary-name-margin-bottom-offset
[size]
(when (and (= size 15)
(or platform/ios? platform/android?))
-0.25))

(defn- primary-name-layout-offsets
[size]
;; NOTE(seanstrom): We need to sometimes offset the primary-name to align the baseline of the text
;; while avoiding shifting elements downward.
{:top (primary-name-top-offset size)
:margin-bottom (primary-name-margin-bottom-offset size)})

(defn container
[size]
{:flex-shrink 1
:flex-wrap :nowrap
:flex-direction :row
:align-items :baseline
;; NOTE(seanstrom): Because we're offseting the primary-name we need to inverse the offset on the
;; container to avoid shifting elements downward
:top (* -1 (primary-name-top-offset size))})

(def details-container
{:flex-direction :row
:margin-left 8})
(cond->
{:flex-shrink 1
:flex-wrap :nowrap
:flex-direction :row
:align-items :center
:height (if (= size 15) 22 18)}))

(defn middle-dot
[theme]
Expand All @@ -48,25 +23,25 @@

(defn primary-name
[muted? theme size]
(merge (primary-name-layout-offsets size)
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
:flex-shrink 1}))
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
;; iOS: primary-name height is 22.3 / 18.7
;; Android: primary-name height is 21.8 / 18.5
:margin-vertical (if (= size 15)
(if platform/ios? -0.15 0)
(if platform/ios? -0.35 -0.25))
:flex-shrink 1})

(defn secondary-name
[theme]
{:flex-shrink 999999
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

(defn icon-container
[is-first?]
[is-first? size]
{:margin-left (if is-first? 4 2)
;; NOTE(seanstrom): Because we're using flex baseline to align elements
;; we need to offset the icon container to match the designs.
:top (cond platform/ios? 1
platform/android? 2
:else 0)})
:padding-top (if (= size 15) 6 4)})

(defn time-text
[theme]
Expand Down
68 changes: 40 additions & 28 deletions src/quo/components/messages/author/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,35 @@
[{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
muted? size]
:or {size 13}}]
(let [theme (quo.theme/use-theme)]
(let [theme (quo.theme/use-theme)

short-chat-key-component
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])

time-str-component
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])

middle-dot-seperator-component
(when (and short-chat-key-component time-str-component)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])]
[rn/view
{:style (merge (style/container size) style)}
[text/text
Expand All @@ -23,7 +51,7 @@
:accessibility-label :author-primary-name
:style (style/primary-name muted? theme size)}
primary-name]
(when (not (string/blank? secondary-name))
(when-not (string/blank? secondary-name)
[:<>
[text/text
{:size :label
Expand All @@ -41,38 +69,22 @@
[icons/icon :main-icons2/contact
{:size 12
:no-color true
:container-style (style/icon-container true)}])
:container-style (style/icon-container true size)}])
(cond
verified?
[icons/icon :main-icons2/verified
{:size 12
:no-color true
:container-style (style/icon-container contact?)}]
:container-style (style/icon-container contact? size)}]
untrustworthy?
[icons/icon :main-icons2/untrustworthy
{:size 12
:no-color true
:container-style (style/icon-container contact?)}])
[rn/view {:style style/details-container}
(when (and (not verified?) short-chat-key)
[text/text
{:weight :monospace
:size :label
:number-of-lines 1
:style (style/chat-key-text theme)}
short-chat-key])
(when (and (not verified?) time-str short-chat-key)
[text/text
{:monospace true
:size :label
:number-of-lines 1
:style (style/middle-dot theme)}
middle-dot])
(when time-str
[text/text
{:monospace true
:size :label
:accessibility-label :message-timestamp
:number-of-lines 1
:style (style/time-text theme)}
time-str])]]))
:container-style (style/icon-container contact? size)}])

(when (or short-chat-key-component time-str-component)
[rn/view {:style {:width 8}}])

short-chat-key-component
middle-dot-seperator-component
time-str-component]))
5 changes: 3 additions & 2 deletions src/quo/components/selectors/react/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
[react-native.core :as rn]))

(defn view
[{:keys [reactions on-press on-long-press add-reaction? on-press-add use-case container-style]}]
[{:keys [reactions on-press on-long-press hide-new-reaction-button? on-press-add use-case
container-style]}]
[rn/view {:style (merge style/container container-style)}
(for [emoji-reaction reactions
:let [{:keys [emoji emoji-id emoji-reaction-id quantity own]} emoji-reaction]]
Expand All @@ -19,7 +20,7 @@
:on-press #(on-press emoji-reaction)
:on-long-press #(on-long-press emoji-reaction)
:accessibility-label (str "emoji-reaction-" emoji-id)}])
(when add-reaction?
(when-not hide-new-reaction-button?
[react-selector/view
{:on-press on-press-add
:state :add-reaction
Expand Down
33 changes: 26 additions & 7 deletions src/quo/components/selectors/reactions_selector/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,31 @@
(ns quo.components.selectors.reactions-selector.style
(:require
[quo.foundations.colors :as colors]))
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))

(defn container
[pressed? theme]
{:padding 10
:border-radius 12
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))})
(merge
{:border-radius 12
:border-width 1
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
:background-color (when pressed?
(colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))}
(if platform/ios?
{:padding 9.5
:padding-horizontal 8}
{:padding 8})))

(def emoji-text-style
(merge
{:line-height 20
:text-align :center}
(if platform/ios?
{:line-height 20
:font-size 17
:text-align :center}
{:font-size 18
:height 24
:width 24
:text-align :center
:text-align-vertical :center})))
4 changes: 3 additions & 1 deletion src/quo/components/selectors/reactions_selector/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,6 @@
:style (merge (style/container pressed? theme)
container-style)
:on-press on-press}
[rn/text (reactions.resource/system-emojis emoji)]]))
[rn/text
{:style style/emoji-text-style}
(reactions.resource/system-emojis emoji)]]))
Loading

0 comments on commit cfe9d6e

Please sign in to comment.