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

Add advanced settings UI

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"

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

@@ -9,16 +9,25 @@
    :align-items   :center
    :margin-bottom 16})
 
-(def logout-row
+(defn profile-row [active?]
-  {:justify-content   :space-between
+  {:justify-content    :space-between
-   :flex-direction    :row
+   :flex-direction     :row
-   :margin-horizontal 24
+   :padding-horizontal 24
-   :align-self        :stretch
+   :height             56
-   :margin-top        60})
+   :align-self         :stretch
+   :align-items        :center
+   :background-color   (if active? colors/gray-lighter colors/white)})
 
-(defn logout-row-text [color]
+(defn profile-row-text [color active?]
-  {:color     color
+  {:color       color
-   :font-size 16})
+   :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})

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}
@@ -66,13 +81,20 @@
      [vector-icons/icon :icons/qr {:style {:tint-color colors/blue}}]]]])
 
 (views/defview profile [user]
-  [react/view styles/profile-view
+  (views/letsubs [current-view-id [:get :view-id]]
-   [profile-badge user]
+    (let [adv-settings-open? (= current-view-id :advanced-settings)]
-   [share-contact-code]
+      [react/view styles/profile-view
-   [react/view {:style styles/logout-row}
+       [profile-badge user]
-    [react/touchable-highlight {:on-press #(re-frame/dispatch [:logout])}
+       [share-contact-code]
-     [react/text {:style (styles/logout-row-text colors/red)} (i18n/label :t/logout)]]
+       [react/touchable-highlight {:style  (styles/profile-row adv-settings-open?)
-    [react/view [react/text {:style (styles/logout-row-text colors/gray)} "V" build/version " (" build/commit-sha ")"]]]])
+                                   :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

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}}

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}}

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)))

src/status_im/ui/screens/offline_messaging_settings/views.cljs

@@ -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?)
+  [react/view (if platform/desktop?
-   [vector-icons/icon :icons/wnode {:color (if connected? :white :gray)}]])
+                {: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