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

[14681] Make checkbox select contacts correctly in new chat flow (#14790)

This commit is contained in:
Ibrahem Khalil 2023-01-25 11:50:00 -08:00 committed by GitHub
parent 7585767961
commit f41c69ff4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 231 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
src/quo2/components/selectors/selectors.cljs
View File

@ -5,26 +5,6 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.selectors.styles :as style])) [quo2.components.selectors.styles :as style]))
(defn- get-color
[checked? disabled? blurred-background?]
(cond
checked?
(colors/custom-color-by-theme
:primary
50
60
(when disabled? 30)
(when disabled? 30))
blurred-background?
(colors/theme-colors
(colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
(colors/alpha colors/white (if disabled? 0.05 0.1)))
:else
(colors/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
(defn- handle-press (defn- handle-press
[disabled? on-change checked?] [disabled? on-change checked?]
(when (not disabled?) (when (not disabled?)
@ -34,176 +14,96 @@
(defn checkbox-prefill (defn checkbox-prefill
[{:keys [default-checked?]}] [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (let [internal-checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? blurred-background? container-style]}] (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
[rn/touchable-without-feedback (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
{:on-press (handle-press disabled? on-change checked?)} (reset! internal-checked? checked?))
[rn/view (let [checked? (or checked? @internal-checked?)]
{:style (merge [rn/touchable-without-feedback
container-style {:on-press (handle-press disabled? on-change internal-checked?)}
{:height 21 [rn/view
:width 21 {:style (merge
:border-radius 6 container-style
:background-color (if blurred-background? (style/checkbox-prefill blurred-background? disabled?))
(colors/theme-colors :accessibility-label (str "checkbox-" (if checked? "on" "off"))
(colors/alpha colors/neutral-80 :accessibility-role :checkbox
(if disabled? 0.05 0.1)) :testID "checkbox-prefill-component"}
(colors/alpha colors/white (if disabled? 0.05 0.1))) (when checked?
(colors/theme-colors [rn/view
(colors/alpha colors/neutral-20 {:style
(if disabled? 0.3 1)) {:height 20
(colors/alpha colors/neutral-70 :width 20}}
(if disabled? 0.3 1))))}) [icons/icon :i/check-small
:accessibility-label (str "checkbox-" (if @checked? "on" "off")) {:size 20
:accessibility-role :checkbox :color (colors/theme-colors
:testID "checkbox-prefill-component"} (colors/alpha colors/neutral-100 (if disabled? 0.3 1))
(when @checked? (colors/alpha colors/white (if disabled? 0.3 1)))}]])]]))))
[rn/view
{:style
{:height 20
:width 20}}
[icons/icon :i/check-small
{:size 20
:color (colors/theme-colors
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
(colors/alpha colors/white (if disabled? 0.3 1)))}]])]])))
(defn checkbox (defn checkbox
[{:keys [default-checked?]}] [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (let [internal-checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? blurred-background? container-style]}] (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
[rn/touchable-without-feedback (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
{:on-press (handle-press disabled? on-change checked?)} (reset! internal-checked? checked?))
[rn/view (let [checked? (or checked? @internal-checked?)]
{:style (merge [rn/touchable-without-feedback
container-style {:on-press (handle-press disabled? on-change internal-checked?)}
{:height 20 [rn/view
:width 20})} {:style (merge
[rn/view container-style
{:style {:flex 1 {:height 20
:border-radius 6 :width 20})}
:border-width (if @checked? 0 1) [rn/view
:background-color (cond {:style (style/checkbox blurred-background? disabled? checked?)
@checked? :accessibility-label (str "checkbox-" (if checked? "on" "off"))
(get-color @checked? disabled? blurred-background?) :accessibility-role :checkbox
blurred-background? :testID "checkbox-component"}
(colors/theme-colors (when checked?
colors/white-opa-5 [rn/view
colors/white-opa-10) {:style
:else {:height 20
(colors/theme-colors :width 20}}
colors/white [icons/icon :i/check-small
colors/neutral-80-opa-40)) {:size 20
:border-color (if @checked? :color colors/white}]])]]]))))
:none
(get-color @checked? disabled? blurred-background?))}
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox
:testID "checkbox-component"}
(when @checked?
[rn/view
{:style
{:height 20
:width 20}}
[icons/icon :i/check-small
{:size 20
:color colors/white}]])]]])))
;; TODO (Omar): issue https://github.com/status-im/status-mobile/issues/14681
;(defn checkbox
; [{:keys [default-checked?]}]
; (let [checked? (reagent/atom (or default-checked? false))]
; @(reagent/track
; (fn [{:keys [on-change disabled? blurred-background? container-style]}]
; [rn/touchable-without-feedback
; {:on-press (handle-press disabled? on-change checked?)}
; [rn/view
; {:style (merge
; container-style
; {:height 20
; :width 20})}
; [rn/view
; {:style (style/checkbox-toggle checked? disabled? blurred-background?)
; :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
; :accessibility-role :checkbox
; :testID "checkbox-component"}
; (when @checked?
; [rn/view
; {:style
; {:height 20
; :width 20}}
; [icons/icon :i/check-small
; {:size 20
; :color colors/white}]])]]])
; checked?)))
(defn radio (defn radio
[{:keys [default-checked?]}] [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (let [internal-checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? blurred-background? container-style]}] (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
[rn/touchable-without-feedback (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
{:on-press (handle-press disabled? on-change checked?)} (reset! internal-checked? checked?))
[rn/view (let [checked? (or checked? @internal-checked?)]
{:style (merge [rn/touchable-without-feedback
container-style {:on-press (handle-press disabled? on-change internal-checked?)}
{:height 20 [rn/view
:width 20 {:style (merge
:border-radius 20 container-style
:border-width 1 (style/radio checked? disabled? blurred-background?))
:border-color (style/get-color @checked? :accessibility-label (str "radio-" (if checked? "on" "off"))
disabled? :accessibility-role :checkbox
blurred-background?) :testID "radio-component"}
:background-color (when-not blurred-background?
(colors/theme-colors colors/white
(colors/alpha colors/neutral-80
0.4)))})
:accessibility-label (str "radio-" (if @checked? "on" "off"))
:accessibility-role :checkbox
:testID "radio-component"}
[rn/view [rn/view
{:style {:style
{:margin-left :auto (style/radio-inner checked? disabled? blurred-background?)}]]]))))
:height 14
:width 14
:background-color (when @checked? (style/get-color @checked? disabled? blurred-background?))
:border-radius 20
:margin-right :auto
:margin-top :auto
:margin-bottom :auto}}]]])))
(defn toggle (defn toggle
[{:keys [default-checked?]}] [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (let [internal-checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? blurred-background? container-style]}] (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}]
[rn/touchable-without-feedback (when (and (not (nil? checked?)) (not= @internal-checked? checked?))
{:on-press (handle-press disabled? on-change checked?)} (reset! internal-checked? checked?))
[rn/view (let [checked? (or checked? @internal-checked?)]
{:style (merge [rn/touchable-without-feedback
container-style {:on-press (handle-press disabled? on-change internal-checked?)}
{:height 20 [rn/view
:width 30 {:style (merge
:border-radius 20 container-style
:background-color (style/get-color @checked? (style/toggle checked? disabled? blurred-background?))
disabled? :accessibility-label (str "toggle-" (if checked? "on" "off"))
blurred-background?)}) :accessibility-role :checkbox
:accessibility-label (str "toggle-" (if @checked? "on" "off")) :testID "toggle-component"}
:accessibility-role :checkbox [rn/view
:testID "toggle-component"} {:style
[rn/view (style/toggle-inner checked? disabled? blurred-background?)}]]]))))
{:style
{:margin-left (if @checked? 12 2)
:height 16
:width 16
:background-color (if blurred-background?
(colors/theme-colors
(colors/alpha colors/white (if disabled? 0.4 1))
(colors/alpha colors/white (if disabled? 0.3 1)))
(colors/theme-colors
(colors/alpha colors/white 1)
(colors/alpha colors/white (if disabled? 0.4 1))))
:border-radius 20
:margin-right :auto
:margin-top :auto
:margin-bottom :auto}}]]])))

