Include a 'My Profile' button in the Start New Chat dialogue
Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater
parent
448782b3d3
commit
4dacc95de6
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue