diff --git a/src/quo/components/button/view.cljs b/src/quo/components/button/view.cljs index 64989512a7..0983c4ad16 100644 --- a/src/quo/components/button/view.cljs +++ b/src/quo/components/button/view.cljs @@ -6,7 +6,8 @@ [quo.design-system.spacing :as spacing] [quo.components.text :as text] ;; FIXME: - [status-im.ui.components.icons.vector-icons :as icons])) + [status-im.ui.components.icons.vector-icons :as icons] + [status-im.utils.label :as utils.label])) (defn style-container [type] (merge {:height 44 @@ -46,7 +47,7 @@ (defn button [{:keys [on-press disabled type theme before after icon haptic-feedback haptic-type on-long-press on-press-start - accessibility-label] + accessibility-label loading] :or {theme :main type :primary haptic-feedback true @@ -81,16 +82,21 @@ (when before [rn/view [icons/icon before {:color icon-color}]]) - [rn/view {:style (content-style type)} + (when loading + [rn/view {:style {:position :absolute}} + [rn/activity-indicator]]) + [rn/view {:style (merge (content-style type) + (when loading + {:opacity 0}))} (cond (= type :icon) [icons/icon icon {:color icon-color}] - (string? children) + (or (keyword? children) (string? children)) [text/text {:weight :medium :number-of-lines 1 :style {:color text-color}} - children] + (utils.label/stringify children)] (vector? children) children)] diff --git a/src/quo/react_native.cljs b/src/quo/react_native.cljs index eaca3e5ebb..e6db4f319d 100644 --- a/src/quo/react_native.cljs +++ b/src/quo/react_native.cljs @@ -34,6 +34,11 @@ (def switch (reagent/adapt-react-class (.-Switch ^js rn))) +(def activity-indicator-class (reagent/adapt-react-class (.-ActivityIndicator ^js rn))) + +(defn activity-indicator [props] + [activity-indicator-class props]) + ;; Flat-list (def ^:private rn-flat-list (reagent/adapt-react-class (.-FlatList ^js rn))) diff --git a/src/status_im/contact/block.cljs b/src/status_im/contact/block.cljs index 361db1e685..e82ead53e6 100644 --- a/src/status_im/contact/block.cljs +++ b/src/status_im/contact/block.cljs @@ -57,7 +57,8 @@ (assoc-in [:contacts/contacts public-key] contact) ;; remove the 1-1 chat if it exists (update-in [:chats] dissoc public-key))} - (contacts-store/block contact #(re-frame/dispatch [::contact-blocked contact (map chats-store/<-rpc %)])) + (contacts-store/block contact #(do (re-frame/dispatch [::contact-blocked contact (map chats-store/<-rpc %)]) + (re-frame/dispatch [:hide-popover]))) ;; reset navigation to avoid going back to non existing one to one chat (if from-one-to-one-chat? remove-current-chat-id diff --git a/src/status_im/ui/screens/popover/views.cljs b/src/status_im/ui/screens/popover/views.cljs index 52a2bb7e98..c988728b5c 100644 --- a/src/status_im/ui/screens/popover/views.cljs +++ b/src/status_im/ui/screens/popover/views.cljs @@ -42,12 +42,13 @@ current-popover (reagent/atom nil) update? (reagent/atom nil) request-close (fn [] - (reset! clear-timeout - (js/setTimeout - #(do (reset! current-popover nil) - (re-frame/dispatch [:hide-popover])) 200)) - (hide-panel-anim - bottom-anim-value alpha-value (- window-height)) + (when-not (:prevent-closing? @current-popover) + (reset! clear-timeout + (js/setTimeout + #(do (reset! current-popover nil) + (re-frame/dispatch [:hide-popover])) 200)) + (hide-panel-anim + bottom-anim-value alpha-value (- window-height))) true) on-show (fn [] (show-panel-anim bottom-anim-value alpha-value) diff --git a/src/status_im/ui/screens/profile/components/sheets.cljs b/src/status_im/ui/screens/profile/components/sheets.cljs index fcdab566dc..d131179a72 100644 --- a/src/status_im/ui/screens/profile/components/sheets.cljs +++ b/src/status_im/ui/screens/profile/components/sheets.cljs @@ -2,21 +2,23 @@ (:require [re-frame.core :as re-frame] [status-im.ui.components.react :as react] [status-im.i18n :as i18n] - [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.screens.profile.components.styles :as styles]) + [status-im.ui.screens.profile.components.styles :as styles] + [quo.core :as quo] + [reagent.core :as reagent]) (:require-macros [status-im.utils.views :as views])) -(defn hide-sheet-and-dispatch [event] - (re-frame/dispatch [:bottom-sheet/hide-sheet]) - (re-frame/dispatch event)) - (views/defview block-contact [] - (views/letsubs [{:keys [public-key]} [:bottom-sheet/options]] - [react/view + (views/letsubs [{:keys [public-key]} [:popover/popover] + in-progress? (reagent/atom false)] + [react/view {:style {:padding-top 16 :padding-horizontal 24 :padding-bottom 8}} [react/text {:style styles/sheet-text} (i18n/label :t/block-contact-details)] - [list-item/list-item - {:theme :action-destructive - :accessibility-label :block-contact-confirm - :title :t/block-contact - :on-press #(hide-sheet-and-dispatch [:contact.ui/block-contact-confirmed public-key])}]])) + [react/view {:align-items :center :margin-top 16} + [quo/button {:theme :negative :disabled @in-progress? :loading @in-progress? + :on-press #(do (reset! in-progress? true) + (re-frame/dispatch [:contact.ui/block-contact-confirmed public-key]))} + :t/block] + [react/view {:height 8}] + [quo/button {:type :secondary :disabled @in-progress? + :on-press #(re-frame/dispatch [:hide-popover])} + :t/close]]])) diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index 553dae2154..75f2d56af4 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -55,7 +55,6 @@ ;; sheets (def sheet-text - {:color colors/gray - :padding 24 + {:text-align :center :line-height 22 :font-size 15}) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index f8c7e3e99a..a6b6eca62c 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -72,14 +72,14 @@ :title-accessibility-label :profile-details}] [profile-details-list-view contact]])) -(defn block-contact-action [{:keys [blocked? public-key] :as contact}] +(defn block-contact-action [{:keys [blocked? public-key]}] [react/touchable-highlight {:on-press (if blocked? #(re-frame/dispatch [:contact.ui/unblock-contact-pressed public-key]) - #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content sheets/block-contact - :content-height 160} - contact]))} - [react/text {:style styles/block-action-label + #(re-frame/dispatch [:show-popover + {:view sheets/block-contact + :prevent-closing? true + :public-key public-key}]))} + [react/text {:style styles/block-action-label :accessibility-label (if blocked? :unblock-contact :block-contact)}