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 network info form

This commit is contained in:
Andrey Shovkoplyas 2017-10-13 13:20:19 +03:00 committed by Roman Volosovskyi
parent 4078fe9980
commit cf2be3b176
12 changed files with 122 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/status_im/components/common/common.cljs
View File

@ -1,60 +1,74 @@
(ns status-im.components.common.common
(:require [status-im.components.react :refer [view text linear-gradient]]
[status-im.components.icons.vector-icons :as vi]
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.components.react :as react]
[status-im.components.icons.vector-icons :as vector-icons]
[status-im.components.context-menu :refer [context-menu]]
[status-im.utils.platform :as p]
[status-im.components.common.styles :as st]))
[status-im.utils.platform :as platform]
[status-im.components.common.styles :as styles]
[status-im.i18n :as i18n]))
(defn top-shadow []
(when p/android?
[linear-gradient
{:style st/gradient-bottom
:colors st/gradient-top-colors}]))
(when platform/android?
[react/linear-gradient
{:style styles/gradient-bottom
:colors styles/gradient-top-colors}]))
(defn bottom-shadow []
(when p/android?
[linear-gradient
{:style st/gradient-top
:colors st/gradient-bottom-colors}]))
(when platform/android?
[react/linear-gradient
{:style styles/gradient-top
:colors styles/gradient-bottom-colors}]))
(defn separator [style & [wrapper-style]]
[view (merge st/separator-wrapper wrapper-style)
[view (merge st/separator style)]])
[react/view (merge styles/separator-wrapper wrapper-style)
[react/view (merge styles/separator style)]])
(defn form-spacer []
[view
[react/view
[bottom-shadow]
[view st/form-spacer]
[react/view styles/form-spacer]
[top-shadow]])
(defn list-separator []
[separator st/list-separator])
[separator styles/list-separator])
(defn list-footer []
[view st/list-header-footer-spacing])
[react/view styles/list-header-footer-spacing])
(defn list-header []
[view st/list-header-footer-spacing])
[react/view styles/list-header-footer-spacing])
(defn form-title [label & [{:keys [count-value extended? options]}]]
[view
[view st/form-title-container
[view st/form-title-inner-container
[text {:style st/form-title
:font :medium}
[react/view
[react/view styles/form-title-container
[react/view styles/form-title-inner-container
[react/text {:style styles/form-title
:font :medium}
label]
(when-not (nil? count-value)
[text {:style st/form-title-count
:font :medium}
[react/text {:style styles/form-title-count
:font :medium}
count-value])]
(when extended?
[view
[view {:flex 1}]])
[react/view
[react/view {:flex 1}]])
(when extended?
[view st/form-title-extend-container
[react/view styles/form-title-extend-container
[context-menu
[vi/icon :icons/options]
[vector-icons/icon :icons/options]
options
nil
st/form-title-extend-button]])]
styles/form-title-extend-button]])]
[top-shadow]])
(defview network-info [{:keys [text-color]}]
(letsubs [testnet? [:testnet?]
testnet-name [:testnet-name]]
[react/view
[react/view styles/network-container
[react/view styles/network-icon
[vector-icons/icon :icons/network {:color :white}]]
[react/text {:style (styles/network-text text-color)}
(if testnet?
(i18n/label :t/testnet-text {:testnet testnet-name})
(i18n/label :t/mainnet-text))]]]))

56
src/status_im/components/common/styles.cljs
View File

@ -1,16 +1,11 @@
(ns status-im.components.common.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.utils.platform :as p]
[status-im.components.styles :refer [color-white
color-light-gray
color-gray5
text4-color
text1-color]]))
(:require [status-im.components.styles :as styles]))
(def gradient-top
{:flexDirection :row
:height 3
:backgroundColor color-light-gray})
:backgroundColor styles/color-light-gray})
(def gradient-top-colors
["rgba(25, 53, 76, 0.01)"
@ -19,19 +14,19 @@
(def gradient-bottom
{:flexDirection :row
:height 2
:backgroundColor color-light-gray})
:backgroundColor styles/color-light-gray})
(def gradient-bottom-colors
["rgba(25, 53, 76, 0.1)"
"rgba(25, 53, 76, 0.01)"])
(def separator-wrapper
{:background-color color-white})
{:background-color styles/color-white})
(defstyle separator
{:android {:height 0}
:ios {:height 1
:background-color color-gray5
:background-color styles/color-gray5
:opacity 0.5}})
(def list-separator
@ -45,30 +40,30 @@
:padding-right 16
:flex 1
:flex-direction :row
:ios {:background-color color-white
:ios {:background-color styles/color-white
:padding-top 19
:padding-bottom 15
:margin-top 16}
:android {:background-color color-light-gray
:android {:background-color styles/color-light-gray
:padding-top 20
:padding-bottom 17
:margin-top 8}})
(defstyle form-title-extend-container
{:ios {:margin-top 16
:background-color color-white}
:android {:margin-top 8
:background-color color-light-gray}})
{:ios {:margin-top 16
:background-color styles/color-white}
:android {:margin-top 8
:background-color styles/color-light-gray}})
(def form-title-extend-button
{:padding 16})
(defstyle form-title
{:flex-shrink 1
:ios {:color text1-color
:ios {:color styles/text1-color
:letter-spacing -0.2
:font-size 16}
:android {:color text4-color
:android {:color styles/text4-color
:font-size 14}})
(def form-title-count
@ -77,12 +72,33 @@
:opacity 0.6
:padding-left 8
:padding-right 5
:color text4-color}))
:color styles/text4-color}))
(defstyle form-spacer
{:ios {:height 16}
:android {:height 11}})
(defstyle list-header-footer-spacing
{:android {:background-color color-white
{:android {:background-color styles/color-white
:height 8}})
(def network-container
{:flex-direction :row
:padding-horizontal 13
:padding-vertical 11
:align-items :center})
(defn network-text [text-color]
{:flex 1
:color (or text-color styles/color-black)
:letter-spacing -0.2
:font-size 14
:margin-left 16})
(def network-icon
{:width 40
:height 40
:border-radius (/ 40 2)
:background-color styles/color-green-4
:align-items :center
:justify-content :center})

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

@ -66,6 +66,7 @@
(def color-green-2 "#448469")
(def color-green-3 "#44d058")
(def color-green-3-light "rgba(68, 208, 88, 0.2)")
(def color-green-4 "#0dcd8d")
(def color-cyan "#7adcfb")
(def color-separator "#D6D6D6")

6
src/status_im/constants.cljs
View File

@ -42,6 +42,12 @@
(def ropsten-id 3)
(def rinkeby-id 4)
(defn get-testnet-name [testnet-id]
(cond
(= testnet-id ropsten-id) "Ropsten"
(= testnet-id rinkeby-id) "Rinkeby"
:else "Unknown"))
(def default-networks
(transform-config
{"testnet" {:id "testnet",

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

@ -103,7 +103,8 @@
:error-incorrect-name "Please select another name"
:error-incorrect-email "Incorrect e-mail"
:profile-testnet-icon "Testnet"
:profile-testnet-text "Testnet Only. Please do not send real ETH or SNT to your address"
:testnet-text "You’re on the {{testnet}} Testnet. Do not send real ETH or SNT to your address."
:mainnet-text "You’re on the Mainnet. Real ETH will be send."
;;make_photo
:image-source-title "Profile image"

6
src/status_im/ui/screens/network_settings/subs.cljs
View File

@ -21,3 +21,9 @@
:<- [:get-network-id]
(fn [network-id]
(contains? #{constants/rinkeby-id constants/ropsten-id} network-id)))
(reg-sub
:testnet-name
:<- [:get-network-id]
(fn [network-id]
(constants/get-testnet-name network-id)))

23
src/status_im/ui/screens/profile/styles.cljs
View File

@ -204,25 +204,4 @@
(merge profile-status-text
{:color color-gray4}))
(def testnet-only-container
{:background-color styles/color-dark
:flex-direction :row
:padding 14})
(def testnet-only-text
{:flex 1
:color color-white
:margin-left 12})
(def testnet-icon
{:border-radius 15
:border-width 1
:border-color styles/color-gray
:height 27
:width 65
:flex-direction :row
:align-items :center
:justify-content :center})
(def testnet-icon-text
{:color color-white})
(def network-info {:background-color :white})

45
src/status_im/ui/screens/profile/views.cljs
View File

@ -6,9 +6,7 @@
[action-button action-button-disabled action-separator]]
[status-im.components.action-button.styles :refer [actions-list]]
[status-im.components.chat-icon.screen :refer [my-profile-icon]]
[status-im.components.common.common
:refer
[bottom-shadow form-spacer separator]]
[status-im.components.common.common :as common]
[status-im.components.context-menu :refer [context-menu]]
[status-im.components.list-selection :refer [share-options]]
[status-im.components.react :as react]
@ -21,7 +19,8 @@
[status-im.ui.screens.profile.styles :as styles]
[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.components.icons.vector-icons :as vector-icons])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn my-profile-toolbar []
@ -125,7 +124,7 @@
:accessibility-label :profile-public-key}])
(defn info-item-separator []
[separator styles/info-item-separator])
[common/separator styles/info-item-separator])
(defn tag-view [tag]
[react/text {:style {:color color-blue}
@ -194,58 +193,50 @@
[react/text {:style styles/profile-status-text}
(colorize-status-hashtags status)]]]])])
(defn testnet-only []
[react/view styles/testnet-only-container
[react/view styles/testnet-icon
[react/text {:style styles/testnet-icon-text}
(label :t/profile-testnet-icon)]]
[react/text {:style styles/testnet-only-text}
(label :t/profile-testnet-text)]])
(defn network-info []
[react/view styles/network-info
[common/network-info]
[common/separator]])
(defview my-profile []
(letsubs [{:keys [status] :as current-account} [:get-current-account]
testnet? [:testnet?]]
(letsubs [{:keys [status] :as current-account} [:get-current-account]]
[react/view styles/profile
[status-bar]
[my-profile-toolbar]
(when testnet?
[testnet-only])
[network-info]
[react/scroll-view
[react/view styles/profile-form
[profile-badge current-account]
[profile-status status true]]
[form-spacer]
[common/form-spacer]
[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)}]]
[form-spacer]
[common/form-spacer]
[react/view styles/profile-info-container
[my-profile-info current-account]
[bottom-shadow]]]]))
[common/bottom-shadow]]]]))
(defview profile []
(letsubs [{:keys [pending?
status
whisper-identity]
:as contact} [:contact]
chat-id [:get :current-chat-id]
testnet? [:testnet?]]
chat-id [:get :current-chat-id]]
[react/view styles/profile
[status-bar]
[profile-toolbar contact]
(when testnet?
[testnet-only])
[network-info]
[react/scroll-view
[react/view styles/profile-form
[profile-badge contact]
(when (and (not (nil? status)) (not (string/blank? status)))
[profile-status status])]
[form-spacer]
[common/form-spacer]
[profile-actions contact chat-id]
[form-spacer]
[common/form-spacer]
[react/view styles/profile-info-container
[profile-info contact]
[bottom-shadow]]]]))
[common/bottom-shadow]]]]))

