From f5e343c08af51e8569910e29218c4a01b72cd3ff Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Thu, 26 Jul 2018 17:53:51 +0300 Subject: [PATCH 1/4] 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 From 1dd9591b5eb808c438ff816552ae08c00c596c88 Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Wed, 1 Aug 2018 00:03:40 -0600 Subject: [PATCH 2/4] Highlight advanced settings label when selected --- .../desktop/main/tabs/profile/styles.cljs | 24 ++++++++++-------- .../desktop/main/tabs/profile/views.cljs | 25 +++++++++++-------- 2 files changed, 28 insertions(+), 21 deletions(-) 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 c288c1273a..26c191c159 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,16 +9,20 @@ :align-items :center :margin-bottom 16}) -(def profile-row - {:justify-content :space-between - :flex-direction :row - :margin-horizontal 24 - :align-self :stretch - :margin-top 40}) +(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) + :margin-top 20}) -(defn profile-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 profile-photo {:border-radius 100 @@ -138,7 +142,7 @@ (def advanced-settings-title {:margin 24 :font-size 20 - :font-weight "600"}) + :font-weight "600"}) (def title-separator {:height 1 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 b18d175300..e84efbd4b1 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 @@ -81,17 +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/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/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/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/view {:style (styles/profile-row adv-settings-open?)} + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])} + [react/text {:style (styles/profile-row-text colors/black adv-settings-open?)} (i18n/label :t/advanced-settings)]] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :intro :home)])} + [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 From 7c2c537a1aa85efbc49161796bd63b6ed04a5425 Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Wed, 1 Aug 2018 00:38:10 -0600 Subject: [PATCH 3/4] Fix adv settings clicks, some styling changes --- .../ui/screens/desktop/main/tabs/profile/styles.cljs | 11 ++++++++--- .../ui/screens/desktop/main/tabs/profile/views.cljs | 8 ++++---- 2 files changed, 12 insertions(+), 7 deletions(-) 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 26c191c159..5a927e380f 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 @@ -16,14 +16,19 @@ :height 56 :align-self :stretch :align-items :center - :background-color (if active? colors/gray-lighter colors/white) - :margin-top 20}) + :background-color (if active? colors/gray-lighter colors/white)}) (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 :width 100 @@ -40,7 +45,7 @@ :height 45 :width 240 :margin-horizontal 50 - :margin-bottom 20 + :margin-bottom 48 :border-radius 8 :background-color (colors/alpha colors/blue 0.1)}) 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 e84efbd4b1..e5ed4d9162 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 @@ -86,10 +86,10 @@ [react/view styles/profile-view [profile-badge user] [share-contact-code] - [react/view {:style (styles/profile-row adv-settings-open?)} - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])} - [react/text {:style (styles/profile-row-text colors/black adv-settings-open?)} (i18n/label :t/advanced-settings)]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to (if adv-settings-open? :intro :home)])} + [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])} From 4285dcb62f72abb646bbf56098cbf4624df20e5e Mon Sep 17 00:00:00 2001 From: Vitaliy Vlasov Date: Wed, 1 Aug 2018 09:59:02 -0600 Subject: [PATCH 4/4] Fix mobile UI for mailserver icons --- .../ui/screens/offline_messaging_settings/views.cljs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 42b2734173..1c49f6ddc8 100644 --- a/src/status_im/ui/screens/offline_messaging_settings/views.cljs +++ b/src/status_im/ui/screens/offline_messaging_settings/views.cljs @@ -7,14 +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 {:style (styles/wnode-icon-container connected?)} + [react/view (if platform/desktop? + {:style (styles/wnode-icon-container connected?)} + (styles/wnode-icon-container connected?)) [vector-icons/icon :icons/wnode - {:style (styles/wnode-icon connected?)}]]) + (if platform/desktop? {:style (styles/wnode-icon connected?)} + (styles/wnode-icon connected?))]]) (defn connect-to-mailserver [id] (re-frame/dispatch [:connect-wnode id]))