feature #2906 - new profile screen
This commit is contained in:
parent
54e83c584d
commit
ef57a5ca35
|
@ -27,7 +27,9 @@
|
||||||
|
|
||||||
;;drawer
|
;;drawer
|
||||||
:switch-users "Switch users"
|
:switch-users "Switch users"
|
||||||
:logout "Logout"
|
:logout-title "Log out?"
|
||||||
|
:logout-are-you-sure "Are you sure you want\nto log out?"
|
||||||
|
:logout "Log out"
|
||||||
:current-network "Current network"
|
:current-network "Current network"
|
||||||
|
|
||||||
;;home
|
;;home
|
||||||
|
@ -83,10 +85,13 @@
|
||||||
;;profile
|
;;profile
|
||||||
:profile "Profile"
|
:profile "Profile"
|
||||||
:edit-profile "Edit profile"
|
:edit-profile "Edit profile"
|
||||||
|
:main-currency "Main currency"
|
||||||
:message "Message"
|
:message "Message"
|
||||||
|
:notifications "Notifications"
|
||||||
:not-specified "Not specified"
|
:not-specified "Not specified"
|
||||||
:public-key "Public key"
|
:public-key "Public key"
|
||||||
:phone-number "Phone number"
|
:phone-number "Phone number"
|
||||||
|
:share-contact-code "Share my contact code"
|
||||||
:update-status "Update your status..."
|
:update-status "Update your status..."
|
||||||
:add-a-status "Add a 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"
|
:status-prompt "Set your status. Using #hastags will help others discover you and talk about what's on your mind"
|
||||||
|
@ -378,6 +383,7 @@
|
||||||
:process-json "Process JSON"
|
:process-json "Process JSON"
|
||||||
:error-processing-json "Error processing JSON"
|
:error-processing-json "Error processing JSON"
|
||||||
:rpc-url "RPC URL"
|
:rpc-url "RPC URL"
|
||||||
|
:network "Network"
|
||||||
:remove-network "Remove network"
|
:remove-network "Remove network"
|
||||||
:network-settings "Network settings"
|
:network-settings "Network settings"
|
||||||
:offline-messaging-settings "Offline messages settings"
|
:offline-messaging-settings "Offline messages settings"
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
(ns status-im.ui.components.colors)
|
(ns status-im.ui.components.colors)
|
||||||
|
|
||||||
(def white "#ffffff")
|
(def white "#ffffff")
|
||||||
(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color on dark background
|
(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color for a dark foreground
|
||||||
(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background
|
(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background
|
||||||
(def blue "#4360df") ;; Used as main wallet color
|
(def blue "#4360df") ;; Used as main wallet color
|
||||||
|
(def black "#000000") ;; Used as the default text color
|
||||||
|
(def gray "#939ba1") ;; Used as a background for a light foreground
|
||||||
|
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
|
|
@ -1,4 +1,5 @@
|
||||||
(ns status-im.ui.components.styles)
|
(ns status-im.ui.components.styles
|
||||||
|
(:require [status-im.utils.platform :as platform]))
|
||||||
|
|
||||||
;; TODO(oskarth): Make a palette of all these colors
|
;; TODO(oskarth): Make a palette of all these colors
|
||||||
|
|
||||||
|
@ -157,3 +158,10 @@
|
||||||
(def main-container
|
(def main-container
|
||||||
{:background-color color-white
|
{:background-color color-white
|
||||||
:flex 1})
|
:flex 1})
|
||||||
|
|
||||||
|
;; TODO(goranjovic): replace all platform conditional uppercase styling with a reference to this var
|
||||||
|
(def uppercase?
|
||||||
|
(condp = platform/platform
|
||||||
|
"android" true
|
||||||
|
"ios" false
|
||||||
|
false))
|
||||||
|
|
|
@ -1,32 +1,30 @@
|
||||||
(ns status-im.ui.screens.profile.styles
|
(ns status-im.ui.screens.profile.styles
|
||||||
(:require [status-im.ui.components.styles
|
(:require [status-im.ui.components.styles :as styles]
|
||||||
:as styles
|
[status-im.ui.components.colors :as colors]
|
||||||
:refer
|
|
||||||
[color-black
|
|
||||||
color-gray4
|
|
||||||
color-gray5
|
|
||||||
color-light-blue
|
|
||||||
color-light-gray
|
|
||||||
color-white
|
|
||||||
text1-color]]
|
|
||||||
[status-im.utils.platform :as platform])
|
[status-im.utils.platform :as platform])
|
||||||
(:require-macros [status-im.utils.styles :refer [defstyle]]))
|
(:require-macros [status-im.utils.styles :refer [defstyle]]))
|
||||||
|
|
||||||
|
(defstyle toolbar-edit-text
|
||||||
|
{:padding-right 16
|
||||||
|
:color colors/blue
|
||||||
|
:ios {:font-size 15}
|
||||||
|
:android {:font-size 14}})
|
||||||
|
|
||||||
(def profile
|
(def profile
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:background-color color-light-gray
|
:background-color colors/white
|
||||||
:flex-direction :column})
|
:flex-direction :column})
|
||||||
|
|
||||||
(def profile-form
|
(def profile-form
|
||||||
{:background-color color-white
|
{:background-color colors/white
|
||||||
:padding 16})
|
:padding 16})
|
||||||
|
|
||||||
(def edit-my-profile-form
|
(def edit-my-profile-form
|
||||||
{:background-color color-white
|
{:background-color colors/white
|
||||||
:flex 1})
|
:flex 1})
|
||||||
|
|
||||||
(defstyle profile-info-container
|
(defstyle profile-info-container
|
||||||
{:background-color color-white})
|
{:background-color colors/white})
|
||||||
|
|
||||||
(def profile-info-item-button
|
(def profile-info-item-button
|
||||||
{:padding 16})
|
{:padding 16})
|
||||||
|
@ -37,7 +35,7 @@
|
||||||
:padding-top 6})
|
:padding-top 6})
|
||||||
|
|
||||||
(defstyle status-prompt-text
|
(defstyle status-prompt-text
|
||||||
{:color color-gray4
|
{:color colors/gray
|
||||||
:ios {:font-size 14
|
:ios {:font-size 14
|
||||||
:line-height 25
|
:line-height 25
|
||||||
:letter-spacing -0.2}
|
:letter-spacing -0.2}
|
||||||
|
@ -45,14 +43,16 @@
|
||||||
:font-size 12}})
|
:font-size 12}})
|
||||||
|
|
||||||
(def profile-status-container
|
(def profile-status-container
|
||||||
{:background-color color-light-gray
|
{:background-color colors/gray
|
||||||
:margin-top 16
|
:margin-top 16
|
||||||
:border-radius 4
|
:border-radius 4
|
||||||
:padding 16
|
:padding 16
|
||||||
:max-height 114})
|
:max-height 114})
|
||||||
|
|
||||||
(def profile-badge
|
(def profile-badge
|
||||||
{:flex-direction :row})
|
{:flex-direction :column
|
||||||
|
:justify-content :center
|
||||||
|
:align-items :center})
|
||||||
|
|
||||||
(def edit-profile-badge
|
(def edit-profile-badge
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
@ -69,27 +69,27 @@
|
||||||
{:padding-top 25})
|
{:padding-top 25})
|
||||||
|
|
||||||
(def edit-name-title
|
(def edit-name-title
|
||||||
{:color color-gray4
|
{:color colors/gray
|
||||||
:ios {:font-size 13
|
:ios {:font-size 13
|
||||||
:letter-spacing -0.1}
|
:letter-spacing -0.1}
|
||||||
:android {:font-size 12}})
|
:android {:font-size 12}})
|
||||||
|
|
||||||
(defstyle profile-name-text
|
(defstyle profile-name-text
|
||||||
{:ios {:font-size 17
|
{:margin-top 8
|
||||||
:letter-spacing -0.2}
|
:font-size 15
|
||||||
:android {:color color-black
|
:text-align :center
|
||||||
:font-size 16}})
|
:ios {:letter-spacing -0.2}
|
||||||
|
:android {:color colors/black}})
|
||||||
|
|
||||||
(def profile-badge-name-container
|
(def profile-badge-name-container
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:justify-content :center
|
:justify-content :center})
|
||||||
:padding-left 16})
|
|
||||||
|
|
||||||
(def profile-activity-status-container
|
(def profile-activity-status-container
|
||||||
{:margin-top 4})
|
{:margin-top 4})
|
||||||
|
|
||||||
(defstyle profile-activity-status-text
|
(defstyle profile-activity-status-text
|
||||||
{:color color-gray4
|
{:color colors/gray
|
||||||
:ios {:font-size 14
|
:ios {:font-size 14
|
||||||
:line-height 20
|
:line-height 20
|
||||||
:letter-spacing -0.2}
|
:letter-spacing -0.2}
|
||||||
|
@ -107,24 +107,19 @@
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:padding-right (if options 16 40)})
|
:padding-right (if options 16 40)})
|
||||||
|
|
||||||
(defstyle profile-setting-title
|
(defstyle profile-settings-title
|
||||||
{:color color-gray4
|
{:color colors/gray
|
||||||
:ios {:font-size 14
|
:margin-left 16
|
||||||
:letter-spacing -0.2}
|
:margin-top 18
|
||||||
:android {:font-size 12}})
|
:margin-bottom 20
|
||||||
|
:font-size 14
|
||||||
|
:ios {:letter-spacing -0.2}})
|
||||||
|
|
||||||
(defstyle profile-setting-text
|
(defstyle profile-setting-text
|
||||||
{:ios {:font-size 17
|
{:ios {:font-size 17
|
||||||
:letter-spacing -0.2}
|
:letter-spacing -0.2}
|
||||||
:android {:font-size 16
|
:android {:font-size 16
|
||||||
:color color-black}})
|
:color colors/black}})
|
||||||
|
|
||||||
(defstyle logout-text
|
|
||||||
{:padding-left 16
|
|
||||||
:color styles/color-red
|
|
||||||
:ios {:font-size 17
|
|
||||||
:letter-spacing -0.2}
|
|
||||||
:android {:font-size 16}})
|
|
||||||
|
|
||||||
(defstyle profile-setting-spacing
|
(defstyle profile-setting-spacing
|
||||||
{:ios {:height 10}
|
{:ios {:height 10}
|
||||||
|
@ -132,45 +127,48 @@
|
||||||
|
|
||||||
(def profile-setting-text-empty
|
(def profile-setting-text-empty
|
||||||
(merge profile-setting-text
|
(merge profile-setting-text
|
||||||
{:color color-gray4}))
|
{:color colors/gray}))
|
||||||
|
|
||||||
(def info-item-separator
|
(def settings-item-separator
|
||||||
{:margin-left 16})
|
{:margin-left 16})
|
||||||
|
|
||||||
(defstyle network-settings
|
(defstyle settings-item
|
||||||
{:padding-horizontal 16
|
{:padding-horizontal 16
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:background-color color-white
|
:background-color colors/white
|
||||||
:android {:height 72}
|
:height 52})
|
||||||
:ios {:height 64}})
|
|
||||||
|
|
||||||
(defstyle offline-messaging-settings
|
(defstyle offline-messaging-settings
|
||||||
{:padding-horizontal 16
|
{:padding-horizontal 16
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:background-color color-white
|
:background-color colors/white
|
||||||
:android {:height 72}
|
:android {:height 72}
|
||||||
:ios {:height 64}})
|
:ios {:height 64}})
|
||||||
|
|
||||||
(def network-settings-text
|
(defstyle settings-item-text
|
||||||
(merge {:flex 1}
|
{:flex 1
|
||||||
profile-setting-text))
|
:font-size 15
|
||||||
|
:ios {:letter-spacing -0.2}
|
||||||
|
:android {:color colors/black}})
|
||||||
|
|
||||||
(def offline-messaging-settings-text
|
(def settings-item-value
|
||||||
(merge {:flex 1}
|
{:padding-right 10
|
||||||
profile-setting-text))
|
:font-size 15
|
||||||
|
:color colors/gray})
|
||||||
|
|
||||||
|
(defstyle logout-text
|
||||||
|
(merge settings-item-text
|
||||||
|
{:color colors/red}))
|
||||||
|
|
||||||
(def edit-line-color
|
(def edit-line-color
|
||||||
(if platform/ios?
|
(if platform/ios?
|
||||||
(str color-gray5 "80")
|
(str styles/color-gray5 "80")
|
||||||
color-gray5))
|
styles/color-gray5))
|
||||||
|
|
||||||
(def profile-focus-line-color
|
|
||||||
color-light-blue)
|
|
||||||
|
|
||||||
(defstyle profile-name-input
|
(defstyle profile-name-input
|
||||||
{:color text1-color
|
{:color styles/text1-color
|
||||||
:ios {:font-size 17
|
:ios {:font-size 17
|
||||||
:padding-bottom 0
|
:padding-bottom 0
|
||||||
:line-height 17
|
:line-height 17
|
||||||
|
@ -183,7 +181,7 @@
|
||||||
|
|
||||||
(defstyle profile-status-input
|
(defstyle profile-status-input
|
||||||
{:line-height 24 ;;TODO doesnt' work for multiline because a bug in the RN
|
{:line-height 24 ;;TODO doesnt' work for multiline because a bug in the RN
|
||||||
:color text1-color
|
:color colors/black
|
||||||
:padding-left 0
|
:padding-left 0
|
||||||
:ios {:font-size 17
|
:ios {:font-size 17
|
||||||
:padding-bottom 0
|
:padding-bottom 0
|
||||||
|
@ -197,14 +195,14 @@
|
||||||
:padding-bottom 0}})
|
:padding-bottom 0}})
|
||||||
|
|
||||||
(defstyle profile-status-text
|
(defstyle profile-status-text
|
||||||
{:color text1-color
|
{:color colors/black
|
||||||
:line-height 24
|
:line-height 24
|
||||||
:ios {:font-size 17
|
:ios {:font-size 17
|
||||||
:letter-spacing -0.2}
|
:letter-spacing -0.2}
|
||||||
:android {:font-size 16}})
|
:android {:font-size 16}})
|
||||||
|
|
||||||
(defstyle edit-profile-status
|
(defstyle edit-profile-status
|
||||||
{:background-color color-light-gray
|
{:background-color styles/color-light-gray
|
||||||
:border-radius 4
|
:border-radius 4
|
||||||
:height 90
|
:height 90
|
||||||
:padding-horizontal 16
|
:padding-horizontal 16
|
||||||
|
@ -218,6 +216,34 @@
|
||||||
|
|
||||||
(def add-a-status
|
(def add-a-status
|
||||||
(merge profile-status-text
|
(merge profile-status-text
|
||||||
{:color color-gray4}))
|
{:color colors/gray}))
|
||||||
|
|
||||||
(def network-info {:background-color :white})
|
(def network-info {:background-color :white})
|
||||||
|
|
||||||
|
(def share-contact-code
|
||||||
|
{:margin-horizontal 16
|
||||||
|
:flex-direction :row
|
||||||
|
:justify-content :space-between
|
||||||
|
:align-items :center
|
||||||
|
:height 42
|
||||||
|
:border-radius 8
|
||||||
|
:background-color styles/color-blue4-transparent})
|
||||||
|
|
||||||
|
(def share-contact-code-text-container
|
||||||
|
{:padding-left 16
|
||||||
|
:padding-bottom 1
|
||||||
|
:flex 0.9
|
||||||
|
:flex-direction :row
|
||||||
|
:justify-content :center
|
||||||
|
:align-items :center})
|
||||||
|
|
||||||
|
(def share-contact-code-text
|
||||||
|
{:color colors/blue
|
||||||
|
:font-size 15})
|
||||||
|
|
||||||
|
(def share-contact-icon-container
|
||||||
|
{:border-radius 50
|
||||||
|
:flex 0.1
|
||||||
|
:padding-right 5
|
||||||
|
:align-items :center
|
||||||
|
:justify-content :center})
|
||||||
|
|
|
@ -1,24 +1,24 @@
|
||||||
(ns status-im.ui.screens.profile.views
|
(ns status-im.ui.screens.profile.views
|
||||||
(:require [clojure.string :as string]
|
(:require [clojure.string :as string]
|
||||||
[re-frame.core :refer [dispatch]]
|
[re-frame.core :as re-frame]
|
||||||
[status-im.ui.components.action-button.action-button
|
[status-im.ui.components.action-button.action-button :as action-button]
|
||||||
:refer
|
[status-im.ui.components.action-button.styles :as action-button.styles]
|
||||||
[action-button action-button-disabled action-separator]]
|
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
|
||||||
[status-im.ui.components.action-button.styles :refer [actions-list]]
|
|
||||||
[status-im.ui.components.chat-icon.screen :refer [my-profile-icon]]
|
|
||||||
[status-im.ui.components.common.common :as common]
|
[status-im.ui.components.common.common :as common]
|
||||||
[status-im.ui.components.context-menu :refer [context-menu]]
|
[status-im.ui.components.context-menu :as context-menu]
|
||||||
[status-im.ui.components.list-selection :refer [share-options]]
|
[status-im.ui.components.list-selection :as list-selection]
|
||||||
[status-im.ui.components.react :as react]
|
[status-im.ui.components.react :as react]
|
||||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||||
[status-im.ui.components.status-bar.view :refer [status-bar]]
|
[status-im.ui.components.status-bar.view :as status-bar]
|
||||||
[status-im.ui.components.styles :refer [color-blue]]
|
[status-im.ui.components.styles :as component.styles]
|
||||||
|
[status-im.ui.components.colors :as colors]
|
||||||
[status-im.ui.components.toolbar.actions :as actions]
|
[status-im.ui.components.toolbar.actions :as actions]
|
||||||
[status-im.ui.components.toolbar.view :as toolbar]
|
[status-im.ui.components.toolbar.view :as toolbar]
|
||||||
[status-im.i18n :refer [label]]
|
[status-im.i18n :as i18n]
|
||||||
[status-im.ui.screens.profile.styles :as styles]
|
[status-im.ui.screens.profile.styles :as styles]
|
||||||
|
[status-im.ui.components.colors :as colors]
|
||||||
|
[status-im.utils.utils :as utils]
|
||||||
[status-im.utils.datetime :as time]
|
[status-im.utils.datetime :as time]
|
||||||
[status-im.utils.utils :refer [hash-tag?]]
|
|
||||||
[status-im.utils.config :as config]
|
[status-im.utils.config :as config]
|
||||||
[status-im.utils.platform :as platform]
|
[status-im.utils.platform :as platform]
|
||||||
[status-im.protocol.core :as protocol]
|
[status-im.protocol.core :as protocol]
|
||||||
|
@ -29,9 +29,11 @@
|
||||||
[toolbar/toolbar {}
|
[toolbar/toolbar {}
|
||||||
nil
|
nil
|
||||||
[toolbar/content-title ""]
|
[toolbar/content-title ""]
|
||||||
[toolbar/actions
|
[react/touchable-highlight
|
||||||
[(actions/opts [{:value #(dispatch [:my-profile/edit-profile])
|
{:on-press #(re-frame/dispatch [:my-profile/edit-profile])}
|
||||||
:text (label :t/edit)}])]]])
|
[react/view
|
||||||
|
[react/text {:style styles/toolbar-edit-text
|
||||||
|
:uppercase? component.styles/uppercase?} (i18n/label :t/edit)]]]])
|
||||||
|
|
||||||
(defn profile-toolbar [contact]
|
(defn profile-toolbar [contact]
|
||||||
[toolbar/toolbar {}
|
[toolbar/toolbar {}
|
||||||
|
@ -40,8 +42,8 @@
|
||||||
[toolbar/actions
|
[toolbar/actions
|
||||||
(when (and (not (:pending? contact))
|
(when (and (not (:pending? contact))
|
||||||
(not (:unremovable? contact)))
|
(not (:unremovable? contact)))
|
||||||
[(actions/opts [{:value #(dispatch [:hide-contact contact])
|
[(actions/opts [{:value #(re-frame/dispatch [:hide-contact contact])
|
||||||
:text (label :t/remove-from-contacts)}])])]])
|
:text (i18n/label :t/remove-from-contacts)}])])]])
|
||||||
|
|
||||||
(defn online-text [last-online]
|
(defn online-text [last-online]
|
||||||
(let [last-online-date (time/to-date last-online)
|
(let [last-online-date (time/to-date last-online)
|
||||||
|
@ -49,12 +51,12 @@
|
||||||
(if (and (pos? last-online)
|
(if (and (pos? last-online)
|
||||||
(<= last-online-date now-date))
|
(<= last-online-date now-date))
|
||||||
(time/time-ago last-online-date)
|
(time/time-ago last-online-date)
|
||||||
(label :t/active-unknown))))
|
(i18n/label :t/active-unknown))))
|
||||||
|
|
||||||
(defn profile-badge [{:keys [name last-online] :as contact}]
|
(defn profile-badge [{:keys [name last-online] :as contact}]
|
||||||
[react/view styles/profile-badge
|
[react/view styles/profile-badge
|
||||||
[my-profile-icon {:account contact
|
[chat-icon.screen/my-profile-icon {:account contact
|
||||||
:edit? false}]
|
:edit? false}]
|
||||||
[react/view styles/profile-badge-name-container
|
[react/view styles/profile-badge-name-container
|
||||||
[react/text {:style styles/profile-name-text
|
[react/text {:style styles/profile-name-text
|
||||||
:number-of-lines 1}
|
:number-of-lines 1}
|
||||||
|
@ -65,30 +67,30 @@
|
||||||
(online-text last-online)]])]])
|
(online-text last-online)]])]])
|
||||||
|
|
||||||
(defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id]
|
(defn profile-actions [{:keys [pending? whisper-identity dapp?]} chat-id]
|
||||||
[react/view actions-list
|
[react/view action-button.styles/actions-list
|
||||||
(if pending?
|
(if pending?
|
||||||
[action-button {:label (label :t/add-to-contacts)
|
[action-button/action-button {:label (i18n/label :t/add-to-contacts)
|
||||||
:icon :icons/add
|
:icon :icons/add
|
||||||
:icon-opts {:color :blue}
|
:icon-opts {:color :blue}
|
||||||
:on-press #(dispatch [:add-pending-contact chat-id])}]
|
:on-press #(re-frame/dispatch [:add-pending-contact chat-id])}]
|
||||||
[action-button-disabled {:label (label :t/in-contacts) :icon :icons/ok}])
|
[action-button/action-button-disabled {:label (i18n/label :t/in-contacts) :icon :icons/ok}])
|
||||||
[action-separator]
|
[action-button/action-separator]
|
||||||
[action-button {:label (label :t/start-conversation)
|
[action-button/action-button {:label (i18n/label :t/start-conversation)
|
||||||
:icon :icons/chats
|
:icon :icons/chats
|
||||||
:icon-opts {:color :blue}
|
:icon-opts {:color :blue}
|
||||||
:on-press #(dispatch [:profile/send-message whisper-identity])}]
|
:on-press #(re-frame/dispatch [:profile/send-message whisper-identity])}]
|
||||||
(when-not dapp?
|
(when-not dapp?
|
||||||
[react/view
|
[react/view
|
||||||
[action-separator]
|
[action-button/action-separator]
|
||||||
[action-button {:label (label :t/send-transaction)
|
[action-button/action-button {:label (i18n/label :t/send-transaction)
|
||||||
:icon :icons/arrow-right
|
:icon :icons/arrow-right
|
||||||
:icon-opts {:color :blue}
|
:icon-opts {:color :blue}
|
||||||
:on-press #(dispatch [:profile/send-transaction chat-id whisper-identity])}]])])
|
: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]}]
|
(defn profile-info-item [{:keys [label value options text-mode empty-value? accessibility-label]}]
|
||||||
[react/view styles/profile-setting-item
|
[react/view styles/profile-setting-item
|
||||||
[react/view (styles/profile-info-text-container options)
|
[react/view (styles/profile-info-text-container options)
|
||||||
[react/text {:style styles/profile-setting-title}
|
[react/text {:style styles/profile-settings-title}
|
||||||
label]
|
label]
|
||||||
[react/view styles/profile-setting-spacing]
|
[react/view styles/profile-setting-spacing]
|
||||||
[react/text {:style (if empty-value?
|
[react/text {:style (if empty-value?
|
||||||
|
@ -99,27 +101,27 @@
|
||||||
:accessibility-label accessibility-label}
|
:accessibility-label accessibility-label}
|
||||||
value]]
|
value]]
|
||||||
(when options
|
(when options
|
||||||
[context-menu
|
[context-menu/context-menu
|
||||||
[vector-icons/icon :icons/options]
|
[vector-icons/icon :icons/options]
|
||||||
options
|
options
|
||||||
nil
|
nil
|
||||||
styles/profile-info-item-button])])
|
styles/profile-info-item-button])])
|
||||||
|
|
||||||
(defn show-qr [contact qr-source qr-value]
|
(defn show-qr [contact qr-source qr-value]
|
||||||
#(dispatch [:navigate-to-modal :qr-code-view {:contact contact
|
#(re-frame/dispatch [:navigate-to-modal :qr-code-view {:contact contact
|
||||||
:qr-source qr-source
|
:qr-source qr-source
|
||||||
:qr-value qr-value}]))
|
:qr-value qr-value}]))
|
||||||
|
|
||||||
(defn profile-options [contact k text]
|
(defn profile-options [contact k text]
|
||||||
(into []
|
(into []
|
||||||
(concat [{:value (show-qr contact k text)
|
(concat [{:value (show-qr contact k text)
|
||||||
:text (label :t/show-qr)}]
|
:text (i18n/label :t/show-qr)}]
|
||||||
(when text
|
(when text
|
||||||
(share-options text)))))
|
(list-selection/share-options text)))))
|
||||||
|
|
||||||
(defn profile-info-address-item [{:keys [address] :as contact}]
|
(defn profile-info-address-item [{:keys [address] :as contact}]
|
||||||
[profile-info-item
|
[profile-info-item
|
||||||
{:label (label :t/address)
|
{:label (i18n/label :t/address)
|
||||||
:value address
|
:value address
|
||||||
:options (profile-options contact :address address)
|
:options (profile-options contact :address address)
|
||||||
:text-mode :middle
|
:text-mode :middle
|
||||||
|
@ -127,23 +129,23 @@
|
||||||
|
|
||||||
(defn profile-info-public-key-item [public-key contact]
|
(defn profile-info-public-key-item [public-key contact]
|
||||||
[profile-info-item
|
[profile-info-item
|
||||||
{:label (label :t/public-key)
|
{:label (i18n/label :t/public-key)
|
||||||
:value public-key
|
:value public-key
|
||||||
:options (profile-options contact :public-key public-key)
|
:options (profile-options contact :public-key public-key)
|
||||||
:text-mode :middle
|
:text-mode :middle
|
||||||
:accessibility-label :profile-public-key}])
|
:accessibility-label :profile-public-key}])
|
||||||
|
|
||||||
(defn info-item-separator []
|
(defn settings-item-separator []
|
||||||
[common/separator styles/info-item-separator])
|
[common/separator styles/settings-item-separator])
|
||||||
|
|
||||||
(defn tag-view [tag]
|
(defn tag-view [tag]
|
||||||
[react/text {:style {:color color-blue}
|
[react/text {:style {:color colors/blue}
|
||||||
:font :medium}
|
:font :medium}
|
||||||
(str tag " ")])
|
(str tag " ")])
|
||||||
|
|
||||||
(defn colorize-status-hashtags [status]
|
(defn colorize-status-hashtags [status]
|
||||||
(for [[i status] (map-indexed vector (string/split status #" "))]
|
(for [[i status] (map-indexed vector (string/split status #" "))]
|
||||||
(if (hash-tag? status)
|
(if (utils/hash-tag? status)
|
||||||
^{:key (str "item-" i)}
|
^{:key (str "item-" i)}
|
||||||
[tag-view status]
|
[tag-view status]
|
||||||
^{:key (str "item-" i)}
|
^{:key (str "item-" i)}
|
||||||
|
@ -151,85 +153,82 @@
|
||||||
|
|
||||||
(defn profile-info-phone-item [phone & [options]]
|
(defn profile-info-phone-item [phone & [options]]
|
||||||
(let [phone-empty? (or (nil? phone) (string/blank? phone))
|
(let [phone-empty? (or (nil? phone) (string/blank? phone))
|
||||||
phone-text (if phone-empty?
|
phone-text (if phone-empty?
|
||||||
(label :t/not-specified)
|
(i18n/label :t/not-specified)
|
||||||
phone)]
|
phone)]
|
||||||
[profile-info-item {:label (label :t/phone-number)
|
[profile-info-item {:label (i18n/label :t/phone-number)
|
||||||
:value phone-text
|
:value phone-text
|
||||||
:options options
|
:options options
|
||||||
:empty-value? phone-empty?
|
:empty-value? phone-empty?
|
||||||
:accessibility-label :profile-phone-number}]))
|
:accessibility-label :profile-phone-number}]))
|
||||||
|
|
||||||
(defn network-settings []
|
(defn settings-title [title]
|
||||||
[react/touchable-highlight
|
[react/text {:style styles/profile-settings-title}
|
||||||
{:on-press #(dispatch [:navigate-to :network-settings])}
|
title])
|
||||||
[react/view styles/network-settings
|
|
||||||
[react/text {:style styles/network-settings-text}
|
|
||||||
(label :t/network-settings)]
|
|
||||||
[vector-icons/icon :icons/forward {:color :gray}]]])
|
|
||||||
|
|
||||||
(defn offline-messaging-settings []
|
(defn settings-item [label-kw value action-fn active?]
|
||||||
[react/touchable-highlight
|
[react/touchable-highlight
|
||||||
{:on-press #(dispatch [:navigate-to :offline-messaging-settings])}
|
{:on-press action-fn
|
||||||
[react/view styles/offline-messaging-settings
|
:disabled (not active?)}
|
||||||
[react/text {:style styles/offline-messaging-settings-text}
|
[react/view styles/settings-item
|
||||||
(label :t/offline-messaging-settings)]
|
[react/text {:style styles/settings-item-text}
|
||||||
[vector-icons/icon :icons/forward {:color :gray}]]])
|
(i18n/label label-kw)]
|
||||||
|
[react/text {:style styles/settings-item-value
|
||||||
|
:uppercase? component.styles/uppercase?} value]
|
||||||
|
(when active?
|
||||||
|
[vector-icons/icon :icons/forward {:color colors/gray}])]])
|
||||||
|
|
||||||
(defn profile-info [{:keys [whisper-identity status phone] :as contact}]
|
(defn profile-info [{:keys [whisper-identity phone] :as contact}]
|
||||||
[react/view
|
[react/view
|
||||||
[profile-info-address-item contact]
|
[profile-info-address-item contact]
|
||||||
[info-item-separator]
|
[settings-item-separator]
|
||||||
[profile-info-public-key-item whisper-identity contact]
|
[profile-info-public-key-item whisper-identity contact]
|
||||||
[info-item-separator]
|
[settings-item-separator]
|
||||||
[profile-info-phone-item phone]])
|
[profile-info-phone-item phone]])
|
||||||
|
|
||||||
(defn save-profile! []
|
|
||||||
(when-let [save-event @(re-frame/subscribe [:my-profile.drawer/save-event])]
|
|
||||||
(re-frame/dispatch [save-event])))
|
|
||||||
|
|
||||||
(defn navigate-to-accounts []
|
(defn navigate-to-accounts []
|
||||||
(save-profile!)
|
|
||||||
;; TODO(rasom): probably not the best place for this call
|
;; TODO(rasom): probably not the best place for this call
|
||||||
(protocol/stop-whisper!)
|
(protocol/stop-whisper!)
|
||||||
(re-frame/dispatch [:navigate-to :accounts]))
|
(re-frame/dispatch [:navigate-to :accounts]))
|
||||||
|
|
||||||
|
(defn handle-logout []
|
||||||
|
(utils/show-confirmation (i18n/label :t/logout-title)
|
||||||
|
(i18n/label :t/logout-are-you-sure)
|
||||||
|
(i18n/label :t/logout) navigate-to-accounts))
|
||||||
|
|
||||||
(defn logout []
|
(defn logout []
|
||||||
[react/view {}
|
[react/view {}
|
||||||
[react/touchable-highlight
|
[react/touchable-highlight
|
||||||
{:on-press navigate-to-accounts}
|
{:on-press handle-logout}
|
||||||
[react/view
|
[react/view styles/settings-item
|
||||||
[react/text {:style styles/logout-text
|
[react/text {:style styles/logout-text
|
||||||
:font (if platform/android? :medium :default)}
|
:font (if platform/android? :medium :default)}
|
||||||
(label :t/logout)]]]])
|
(i18n/label :t/logout)]]]])
|
||||||
|
|
||||||
(defn my-profile-info [{:keys [public-key status phone] :as contact}]
|
(defn my-profile-settings [{:keys [network networks]}]
|
||||||
[react/view
|
[react/view
|
||||||
[profile-info-address-item contact]
|
[settings-title (i18n/label :t/settings)]
|
||||||
[info-item-separator]
|
[settings-item :t/main-currency "USD" #() false]
|
||||||
[profile-info-public-key-item public-key contact]
|
[settings-item-separator]
|
||||||
[info-item-separator]
|
[settings-item :t/notifications "" #() true]
|
||||||
[profile-info-phone-item
|
[settings-item-separator]
|
||||||
phone
|
[settings-item :t/network (get-in networks [network :name])
|
||||||
[{:value #(dispatch [:my-profile/update-phone-number])
|
#(re-frame/dispatch [:navigate-to :network-settings]) true]
|
||||||
:text (label :t/edit)}]]
|
|
||||||
[info-item-separator]
|
|
||||||
[network-settings]
|
|
||||||
(when config/offline-inbox-enabled?
|
(when config/offline-inbox-enabled?
|
||||||
[info-item-separator])
|
[settings-item-separator])
|
||||||
(when config/offline-inbox-enabled?
|
(when config/offline-inbox-enabled?
|
||||||
[offline-messaging-settings])
|
[settings-item :t/offline-messaging-settings ""
|
||||||
[logout]])
|
#(re-frame/dispatch [:navigate-to :offline-messaging-settings]) true])])
|
||||||
|
|
||||||
(defn profile-status [status & [edit?]]
|
(defn profile-status [status & [edit?]]
|
||||||
[react/view styles/profile-status-container
|
[react/view styles/profile-status-container
|
||||||
(if (or (nil? status) (string/blank? status))
|
(if (or (nil? status) (string/blank? status))
|
||||||
[react/touchable-highlight {:on-press #(dispatch [:my-profile/edit-profile :edit-status])}
|
[react/touchable-highlight {:on-press #(re-frame/dispatch [:my-profile/edit-profile :edit-status])}
|
||||||
[react/view
|
[react/view
|
||||||
[react/text {:style styles/add-a-status}
|
[react/text {:style styles/add-a-status}
|
||||||
(label :t/add-a-status)]]]
|
(i18n/label :t/add-a-status)]]]
|
||||||
[react/scroll-view
|
[react/scroll-view
|
||||||
[react/touchable-highlight {:on-press (when edit? #(dispatch [:my-profile/edit-profile :edit-status]))}
|
[react/touchable-highlight {:on-press (when edit? #(re-frame/dispatch [:my-profile/edit-profile :edit-status]))}
|
||||||
[react/view
|
[react/view
|
||||||
[react/text {:style styles/profile-status-text}
|
[react/text {:style styles/profile-status-text}
|
||||||
(colorize-status-hashtags status)]]]])])
|
(colorize-status-hashtags status)]]]])])
|
||||||
|
@ -239,34 +238,35 @@
|
||||||
[common/network-info]
|
[common/network-info]
|
||||||
[common/separator]])
|
[common/separator]])
|
||||||
|
|
||||||
|
(defn share-contact-code [current-account public-key]
|
||||||
|
[react/touchable-highlight {:on-press (show-qr current-account :public-key public-key)}
|
||||||
|
[react/view styles/share-contact-code
|
||||||
|
[react/view styles/share-contact-code-text-container
|
||||||
|
[react/text {:style styles/share-contact-code-text
|
||||||
|
:uppercase? component.styles/uppercase?}
|
||||||
|
(i18n/label :t/share-contact-code)]]
|
||||||
|
[react/view styles/share-contact-icon-container
|
||||||
|
[vector-icons/icon :icons/qr {:color colors/blue}]]]])
|
||||||
|
|
||||||
(defview my-profile []
|
(defview my-profile []
|
||||||
(letsubs [{:keys [status public-key] :as current-account} [:get-current-account]]
|
(letsubs [{:keys [public-key] :as current-account} [:get-current-account]]
|
||||||
[react/view styles/profile
|
[react/view styles/profile
|
||||||
[my-profile-toolbar]
|
[my-profile-toolbar]
|
||||||
[network-info]
|
|
||||||
[react/scroll-view
|
[react/scroll-view
|
||||||
[react/view styles/profile-form
|
[react/view styles/profile-form
|
||||||
[profile-badge current-account]
|
[profile-badge current-account]]
|
||||||
[profile-status status true]]
|
[react/view action-button.styles/actions-list
|
||||||
[common/form-spacer]
|
[share-contact-code current-account public-key]]
|
||||||
[react/view actions-list
|
|
||||||
[action-button {:label (label :t/show-qr)
|
|
||||||
:icon :icons/qr
|
|
||||||
:icon-opts {:color :blue}
|
|
||||||
:on-press (show-qr current-account :public-key public-key)}]]
|
|
||||||
[common/form-spacer]
|
|
||||||
[react/view styles/profile-info-container
|
[react/view styles/profile-info-container
|
||||||
[my-profile-info current-account]
|
[my-profile-settings current-account]]
|
||||||
[common/bottom-shadow]]]]))
|
[logout]]]))
|
||||||
|
|
||||||
(defview profile []
|
(defview profile []
|
||||||
(letsubs [{:keys [pending?
|
(letsubs [{:keys [status]
|
||||||
status
|
|
||||||
whisper-identity]
|
|
||||||
:as contact} [:contact]
|
:as contact} [:contact]
|
||||||
chat-id [:get :current-chat-id]]
|
chat-id [:get :current-chat-id]]
|
||||||
[react/view styles/profile
|
[react/view styles/profile
|
||||||
[status-bar]
|
[status-bar/status-bar]
|
||||||
[profile-toolbar contact]
|
[profile-toolbar contact]
|
||||||
[network-info]
|
[network-info]
|
||||||
[react/scroll-view
|
[react/scroll-view
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
(ns status-im.utils.ethereum.tokens
|
(ns status-im.utils.ethereum.tokens
|
||||||
(:require [status-im.ui.components.styles :as styles])
|
|
||||||
(:require-macros [status-im.utils.ethereum.macros :refer [resolve-icons]]))
|
(:require-macros [status-im.utils.ethereum.macros :refer [resolve-icons]]))
|
||||||
|
|
||||||
(defn- asset-border [color]
|
(defn- asset-border [color]
|
||||||
|
@ -9,7 +8,10 @@
|
||||||
:symbol :ETH
|
:symbol :ETH
|
||||||
:decimals 18
|
:decimals 18
|
||||||
:icon {:source (js/require "./resources/images/assets/ethereum.png")
|
:icon {:source (js/require "./resources/images/assets/ethereum.png")
|
||||||
:style (asset-border styles/color-light-blue-transparent)}})
|
;; TODO(goranjovic) find a better place to set UI info
|
||||||
|
;; like colors. Removed the reference to component.styles to
|
||||||
|
;; avoid circular dependency between namespaces.
|
||||||
|
:style (asset-border "#628fe333")}})
|
||||||
|
|
||||||
(defn ethereum? [k]
|
(defn ethereum? [k]
|
||||||
(= k (:symbol ethereum)))
|
(= k (:symbol ethereum)))
|
||||||
|
|
Loading…
Reference in New Issue