[ISSUE #3633] Migrated profile lists to latest design

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Julien Eluard 2018-03-28 14:36:38 +02:00
parent e6623516e9
commit 38c9bb7266
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
8 changed files with 59 additions and 103 deletions

View File

@ -11,8 +11,8 @@
[status-im.data-store.local-storage :as local-storage]))
(defn command-handler!
[_ [_
{:keys [command] :as params}
[_ [chat-id
params
{:keys [result error]}]]
(let [{:keys [returned]} result
{handler-error :error} returned]
@ -22,10 +22,10 @@
(dispatch [:set-chat-ui-props {:validation-messages markup}]))
result
(dispatch [:chat-send-message/send-command (assoc-in params [:command :handler-data] returned)])
(dispatch [:chat-send-message/send-command chat-id (assoc-in params [:command :handler-data] returned)])
(not (or error handler-error))
(dispatch [:chat-send-message/send-command params])
(dispatch [:chat-send-message/send-command chat-id params])
:else nil)))

View File

@ -475,6 +475,7 @@
:network "Network"
:remove-network "Remove network"
:network-settings "Network settings"
:offline-messaging "Offline messages"
:offline-messaging-settings "Offline messages settings"
:edit-network-warning "Be careful, editing the network data may disable this network for you"
:connecting-requires-login "Connecting to another network requires login"

View File

@ -1,18 +1,19 @@
(ns status-im.ui.screens.network-settings.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as common]))
(:require [status-im.ui.components.colors :as colors]))
(def networks-list
{:background-color common/color-light-gray})
(def wrapper
{:flex 1
:background-color :white})
(defstyle badge-name-text
{:color common/color-black
{:color colors/black
:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 16}})
(defstyle badge-connected-text
{:color common/color-gray4
{:color colors/gray
:ios {:margin-top 5
:font-size 14
:letter-spacing -0.2}
@ -32,18 +33,18 @@
{:height 52
:align-items :center
:justify-content :center
:background-color common/color-light-blue
:background-color colors/blue
:border-radius 8
:ios {:opacity 0.9}})
(defstyle connect-button-label
{:color common/color-white
{:color colors/white
:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 14}})
(defstyle connect-button-description
{:color common/color-gray4
{:color colors/gray
:ios {:margin-top 8
:height 20
:font-size 14
@ -57,13 +58,13 @@
:padding-top 16
:padding-left 16
:margin-horizontal 16
:background-color "#eef2f5"
:background-color colors/gray-lighter
:ios {:border-radius 9
:opacity 0.9}
:android {:border-radius 4}})
(defstyle network-config-text
{:color common/color-black
{:color colors/black
:ios {:opacity 0.8
:font-size 17
:line-height 24
@ -82,21 +83,21 @@
{:height 52
:align-items :center
:justify-content :center
:background-color common/color-light-blue-transparent
:background-color colors/blue
:border-radius 8
:ios {:width 343}
:android {:width 328}})
(defstyle edit-button-label
{:color common/color-light-blue
{:color colors/blue
:ios {:font-size 17
:letter-spacing -0.2}
:android {:font-size 14}})
(defstyle edit-button-description
{:text-align :center
:color common/color-gray4
:color colors/gray
:ios {:margin-top 8
:font-size 14
:letter-spacing -0.2}
@ -107,7 +108,7 @@
{:width size
:height size
:border-radius (/ size 2)
:background-color (if connected? "#729ae6" "#eef2f5")
:background-color (if connected? colors/blue colors/gray-lighter)
:align-items :center :justify-content :center})
(def network-badge
@ -125,14 +126,14 @@
:android {:height 56}})
(defstyle network-item-name-text
{:color common/color-black
{:color colors/black
:ios {:font-size 17
:letter-spacing -0.2
:line-height 20}
:android {:font-size 16}})
(defstyle network-item-connected-text
{:color common/color-gray4
{:color colors/gray
:ios {:font-size 14
:margin-top 6
:letter-spacing -0.2}

View File

@ -1,17 +1,15 @@
(ns status-im.ui.screens.network-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.ui.components.action-button.styles :as action-button-styles]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.common.common :as common]
[status-im.ui.screens.network-settings.styles :as styles]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.i18n :as i18n]))
[status-im.ui.screens.network-settings.styles :as styles]))
(defn network-icon [connected? size]
(defn- network-icon [connected? size]
[react/view (styles/network-icon connected? size)
[vector-icons/icon :icons/network {:color (if connected? :white :gray)}]])
@ -25,9 +23,6 @@
[react/text {:style styles/badge-connected-text}
(i18n/label :t/connected)])]])
(defn actions-view []
[react/view action-button-styles/actions-list])
(defn render-network [current-network]
(fn [{:keys [id name] :as network}]
(let [connected? (= id current-network)]
@ -50,17 +45,8 @@
[status-bar/status-bar]
[toolbar/simple-toolbar
(i18n/label :t/network-settings)]
[react/view {:flex 1}
[list/flat-list {:style styles/networks-list
:data (vals networks)
:key-fn :id
:render-fn (render-network network)
:header [react/view
[actions-view
[common/bottom-shadow]
[common/form-title (i18n/label :t/existing-networks)
{:count-value (count networks)}]
[common/list-header]]]
:footer [react/view
[common/list-footer]
[common/bottom-shadow]]}]]]))
[react/view styles/wrapper
[list/flat-list {:data (vals networks)
:key-fn :id
:default-separator? true
:render-fn (render-network network)}]]]))

