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

added login and users screens

This commit is contained in:
Adrian Tiberius 2016-06-13 19:35:18 +03:00
parent 08790ddd0d
commit 0a5ce64fe2
18 changed files with 352 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1017 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

23
src/status_im/login/handlers.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.login.handlers
(:require [re-frame.core :refer [register-handler after dispatch]]
[status-im.utils.handlers :as u]))
(defn set-login-from-qr
[{:keys [login] :as db} [_ _ login-info]]
(assoc db :login (merge login login-info)))
(register-handler :set-login-from-qr set-login-from-qr)
(defn go-back
[_ _]
(dispatch [:navigate-back]))
(defn login
[{:keys [login] :as db} [_ _]]
(assoc db :current-account {:address (:address login)}))
(register-handler :login-account
(-> login
((after go-back))))

83
src/status_im/login/screen.cljs Normal file
View File

@ -0,0 +1,83 @@
(ns status-im.login.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view
text
text-input
image
linear-gradient
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
icon-back
icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input
white-form-text-input]]
[status-im.qr-scanner.views.import-button :refer [import-button]]
[status-im.i18n :refer [label]]
[status-im.login.styles :as st]))
(def toolbar-title
[view toolbar-title-container
[text {:style (merge toolbar-title-text {:color color-white})}
(label :t/login)]])
(defview address-input [address]
[view button-input-container
[text-input
{:underlineColorAndroid color-white
:placeholderTextColor color-white
:style (merge white-form-text-input button-input)
:autoFocus true
:placeholder (label :t/address)
:onChangeText #(dispatch [:set-in [:login :address] %])}
address]
[import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])]])
(defview password-input []
[]
[text-input
{:underlineColorAndroid color-white
:placeholderTextColor color-white
:style white-form-text-input
:autoFocus true
:placeholder (label :t/password)
:onChangeText #(dispatch [:set-in [:login :password] %])}
""])
(defview login []
[{:keys [address]} [:get :login]]
[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}]
[toolbar {:background-color :transparent
:nav-action {:image {:source {:uri :icon_back_white}
:style icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content toolbar-title
:action {:image {:style icon-search}
:handler #()}}]
[view st/form-container
[address-input (or address "")]
[password-input]
]
[view st/bottom-actions-container
[view st/recover-text-container
[touchable-highlight
{:on-press #()}
[text {:style st/recover-text} (label :t/recover-from-passphrase)]]]
[view st/connect-button-container
[touchable-highlight
{:on-press #(dispatch [:login-account])}
[view st/connect-button
[text {:style st/connect-button-text} (label :t/connect)]]]]]])

54
src/status_im/login/styles.cljs Normal file
View File

@ -0,0 +1,54 @@
(ns status-im.login.styles
(:require [status-im.components.styles :refer [font
title-font
text1-color
color-white
toolbar-background2
online-color]]))
(def screen-container
{:flex 1
:color :white})
(def gradient-background
{:position :absolute
:top 0
:right 0
:bottom 0
:left 0})
(def form-container
{:marginLeft 16
:margin-top 70})
(def bottom-actions-container
{:position :absolute
:left 0
:right 0
:bottom 16})
(def recover-text-container
{:flex 1
:flexWrap :nowrap
:padding 16})
(def recover-text
{:flex 1
:color color-white})
(def connect-button-container
{:position :absolute
:right 16
:top 0})
(def connect-button
{:backgroundColor color-white
:borderRadius 55
:paddingVertical 16
:paddingHorizontal 28
})
(def connect-button-text
{:color "#7099e6"
:fontSize 16})

1
src/status_im/users/handlers.cljs Normal file
View File

@ -0,0 +1 @@
(ns status-im.users.handlers)

68
src/status_im/users/screen.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns status-im.users.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view
text
list-view
list-item
image
linear-gradient
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
icon-back
icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input
white-form-text-input]]
[status-im.utils.listview :as lw]
[status-im.users.views.user :refer [user-view]]
[status-im.i18n :refer [label]]
[status-im.users.styles :as st]))
(def toolbar-title
[view toolbar-title-container
[text {:style (merge toolbar-title-text {:color color-white})}
(label :t/switch-users)]])
(defn render-row [row _ _]
(list-item [user-view row]))
(defn render-separator [_ row-id _]
(list-item [view {:style st/row-separator
:key row-id}]))
(defview users []
[accounts [:get :accounts]]
(let [accounts (conj accounts {:name (label :t/add-account)
:address "0x0"
:photo-path :icon_plus})]
[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}]
[toolbar {:background-color :transparent
:nav-action {:image {:source {:uri :icon_back_white}
:style icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content toolbar-title
:action {:image {:style icon-search}
:handler #()}}]
[view st/user-list-container
[list-view {:dataSource (lw/to-datasource accounts)
:enableEmptySections true
:renderRow render-row
:renderSeparator render-separator
:style st/user-list}]]]))
;(re-frame.core/dispatch [:set :view-id :users])

83
src/status_im/users/styles.cljs Normal file
View File

@ -0,0 +1,83 @@
(ns status-im.users.styles
(:require [status-im.components.styles :refer [font
title-font
text1-color
color-white
toolbar-background2
online-color]]))
(def screen-container
{:flex 1
:color :white})
(def gradient-background
{:position :absolute
:top 0
:right 0
:bottom 0
:left 0})
(def user-list-container1
{:position :absolute
:top 56
:right 0
:bottom 0
:left 0
:justifyContent :center})
(def user-list-container
{:flex 1
:flexDirection :column
:justifyContent :center})
(def user-list
{})
(def row-separator
{:borderBottomWidth 1
:borderBottomColor "#bababa"})
(def user-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 user-photo-container
{:flex 1
:backgroundColor "rgba(255, 255, 255, 0.2)"
:borderRadius 50
:width 36
:height 36
:alignItems :center
:justifyContent :center})
(def photo-image
{:borderRadius 50
:width 36
:height 36})
(def name-container
{:flex 1
:flexDirection :column})
(def name-text
{:color color-white})
(def address-text
{:color color-white})
(def online-container
{:flex 0.2
:flexDirection :column
:alignItems :center
:justifyContent :center})

1
src/status_im/users/subs.cljs Normal file
View File

@ -0,0 +1 @@
(ns status-im.users.subs)

39
src/status_im/users/views/user.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns status-im.users.views.user
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as s]
[status-im.resources :as res]
[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.users.styles :as st]))
(defn on-press [address]
(dispatch [:navigate-to :login address])
(dispatch [:set-in [:login :address] address]))
(defview user-view [{:keys [address photo-path name ] :as account}]
[current-account [:get :current-account]]
[touchable-highlight
{:onPress #(on-press address)}
[view st/user-container
[view st/photo-container
[view st/user-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} name]
(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}])]]])