From 4dacc95de61b64d7cae6bbf4d829f3ee4b657ad1 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Fri, 23 Apr 2021 18:32:38 -0300 Subject: [PATCH] Include a 'My Profile' button in the Start New Chat dialogue Signed-off-by: Brian Sztamfater --- .../ui/screens/add_new/new_chat/views.cljs | 223 +++++++++++------- translations/en.json | 3 +- 2 files changed, 146 insertions(+), 80 deletions(-) diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index cf2c3c6bc4..a675a37efd 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -20,7 +20,10 @@ [status-im.ethereum.ens :as ens] [quo.platform :as platform] [status-im.transport.filters.core :as filters] - [status-im.utils.identicon :as identicon]) + [status-im.utils.identicon :as identicon] + [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation] + [status-im.ui.components.animation :as animation] + [status-im.ui.screens.chat.photos :as photos]) (:require-macros [status-im.utils.views :as views])) (defn- render-row [row] @@ -85,89 +88,151 @@ is-ens? (ens/valid-eth-name-prefix? username)] (or is-chat-key? is-ens?))) +(defn translate-anim [translate-y-value translate-y-anim-value] + (animation/start + (animation/timing translate-y-anim-value {:toValue translate-y-value + :duration 200 + :useNativeDriver true}))) (views/defview new-chat [] (views/letsubs [contacts [:contacts/active] {:keys [state ens-name public-key error]} [:contacts/new-identity] - search-value (reagent/atom "")] - [react/view {:style {:flex 1}} - [topbar/topbar - {:title (i18n/label :t/new-chat) - :modal? true - :right-accessories - [{:icon :qr - :accessibility-label :scan-contact-code-button - :on-press #(re-frame/dispatch [::qr-scanner/scan-code - {:title (i18n/label :t/new-chat) - :handler :contact/qr-code-scanned}])}]}] - [react/view {:flex-direction :row - :padding 16} - [react/view {:flex 1} - [quo/text-input - {:on-change-text - #(do - (reset! search-value %) - (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) - (debounce/debounce-and-dispatch [:new-chat/set-new-identity %] 600)) - :on-submit-editing - #(when (= state :valid) - (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted false nil] 3000)) - :placeholder (i18n/label :t/enter-contact-code) - :show-cancel false - :accessibility-label :enter-contact-code-input - :auto-capitalize :none - :return-key-type :go - :monospace true}]]] - [react/view (if (and - (= (count contacts) 0) - (= @search-value "")) - {:flex 1} - {:justify-content :flex-end}) - (if (and - (= (count contacts) 0) - (= @search-value "")) - [react/view {:flex 1 - :align-items :center - :padding-horizontal 58 - :padding-top 160} - [quo/text {:size :base - :align :center - :color :secondary} - (i18n/label :t/you-dont-have-contacts-invite-friends)] - [invite/button]] - [list/flat-list {:data (filter-contacts @search-value contacts) - :key-fn :address - :render-fn render-row - :enableEmptySections true - :keyboardShouldPersistTaps :always}])] - (when-not (= @search-value "") - [react/view - [quo/text {:style {:margin-horizontal 16 - :margin-vertical 14} - :size :base - :align :left - :color :secondary} - (i18n/label :t/non-contacts)] - (when (and (= state :searching) - (is-valid-username? @search-value)) - [rn/activity-indicator {:color colors/gray - :size (if platform/android? :large :small)}]) - (if (= state :valid) - [quo/list-item - (merge - {:title (or ens-name (gfycat/generate-gfy public-key)) - :subtitle (if ens-name (gfycat/generate-gfy public-key) (utils/get-shortened-address public-key)) - :icon [chat-icon/contact-icon-contacts-tab - (identicon/identicon public-key)] - :on-press #(re-frame/dispatch [:chat.ui/start-chat public-key])} - (when ens-name {:subtitle-secondary public-key}))] - [quo/text {:style {:margin-horizontal 16} + search-value (reagent/atom "") + account @(re-frame/subscribe [:multiaccount]) + on-share #(re-frame/dispatch [:show-popover + {:view :share-chat-key + :address (account :public-key) + :ens-name (account :preferred-name)}]) + my-profile-button-anim-y (animation/create-value 0) + keyboard-show-listener (atom nil) + keyboard-hide-listener (atom nil) + on-keyboard-show (fn [] + ;; 42 is the bottom position so we translate it by 32 pts to leave 10 as margin + (translate-anim 32 my-profile-button-anim-y)) + on-keyboard-hide (fn [] + (translate-anim 0 my-profile-button-anim-y)) + keyboard-show-event (if platform/android? "keyboardDidShow" "keyboardWillShow") + keyboard-hide-event (if platform/android? "keyboardDidHide" "keyboardWillHide")] + {:component-did-mount + (fn [_] + (reset! keyboard-show-listener (.addListener react/keyboard keyboard-show-event on-keyboard-show)) + (reset! keyboard-hide-listener (.addListener react/keyboard keyboard-hide-event on-keyboard-hide))) + :component-will-unmount + (fn [] + (some-> ^js @keyboard-show-listener .remove) + (some-> ^js @keyboard-hide-listener .remove))} + [kb-presentation/keyboard-avoiding-view {:style {:flex 1}} + [react/view {:style {:flex 1}} + [topbar/topbar + {:title (i18n/label :t/new-chat) + :modal? true + :right-accessories + [{:icon :qr + :accessibility-label :scan-contact-code-button + :on-press #(re-frame/dispatch [::qr-scanner/scan-code + {:title (i18n/label :t/new-chat) + :handler :contact/qr-code-scanned}])}]}] + [react/view {:flex-direction :row + :padding 16} + [react/view {:flex 1} + [quo/text-input + {:on-change-text + #(do + (reset! search-value %) + (re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching]) + (debounce/debounce-and-dispatch [:new-chat/set-new-identity %] 600)) + :on-submit-editing + #(when (= state :valid) + (debounce/dispatch-and-chill [:contact.ui/contact-code-submitted false nil] 3000)) + :placeholder (i18n/label :t/enter-contact-code) + :show-cancel false + :accessibility-label :enter-contact-code-input + :auto-capitalize :none + :return-key-type :go + :monospace true + :auto-correct false}]]] + [react/scroll-view {:style {:flex 1} + :keyboard-dismiss-mode :on-drag + :keyboard-should-persist-taps :handled} + [react/view (when (and + (= (count contacts) 0) + (= @search-value "")) + {:flex 1}) + (if (and + (= (count contacts) 0) + (= @search-value "")) + [react/view {:flex 1 + :align-items :center + :padding-horizontal 58 + :padding-top 160} + [quo/text {:size :base + :align :center + :color :secondary} + (i18n/label :t/you-dont-have-contacts-invite-friends)] + [invite/button]] + [list/flat-list {:data (filter-contacts @search-value contacts) + :key-fn :address + :render-fn render-row}])] + (when-not (= @search-value "") + [react/view + [quo/text {:style {:margin-horizontal 16 + :margin-vertical 14} :size :base - :align :center + :align :left :color :secondary} - (if (is-valid-username? @search-value) - (when (= state :error) - (get-validation-label error)) - (i18n/label :t/invalid-username-or-key))])])])) + (i18n/label :t/non-contacts)] + (when (and (= state :searching) + (is-valid-username? @search-value)) + [rn/activity-indicator {:color colors/gray + :size (if platform/android? :large :small)}]) + (if (= state :valid) + [quo/list-item + (merge + {:title (or ens-name (gfycat/generate-gfy public-key)) + :subtitle (if ens-name (gfycat/generate-gfy public-key) (utils/get-shortened-address public-key)) + :icon [chat-icon/contact-icon-contacts-tab + (identicon/identicon public-key)] + :on-press #(re-frame/dispatch [:chat.ui/start-chat public-key])} + (when ens-name {:subtitle-secondary public-key}))] + [quo/text {:style {:margin-horizontal 16} + :size :base + :align :center + :color :secondary} + (if (is-valid-username? @search-value) + (when (= state :error) + (get-validation-label error)) + (i18n/label :t/invalid-username-or-key))])])] + (when-not (and + (= (count contacts) 0) + (= @search-value "")) + [react/animated-view {:style {:height 36 + :width 124 + :position :absolute + :bottom 42 + :transform [{:translateY my-profile-button-anim-y}] + :align-self :center}} + [react/touchable-opacity {:style {:padding-horizontal 2 + :height 36 + :width 124 + :background-color colors/blue + :border-radius 18 + :elevation 4 + :shadow-offset {:width 0 :height 4} + :shadow-color "rgba(0, 34, 51, 0.16)" + :shadow-radius 4 + :shadow-opacity 1} + :on-press on-share} + [react/view {:style {:flex 1 + :flex-direction :row + :align-items :center}} + [photos/photo + (multiaccounts/displayed-photo account) + {:size 32 + :accessibility-label :current-account-photo}] + [quo/text {:size :base + :weight :medium + :color :inverse + :style {:margin-left 6}} + (i18n/label :t/my-profile)]]]])]])) (defn- nickname-input [entered-nickname] [quo/text-input diff --git a/translations/en.json b/translations/en.json index 2b92695315..db110937ae 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1515,5 +1515,6 @@ "not-found": "Not found", "activity": "Activity", "reject-and-delete": "Reject and delete", - "accept-and-add": "Accept and add" + "accept-and-add": "Accept and add", + "my-profile": "My profile" }