status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

updated ui for accounts, login and recover screens

This commit is contained in:
Andrey Shovkoplyas 2017-04-14 21:34:03 +03:00 committed by Roman Volosovskyi
parent 2a0239ddae
commit 0e5b515f5e
38 changed files with 399 additions and 590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/res/drawable-hdpi/icon_add_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 336 B

BIN
android/app/src/main/res/drawable-hdpi/icon_dots_horizontal_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

BIN
android/app/src/main/res/drawable-mdpi/icon_add_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 B

BIN
android/app/src/main/res/drawable-mdpi/icon_dots_horizontal_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_add_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 B

After

Width:  |  Height:  |  Size: 396 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_dots_horizontal_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_add_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 525 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_dots_horizontal_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 409 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 763 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_dots_horizontal_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 B

2
ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json vendored
View File

@ -2,7 +2,7 @@
"images" : [
{
"idiom" : "universal",
"filename" : "icon_add.png",
"filename" : "icon_add_white.png",
"scale" : "1x"
},
{

BIN
ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 296 B

BIN
ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add_white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 B

21
ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "icon_dots_horizontal_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
ios/StatusIm/Images.xcassets/icon_dots_horizontal_white.imageset/icon_dots_horizontal_white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 261 B

7
src/status_im/accounts/handlers.cljs
View File

@ -188,10 +188,3 @@
messages (processed-messages/get-filtered (str "ttl > " now))]
(cache/init! messages)
(processed-messages/delete (str "ttl <=" now))))))
(defmethod nav/preload-data! :qr-code-view
[{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]]
(assoc db :qr-modal {:contact (or contact
(get-in db [:accounts current-account-id]))
:qr-source qr-source
:amount? amount?}))

6
src/status_im/accounts/login/handlers.cljs
View File