View File

@ -14,7 +14,7 @@
(handlers/register-handler-fx
:connect-wnode
(fn [{:keys [db now]} [_ wnode]]
(fn [{:keys [db]} [_ wnode]]
{:show-confirmation {:title (i18n/label :t/close-app-title)
:content (i18n/label :t/connect-wnode-content
{:name (get-in db [:inbox/wnodes wnode :name])})

View File

@ -1,9 +1,10 @@
(ns status-im.ui.screens.offline-messaging-settings.styles
(:require [status-im.ui.components.styles :as common])
(:require [status-im.ui.components.colors :as colors])
(:require-macros [status-im.utils.styles :refer [defstyle]]))
(def wnodes-list
{:background-color common/color-light-gray})
(def wrapper
{:flex 1
:background-color :white})
(def wnode-item-inner
{:padding-horizontal 16})
@ -17,14 +18,14 @@
:android {:height 56}})
(defstyle wnode-item-name-text
{:color common/color-black
{:color colors/black
:ios {:font-size 17
:letter-spacing -0.2
:line-height 20}
:android {:font-size 16}})
(defstyle wnode-item-connected-text
{:color common/color-gray4
{:color colors/gray
:ios {:font-size 14
:margin-top 6
:letter-spacing -0.2}
@ -36,7 +37,7 @@
:height 40
:border-radius 20
:background-color (if connected?
common/color-light-blue
common/color-light-gray)
colors/blue
colors/gray-light)
:align-items :center
:justify-content :center})

View File

@ -1,71 +1,38 @@
(ns status-im.ui.screens.offline-messaging-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.constants :as constants]
[status-im.i18n :as i18n]
[status-im.ui.components.common.common :as common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[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.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.offline-messaging-settings.styles :as styles]
[status-im.utils.platform :as platform]
[taoensso.timbre :as log]
[reagent.core :as reagent])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
[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)}]])
(defn- render-row [current-wnode]
(fn [{:keys [address name id] :as row} _ _]
(fn [{:keys [name id]}]
(let [connected? (= id current-wnode)]
[react/list-item
^{:key row}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:connect-wnode id])
:accessibility-label :mailserver-item}
[react/view styles/wnode-item
[wnode-icon connected?]
[react/view styles/wnode-item-inner
[react/text {:style styles/wnode-item-name-text}
name]
#_
(when connected?
[react/text {:style styles/wnode-item-connected-text}
(i18n/label :t/connected)])]]]])))
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:connect-wnode id])
:accessibility-label :mailserver-item}
[react/view styles/wnode-item
[wnode-icon connected?]
[react/view styles/wnode-item-inner
[react/text {:style styles/wnode-item-name-text}
name]]]])))
(defn- form-title [label wnodes]
(-> (common/form-title label {:count-value (count wnodes)})
(update-in [1 2 1] dissoc :margin-top)))
(defn- render-header [wnodes]
[react/list-item
[react/view
[form-title (i18n/label :t/existing-wnodes) wnodes]
[common/list-header]]])
(defn- render-footer []
[react/list-item [react/view
[common/list-footer]
[common/bottom-shadow]]])
(defview offline-messaging-settings []
(letsubs [current-wnode [:get :inbox/wnode]
wnodes [:get :inbox/wnodes]]
(views/defview offline-messaging-settings []
(views/letsubs [current-wnode [:get :inbox/wnode]
wnodes [:get :inbox/wnodes]]
[react/view {:flex 1}
[status-bar/status-bar]
[toolbar/simple-toolbar (i18n/label :t/offline-messaging-settings)]
(when platform/ios?
[common/separator])
[react/view {:flex 1}
;; TODO(dmitryn) migrate to :header/:footer properties of flat-list
;; after merge of https://github.com/status-im/status-react/pull/2297/
[render-header wnodes]
[list/flat-list {:data (vals wnodes)
:separator? false
:key-fn :id
:render-fn (render-row current-wnode)
:ListFooterComponent (reagent/as-element (render-footer))
:style styles/wnodes-list}]]]))
[react/view styles/wrapper
[list/flat-list {:data (vals wnodes)
:default-separator? false
:key-fn :id
:render-fn (render-row current-wnode)}]]]))

View File

@ -149,7 +149,7 @@
[profile.components/settings-item-separator])
(when config/offline-inbox-enabled?
[profile.components/settings-item
{:label-kw :t/offline-messaging-settings
{:label-kw :t/offline-messaging
:action-fn #(re-frame/dispatch [:navigate-to :offline-messaging-settings])
:accessibility-label :offline-messages-settings-button}])
[profile.components/settings-item-separator]