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 new contact screen; some code cleaning 

Former-commit-id: e0ce4217bb
This commit is contained in:
Adrian Tiberius 2016-06-10 03:03:40 +03:00
parent a424ba1447
commit c00bc75346
19 changed files with 208 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 800 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 467 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

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

@ -19,6 +19,7 @@
(def text1-color color-black)
(def text2-color color-gray)
(def text3-color color-blue)
(def text4-color color-white)
(def online-color color-blue)
(def new-messages-count-color color-blue-transparent)
(def chat-background color-light-gray)
@ -37,7 +38,7 @@
{:width 16
:height 12})
(def search-icon
(def icon-search
{:width 17
:height 17})
@ -46,11 +47,55 @@
:height 22
:color :white})
(def import-qr-icon
{:margin 4})
(def icon-back
{:width 8
:height 14})
(def icon-add
{:width 14
:height 14})
(def icon-ok
{:width 18
:height 14})
(def icon-qr
{:width 23
:height 22})
(def icon-plus
{:width 18
:height 18})
(def form-text-input
{:marginLeft -4
:fontSize 14
:fontFamily font
:color text1-color})
(def white-form-text-input
{:marginLeft -4
:fontSize 14
:fontFamily font
:color color-white})
(def toolbar-title-container
{:flex 1
:alignItems :center
:justifyContent :center})
(def toolbar-title-text
{:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font})
(def button-input-container
{:flex 1
:flexDirection :row
:height 50})
(def button-input
{:flex 1
:flexDirection :column
:height 50})

21
src/status_im/components/toolbar.cljs
View File

@ -13,6 +13,9 @@
text1-color
text2-color
toolbar-background1
toolbar-title-container
toolbar-title-text
icon-back
toolbar-height]]
[status-im.components.realm :refer [list-view]]
[reagent.core :as r]))
@ -34,20 +37,14 @@
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
[view {:width 56
:height 56}
:height 56
:alignItems :center
:justifyContent :center}
[image {:source {:uri :icon_back}
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]]))
:style icon-back}]]]))
(or custom-content
[view {:style {:flex 1
:alignItems :center
:justifyContent :center}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
[view {:style toolbar-title-container}
[text {:style toolbar-title-text}
title]])
custom-action
(when action

4
src/status_im/contacts/screen.cljs
View File

@ -15,7 +15,7 @@
[status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue
hamburger-icon
search-icon
icon-search
create-icon
toolbar-background2]]
[status-im.contacts.styles :as st]
@ -32,7 +32,7 @@
:title (label :t/contacts)
:background-color toolbar-background2
:action {:image {:source {:uri :icon_search}
:style search-icon}
:style icon-search}
:handler (fn [])}}])
(defview contact-list []

31
src/status_im/contacts/styles.cljs
View File

@ -67,22 +67,19 @@
:fontFamily font
:color text1-color})
(def import-qr-button
{:flex 1
:height 50
:alignItems :center
:backgroundColor "#EFF4F6"})
(def import-qr-button-content
{:flex 1
:flexDirection :row
:height 50
:alignItems :center
:alignSelf :center})
(def import-qr-text
{:flexDirection :column})
; new contact
(def contact-form-container
{:flex 1
:backgroundColor :white})
{:flex 1
:color :white})
(def gradient-background
{:position :absolute
:top 0
:right 0
:bottom 0
:left 0})
(def form-container
{:marginLeft 16
:margin-top 50})

81
src/status_im/contacts/views/new_contact.cljs
View File