91
src/quo2/components/selectors/styles.cljs
View File

@ -20,6 +20,44 @@
(colors/alpha colors/neutral-20 (if disabled? 0.4 1)) (colors/alpha colors/neutral-20 (if disabled? 0.4 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1))))) (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
(defn checkbox-prefill
[blurred-background? disabled?]
{:height 21
:width 21
:border-radius 6
:background-color (if blurred-background?
(colors/theme-colors
(colors/alpha colors/neutral-80
(if disabled? 0.05 0.1))
(colors/alpha colors/white (if disabled? 0.05 0.1)))
(colors/theme-colors
(colors/alpha colors/neutral-20
(if disabled? 0.3 1))
(colors/alpha colors/neutral-70
(if disabled? 0.3 1))))})
(defn checkbox
[blurred-background? disabled? checked?]
{:flex 1
:border-radius 6
:border-width (if checked? 0 1)
:background-color (cond
checked?
(get-color checked? disabled? blurred-background?)
blurred-background?
(colors/theme-colors
colors/white-opa-5
colors/white-opa-10)
:else
(colors/theme-colors
colors/white
colors/neutral-80-opa-40))
:border-color (if checked?
:none
(get-color checked?
disabled?
blurred-background?))})
(defn checkbox-toggle (defn checkbox-toggle
[checked? disabled? blurred-background?] [checked? disabled? blurred-background?]
{:flex 1 {:flex 1
@ -38,4 +76,55 @@
colors/neutral-80-opa-40)) colors/neutral-80-opa-40))
:border-color (if @checked? :border-color (if @checked?
:none :none
(get-color @checked? disabled? blurred-background?))}) (get-color @checked? disabled? blurred-background?))})
(defn radio
[checked? disabled? blurred-background?]
{:height 20
:width 20
:border-radius 20
:border-width 1
:border-color (get-color checked?
disabled?
blurred-background?)
:background-color (when-not blurred-background?
(colors/theme-colors colors/white
(colors/alpha colors/neutral-80
0.4)))})
(defn toggle
[checked? disabled? blurred-background?]
{:height 20
:width 30
:border-radius 20
:background-color (get-color checked?
disabled?
blurred-background?)})
(defn toggle-inner
[checked? disabled? blurred-background?]
{:margin-left (if checked? 12 2)
:height 16
:width 16
:background-color (if blurred-background?
(colors/theme-colors
(colors/alpha colors/white (if disabled? 0.4 1))
(colors/alpha colors/white (if disabled? 0.3 1)))
(colors/theme-colors
(colors/alpha colors/white 1)
(colors/alpha colors/white (if disabled? 0.4 1))))
:border-radius 20
:margin-right :auto
:margin-top :auto
:margin-bottom :auto})
(defn radio-inner
[checked? disabled? blurred-background?]
{:margin-left :auto
:height 14
:width 14
:background-color (when checked? (get-color checked? disabled? blurred-background?))
:border-radius 20
:margin-right :auto
:margin-top :auto
:margin-bottom :auto})

