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

Merge pull request #5308 from status-im/feature/desktop-advanced-settings 

Add advanced settings UI
This commit is contained in:
Vitaliy Vlasov 2018-08-20 13:41:19 +03:00 committed by GitHub
parent a7f9390fee 4285dcb62f
commit e59a907005
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 85 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,6 +161,7 @@
:dev-mode "Development mode"
:backup-your-recovery-phrase "Backup your recovery phrase"
:version "Version {{version}}"
:advanced-settings "Advanced settings"
;;recovery phrase
:your-data-belongs-to-you "If you lose your recovery phrase you lose your data and funds"

43
src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs
View File

@ -9,16 +9,25 @@
:align-items :center
:margin-bottom 16})
(def logout-row
{:justify-content :space-between
:flex-direction :row
:margin-horizontal 24
:align-self :stretch
:margin-top 60})
(defn profile-row [active?]
{:justify-content :space-between
:flex-direction :row
:padding-horizontal 24
:height 56
:align-self :stretch
:align-items :center
:background-color (if active? colors/gray-lighter colors/white)})
(defn logout-row-text [color]
{:color color
:font-size 16})
(defn profile-row-text [color active?]
{:color color
:font-weight (if active? "600" :normal)
:font-size 16})
(def adv-settings
{:justify-content :space-between
:flex-direction :row
:align-items :center
:flex 1})
(def profile-photo
{:border-radius 100
@ -36,6 +45,7 @@
:height 45
:width 240
:margin-horizontal 50
:margin-bottom 48
:border-radius 8
:background-color (colors/alpha colors/blue 0.1)})
@ -133,3 +143,18 @@
:border-left-color :transparent
:border-right-color :transparent
:border-top-color colors/tooltip-green})
(def advanced-settings-title
{:margin 24
:font-size 20
:font-weight "600"})
(def title-separator
{:height 1
:background-color colors/gray-light})
(def mailserver-title
{:margin-left 24
:margin-top 36
:margin-bottom 16
:font-size 16})

36
src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs
View File

@ -10,6 +10,7 @@
[status-im.ui.components.icons.vector-icons :as vector-icons]
[taoensso.timbre :as log]
[clojure.string :as string]
[status-im.ui.screens.offline-messaging-settings.views :as offline-messaging.views]
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
[status-im.ui.screens.desktop.main.tabs.profile.styles :as styles]
[status-im.ui.screens.profile.user.views :as profile]))
@ -55,6 +56,20 @@
[react/text {:style styles/qr-code-copy-text}
(i18n/label :copy-qr)]]]]]))
(views/defview advanced-settings []
(views/letsubs [current-wnode-id [:settings/current-wnode]
wnodes [:settings/network-wnodes]]
(let [render-fn (offline-messaging.views/render-row current-wnode-id)]
[react/view
[react/text {:style styles/advanced-settings-title} (i18n/label :advanced-settings)]
[react/view {:style styles/title-separator}]
[react/text {:style styles/mailserver-title} (i18n/label :offline-messaging)]
[react/view
(for [node (vals wnodes)]
^{:key (:id node)}
[react/view {:style {:margin-vertical 8}}
[render-fn node]])]])))
(defn share-contact-code []
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :qr-code])}
[react/view {:style styles/share-contact-code}
@ -66,13 +81,20 @@
[vector-icons/icon :icons/qr {:style {:tint-color colors/blue}}]]]])
(views/defview profile [user]
[react/view styles/profile-view
[profile-badge user]
[share-contact-code]
[react/view {:style styles/logout-row}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])}
[react/text {:style (styles/logout-row-text colors/red)} (i18n/label :t/logout)]]
[react/view [react/text {:style (styles/logout-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])
(views/letsubs [current-view-id [:get :view-id]]
(let [adv-settings-open? (= current-view-id :advanced-settings)]
[react/view styles/profile-view
[profile-badge user]
[share-contact-code]
[react/touchable-highlight {:style (styles/profile-row adv-settings-open?)
:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])}
[react/view {:style styles/adv-settings}
[react/text {:style (styles/profile-row-text colors/black adv-settings-open?)} (i18n/label :t/advanced-settings)]
[vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]]]
[react/view {:style (styles/profile-row false)}
[react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])}
[react/text {:style (styles/profile-row-text colors/red false)} (i18n/label :t/logout)]]
[react/view [react/text {:style (styles/profile-row-text colors/gray false)} "V" build/version " (" build/commit-sha ")"]]]])))
(views/defview profile-data []
(views/letsubs

1
src/status_im/ui/screens/desktop/main/views.cljs
View File

@ -28,6 +28,7 @@
:chat chat.views/chat-view
:new-contact add-new.views/new-contact
:qr-code profile.views/qr-code
:advanced-settings profile.views/advanced-settings
:chat-profile chat.views/chat-profile
status-view)]
[react/view {:style {:flex 1}}

6
src/status_im/ui/screens/desktop/views.cljs
View File

@ -17,7 +17,11 @@
:accounts accounts.views/accounts
:recover recover.views/recover
:create-account create.views/create-account
(:new-contact :chat :home :qr-code :chat-profile) main.views/main-views
(:new-contact
:advanced-settings
:chat :home
:qr-code
:chat-profile) main.views/main-views
:login login.views/login
react/view)]
[react/view {:style {:flex 1}}

9
src/status_im/ui/screens/offline_messaging_settings/styles.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.offline-messaging-settings.styles
(:require [status-im.ui.components.colors :as colors])
(:require [status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform])
(:require-macros [status-im.utils.styles :refer [defstyle]]))
(def wrapper
@ -22,6 +23,7 @@
:ios {:font-size 17
:letter-spacing -0.2
:line-height 20}
:desktop {:font-size 16}
:android {:font-size 16}})
(defstyle wnode-item-connected-text
@ -32,7 +34,7 @@
:android {:font-size 12
:margin-top 2}})
(defn wnode-icon [connected?]
(defn wnode-icon-container [connected?]
{:width 40
:height 40
:border-radius 20
@ -41,3 +43,6 @@
colors/gray-light)
:align-items :center
:justify-content :center})
(defn wnode-icon [connected?]
(hash-map (if platform/desktop? :tint-color :color) (if connected? :white :gray)))

11
src/status_im/ui/screens/offline_messaging_settings/views.cljs
View File

@ -7,13 +7,18 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.utils.platform :as platform]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.screens.offline-messaging-settings.styles :as styles]))
(defn- wnode-icon [connected?]
[react/view (styles/wnode-icon connected?)
[vector-icons/icon :icons/wnode {:color (if connected? :white :gray)}]])
[react/view (if platform/desktop?
{:style (styles/wnode-icon-container connected?)}
(styles/wnode-icon-container connected?))
[vector-icons/icon :icons/wnode
(if platform/desktop? {:style (styles/wnode-icon connected?)}
(styles/wnode-icon connected?))]])
(defn connect-to-mailserver [id]
(re-frame/dispatch [:connect-wnode id]))
@ -21,7 +26,7 @@
(defn navigate-to-add-mailserver [wnode-id]
(re-frame/dispatch [:edit-mailserver wnode-id]))
(defn- render-row [current-wnode-id]
(defn render-row [current-wnode-id]
(fn [{:keys [name id user-defined]}]
(let [connected? (= id current-wnode-id)]
[react/touchable-highlight