updated new contact screen; some code cleaning
After Width: | Height: | Size: 202 B |
After Width: | Height: | Size: 800 B |
After Width: | Height: | Size: 174 B |
After Width: | Height: | Size: 422 B |
After Width: | Height: | Size: 233 B |
After Width: | Height: | Size: 767 B |
After Width: | Height: | Size: 370 B |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 467 B |
After Width: | Height: | Size: 1.8 KiB |
|
@ -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})
|
|
@ -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
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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})
|
|
@ -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]
|
||||
]]])
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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})
|
||||
|
|
|
@ -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)]]]])
|
|
@ -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"
|
||||
|
||||
})
|