From f41c69ff4b5aad46861c2e279bcef3324c3b9c90 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Wed, 25 Jan 2023 11:50:00 -0800 Subject: [PATCH] [14681] Make checkbox select contacts correctly in new chat flow (#14790) --- src/quo2/components/selectors/selectors.cljs | 266 ++++++------------ src/quo2/components/selectors/styles.cljs | 91 +++++- .../common/contact_list_item/view.cljs | 103 ++++--- 3 files changed, 231 insertions(+), 229 deletions(-) diff --git a/src/quo2/components/selectors/selectors.cljs b/src/quo2/components/selectors/selectors.cljs index 451c20b4fc..2d0cc1c3bd 100644 --- a/src/quo2/components/selectors/selectors.cljs +++ b/src/quo2/components/selectors/selectors.cljs @@ -5,26 +5,6 @@ [reagent.core :as reagent] [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 [disabled? on-change checked?] (when (not disabled?) @@ -34,176 +14,96 @@ (defn checkbox-prefill [{:keys [default-checked?]}] - (let [checked? (reagent/atom (or default-checked? false))] - (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 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))))}) - :accessibility-label (str "checkbox-" (if @checked? "on" "off")) - :accessibility-role :checkbox - :testID "checkbox-prefill-component"} - (when @checked? - [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)))}]])]]))) - + (let [internal-checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}] + (when (and (not (nil? checked?)) (not= @internal-checked? checked?)) + (reset! internal-checked? checked?)) + (let [checked? (or checked? @internal-checked?)] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change internal-checked?)} + [rn/view + {:style (merge + container-style + (style/checkbox-prefill blurred-background? disabled?)) + :accessibility-label (str "checkbox-" (if checked? "on" "off")) + :accessibility-role :checkbox + :testID "checkbox-prefill-component"} + (when checked? + [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 [{:keys [default-checked?]}] - (let [checked? (reagent/atom (or default-checked? false))] - (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 {: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?))} - :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?))) + (let [internal-checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}] + (when (and (not (nil? checked?)) (not= @internal-checked? checked?)) + (reset! internal-checked? checked?)) + (let [checked? (or checked? @internal-checked?)] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change internal-checked?)} + [rn/view + {:style (merge + container-style + {:height 20 + :width 20})} + [rn/view + {:style (style/checkbox blurred-background? disabled? checked?) + :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}]])]]])))) (defn radio [{:keys [default-checked?]}] - (let [checked? (reagent/atom (or default-checked? false))] - (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 - :border-radius 20 - :border-width 1 - :border-color (style/get-color @checked? - disabled? - blurred-background?) - :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"} + (let [internal-checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}] + (when (and (not (nil? checked?)) (not= @internal-checked? checked?)) + (reset! internal-checked? checked?)) + (let [checked? (or checked? @internal-checked?)] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change internal-checked?)} + [rn/view + {:style (merge + container-style + (style/radio checked? disabled? blurred-background?)) + :accessibility-label (str "radio-" (if checked? "on" "off")) + :accessibility-role :checkbox + :testID "radio-component"} - [rn/view - {:style - {:margin-left :auto - :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}}]]]))) + [rn/view + {:style + (style/radio-inner checked? disabled? blurred-background?)}]]])))) (defn toggle [{:keys [default-checked?]}] - (let [checked? (reagent/atom (or default-checked? false))] - (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 30 - :border-radius 20 - :background-color (style/get-color @checked? - disabled? - blurred-background?)}) - :accessibility-label (str "toggle-" (if @checked? "on" "off")) - :accessibility-role :checkbox - :testID "toggle-component"} - [rn/view - {: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}}]]]))) + (let [internal-checked? (reagent/atom (or default-checked? false))] + (fn [{:keys [on-change disabled? blurred-background? container-style checked?]}] + (when (and (not (nil? checked?)) (not= @internal-checked? checked?)) + (reset! internal-checked? checked?)) + (let [checked? (or checked? @internal-checked?)] + [rn/touchable-without-feedback + {:on-press (handle-press disabled? on-change internal-checked?)} + [rn/view + {:style (merge + container-style + (style/toggle checked? disabled? blurred-background?)) + :accessibility-label (str "toggle-" (if checked? "on" "off")) + :accessibility-role :checkbox + :testID "toggle-component"} + [rn/view + {:style + (style/toggle-inner checked? disabled? blurred-background?)}]]])))) diff --git a/src/quo2/components/selectors/styles.cljs b/src/quo2/components/selectors/styles.cljs index 6202a49823..4e7de4439f 100644 --- a/src/quo2/components/selectors/styles.cljs +++ b/src/quo2/components/selectors/styles.cljs @@ -20,6 +20,44 @@ (colors/alpha colors/neutral-20 (if disabled? 0.4 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 [checked? disabled? blurred-background?] {:flex 1 @@ -38,4 +76,55 @@ colors/neutral-80-opa-40)) :border-color (if @checked? :none - (get-color @checked? disabled? blurred-background?))}) \ No newline at end of file + (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}) diff --git a/src/status_im2/common/contact_list_item/view.cljs b/src/status_im2/common/contact_list_item/view.cljs index 22f5305e2c..e63cb1c5b5 100644 --- a/src/status_im2/common/contact_list_item/view.cljs +++ b/src/status_im2/common/contact_list_item/view.cljs @@ -8,58 +8,71 @@ [utils.re-frame :as rf] [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 - [chat-id] + [public-key member? selected?] (let [view-id (rf/sub [:view-id])] - (when (= view-id :shell-stack) - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:chat.ui/show-profile chat-id]) - (rf/dispatch [:search/home-filter-changed nil])))) + (case view-id + :shell-stack (do (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:chat.ui/show-profile public-key]) + (rf/dispatch [:search/home-filter-changed nil])) + :group-chat-profile (group-chat-member-toggle member? selected? public-key)))) (defn action-icon - [{:keys [public-key] :as item} {:keys [icon start-a-new-chat? group] :as extra-data} - user-selected? on-toggle] - (let [{: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 - {:on-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (fn [] [actions/actions item extra-data])}]) - :style {:position :absolute - :right 20}} - (if (= icon :options) - [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] - [quo/checkbox - {:default-checked? @checked? - :accessibility-label :contact-toggle-check - :disabled? (and member? (not admin?)) - :on-change (fn [selected] - (if start-a-new-chat? - (on-toggle true @checked? 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])))))}])])) + [{:keys [public-key] + :as item} + {:keys [icon start-a-new-chat?] + :as extra-data} on-toggle admin? member? + checked?] + (let [on-check (fn [] + (if start-a-new-chat? + (on-toggle true @checked? public-key) + (group-chat-member-toggle member? (swap! checked? not) public-key)))] + [:f> + (fn [] + [rn/touchable-opacity + {:on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] [actions/actions item extra-data])}]) + :style {:position :absolute + :right 20}} + (if (= icon :options) + [quo/icon :i/options + {:size 20 + :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}] + [quo/checkbox + {:checked? @checked? + :accessibility-label :contact-toggle-check + :disabled? (and member? (not admin?)) + :on-change on-check}])])])) (defn contact-list-item [item _ _ {:keys [start-a-new-chat? on-toggle] :as extra-data}] - (let [{:keys [public-key ens-verified added? images]} item - display-name (first (rf/sub + (let [{:keys [public-key ens-verified added? images group]} item + display-name (first + (rf/sub [:contacts/contact-two-names-by-identity public-key])) - photo-path (when (seq images) - (rf/sub [:chats/photo-path public-key])) - current-pk (rf/sub [:multiaccount/public-key]) - online? (rf/sub [:visibility-status-updates/online? - public-key]) - user-selected? (rf/sub [:is-contact-selected? public-key])] + photo-path (when (seq images) + (rf/sub [:chats/photo-path public-key])) + online? (rf/sub [:visibility-status-updates/online? + 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 (merge {:style (style/container) @@ -67,7 +80,7 @@ :active-opacity 1 :on-press #(if start-a-new-chat? (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 {:content (fn [] [actions/actions item extra-data])}])}) [quo/user-avatar @@ -95,4 +108,4 @@ :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} (utils.address/get-shortened-address 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?])]))