@ -4,56 +4,75 @@
[status-im.components.react :refer [view
text
text-input
image
linear-gradient
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-purple
search-icon
import-qr-icon
color-white
icon-search
icon-back
icon-qr
toolbar-background1
form-text-input]]
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.contacts.styles :as st]))
(defn import-qr-button []
[touchable-highlight
{:on-press #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])}
[view st/import-qr-button
[view st/import-qr-button-content
[icon {:name :qr-scanner
:style import-qr-icon}]
[text {:style st/import-qr-text} (label :t/import-qr)]]]])
(def toolbar-title
[view toolbar-title-container
[text {:style (merge toolbar-title-text {:color color-white})}
(label :t/new-contact)]])
(defview contact-name-input [name]
[]
[text-input
{:underlineColorAndroid color-purple
:style form-text-input
{:underlineColorAndroid color-white
:placeholderTextColor color-white
:style white-form-text-input
:autoFocus true
:placeholder (label :t/contact-name)
:onChangeText #(dispatch [:set-in [:new-contact :name] %])}
name])
(defview contact-address-input [address]
[text-input
{:underlineColorAndroid color-purple
:style form-text-input
:autoFocus true
:placeholder (label :t/contact-address)
:onChangeText #(dispatch [:set-in [:new-contact :address] %])}
address])
(defview contact-whisper-id-input [whisper-identity]
[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/whisper-identity)
:onChangeText #(dispatch [:set-in [:new-contact :whisper-identity] %])}
whisper-identity]
[import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]])
(defview new-contact []
[{:keys [name address whisper-identity phone-number] :as new-contact} [:get :new-contact]]
[{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]
[drawer-view
[view st/contact-form-container
[toolbar {:title (label :t/new-contact)
:background-color toolbar-background1
:action {:image {:source {:uri :icon_add_gray}
:style search-icon}
[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 {:source {:uri :icon_add}
:style icon-search}
:handler #(dispatch [:add-new-contact new-contact])}}]
[import-qr-button]
[contact-name-input name]
[contact-address-input address]
[text (str "Whisper identity: " whisper-identity)]]])
[view st/form-container
[contact-whisper-id-input whisper-identity]
[contact-name-input name]
]]])

4
src/status_im/qr_scanner/screen.cljs
View File

@ -5,7 +5,7 @@
image]]
[status-im.components.camera :refer [camera]]
[status-im.components.styles :refer [toolbar-background1
search-icon]]
icon-search]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.qr-scanner.styles :as st]
[status-im.utils.types :refer [json->clj]]))
@ -14,7 +14,7 @@
[toolbar {:title title
:background-color toolbar-background1
:action {:image {:source {:uri :icon_lock_white}
:style search-icon}
:style icon-search}
:handler #()}}])
(defview qr-scanner []

79
src/status_im/qr_scanner/styles.cljs
View File

@ -1,59 +1,76 @@
(ns status-im.qr-scanner.styles
(:require [status-im.components.styles :refer [toolbar-height]]))
(:require [status-im.components.styles :refer [toolbar-height
color-white]]))
(def barcode-scanner-container
{:flex 1
:backgroundColor :white})
(def barcode-scanner
{:flex 1
{:flex 1
:justifyContent :flex-end
:alignItems :center})
:alignItems :center})
(def rectangle-container
{:position :absolute
:left 0
:top toolbar-height
:bottom 0
:right 0
:flex 1
:alignItems :center
:justifyContent :center
{:position :absolute
:left 0
:top toolbar-height
:bottom 0
:right 0
:flex 1
:alignItems :center
:justifyContent :center
:backgroundColor :transparent})
(def rectangle
{:height 250
:width 250
{:height 250
:width 250
:backgroundColor :transparent})
(def corner-left-top
{:position :absolute
:left 0
:top 0
:width 56
:height 56})
:left 0
:top 0
:width 56
:height 56})
(def corner-right-top
{:position :absolute
:right 0
:top 0
:width 56
:height 56})
:right 0
:top 0
:width 56
:height 56})
(def corner-right-bottom
{:position :absolute
:right 0
:bottom 0
:width 56
:height 56})
:right 0
:bottom 0
:width 56
:height 56})
(def corner-left-bottom
{:position :absolute
:left 0
:bottom 0
:width 56
:height 56})
:left 0
:bottom 0
:width 56
:height 56})
(def import-button
{:position :absolute
:right 16
:flex 1
:height 50
:alignItems :center})
;:width 56
;:height 56
(def import-button-content
{:flex 1
:flexDirection :row
:height 50
:alignItems :center
:alignSelf :center})
(def import-text
{:flex 1
:flexDirection :column
:color color-white
:margin-left 8})

23
src/status_im/qr_scanner/views/import-qr-button.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns status-im.qr-scanner.views.import-button
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view
text
image
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [icon-qr]]
[status-im.i18n :refer [label]]
[status-im.qr-scanner.styles :as st]))
(defview import-button [handler]
[]
[view st/import-button
[touchable-highlight
{:on-press handler}
[view st/import-button-content
[image {:source {:uri :icon_qr}
:style icon-qr}]
[text {:style st/import-text} (label :t/import-qr)]]]])

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

@ -115,8 +115,18 @@
:You "You"
;new-contact
:import-qr "Import from QR"
:import-qr "Import"
:contact-name "Contact Name"
:contact-address "Contact Address"
:whisper-identity "Whisper Identity"
;login
:recover-from-passphrase "Recover from passphrase"
:connect "Connect"
:address "Address"
:password "Password"
:login "Login"
;users
:add-account "Add account"
})