103
src/status_im2/common/contact_list_item/view.cljs
View File

@ -8,58 +8,71 @@
[utils.re-frame :as rf] [utils.re-frame :as rf]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn group-chat-member-toggle
[member? selected? public-key]
(if-not member?
(if selected?
(rf/dispatch [:select-participant public-key true])
(rf/dispatch [:deselect-participant public-key true]))
(if selected?
(rf/dispatch [:undo-deselect-member public-key true])
(rf/dispatch [:deselect-member public-key true]))))
(defn open-chat (defn open-chat
[chat-id] [public-key member? selected?]
(let [view-id (rf/sub [:view-id])] (let [view-id (rf/sub [:view-id])]
(when (= view-id :shell-stack) (case view-id
(rf/dispatch [:dismiss-keyboard]) :shell-stack (do (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:chat.ui/show-profile chat-id]) (rf/dispatch [:chat.ui/show-profile public-key])
(rf/dispatch [:search/home-filter-changed nil])))) (rf/dispatch [:search/home-filter-changed nil]))
:group-chat-profile (group-chat-member-toggle member? selected? public-key))))
(defn action-icon (defn action-icon
[{:keys [public-key] :as item} {:keys [icon start-a-new-chat? group] :as extra-data} [{:keys [public-key]
user-selected? on-toggle] :as item}
(let [{:keys [contacts admins]} group {:keys [icon start-a-new-chat?]
member? (contains? contacts public-key) :as extra-data} on-toggle admin? member?
current-pk (rf/sub [:multiaccount/public-key]) checked?]
admin? (get admins current-pk) (let [on-check (fn []
checked? (reagent/atom (if start-a-new-chat? (if start-a-new-chat?
user-selected? (on-toggle true @checked? public-key)
member?))] (group-chat-member-toggle member? (swap! checked? not) public-key)))]
[rn/touchable-opacity [:f>
{:on-press #(rf/dispatch [:bottom-sheet/show-sheet (fn []
{:content (fn [] [actions/actions item extra-data])}]) [rn/touchable-opacity
:style {:position :absolute {:on-press #(rf/dispatch [:bottom-sheet/show-sheet
:right 20}} {:content (fn [] [actions/actions item extra-data])}])
(if (= icon :options) :style {:position :absolute
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] :right 20}}
[quo/checkbox (if (= icon :options)
{:default-checked? @checked? [quo/icon :i/options
:accessibility-label :contact-toggle-check {:size 20
:disabled? (and member? (not admin?)) :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
:on-change (fn [selected] [quo/checkbox
(if start-a-new-chat? {:checked? @checked?
(on-toggle true @checked? public-key) :accessibility-label :contact-toggle-check
(if-not member? :disabled? (and member? (not admin?))
(if selected :on-change on-check}])])]))
(rf/dispatch [:select-participant public-key true])
(rf/dispatch [:deselect-participant public-key true]))
(if selected
(rf/dispatch [:undo-deselect-member public-key true])
(rf/dispatch [:deselect-member public-key true])))))}])]))
(defn contact-list-item (defn contact-list-item
[item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}] [item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}]
(let [{:keys [public-key ens-verified added? images]} item (let [{:keys [public-key ens-verified added? images group]} item
display-name (first (rf/sub display-name (first
(rf/sub
[:contacts/contact-two-names-by-identity [:contacts/contact-two-names-by-identity
public-key])) public-key]))
photo-path (when (seq images) photo-path (when (seq images)
(rf/sub [:chats/photo-path public-key])) (rf/sub [:chats/photo-path public-key]))
current-pk (rf/sub [:multiaccount/public-key]) online? (rf/sub [:visibility-status-updates/online?
online? (rf/sub [:visibility-status-updates/online? public-key])
public-key]) user-selected? (rf/sub [:is-contact-selected? public-key])
user-selected? (rf/sub [:is-contact-selected? public-key])] {:keys [contacts admins]} group
member? (contains? contacts public-key)
current-pk (rf/sub [:multiaccount/public-key])
admin? (get admins current-pk)
checked? (reagent/atom (if start-a-new-chat?
user-selected?
member?))]
[rn/touchable-opacity [rn/touchable-opacity
(merge (merge
{:style (style/container) {:style (style/container)
@ -67,7 +80,7 @@
:active-opacity 1 :active-opacity 1
:on-press #(if start-a-new-chat? :on-press #(if start-a-new-chat?
(on-toggle true user-selected? public-key) (on-toggle true user-selected? public-key)
(open-chat public-key)) (open-chat public-key member? (swap! checked? not)))
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
{:content (fn [] [actions/actions item extra-data])}])}) {:content (fn [] [actions/actions item extra-data])}])})
[quo/user-avatar [quo/user-avatar
@ -95,4 +108,4 @@
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
(utils.address/get-shortened-address public-key)]] (utils.address/get-shortened-address public-key)]]
(when-not (= current-pk public-key) (when-not (= current-pk public-key)
[action-icon item extra-data user-selected? on-toggle])])) [action-icon item extra-data on-toggle admin? member? checked?])]))