From f981dbb43bd2a9bc5c74e94915149c89090cccb5 Mon Sep 17 00:00:00 2001 From: bitsikka Date: Fri, 6 Sep 2019 14:22:02 +0545 Subject: [PATCH] list-item suppliment/fixes Signed-off-by: Andrey Shovkoplyas --- fiddle/src/fiddle/views/list_items.cljs | 2 +- src/status_im/ui/components/colors.cljs | 2 +- src/status_im/ui/components/list/views.cljs | 6 +- .../ui/components/list_item/styles.cljs | 76 ++-- .../ui/components/list_item/views.cljs | 381 ++++++++++-------- src/status_im/ui/screens/about_app/views.cljs | 35 +- .../ui/screens/advanced_settings/views.cljs | 3 +- .../ui/screens/dapps_permissions/views.cljs | 11 +- .../privacy_and_security_settings/views.cljs | 37 +- .../ui/screens/sync_settings/views.cljs | 17 +- translations/en.json | 3 +- 11 files changed, 347 insertions(+), 226 deletions(-) diff --git a/fiddle/src/fiddle/views/list_items.cljs b/fiddle/src/fiddle/views/list_items.cljs index f53f1fd310..133ca0a7a7 100644 --- a/fiddle/src/fiddle/views/list_items.cljs +++ b/fiddle/src/fiddle/views/list_items.cljs @@ -48,7 +48,7 @@ :height 40 :border-radius 20 :background-color colors/green}] - :accessories [:more]}]] + :accessories [:main-icons/more]}]] [item "With radio button (TODO!)" [list-item/list-item {:title "George" diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index bc49eb716c..08507daf76 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -67,4 +67,4 @@ (def text black) (def text-gray gray) -(def default-chat-color "#a187d5") ;; legacy \ No newline at end of file +(def default-chat-color "#a187d5") ;; legacy diff --git a/src/status_im/ui/components/list/views.cljs b/src/status_im/ui/components/list/views.cljs index bed89171c0..ec16af01fd 100644 --- a/src/status_im/ui/components/list/views.cljs +++ b/src/status_im/ui/components/list/views.cljs @@ -231,7 +231,11 @@ props {:data (wrap-data data)})]) -(defn flat-list-generic-render-fn [item _] +(defn flat-list-generic-render-fn + "A generic status-react specific `render-fn` for `list-item`. + Handles `list-item` `data` consiting any combination of + `list-item/list-item` config map and `companent`." + [item _] (cond (map? item) [list-item/list-item item] (vector? item) item diff --git a/src/status_im/ui/components/list_item/styles.cljs b/src/status_im/ui/components/list_item/styles.cljs index f16b4aab04..aebc5e7761 100644 --- a/src/status_im/ui/components/list_item/styles.cljs +++ b/src/status_im/ui/components/list_item/styles.cljs @@ -1,13 +1,53 @@ (ns status-im.ui.components.list-item.styles (:require [status-im.ui.components.colors :as colors])) -(defn container [type] - {:flex-direction :row - :justify-content :flex-start - :padding-horizontal 16 - :padding-top (if (= type :section-header) 14 10) - :padding-bottom (if (= type :section-header) 4 10) - :align-items :center}) +(defn container [type selected?] + (merge + {:flex-direction :row + :justify-content :flex-start + :padding-horizontal 16 + ;; We need `:min-height` to ensure design spec conformance + ;; and maintain `vertical-rythm` regardless of inner content height. + ;; Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=790%3A35 + + ;; Without it `:small` type will be height 42 in some cases + ;; 44 in others. Something similar can happen to `:default`. + ;; Not really needed for `:section-header` but good to have + ;; it, if not for anything, for reference. + + ;; - Why not have 15px or 14px top/bottom padding as spec indicates, + ;; as a strategy for list-item not collapsing to 42/44 height instead? + ;; - Why `:small` type has same 10px top/bottom padding like `:default` does + ;; instead of 14px? + + ;; Because native switch button height(at least in iOS) + ;; is > 22px(title line-height), and > 24px(accessory icon height in spec). + ;; Plus there might be a need for <= 32px accessory or something, in edge cases. + + ;; Think of it like an alternate design strategy for components with + ;; variable content whose height might vary. Like, instead of controlling + ;; the overall component's height using line-height, top/bottom padding, + ;; or explicit height. + + ;; And, better to have 32px content vertical space (for :small) + ;; to play with in this setup; So, we stretch vertically the inner + ;; containers; and vertically center content inside them. Allows for + ;; flexibility, with as little constraint and superfluous styling attributes + ;; as possible. + + ;; Note: this is `min-height` so if we have > 32px accessory or some other + ;; content inside it `vertical-rythm` can break. We leave it up to the + ;; list-item consuming implementation to be aware of it. + :min-height (case type + :default 64 + :small 52 + :section-header 40 + 0) + :padding-top (if (= type :section-header) 14 10) + :padding-bottom (if (= type :section-header) 4 10) + :align-items :center} + (when selected? + {:background-color colors/gray-transparent-40}))) (def icon-column-container {:margin-right 14 @@ -76,9 +116,8 @@ (if disabled? {:color colors/gray} (case theme - :blue {:color colors/white} :action-destructive {:color colors/red} - :action {:color colors/blue} + :action {:color colors/blue} {})))) (defn title [type theme icon? title-prefix subtitle @@ -111,7 +150,6 @@ {:color title-color-override} ;; else (case theme - :blue {:color colors/white} :action-destructive {:color colors/red} :action {:color colors/blue} {}))))) @@ -126,7 +164,7 @@ :justify-content :flex-start :align-self :stretch}) -(defn subtitle [icon? theme subtitle-row-accessory] +(defn subtitle [icon? subtitle-row-accessory] (cond-> {:margin-left (if icon? 2 0) :flex 1 :align-self :stretch @@ -135,8 +173,6 @@ ;; as reasonably possible as it can be, and achieve the ;; intent of the design spec :line-height 22} - (= :blue theme) - (assoc :color (colors/alpha colors/blue-light 0.6)) subtitle-row-accessory (assoc :margin-right 16))) @@ -150,22 +186,14 @@ :align-items :center :justify-content :flex-start}) -(defn accessory-text [theme] - {:color (if (= theme :blue) - (colors/alpha colors/blue-light 0.6) - colors/gray) +(defn accessory-text [width last] + {:color colors/gray + :max-width (if last (* @width 0.62) (* @width 0.55)) ;; we are doing the following to achieve pixel perfection ;; as reasonably possible as it can be, and achieve the ;; intent of the design spec :line-height 22}) -(defn radius [size] (/ size 2)) - -(defn photo [size] - {:border-radius (radius size) - :width size - :height size}) - (def error {:bottom-value 0 :color colors/red-light diff --git a/src/status_im/ui/components/list_item/views.cljs b/src/status_im/ui/components/list_item/views.cljs index 0d2e52a42c..bd54a3af4d 100644 --- a/src/status_im/ui/components/list_item/views.cljs +++ b/src/status_im/ui/components/list_item/views.cljs @@ -5,6 +5,7 @@ [status-im.ui.components.react :as react] [status-im.ui.components.list-item.styles :as styles] [status-im.ui.components.tooltip.views :as tooltip] + [status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.profile.db :as profile.db] [status-im.utils.label :as utils.label])) @@ -23,15 +24,9 @@ (if disabled? {:container colors/gray-lighter :icon colors/gray-transparent-40} - (case theme - :action-destructive + (if (= theme :action-destructive) {:container colors/red-light :icon colors/red} - - :blue - {:container colors/white-transparent-10 - :icon colors/white} - {:container nil :icon nil}))] [react/view (styles/icon-container (:container colors)) @@ -39,9 +34,7 @@ (and (string? icon) (profile.db/base64-encoded-image-path? icon)) - [react/image {:source {:uri icon} - :resize-mode :cover - :style (styles/photo 40)}] + [photos/photo icon {:size 40}] :else [icon])]) @@ -78,7 +71,9 @@ title-prefix-width disabled?)} (if title-prefix-width (utils.label/stringify title-prefix) - (str (utils.label/stringify title-prefix) " "))] + (if (string? title) + (str (utils.label/stringify title-prefix) " ") + (utils.label/stringify title-prefix)))] (vector? title-prefix) title-prefix @@ -90,8 +85,8 @@ (or (string? title) (keyword? title) (number? title)) [react/text (merge - {:number-of-lines 1 - :ellipsize-mode :tail + {:number-of-lines 1 + :ellipsize-mode :tail :style (styles/title type theme icon? title-prefix subtitle @@ -124,19 +119,19 @@ [react/text {:style (merge (styles/subtitle - icon? theme (pos? @subtitle-row-accessory-width))) + icon? (pos? @subtitle-row-accessory-width))) :number-of-lines subtitle-max-lines :ellipsize-mode :tail} (utils.label/stringify subtitle)] (vector? subtitle) [react/view - (styles/subtitle icon? theme (pos? @subtitle-row-accessory-width)) + (styles/subtitle icon? (pos? @subtitle-row-accessory-width)) subtitle] :else [react/view - (styles/subtitle icon? theme (pos? @subtitle-row-accessory-width)) + (styles/subtitle icon? (pos? @subtitle-row-accessory-width)) [subtitle]]) (when subtitle-row-accessory @@ -168,7 +163,7 @@ content [content])])]) -(defn- accessories-column [accessories theme] +(defn- accessories-column [accessories theme width] (let [last-accessory (peek accessories) last-accessory-is-component (and (not (utils.label/stringify last-accessory)) (not= :chevron last-accessory)) @@ -186,34 +181,30 @@ :align-items :center :justify-content :center} :resize-mode :center - :color (if (= theme :blue) - (colors/alpha colors/white 0.4) - colors/gray-transparent-40)}] + :color colors/gray-transparent-40}] - (= :check accessory) - [icons/icon :main-icons/check - {:color (if (= theme :blue) - (colors/alpha colors/white 0.4) - colors/gray)}] - - (= :more accessory) - [icons/icon :main-icons/more - {:color (if (= theme :blue) - (colors/alpha colors/white 0.4) - colors/black)}] + (and (qualified-keyword? accessory) + (= "main-icons" (namespace accessory))) + [icons/icon + accessory + {:color colors/gray-transparent-40 + :container-style + {:margin-right (if (= accessory last-accessory) 0 12)}}] :else [react/view (cond-> {:margin-right (if (= accessory last-accessory) 0 16)} ;; `:chevron` container is 10px wide (see up) ;; but the chevron icon itself is 9px aligned in the ;; container to the right - so 1px white-space on left - ;; that 1px + 15px margin makes 16px + ;; thats 1px + 15px margin, which makes 16px ;; as intended in design spec (= last-accessory :chevron) (assoc :margin-right 15)) (cond (or (string? accessory) (keyword? accessory) (number? accessory)) - [react/text {:style (styles/accessory-text theme) + [react/text {:style + (styles/accessory-text width (= accessory last-accessory)) + :ellipsize-mode :middle :number-of-lines 1} (utils.label/stringify accessory)] @@ -221,116 +212,155 @@ accessory :else nil)]) - {:key accessory})))))) - -;; every key is optional - use as needed -;; combination of around 4 related keys are enough for most cases - -;; type -;; :default (default), :small, or :section-header -;; - :section-header -;; specifying only these is sufficient -;; {:title "Section title" :type :section-header} -;; optionally set `container-margin-top/bottom` - -;; theme -;; :default(default), :action, :action-destructive - -;; container-margin-top -;; container-margin-bottom -;; number - 0 by default -;; usually the first item has top margin -;; the last item has bottom margin - -;; icon -;; any one of keyword representing :main-icon/icon, photo-path, component -;; if component make sure to make it 40x40 size - -;; title-prefix -;; any one of keyword representing an vector-icon/icon, -;; :main-icons/tiny-icons(16x16) are preferred(when it has 4px :margin-top) -;; any other vector-icon/icon is accepted though(when it is better to -;; specify height(best to keep it <= 20) see related height/width below -;; string, keyword(gets converted to string), -;; number(gets converted to string), or component - -;; title-prefix-width -;; title-prefix-height -;; optional width/height for when title/prefix is not a tiny-icon -;; i.e. when icon height/height > 16, or when component -;; do not specify if title-prefix is tiny-icon - -;; title -;; any one of string, keyword representing translated string in the form of -;; :t/{translation-key-in-translation-files}, -;; keyword(gets converted to string), -;; number(gets converted to string), or -;; component - when component is used best to keep the style similar -;; to `styles/title-row-container` and/or `styles/title` - -;; title-color-override -;; colors/color - only occasionally needed, self-explanatory - -;; title-accessibility-label -;; :accessibility-label for title text component -;; sometimes needed for title - e.g. chat-list-item -;; makes sense since `title` is the key element of a list item - -;; title-row-accessory -;; component - especially made for chat list item, but may serve other -;; purpose in the unlikely future. Wrapper already has 2px :margin-top -;; best to keep it <= 18px high - -;; subtitle -;; any one of string, keyword representing translated string in the form of -;; :t/{translation-key-in-translation-files}, -;; keyword(gets converted to string), -;; number(gets converted to string), or -;; component - when component is used best to keep the style similar -;; to `styles/subtitle-title-row-container` and/or `styles/subtitle` - -;; subtitle-max-lines -;; integer - 1 by default - self-explanatory - -;; subtitle-row-accessory -;; component -;; made specially for chat-list to hold unread messages counter - -;; content -;; component - to replace entire title-column area -;; TODO - consider removing, as it is redundant now that -;; title/subtitle elements can be component as well -;; just make sure to keep in mind the note made on -;; component case on those keys above - -;; accessories -;; vector of :chevron, :check, :more, string, number, keyword or component - -;; on-press/on-long-press -;; function - self explanatory - -;; error -;; string - error tooltip - -;; accessibility-label -;; :keyword - self explanatory - -;; disabled? -;; boolean - false by default - self explanatory + {:key (name (gensym "accessory"))})))))) (defn list-item - [{:keys [type theme container-margin-top container-margin-bottom - icon title-prefix title-prefix-width title-prefix-height - title title-color-override title-row-accessory - title-accessibility-label subtitle subtitle-max-lines - subtitle-row-accessory content accessories on-press - on-long-press error accessibility-label disabled?] - :or {type :default - theme :default - disabled? false - container-margin-top 0 - container-margin-bottom 0 - subtitle-max-lines 1}}] + "A general purpose status-react specfic list item component. + Every key is optional. Use as needed. + Combination of around 4 related keys are enough for most cases. + Spec: https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=787%3A1108 + + `react-key` + String - (default generated automatically using `gensym`) + A react unique key meta data. Usually for homogeneous list-items. + Usually needed for list-items generated by looping over + some kind of collection. + More here https://reactjs.org/docs/lists-and-keys.html#keys + + `type` + `:default` (default), `:small`, `:section-header`, or `:divider` + `:section-header` + Specifying only these is sufficient. + {:title
:type :section-header} + Optionally set `container-margin-top/bottom` + `:divider` + A simple common gray divider seen in various screens. + Simply use: + {:type :divider} and specify nothing else. + White-space above and below it can be controlled by + `container-margin-top/bottom` specified for list-item above/below + + `theme` + `:default` (default), `:action`, `:action-destructive`, + or `:selectable` + `:selectable` + A theme for list-item groups having radio button accessory. + Use it together with `selected?` key. See below. + + `container-margin-top` + `container-margin-bottom` + Integer - 0 by default + Usually the first item has top margin, and the last item has bottom margin. + + `icon` + Any one of keyword representing `:main-icon/icon`, or + string representing `photo-path` base64 data, or `component`. + If component make sure to make it 40x40 size. + + `title-prefix` + Any one of keyword representing an `vector-icon/icon`, + `:main-icons/tiny-icons`(16x16) are preferred + In which case it will automatically have 4px `:margin-top`; + Any other `vector-icon/icon` is also acceptable. + In which case it is better to specify height. + Best to keep it <= 20. See related height/width below. + String, keyword (gets converted to string), + Number (gets converted to string), or component. + + `title-prefix-width` + `title-prefix-height` + Optional width/height for when title/prefix is not a tiny-icon + i.e. when icon height/height > 16, or when component. + Do not specify if title-prefix is tiny-icon + + `title` + Any one of string, keyword representing translated string in the form of + :t/{translation-key-in-translation-files}, + Keyword(gets converted to string), + Number(gets converted to string), or + Component - When component is used best to keep the style similar. + to `styles/title-row-container` and/or `styles/title`. + + `title-color-override` + colors/color - only occasionally needed, self-explanatory + + `title-accessibility-label` + `:accessibility-label` for title text component. + Sometimes needed for title - e.g. chat-list-item. + Makes sense since `title` is the key element of a list item. + + `title-row-accessory` + Component - Especially made for chat list item, but may serve other + purpose in the unlikely future. Wrapper already has 2px :margin-top. + Best to keep it <= 18px high. + + `subtitle` + Any one of string, keyword representing translated string in the form of + :t/{translation-key-in-translation-files}, + Keyword(gets converted to string), + Number(gets converted to string), or + Component - when component is used best to keep the style similar + to `styles/subtitle-title-row-container` and/or `styles/subtitle`. + + `subtitle-max-lines` + Integer - 1 by default - self-explanatory + + `subtitle-row-accessory` + Component + Made specially for chat-list to hold unread messages counter. + + Content + component - to replace entire title-column area + For visual consistancy with other list-items + Best to keep height <= 40 for `:default` `type`. + Best to keep height <= 30 for `:small` `type`. + Best to keep inner element styles similar to + `styles/subtitle-title-row-container` and/or `styles/subtitle`. + + `accessories` + Vector of `:chevron`, Any one of keyword representing `:main-icon/icon`, + `number`, `keyword` or `component` + Long stringified accessory has max-width of 62% of device width. + That means `title` is also constrained to not be longer than + 30ish%(considering hard right-margin in `title` of 16px) + In cases of edge cases where title/accessories are + butting against each other, use component for textual accessories + with `title` as component as well as necessary. + Use best judgement with respect to smaller width screens. + + `on-press/on-long-press` + Function - self explanatory + + `error` + String - error tooltip + + `accessibility-label` + :keyword - self explanatory + + `disabled?` + Boolean - false by default - self explanatory + + `selected?` + Boolean + When (= :theme :selectable) this switch controls whether the + list-item is in a visually selected state. Background-color + of list-item is colors/gray-selected. Useful for selectable + list-items like list with radio buttons." + + [{:keys + [react-key type theme container-margin-top container-margin-bottom + icon title-prefix title-prefix-width title-prefix-height + title title-color-override title-row-accessory + title-accessibility-label subtitle subtitle-max-lines + subtitle-row-accessory content accessories on-press + on-long-press error accessibility-label disabled? selected?] + :or {react-key (name (gensym "list-item")) + type :default + theme :default + disabled? false + container-margin-top 0 + container-margin-bottom 0 + subtitle-max-lines 1}}] (let [title-row-elements {:title title :title-color-override title-color-override @@ -342,26 +372,53 @@ subtitle-row-elements {:subtitle subtitle :subtitle-max-lines subtitle-max-lines - :subtitle-row-accessory subtitle-row-accessory}] - [react/view {:margin-top container-margin-top - :margin-bottom container-margin-bottom} - [react/touchable-highlight - (cond-> {:on-press on-press - :on-long-press on-long-press - :underlay-color colors/gray-transparent-10 - :disabled (or (not on-press) disabled?)} - accessibility-label - (assoc :accessibility-label accessibility-label)) - [react/view {:style (styles/container type)} - (when icon - [icon-column icon theme disabled?]) + :subtitle-row-accessory subtitle-row-accessory} + width (reagent/atom 0) + radio-selected? (and (= theme :selectable) selected?)] + (reagent/create-class + {:reagent-render + (fn + [{:keys + [icon title-prefix title title-row-accessory subtitle + subtitle-max-lines subtitle-row-accessory content + accessories on-press on-long-press error disabled? selected?] + :or {subtitle-max-lines 1}}] + (let [title-row-elements + (merge title-row-elements + {:title title + :title-prefix title-prefix + :title-row-accessory title-row-accessory}) + subtitle-row-elements + {:subtitle subtitle + :subtitle-max-lines subtitle-max-lines + :subtitle-row-accessory subtitle-row-accessory} + radio-selected? + (and (= theme :selectable) selected?)] + ^{:key react-key} + (if (= type :divider) + divider + [react/view {:style {:margin-top container-margin-top + :margin-bottom container-margin-bottom} + :on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))} + [react/touchable-highlight + (cond-> {:on-press (when (not= theme :selectable) on-press) + :on-press-in (when (= theme :selectable) on-press) + :on-long-press on-long-press + :underlay-color colors/gray-transparent-40 + :active-opacity (if (= theme :selectable) 1 0.85) + :disabled (or (not on-press) selected? disabled?)} + accessibility-label + (assoc :accessibility-label accessibility-label)) + [react/view {:style (styles/container type radio-selected?)} + (when icon + [icon-column icon theme disabled?]) - (when (or title subtitle content) - [title-column - title-row-elements subtitle-row-elements - type icon disabled? theme content accessories]) + (when (or title subtitle content) + [title-column + title-row-elements subtitle-row-elements + type icon disabled? theme content accessories]) - (when accessories - [accessories-column accessories theme])]] - (when error - [tooltip/tooltip error styles/error])])) + (when accessories + [accessories-column accessories theme width])]] + (when error + [tooltip/tooltip error styles/error])])))}))) diff --git a/src/status_im/ui/screens/about_app/views.cljs b/src/status_im/ui/screens/about_app/views.cljs index 3966970b20..a2daf03244 100644 --- a/src/status_im/ui/screens/about_app/views.cljs +++ b/src/status_im/ui/screens/about_app/views.cljs @@ -12,19 +12,44 @@ (defn- data [app-version node-version] [{:type :small - :title (i18n/label :t/privacy-policy) + :title :t/privacy-policy :accessibility-label :privacy-policy :on-press #(re-frame/dispatch [:privacy-policy/privacy-policy-button-pressed]) :accessories [:chevron]} [copyable-text/copyable-text-view - {:copied-text (str app-version "; " node-version)} + {:copied-text app-version} [list-item/list-item {:type :small - :title (i18n/label :t/version) - :accessibility-label :version - :accessories [(str app-version ";\n" node-version)]}]]]) + :accessibility-label :app-version + :title-prefix :t/version + :title + [react/text + {:number-of-lines 1 + :ellipsize-mode :middle + :style + {:color colors/gray + :padding-left 16 + :text-align :right + :line-height 22}} + app-version]}]] + [copyable-text/copyable-text-view + {:copied-text node-version} + [list-item/list-item + {:type :small + :accessibility-label :node-version + :title-prefix :t/node-version + :title + [react/text + {:number-of-lines 1 + :ellipsize-mode :middle + :style + {:color colors/gray + :padding-left 16 + :text-align :right + :line-height 22}} + node-version]}]]]) (views/defview about-app [] (views/letsubs [app-version [:get-app-short-version] diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs index 0a9b8c9878..ae10012898 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -4,7 +4,6 @@ [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] [status-im.ui.components.list.views :as list] - [status-im.ui.components.list-item.views :as list-item] [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])) @@ -56,7 +55,7 @@ #(re-frame/dispatch [:multiaccounts.ui/dev-mode-switched (not dev-mode?)]) :disabled false}]]} - list-item/divider]) + {:type :divider}]) (defn- dev-mode-settings-data [settings chaos-mode? supported-biometric-auth] [{:container-margin-top 8 diff --git a/src/status_im/ui/screens/dapps_permissions/views.cljs b/src/status_im/ui/screens/dapps_permissions/views.cljs index 6151d5f531..7c6c7268b2 100644 --- a/src/status_im/ui/screens/dapps_permissions/views.cljs +++ b/src/status_im/ui/screens/dapps_permissions/views.cljs @@ -5,7 +5,6 @@ [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.components.list-item.views :as list-item] [status-im.ui.components.list.views :as list] [status-im.ui.components.colors :as colors] [status-im.ui.screens.dapps-permissions.styles :as styles] @@ -28,7 +27,7 @@ constants/dapp-permission-web3 :t/wallet constants/dapp-permission-contact-code :t/contact-code) :type :small - :accessories [:check]}) + :accessories [:main-icons/check]}) (views/defview dapps-permissions [] (views/letsubs [permissions [:dapps/permissions]] @@ -37,9 +36,9 @@ [toolbar/simple-toolbar (i18n/label :t/dapps-permissions)] [list/flat-list - {:data (map prepare-items (vals permissions)) + {:data (vec (map prepare-items (vals permissions))) :key-fn (fn [_ i] (str i)) - :render-fn list-item/list-item}]])) + :render-fn list/flat-list-generic-render-fn}]])) (views/defview manage [] (views/letsubs [{:keys [dapp permissions]} [:get-screen-params]] @@ -47,9 +46,9 @@ [status-bar/status-bar] [toolbar/simple-toolbar dapp] [list/flat-list - {:data (map prepare-items-manage permissions) + {:data (vec (map prepare-items-manage permissions)) :key-fn (fn [_ i] (str i)) - :render-fn list-item/list-item}] + :render-fn list/flat-list-generic-render-fn}] [react/view {:padding-vertical 16} [components.common/red-button {:label (i18n/label :t/revoke-access) :on-press #(re-frame/dispatch [:dapps/revoke-access dapp])}]]])) diff --git a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs b/src/status_im/ui/screens/privacy_and_security_settings/views.cljs index 618393a8c3..1f1e77dbcb 100644 --- a/src/status_im/ui/screens/privacy_and_security_settings/views.cljs +++ b/src/status_im/ui/screens/privacy_and_security_settings/views.cljs @@ -1,23 +1,23 @@ (ns status-im.ui.screens.privacy-and-security-settings.views - (:require-macros [status-im.utils.views :as views]) (:require [clojure.string :as string] + [reagent.core :as reagent] [re-frame.core :as re-frame] [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list.views :as list] - [status-im.ui.components.list-item.views :as list-item] [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.components.toolbar.view :as toolbar]) + (:require-macros [status-im.utils.views :as views])) (defn- list-data [show-backup-seed? settings] [{:type :section-header :title :t/security :container-margin-top 6} - {:type :small - :title :t/back-up-seed-phrase - :accessibility-label :back-up-recovery-phrase-button + {:type :small + :title :t/back-up-seed-phrase + :accessibility-label :back-up-recovery-phrase-button ;; TODO - remove container bottom margin ;; when items below are implemented :container-margin-bottom 8 @@ -34,21 +34,22 @@ ;; :title :t/change-passcode ;; :accessories [:chevron] ;; :container-margin-bottom 8} - list-item/divider + {:type :divider} {:container-margin-top 8 :type :section-header :title :t/privacy} - {:type :small - :title :t/set-dapp-access-permissions - :on-press #(re-frame/dispatch [:navigate-to :dapps-permissions]) + {:type :small + :title :t/set-dapp-access-permissions + :on-press #(re-frame/dispatch [:navigate-to :dapps-permissions]) :accessibility-label :dapps-permissions-button - :accessories [:chevron]} + :accessories [:chevron]} {:type :small :title :t/hide-content-when-switching-apps + :container-margin-bottom 8 :accessories [[react/switch {:track-color #js {:true colors/blue :false nil} - :value (boolean (boolean (:preview-privacy? settings))) + :value (boolean (:preview-privacy? settings)) :on-value-change #(re-frame/dispatch [:multiaccounts.ui/preview-privacy-mode-switched %]) @@ -56,12 +57,11 @@ :on-press #(re-frame/dispatch [:multiaccounts.ui/preview-privacy-mode-switched - ((complement boolean) (:preview-privacy? settings))]) - :container-margin-bottom 8} - list-item/divider + ((complement boolean) (:preview-privacy? settings))])} + {:type :divider} ;; TODO - uncomment when implemented (comment - {:container-margin-top 8 + {:container-margin-top 8 :type :small :title :t/delete-my-account :container-margin-bottom 24 @@ -71,13 +71,12 @@ (views/letsubs [{:keys [seed-backed-up? mnemonic]} [:multiaccount] settings [:multiaccount-settings]] (let [show-backup-seed? (and (not seed-backed-up?) - (not (string/blank? mnemonic))) - data (list-data show-backup-seed? settings)] + (not (string/blank? mnemonic)))] [react/view {:flex 1 :background-color colors/white} [status-bar/status-bar] [toolbar/simple-toolbar (i18n/label :t/privacy-and-security)] [list/flat-list - {:data data + {:data (list-data show-backup-seed? settings) :key-fn (fn [_ i] (str i)) :render-fn list/flat-list-generic-render-fn}]]))) diff --git a/src/status_im/ui/screens/sync_settings/views.cljs b/src/status_im/ui/screens/sync_settings/views.cljs index 9ed1f1df0e..6b9265b35e 100644 --- a/src/status_im/ui/screens/sync_settings/views.cljs +++ b/src/status_im/ui/screens/sync_settings/views.cljs @@ -4,7 +4,6 @@ [status-im.i18n :as i18n] [status-im.ui.components.colors :as colors] [status-im.ui.components.list.views :as list] - [status-im.ui.components.list-item.views :as list-item] [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])) @@ -23,13 +22,23 @@ #(re-frame/dispatch [:navigate-to :mobile-network-settings]) :accessories [mobile-data-usage-state :chevron]} {:type :small - :title :t/offline-messaging :accessibility-label :offline-messages-settings-button + :title-prefix :t/offline-messaging + :title + [react/text + {:number-of-lines 1 + :ellipsize-mode :middle + :style + {:color colors/gray + :padding-left 16 + :text-align :right + :line-height 22}} + mailserver-id] :on-press #(re-frame/dispatch [:navigate-to :offline-messaging-settings]) - :accessories [mailserver-id :chevron] + :accessories [:chevron] :container-margin-bottom 8} - list-item/divider + {:type :divider} {:container-margin-top 8 :type :section-header :title :t/device-syncing} diff --git a/translations/en.json b/translations/en.json index 2db8cc1d4d..e634232bef 100644 --- a/translations/en.json +++ b/translations/en.json @@ -759,7 +759,8 @@ "your-contact-code": "Granting access authorizes this DApp to retrieve your chat key", "password-placeholder": "At least 6 characters", "clear-history-action": "Clear", - "version": "Version", + "version": "App version", + "node-version": "Node version", "specify-mailserver-address": "Specify a mailserver address", "scan-qr-code": "Scan a QR code with a wallet address", "wallet-total-value": "Total value",