@ -18,6 +18,12 @@
(register-handler :set-login-from-qr set-login-from-qr)
(register-handler
:open-login
(after #(dispatch [:navigate-to :login]))
(fn [db [_ address photo-path name]]
(update db :login assoc :address address :photo-path photo-path :name name)))
(defn initialize-account
[address new-account?]
(dispatch [:set :login {}])

107
src/status_im/accounts/login/screen.cljs
View File

@ -1,80 +1,45 @@
(ns status-im.accounts.login.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
(:require [re-frame.core :refer [dispatch dispatch-sync]]
[status-im.accounts.styles :as ast]
[status-im.accounts.screen :refer [account-bage]]
[status-im.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.accounts.login.styles :as st]
[status-im.components.react :refer [view
text
image
linear-gradient
touchable-highlight
get-dimensions]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.actions :as act]
[status-im.components.toolbar.styles :refer [toolbar-title-container
toolbar-title-text]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-white
icon-search
button-input]]
[status-im.i18n :refer [label]]
[status-im.accounts.login.styles :as st]))
touchable-highlight]]
[status-im.i18n :as i18n]))
(defn toolbar-title []
[view toolbar-title-container
[text {:style (merge toolbar-title-text {:color color-white})
:font :medium}
(label :t/login)]])
(defview address-input [address]
[view
[text-field
{:value address
:editable false
:label (label :t/address)
:label-color "#ffffff80"
:line-color :white
:input-style st/input-style
:on-change-text #(dispatch [:set-in [:login :address] %])}]])
(defview password-input [error]
[view
[text-field
{:editable true
:error (when (pos? (count error)) (label :t/wrong-password))
:error-color :white
:label (label :t/password)
:secure-text-entry true
:label-color "#ffffff80"
:line-color :white
:input-style st/input-style
:auto-capitalize :none
:on-change-text #(do
(dispatch [:set-in [:login :password] %])
(dispatch [:set-in [:login :error] ""]))}]])
(defn login-toolbar []
[toolbar {:background-color :transparent
:hide-border? true
:title-style {:color :white}
:nav-action (act/back-white #(dispatch [:navigate-back]))
:actions [{:image :blank}]
:title (i18n/label :t/sign-in-to-status)}])
(defview login []
[{:keys [address password error]} [:get :login]
keyboard-height [:get :keyboard-height]]
[view (st/screen-container (- (:height (get-dimensions "window"))
keyboard-height))
[linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
:start [0, 0]
:end [0.5, 1]
:locations [0, 0.8, 1]
:style st/gradient-background}]
[{:keys [address photo-path name password error]} [:get :login]]
[view ast/accounts-container
[status-bar {:type :transparent}]
[toolbar {:background-color :transparent
:nav-action (act/back-white #(dispatch [:navigate-back]))
:custom-content [toolbar-title]
:actions [{:image {:style icon-search}
:handler #()}]}]
[view st/form-container
[view st/form-container-inner
[address-input (or address "")]
[password-input error]]]
[view st/bottom-actions-container
[view st/connect-button-container
[login-toolbar]
[view st/login-view
[view st/login-badge-container
[account-bage address photo-path name]
[view {:height 8}]
[text-input-with-label {:label (i18n/label :t/password)
:auto-capitalize :none
:hide-underline? true
:on-change-text #(do
(dispatch [:set-in [:login :password] %])
(dispatch [:set-in [:login :error] ""]))
:auto-focus true
:secure-text-entry true
:error (when (pos? (count error)) (i18n/label :t/wrong-password))}]]
[view {:margin-top 16}
[touchable-highlight {:on-press #(dispatch [:login-account address password])}
[view st/connect-button
[text {:style st/connect-button-text}
(label :t/connect)]]]]]])
[view st/sign-in-button
[text {:style st/sign-it-text} (i18n/label :t/sign-in)]]]]]])

79
src/status_im/accounts/login/styles.cljs
View File

@ -1,55 +1,34 @@
(ns status-im.accounts.login.styles
(:require [status-im.components.styles :refer [color-white
color-blue]]))
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as common]))
(defstyle login-view
{:flex 1
:ios {:margin-top 10
:margin-bottom 10}
:android {:margin-top 16
:margin-bottom 16}
:margin-horizontal 16})
(defn screen-container [height]
{:height height})
(defstyle login-badge-container
{:background-color :white
:ios {:border-radius 8
:padding-top 16
:height 150}
:android {:border-radius 4
:padding-top 12
:height 144}})
(def gradient-background
{:position :absolute
:top 0
:right 0
:bottom 0
:left 0})
(defstyle sign-it-text
{:color :white
:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 16}})
(def form-container
{:flex 1
:flex-direction "row"
:align-items "center"
:justifyContent "center"})
(def form-container-inner
{:flex 1
:padding-bottom 100
:margin-left 16})
(def bottom-actions-container
{:position :absolute
:left 0
:right 0
:bottom 0})
(def connect-button-container
{:flex 1})
(def connect-button
{:backgroundColor color-white
:flex 1
:alignItems :center
:paddingVertical 16
:paddingHorizontal 28})
(def connect-button-text
{:color color-blue
:fontSize 16})
(def input-style
{:color :white
:font-size 12})
(def scan-label
{:color :white})
(def address-input-wrapper
{})
(defstyle sign-in-button
{:background-color common/color-blue3
:align-items :center
:justify-content :center
:height 52
:ios {:border-radius 8}
:android {:border-radius 4}})

7
src/status_im/accounts/recover/handlers.cljs
View File

@ -7,7 +7,8 @@
[clojure.string :as str]
[status-im.utils.handlers :as u]
[status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.protocol.core :as protocol]))
[status-im.protocol.core :as protocol]
[status-im.navigation.handlers :as nav]))
(defn account-recovered [result]
(let [_ (log/debug result)
@ -37,3 +38,7 @@
account-recovered))
(register-handler :recover-account (u/side-effect! recover-account))
(defmethod nav/preload-data! :recover
[db]
(update db :recover dissoc :password :passphrase))

121
src/status_im/accounts/recover/screen.cljs
View File

@ -1,103 +1,56 @@
(ns status-im.accounts.recover.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
(:require [re-frame.core :refer [dispatch]]
[status-im.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.react :refer [view
text
image
linear-gradient
keyboard-avoiding-view
touchable-highlight]]
[status-im.components.sticky-button :refer [sticky-button]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.actions :as act]
[status-im.components.toolbar.styles :refer [toolbar-gradient
toolbar-title-container
toolbar-title-text]]
[status-im.components.styles :refer [color-blue
color-gray
separator-color
button-input]]
[status-im.components.react :refer [linear-gradient]]
[status-im.i18n :refer [label]]
[status-im.components.toolbar-new.view :refer [toolbar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n]
[status-im.accounts.recover.styles :as st]
[status-im.accounts.recover.validations :as v]
[cljs.spec :as s]
[clojure.string :as str]
[taoensso.timbre :as log]))
(defn toolbar-title []
[view toolbar-title-container
[text {:style toolbar-title-text
:font :medium}
(label :t/recover-from-passphrase)]])
[cljs.spec :as spec]
[clojure.string :as str]))
(defview passphrase-input [passphrase]
[error [:get-in [:recover :passphrase-error]]]
(let [error (if (str/blank? passphrase) "" error)
error (if (s/valid? ::v/passphrase passphrase)
error
(label :t/enter-valid-passphrase))]
[view
[text-field
{:value passphrase
:error error
:error-color color-blue
:label (label :t/passphrase)
:label-color color-gray
:line-color separator-color
:input-style st/input-style
:auto-capitalize :none
:wrapper-style (merge button-input st/address-input-wrapper)
:on-change-text #(dispatch [:set-in [:recover :passphrase] %])}]]))
[view {:margin-top 10}
[text-input-with-label {:label (i18n/label :t/passphrase)
:description (i18n/label :t/twelve-words-in-correct-order)
:multiline true
:auto-expanding true
:max-height st/passphrase-input-max-height
:default-value passphrase
:auto-capitalize :none
:on-change-text #(dispatch [:set-in [:recover :passphrase] %])
:error error}]])
(defview password-input [password]
[error [:get-in [:recover :password-error]]]
(let [error (if (str/blank? password) "" error)
error (if (s/valid? ::v/password password)
error
(label :t/enter-valid-password))]
[view
[text-field
{:value password
:secure-text-entry true
:error error
:error-color color-blue
:label (label :t/password)
:label-color color-gray
:line-color separator-color
:input-style st/input-style
:on-change-text #(dispatch [:set-in [:recover :password] %])}]]))
[view {:margin-top 10}
[text-input-with-label {:label (i18n/label :t/password)
:default-value password
:auto-capitalize :none
:on-change-text #(dispatch [:set-in [:recover :password] %])
:secure-text-entry true
:error error}]])
(defview recover []
[{:keys [passphrase password passphrase-error password-error]} [:get :recover]]
[{:keys [passphrase password]} [:get :recover]]
(let [valid-form? (and
(s/valid? ::v/passphrase passphrase)
(s/valid? ::v/password password))
gradient-colors ["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.085)"
"rgba(24, 52, 76, 0)"]
_ (log/debug passphrase " - " password)]
[view st/screen-container
[status-bar {:type :transparent}]
[toolbar {:background-color :transparent
:nav-action (act/back #(dispatch [:navigate-back]))
:custom-content [toolbar-title]}]
[linear-gradient {:locations [0 0.6 1]
:colors gradient-colors
:style toolbar-gradient}]
[view st/recover-explain-container
[text {:style st/recover-explain-text
:font :medium}
(label :t/recover-explain)]]
[view st/form-container
[view st/form-container-inner
(spec/valid? ::v/passphrase passphrase)
(spec/valid? ::v/password password))]
[keyboard-avoiding-view {:style st/screen-container}
[status-bar]
[toolbar {:actions [{:image :blank}]
:title (i18n/label :t/recover-access)}]
[passphrase-input (or passphrase "")]
[password-input (or password "")]]]
[view st/bottom-actions-container
[view st/recover-button-container
[touchable-highlight
{:on-press #(when valid-form?
(dispatch [:recover-account passphrase password]))}
[view (st/recover-button valid-form?)
[text {:style st/recover-button-text}
(label :t/recover)]]]]]]))
[password-input (or password "")]
[view {:flex 1}]
(when valid-form?
[sticky-button (i18n/label :t/recover-access) #(dispatch [:recover-account passphrase password])])]))

69
src/status_im/accounts/recover/styles.cljs
View File

@ -1,69 +1,10 @@
(ns status-im.accounts.recover.styles
(:require [status-im.components.styles :refer [color-white
color-gray
color-blue]]))
(:require [status-im.components.styles :as common]
[status-im.utils.platform :refer [ios?]]))
(def screen-container
{:flex 1
:color :white
:background-color color-white})
:background-color common/color-white})
(def gradient-background
{:position :absolute
:top 0
:right 0
:bottom 0
:left 0})
(def recover-explain-container
{:padding-horizontal 35
:padding-top 20
:justify-content :center})
(def recover-explain-text
{:color color-gray
:font-size 16
:line-height 20
:text-align :center})
(def form-container
{:flex 1
:flex-direction "row"
:justifyContent "center"})
(def form-container-inner
{:flex 1
:padding-bottom 100
:margin-left 16})
(def bottom-actions-container
{:position :absolute
:left 0
:right 0
:bottom 0})
(def recover-button-container
{:flex 1})
(defn recover-button [valid-form?]
{:backgroundColor (if valid-form? color-blue :gray)
:color :white
:flex 1
:alignItems :center
:paddingVertical 16
:paddingHorizontal 28})
(def recover-button-text
{:color color-white
:fontSize 16})
(def input-style
{:color "#323232"
:font-size 12})
(def scan-label
{:color :white})
(def address-input-wrapper
{})
(def passphrase-input-max-height
(if ios? 78 72))

115
src/status_im/accounts/screen.cljs
View File

@ -1,84 +1,61 @@
(ns status-im.accounts.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
(:require [re-frame.core :refer [dispatch dispatch-sync]]
[status-im.accounts.styles :as st]
[status-im.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.common.common :as common]
[status-im.components.action-button.action-button :refer [action-button]]
[status-im.utils.listview :as lw]
[status-im.constants :refer [console-chat-id]]
[status-im.components.react :refer [view
scroll-view
text
list-view
list-item
image
linear-gradient
touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.actions :as act]
[status-im.components.styles :refer [color-white
icon-search
icon-plus
white-form-text-input]]
[status-im.components.toolbar.styles :refer [toolbar-title-container
toolbar-title-text]]
[status-im.utils.listview :as lw]
[status-im.accounts.views.account :refer [account-view]]
[status-im.i18n :refer [label]]
[status-im.accessibility-ids :as id]
[status-im.accounts.styles :as st]
[status-im.constants :refer [console-chat-id]]))
[status-im.i18n :as i18n]
[clojure.string :as str]))
(defn toolbar-title []
(let [style (merge toolbar-title-text {:color color-white})]
[view toolbar-title-container
[text {:style style
:font :medium}
(label :t/switch-users)]]))
(defn account-bage [address photo-path name]
[view st/account-bage
[image {:source {:uri (if (str/blank? photo-path) :avatar photo-path)}
:style st/photo-image}]
[view st/account-bage-text-view
[text {:style st/account-bage-text
:numberOfLines 1}
(or name address)]]])
(defn render-row [row _ _]
(list-item [account-view row]))
(defn account-view [{:keys [address photo-path name] :as account}]
[view
[touchable-highlight {:on-press #(dispatch [:open-login address photo-path name])}
[view st/account-view
[account-bage address photo-path name]]]])
(defn create-account [_]
(defn- create-account [_]
(dispatch-sync [:reset-app])
(dispatch [:navigate-to :chat console-chat-id]))
(defview accounts []
[accounts [:get :accounts]
stack [:get :navigation-stack]]
(let [accounts (vals accounts)
show-back? (> (count stack) 1)]
[view st/screen-container
[linear-gradient {:colors ["rgba(182, 116, 241, 1)"
"rgba(107, 147, 231, 1)"
"rgba(43, 171, 238, 1)"]
:start [0, 0]
:end [0.5, 1]
:locations [0, 0.8, 1]
:style st/gradient-background}
[status-bar {:type :transparent}]
[toolbar {:background-color :transparent
:nav-action (if show-back?
(act/back-white #(dispatch [:navigate-back]))
act/nothing)
:custom-content [toolbar-title]
:actions [{:image {:style icon-search}
:handler #()}]}]]
[list-view {:dataSource (lw/to-datasource accounts)
:enableEmptySections true
:renderRow render-row
:bounces false
:style st/account-list
:contentContainerStyle (st/account-list-content (count accounts))}]
[view st/bottom-actions-container
[view st/recover-button-container
[touchable-highlight
{:on-press #(dispatch [:navigate-to :recover])}
[view st/recover-button
[text {:style st/recover-button-text}
(label :t/recover-access)]]]]
[view st/add-account-button-container
[touchable-highlight {:on-press create-account
:accessibility-label id/accounts-create-button}
[view st/add-account-button
[image {:source {:uri :icon_add_white}
:style st/icon-plus}]
[text {:style st/add-account-text
:font :default}
(label :t/add-account)]]]]]]))
[accounts [:get :accounts]]
[view st/accounts-container
[status-bar {:type :transparent}]
[view st/account-title-conatiner
[text {:style st/account-title-text
:font :toolbar-title}
(i18n/label :t/sign-in-to-status)]]
[view st/accounts-list-container
[list-view {:dataSource (lw/to-datasource (vals accounts))
:renderSeparator #(list-item ^{:key %2} [view {:height 10}])
:renderRow #(list-item [account-view %])}]]
[view st/bottom-actions-container
[action-button (i18n/label :t/create-new-account)
:add_white
create-account
st/accounts-action-button]
[common/separator st/accounts-separator st/accounts-separator-wrapper]
[action-button (i18n/label :t/recover-access)
:dots_horizontal_white
#(dispatch [:navigate-to :recover])
st/accounts-action-button]]])

228
src/status_im/accounts/styles.cljs
View File

@ -1,184 +1,68 @@
(ns status-im.accounts.styles
(:require [status-im.components.styles :refer [color-white]]
[status-im.components.react :as r]))
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.components.styles :as common]))
(def screen-container
{:flex 1
:color :white})
(def gradient-background
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:padding-bottom 84})
(defn account-list-content [cnt]
(merge {:justifyContent :center}
;; todo this will not work with landscape and looks bad
(when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
{:flex-grow 1})))
(def account-list
{:margin-top 75
:margin-bottom 110})
(def row-separator
{:borderBottomWidth 1
:borderBottomColor "#bababa"})
(def account-container
{:flex 1
:flexDirection :row
:height 69
:backgroundColor "rgba(255, 255, 255, 0.1)"
:alignItems :center
:justifyContent :center})
(def photo-container
{:flex 0.2
:flexDirection :column
:alignItems :center
:justifyContent :center})
(def account-photo-container
{:flex 1
:width 36
:height 36
:alignItems :center
:justifyContent :center})
(def qr-photo-container
(merge photo-container
{:margin-left 8
:margin-right 4}))
(defn qr-code-container [dimensions]
{:background-color "white"
:width (:width dimensions)
:align-items :center
:justify-content :center
:padding 40})
(def photo-image
{:width 36
:height 36
:border-radius 18})
(def name-container
{:flex 1
:flexDirection :column})
(def name-text
{:color color-white
:fontSize 16})
(def address-text
{:color color-white
:fontSize 12})
(def online-container
{:flex 0.2
:flexDirection :column
:alignItems :center
:justifyContent :center})
(def online-image-container
{:width 40
:height 40
:margin-right 4
:align-items :center
:justify-content :center})
(def accounts-container
{:flex 1
:background-color common/color-blue2})
(def bottom-actions-container
{:position :absolute
:left 0
:right 0
:bottom 0})
{:margin-bottom 16})
(def add-account-button-container
(def photo-image
{:height 40
:width 40
:border-radius 20})
(defstyle account-title-conatiner
{:justify-content :center
:align-items :center
:ios {:height 56}
:android {:height 55}})
(defstyle account-title-text
{:color :white
:font-size 17
:ios {:letter-spacing -0.2}})
(defstyle accounts-list-container
{:flex 1
:paddingVertical 16
:paddingHorizontal 28
:justifyContent :center
:alignItems :center})
:margin-horizontal 16
:ios {:margin-top 10
:margin-bottom 10}
:android {:margin-top 16
:margin-bottom 16}})
(def add-account-button
{:flexDirection :row})
(def accounts-action-button
{:label-style {:color :white}
:cyrcle-color "#ffffff33"})
(def icon-plus
{:flexDirection :column
:paddingTop 2
:width 20
:height 20})
(def accounts-separator
{:background-color "#7482eb"
:opacity 1
:margin-left 72})
(def add-account-text
{:flexDirection :column
:color :white
:fontSize 16
:marginLeft 8})
(def accounts-separator-wrapper
{:background-color common/color-blue2})
(def recover-button-container
{:flex 1})
(def recover-button
{:flex 1
:alignItems :center
:paddingVertical 16
:paddingHorizontal 28})
(def recover-button-text
{:flex 1
:color color-white
:fontSize 16})
;wallet-qr-code.cljs
(def wallet-qr-code
{:flex-grow 1
:flex-direction :column})
(def account-toolbar
{:background-color "#2f3031"})
(def wallet-account-container
{:flex-grow 1
:flexDirection :row
:height 69
:alignItems :center
:justifyContent :center})
(def qr-code
{:background-color "#2f3031"
:flex-grow 1
:align-items :center
:justify-content :center})
(def footer
{:background-color "#2f3031"})
(def wallet-info
{:align-items :center
:padding-bottom 20
:padding-top 20})
(def wallet-name-text
{:color color-white
:padding-bottom 5})
(def wallet-address-text
{:color "#999999"
})
(def done-button
{:flex-grow 1
:flex-direction :column
:align-items :center
(defstyle account-view
{:background-color :white
:justify-content :center
:height 51
:background-color "#7597e4"})
:height 64
:ios {:border-radius 8}
:android {:border-radius 4}})
(def done-button-text
{:color color-white})
(def account-bage
{:flex-direction :row
:align-items :center
:padding-horizontal 16})
(def account-bage-text-view
{:margin-left 16
:flex-shrink 1})
(defstyle account-bage-text
{:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 16
:color common/color-black}})

38
src/status_im/accounts/views/account.cljs
View File

@ -1,38 +0,0 @@
(ns status-im.accounts.views.account
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as s]
[status-im.components.react :refer [view
text
image
touchable-highlight]]
[re-frame.core :refer [dispatch subscribe]]
[status-im.components.styles :refer [icon-ok
icon-plus]]
[status-im.accounts.styles :as st]))
(defn on-press [address]
(dispatch [:navigate-to :login address])
(dispatch [:set-in [:login :address] address]))
(defview account-view [{:keys [address photo-path name] :as account}]
[current-account [:get-current-account]]
[touchable-highlight
{:onPress #(on-press address)}
[view st/account-container
[view st/photo-container
[view st/account-photo-container
(if (not= address "0x0")
[image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)}
:style st/photo-image}]
[image {:source {:uri :icon_plus}
:style icon-plus}])]]
[view st/name-container
[text {:style st/name-text
:numberOfLines 1} (or name address)]
(when (not= address "0x0")
[text {:style st/address-text
:numberOfLines 1} address])]
[view st/online-container
(when (= address (:address current-account))
[image {:source {:uri :icon_ok}
:style icon-ok}])]]])

2
src/status_im/android/core.cljs
View File

@ -47,7 +47,7 @@
[status-im.components.status :as status]
[status-im.components.styles :as st]
[status-im.chat.styles.screen :as chat-st]
[status-im.accounts.views.qr-code :refer [qr-code-view]]))
[status-im.profile.qr-code.screen :refer [qr-code-view]]))
(defn init-back-button-handler! []
(let [new-listener (fn []

2
src/status_im/android/platform.cljs
View File

@ -11,7 +11,7 @@
:gray {:height 0
:bar-style "dark-content"
:color styles/color-light-gray}
:transparent {:height 20
:transparent {:height 25
:bar-style "light-content"
:translucent? true
:color styles/color-transparent}

6
src/status_im/components/action_button/action_button.cljs
View File

@ -6,13 +6,13 @@
icon
touchable-highlight]]))
(defn action-button [label icon-key on-press]
(defn action-button [label icon-key on-press & [{:keys [label-style cyrcle-color]}]]
[touchable-highlight {:on-press on-press}
[view st/action-button
[view st/action-button-icon-container
[view (st/action-button-icon-container cyrcle-color)
[icon icon-key]]
[view st/action-button-label-container
[text {:style st/action-button-label}
[text {:style (merge st/action-button-label label-style)}
label]]]])
(defn action-button-disabled [label icon-key]

6
src/status_im/components/action_button/styles.cljs
View File

@ -1,5 +1,5 @@
(ns status-im.components.action-button.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.utils.platform :as p]
[status-im.components.styles :refer [color-white
color-light-blue-transparent
@ -15,13 +15,13 @@
:ios {:height 63}
:android {:height 56}})
(defstyle action-button-icon-container
(defnstyle action-button-icon-container [cyrcle-color]
{:border-radius 50
:width 40
:height 40
:align-items :center
:justify-content :center
:ios {:background-color color-light-blue-transparent}})
:ios {:background-color (or cyrcle-color color-light-blue-transparent)}})
(def action-button-label-container
{:padding-left 16})

2
src/status_im/components/styles.cljs
View File

@ -2,6 +2,8 @@
(def color-transparent "transparent")
(def color-blue "#7099e6")
(def color-blue2 "#5b6dee")
(def color-blue3 "#424fae")
(def color-blue-transparent "#7099e632")
(def color-black "#000000")
(def color-purple "#a187d5")

8
src/status_im/components/text_input_with_label/styles.cljs
View File

@ -3,16 +3,16 @@
(:require [status-im.utils.platform :refer [ios?]]
[status-im.components.styles :as common]))
(defstyle text-input
(defnstyle text-input [content-height]
{:placeholder ""
:android {:height 24
:android {:height (or content-height 24)
:padding-top 0
:padding-bottom 0
:padding-left 0
:margin-top 26
:margin-bottom 4
:font-size 16}
:ios {:height 26
:ios {:height (or content-height 26)
:margin-top 24
:margin-bottom 6
:font-size 17
@ -41,10 +41,8 @@
(defstyle error-text
{:color common/color-red2
:android {:margin-top 6
:height 14
:font-size 12}
:ios {:margin-top 4
:height 16
:font-size 14
:letter-spacing -0.2}})

28
src/status_im/components/text_input_with_label/view.cljs
View File

@ -27,6 +27,7 @@
:label-font-size-top st/label-font-size-top
:label-font-size-bottom st/label-font-size-bottom
:underline-max-height st/underline-max-height
:content-height* (r/atom nil)
:input-ref* (r/atom nil)
:value* (r/atom default-value)
:underline-max-width* (r/atom 0)}))
@ -38,10 +39,16 @@
(animate-label text props)
(reset! (:value* props) text))
(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-submit-editing ref]} props]
(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-change on-submit-editing
auto-expanding multiline max-height ref]} props]
{:ref #(do
(reset! (:input-ref* props) %)
(when ref (ref %)))
:on-change #(do
(when (and auto-expanding multiline)
(reset! (:content-height* props) (min (.-height (.-contentSize (.-nativeEvent %)))
max-height)))
(when on-change (on-change %)))
:on-submit-editing #(do
(.blur @(:input-ref* props))
(when on-submit-editing (on-submit-editing)))
@ -57,18 +64,19 @@
(defn text-input-with-label [options]
(let [props (get-init-props options)]
(fn [{:keys [label description error] :as options}]
(fn [{:keys [label description error hide-underline?] :as options}]
[view st/component-container
[animated-text {:style (st/label-animated-text props)} label]
[text-input (merge st/text-input
(dissoc options :label :description :error)
[text-input (merge (st/text-input @(:content-height* props))
(dissoc options :label :description :error :hide-underline?)
(text-input-handlers options props))]
[view {:style (st/underline-blured error)
:on-layout #(reset! (:underline-max-width* props) (get-width %))}
[animated-view {:style (st/underline-focused
(:underline-width props)
(:underline-height props)
error)}]]
(when-not hide-underline?
[view {:style (st/underline-blured error)
:on-layout #(reset! (:underline-max-width* props) (get-width %))}
[animated-view {:style (st/underline-focused
(:underline-width props)
(:underline-height props)
error)}]])
(cond error
[text {:style st/error-text} error]
description

3
src/status_im/components/toolbar_new/view.cljs
View File

@ -26,6 +26,7 @@
custom-content :custom-content
hide-border? :hide-border?
border-style :border-style
title-style :title-style
style :style}]
(let [style (merge (st/toolbar-wrapper background-color) style)]
[view {:style style}
@ -43,7 +44,7 @@
:style icon-default}]]]))]
(or custom-content
[view {:style st/toolbar-title-container}
[text {:style st/toolbar-title-text
[text {:style (merge st/toolbar-title-text title-style)
:font :toolbar-title}
title]])
[view (st/toolbar-actions-container (count actions) custom-action)

2
src/status_im/ios/core.cljs
View File

@ -43,7 +43,7 @@
status-im.data-store.core
[taoensso.timbre :as log]
[status-im.chat.styles.screen :as st]
[status-im.accounts.views.qr-code :refer [qr-code-view]]
[status-im.profile.qr-code.screen :refer [qr-code-view]]
[status-im.components.status :as status]))
(defn orientation->keyword [o]

10
src/status_im/profile/handlers.cljs
View File

@ -6,7 +6,8 @@
[status-im.i18n :refer [label]]
[status-im.utils.handlers :as u :refer [get-hashtags]]
[taoensso.timbre :as log]
[status-im.constants :refer [console-chat-id]]))
[status-im.constants :refer [console-chat-id]]
[status-im.navigation.handlers :as nav]))
(defn message-user [identity]
(when identity
@ -64,3 +65,10 @@
:open-edit-my-profile
(-> prepare-edit-profile
((after open-edit-profile))))
(defmethod nav/preload-data! :qr-code-view
[{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]]
(assoc db :qr-modal {:contact (or contact
(get-in db [:accounts current-account-id]))
:qr-source qr-source
:amount? amount?}))

12
src/status_im/accounts/views/qr_code.cljs → src/status_im/profile/qr_code/screen.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.accounts.views.qr-code
(ns status-im.profile.qr-code.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :refer [view
text
@ -9,7 +9,7 @@
[status-im.components.styles :refer [icon-close]]
[status-im.components.qr-code :refer [qr-code]]
[re-frame.core :refer [dispatch subscribe]]
[status-im.accounts.styles :as st]
[status-im.profile.qr-code.styles :as st]
[status-im.i18n :refer [label]]
[clojure.string :as s]))
@ -19,7 +19,6 @@
{:keys [amount]} [:get :contacts-click-params]]
[view st/wallet-qr-code
[status-bar {:type :modal}]
[view st/account-toolbar
[view st/wallet-account-container
[view st/qr-photo-container
@ -34,11 +33,10 @@
[view st/online-image-container
[image {:source {:uri :icon_close_white}
:style icon-close}]]]]]]
[view {:style st/qr-code
:on-layout #(let [layout (.. % -nativeEvent -layout)]
(dispatch [:set-in [:qr-modal :dimensions] {:width (.-width layout)
:height (.-height layout)}]))}
(dispatch [:set-in [:qr-modal :dimensions] {:width (.-width layout)
:height (.-height layout)}]))}
(when (:width dimensions)
[view {:style (st/qr-code-container dimensions)}
[qr-code {:value (if amount?
@ -48,7 +46,6 @@
:size (- (min (:width dimensions)
(:height dimensions))
80)}]])]
[view st/footer
[view st/wallet-info
[text {:style st/wallet-name-text} (label :t/main-wallet)]
@ -58,3 +55,4 @@
[view st/done-button
[text {:style st/done-button-text} (label :t/done)]]]]])