6
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -118,12 +118,6 @@
[react/text {:style styles/wallet-value}
"..."])]]))
(defn network-label
([n] (network-label [{} n]))
([style n] [react/view (merge styles/network-container
style)
[react/text {:style styles/network} n]]))
(defn separator []
[react/view styles/separator])

5
src/status_im/ui/screens/wallet/request/styles.cljs
View File

@ -2,15 +2,12 @@
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :as styles]))
(def network-label
{:margin-top 27})
(def network-container
{:flex 1
:align-items :center})
(defstyle qr-container
{:margin-top 16
{:margin-top 8
:padding 16
:background-color styles/color-white
:ios {:border-radius 8}

6
src/status_im/ui/screens/wallet/request/views.cljs
View File

@ -13,8 +13,9 @@
[status-im.ui.screens.wallet.request.styles :as styles]
[status-im.components.styles :as components.styles]
[status-im.i18n :as i18n]
[status-im.utils.platform :as platform]
[status-im.utils.eip.eip67 :as eip67]
[status-im.utils.platform :as platform]))
[status-im.components.common.common :as common]))
(defn toolbar-view []
[toolbar/toolbar2 {:style wallet.styles/toolbar :hide-border? true}
@ -42,11 +43,10 @@
[react/keyboard-avoiding-view wallet.styles/wallet-modal-container
[status-bar/status-bar {:type :wallet}]
[toolbar-view]
[common/network-info {:text-color :white}]
[react/scroll-view {:ref #(reset! scroll %)}
[react/view components.styles/flex
[react/view styles/network-container
;;TODO (andrey) name of active network should be used
[components/network-label styles/network-label "Testnet"]
[react/view styles/qr-container
[qr-code]]]
[react/view wallet.styles/choose-wallet-container

3
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -9,6 +9,7 @@
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.components.camera :as camera]
[status-im.components.common.common :as common]
[status-im.utils.utils :as utils]
[status-im.i18n :as i18n]
[status-im.utils.money :as money]
@ -116,6 +117,7 @@
[react/view components.styles/flex
[status-bar/status-bar {:type :wallet}]
[toolbar-view signing?]
[common/network-info {:text-color :white}]
[react/scroll-view {:keyboardShouldPersistTaps :always}
[react/view components.styles/flex
[react/view wallet.styles/choose-participant-container
@ -164,6 +166,7 @@
[react/view components.styles/flex
[status-bar/status-bar {:type :modal-wallet}]
[toolbar-modal from-chat?]
[common/network-info {:text-color :white}]
[react/scroll-view {:keyboardShouldPersistTaps :always}
[react/view components.styles/flex
[react/view wallet.styles/choose-participant-container