diff --git a/resources/icons/add_contact.svg b/resources/icons/add_contact.svg new file mode 100644 index 0000000000..e334a58286 --- /dev/null +++ b/resources/icons/add_contact.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/resources/icons/in_contacts.svg b/resources/icons/in_contacts.svg new file mode 100644 index 0000000000..e4a1db2559 --- /dev/null +++ b/resources/icons/in_contacts.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 450cd72868..228841f667 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -123,10 +123,12 @@ :update-status "Update your status..." :add-a-status "Add a status..." :status-prompt "Set your status. Using #hastags will help others discover you and talk about what's on your mind" + :contact-code "Contact code" :add-to-contacts "Add to contacts" :in-contacts "In contacts" :remove-from-contacts "Remove from contacts" :start-conversation "Start conversation" + :send-message "Send message" :testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address" :mainnet-text "You’re on the Mainnet. Real ETH will be sent" diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index 3dd07831dd..2e7c649242 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -37,6 +37,7 @@ :icons/speaker-off (slurp/slurp-svg "./resources/icons/speaker_off.svg") :icons/transaction-history (slurp/slurp-svg "./resources/icons/transaction_history.svg") :icons/add (slurp/slurp-svg "./resources/icons/add.svg") + :icons/add-contact (slurp/slurp-svg "./resources/icons/add_contact.svg") :icons/add-wallet (slurp/slurp-svg "./resources/icons/add_wallet.svg") :icons/address (slurp/slurp-svg "./resources/icons/address.svg") :icons/arrow-left (slurp/slurp-svg "./resources/icons/arrow_left.svg") @@ -58,6 +59,7 @@ :icons/chats (slurp/slurp-svg "./resources/icons/chats.svg") :icons/hamburger (slurp/slurp-svg "./resources/icons/hamburger.svg") :icons/hidden (slurp/slurp-svg "./resources/icons/hidden.svg") + :icons/in-contacts (slurp/slurp-svg "./resources/icons/in_contacts.svg") :icons/mic (slurp/slurp-svg "./resources/icons/mic.svg") :icons/ok (slurp/slurp-svg "./resources/icons/ok.svg") :icons/public (slurp/slurp-svg "./resources/icons/public.svg") diff --git a/src/status_im/ui/components/list/styles.cljs b/src/status_im/ui/components/list/styles.cljs index 0e8f6298d5..10315ae629 100644 --- a/src/status_im/ui/components/list/styles.cljs +++ b/src/status_im/ui/components/list/styles.cljs @@ -104,9 +104,15 @@ {:background-color colors/white-transparent :border-radius 50}) +(def action-disabled + {:background-color colors/gray-lighter}) + (def action-label {:color colors/white}) +(def action-label-disabled + {:color colors/gray}) + (def action-separator {:height 1 :background-color colors/white-light-transparent diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index e4a62bbbcb..82e5285407 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -176,15 +176,21 @@ :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)} (when platform/ios? {:SectionSeparatorComponent (fn [] (reagent/as-element section-separator))}))]) -(defn- render-action [{:keys [label icon action]} +(defn- render-action [{:keys [label icon action disabled?]} {:keys [action-style action-label-style icon-opts]}] [react/touchable-highlight {:on-press action} [react/view [item [item-icon {:icon icon - :style (merge styles/action action-style) - :icon-opts (merge {:color :white} icon-opts)}] - [item-primary-only {:style (merge styles/action-label action-label-style)} + :style (merge styles/action + action-style + (when disabled? styles/action-disabled)) + :icon-opts (merge {:color :white} + icon-opts + (when disabled? {:color colors/gray}))}] + [item-primary-only {:style (merge styles/action-label + action-label-style + (when disabled? styles/action-label-disabled))} label] item-icon-forward]]]) diff --git a/src/status_im/ui/screens/profile/components/styles.cljs b/src/status_im/ui/screens/profile/components/styles.cljs index a924bbdfb5..fdd71548d6 100644 --- a/src/status_im/ui/screens/profile/components/styles.cljs +++ b/src/status_im/ui/screens/profile/components/styles.cljs @@ -88,6 +88,3 @@ (def profile-form {:background-color colors/white :padding 16}) - -(defstyle profile-info-container - {:background-color colors/white}) diff --git a/src/status_im/ui/screens/profile/contact/styles.cljs b/src/status_im/ui/screens/profile/contact/styles.cljs index 73f24c1367..7a46e4f0be 100644 --- a/src/status_im/ui/screens/profile/contact/styles.cljs +++ b/src/status_im/ui/screens/profile/contact/styles.cljs @@ -4,12 +4,10 @@ (def network-info {:background-color :white}) -(defstyle profile-setting-item +(defstyle profile-info-item {:flex-direction :row :align-items :center - :padding-left 16 - :ios {:height 73} - :android {:height 72}}) + :padding-left 16}) (defn profile-info-text-container [options] {:flex 1 @@ -17,7 +15,6 @@ (defstyle profile-info-title {:color colors/gray - :margin-left 16 :font-size 14 :ios {:letter-spacing -0.2}}) @@ -31,10 +28,30 @@ :android {:font-size 16 :color colors/black}}) +(def action-container + {:background-color colors/white + :padding-top 24}) + +(def action + {:background-color (colors/alpha colors/blue 0.1) + :border-radius 50}) + +(def action-label + {:color colors/blue}) + +(def action-separator + {:height 1 + :background-color colors/gray-light + :margin-left 50}) + +(def action-icon-opts + {:color colors/blue}) + (def profile-setting-text-empty (merge profile-setting-text {:color colors/gray})) -(def profile-info-item-button - {:padding 16}) +(defstyle contact-profile-info-container + {:padding-top 26 + :background-color colors/white}) diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 741622eb1b..57582b45ed 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -1,117 +1,70 @@ (ns status-im.ui.screens.profile.contact.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.ui.screens.profile.contact.styles :as styles] - [status-im.ui.components.common.common :as common] [status-im.ui.components.react :as react] [status-im.ui.screens.profile.components.styles :as profile.components.styles] [status-im.ui.screens.profile.components.views :as profile.components] [status-im.ui.components.status-bar.view :as status-bar] - [status-im.ui.components.action-button.styles :as action-button.styles] - [status-im.ui.components.action-button.action-button :as action-button] [status-im.i18n :as i18n] [re-frame.core :as re-frame] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.toolbar.actions :as actions] - [status-im.ui.components.list-selection :as list-selection] - [status-im.ui.components.icons.vector-icons :as vector-icons])) + [status-im.ui.components.list.views :as list])) -(defn profile-contact-toolbar [contact] +(defn profile-contact-toolbar [] [toolbar/toolbar {} toolbar/default-nav-back - [toolbar/content-title ""] - [toolbar/actions - (when (and (not (:pending? contact)) - (not (:unremovable? contact))) - [(actions/opts [{:action #(re-frame/dispatch [:hide-contact contact]) - :label (i18n/label :t/remove-from-contacts)}])])]]) + [toolbar/content-title ""]]) -(defn network-info [] - [react/view styles/network-info - [common/network-info] - [common/separator]]) +(defn actions [{:keys [pending? whisper-identity dapp?]} chat-id] + (concat (if pending? + [{:label (i18n/label :t/add-to-contacts) + :icon :icons/add-contact + :action #(re-frame/dispatch [:add-pending-contact chat-id])}] + [{:label (i18n/label :t/in-contacts) + :icon :icons/in-contacts + :disabled? true}]) + [{:label (i18n/label :t/send-message) + :icon :icons/chats + :action #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}])}] + (when-not dapp? + [{:label (i18n/label :t/send-transaction) + :icon :icons/arrow-right + :action #(re-frame/dispatch [:profile/send-transaction chat-id whisper-identity])}]))) -(defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id] - [react/view action-button.styles/actions-list - (if pending? - [action-button/action-button {:label (i18n/label :t/add-to-contacts) - :icon :icons/add - :icon-opts {:color :blue} - :on-press #(re-frame/dispatch [:add-pending-contact chat-id])}] - [action-button/action-button-disabled {:label (i18n/label :t/in-contacts) :icon :icons/ok}]) - [action-button/action-separator] - [action-button/action-button {:label (i18n/label :t/start-conversation) - :icon :icons/chats - :icon-opts {:color :blue} - :on-press #(re-frame/dispatch [:start-chat whisper-identity {:navigation-replace? true}])}] - (when-not dapp? - [react/view - [action-button/action-separator] - [action-button/action-button {:label (i18n/label :t/send-transaction) - :icon :icons/arrow-right - :icon-opts {:color :blue} - :on-press #(re-frame/dispatch [:profile/send-transaction chat-id whisper-identity])}]])]) - -(defn profile-info-item [{:keys [label value options text-mode empty-value? accessibility-label]}] - [react/view styles/profile-setting-item +(defn profile-info-item [{:keys [label value options accessibility-label]}] + [react/view styles/profile-info-item [react/view (styles/profile-info-text-container options) [react/text {:style styles/profile-info-title} label] [react/view styles/profile-setting-spacing] - [react/text {:style (if empty-value? - styles/profile-setting-text-empty - styles/profile-setting-text) - :number-of-lines 1 - :ellipsizeMode text-mode + [react/text {:style styles/profile-setting-text :accessibility-label accessibility-label} - value]] - (when options - [react/touchable-highlight {:on-press #(list-selection/show {:options options})} - [react/view profile.components.styles/modal-menu - [vector-icons/icon :icons/options {:container-style styles/profile-info-item-button}]]])]) + value]]]) -(defn profile-options [text] - (into [] - (when text - (list-selection/share-options text)))) - - -(defn profile-info-address-item [address] +(defn profile-info-contact-code-item [whisper-identity] [profile-info-item - {:label (i18n/label :t/address) - :action address - :options (profile-options address) - :text-mode :middle - :accessibility-label :profile-address - :value address}]) - -(defn profile-info-public-key-item [whisper-identity] - [profile-info-item - {:label (i18n/label :t/public-key) - :action whisper-identity - :options (profile-options whisper-identity) - :text-mode :middle + {:label (i18n/label :t/contact-code) :accessibility-label :profile-public-key :value whisper-identity}]) -(defn profile-info [{:keys [whisper-identity address]}] +(defn profile-info [{:keys [whisper-identity]}] [react/view - [profile-info-address-item address] - [profile.components/settings-item-separator] - [profile-info-public-key-item whisper-identity]]) + [profile-info-contact-code-item whisper-identity]]) (defview profile [] (letsubs [contact [:contact] chat-id [:get :current-chat-id]] [react/view profile.components.styles/profile [status-bar/status-bar] - [profile-contact-toolbar contact] - [network-info] + [profile-contact-toolbar] [react/scroll-view [react/view profile.components.styles/profile-form [profile.components/profile-header contact false false nil nil]] - [common/form-spacer] - [profile-actions contact chat-id] - [common/form-spacer] - [react/view profile.components.styles/profile-info-container - [profile-info contact] - [common/bottom-shadow]]]])) \ No newline at end of file + [list/action-list (actions contact chat-id) + {:container-style styles/action-container + :action-style styles/action + :action-label-style styles/action-label + :action-separator-style styles/action-separator + :icon-opts styles/action-icon-opts}] + [react/view styles/contact-profile-info-container + [profile-info contact]]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/profile/user/styles.cljs b/src/status_im/ui/screens/profile/user/styles.cljs index 833f6e4064..a74b8a41dc 100644 --- a/src/status_im/ui/screens/profile/user/styles.cljs +++ b/src/status_im/ui/screens/profile/user/styles.cljs @@ -42,3 +42,6 @@ (defstyle logout-text (merge profile.components.styles/settings-item-text {:color colors/red})) + +(defstyle my-profile-info-container + {:background-color colors/white}) diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index b4115962a6..330f19a34a 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -130,6 +130,6 @@ [profile.components/profile-header shown-account editing? true profile-icon-options :my-profile/update-name]] [react/view action-button.styles/actions-list [share-contact-code current-account public-key]] - [react/view profile.components.styles/profile-info-container + [react/view styles/my-profile-info-container [my-profile-settings current-account]] [logout]]])))