From f5e343c08af51e8569910e29218c4a01b72cd3ff Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Thu, 26 Jul 2018 17:53:51 +0300 Subject: [PATCH] Add advanced settings UI --- src/status_im/translations/en.cljs | 1 + .../desktop/main/tabs/profile/styles.cljs | 22 +++++++++++++--- .../desktop/main/tabs/profile/views.cljs | 25 ++++++++++++++++--- .../ui/screens/desktop/main/views.cljs | 1 + src/status_im/ui/screens/desktop/views.cljs | 6 ++++- .../offline_messaging_settings/styles.cljs | 9 +++++-- .../offline_messaging_settings/views.cljs | 7 +++--- 7 files changed, 59 insertions(+), 12 deletions(-) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index d275502335..b1369a6552 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -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" diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs index 7bfffad2c8..c288c1273a 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/styles.cljs @@ -9,14 +9,14 @@ :align-items :center :margin-bottom 16}) -(def logout-row +(def profile-row {:justify-content :space-between :flex-direction :row :margin-horizontal 24 :align-self :stretch - :margin-top 60}) + :margin-top 40}) -(defn logout-row-text [color] +(defn profile-row-text [color] {:color color :font-size 16}) @@ -36,6 +36,7 @@ :height 45 :width 240 :margin-horizontal 50 + :margin-bottom 20 :border-radius 8 :background-color (colors/alpha colors/blue 0.1)}) @@ -133,3 +134,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}) diff --git a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs index ba4964e613..b18d175300 100644 --- a/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs +++ b/src/status_im/ui/screens/desktop/main/tabs/profile/views.cljs @@ -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} @@ -69,10 +84,14 @@ [react/view styles/profile-view [profile-badge user] [share-contact-code] - [react/view {:style styles/logout-row} + [react/view {:style styles/profile-row} + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :advanced-settings])} + [react/text {:style (styles/profile-row-text colors/black)} (i18n/label :t/advanced-settings)]] + [vector-icons/icon :icons/forward {:style {:tint-color colors/gray}}]] + [react/view {:style styles/profile-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 ")"]]]]) + [react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]] + [react/view [react/text {:style (styles/profile-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]]) (views/defview profile-data [] (views/letsubs diff --git a/src/status_im/ui/screens/desktop/main/views.cljs b/src/status_im/ui/screens/desktop/main/views.cljs index 629529229d..72a7c992e8 100644 --- a/src/status_im/ui/screens/desktop/main/views.cljs +++ b/src/status_im/ui/screens/desktop/main/views.cljs @@ -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}} diff --git a/src/status_im/ui/screens/desktop/views.cljs b/src/status_im/ui/screens/desktop/views.cljs index eee7098263..1e0a7ff007 100644 --- a/src/status_im/ui/screens/desktop/views.cljs +++ b/src/status_im/ui/screens/desktop/views.cljs @@ -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}} diff --git a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs index 9c543a3569..f38cdd9b74 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/styles.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/styles.cljs @@ -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))) diff --git a/src/status_im/ui/screens/offline_messaging_settings/views.cljs b/src/status_im/ui/screens/offline_messaging_settings/views.cljs index 8fda592cf3..42b2734173 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/views.cljs @@ -12,8 +12,9 @@ [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 {:style (styles/wnode-icon-container connected?)} + [vector-icons/icon :icons/wnode + {:style (styles/wnode-icon connected?)}]]) (defn connect-to-mailserver [id] (re-frame/dispatch [:connect-wnode id])) @@ -21,7 +22,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