104
src/status_im/profile/qr_code/styles.cljs Normal file
View File

@ -0,0 +1,104 @@
(ns status-im.profile.qr-code.styles
(:require [status-im.components.styles :refer [color-white]]
[status-im.components.react :as r]))
(def photo-container
{:flex 0.2
:flexDirection :column
:alignItems :center
:justifyContent :center})
(def account-photo-container
{:flex 1
:width 36
:height 36
:alignItems :center
:justifyContent :center})
(def qr-photo-container
(merge photo-container
{:margin-left 8
:margin-right 4}))
(defn qr-code-container [dimensions]
{:background-color "white"
:width (:width dimensions)
:align-items :center
:justify-content :center
:padding 40})
(def photo-image
{:width 36
:height 36
:border-radius 18})
(def name-container
{:flex 1
:flexDirection :column})
(def name-text
{:color color-white
:fontSize 16})
(def address-text
{:color color-white
:fontSize 12})
(def online-container
{:flex 0.2
:flexDirection :column
:alignItems :center
:justifyContent :center})
(def online-image-container
{:width 40
:height 40
:margin-right 4
:align-items :center
:justify-content :center})
(def wallet-qr-code
{:flex-grow 1
:flex-direction :column})
(def account-toolbar
{:background-color "#2f3031"})
(def wallet-account-container
{:flex-grow 1
:flexDirection :row
:height 69
:alignItems :center
:justifyContent :center})
(def qr-code
{:background-color "#2f3031"
:flex-grow 1
:align-items :center
:justify-content :center})
(def footer
{:background-color "#2f3031"})
(def wallet-info
{:align-items :center
:padding-bottom 20
:padding-top 20})
(def wallet-name-text
{:color color-white
:padding-bottom 5})
(def wallet-address-text
{:color "#999999"})
(def done-button
{:flex-grow 1
:flex-direction :column
:align-items :center
:justify-content :center
:height 51
:background-color "#7597e4"})
(def done-button-text
{:color color-white})

4
src/status_im/translations/en.cljs
View File

@ -247,6 +247,8 @@
:address "Address"
:password "Password"
:login "Login"
:sign-in-to-status "Sign in to Status"
:sign-in "Sign in"
:wrong-password "Wrong password"
;recover
@ -256,10 +258,12 @@
:recover "Recover"
:enter-valid-passphrase "Please enter a passphrase"
:enter-valid-password "Please enter a password"
:twelve-words-in-correct-order "12 words in correct order"
;accounts
:recover-access "Recover access"
:add-account "Add account"
:create-new-account "Create new account"
;wallet-qr-code
:done "Done"