status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-19 22:28:40 +00:00
Code Issues Projects Releases Wiki Activity

Replace all usage of topbar with Quo

Browse Source 
QR

Invert border boolean

Update e2e

Fix another e2e

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-08-06 11:48:12 +03:00
parent 62fe9f3d6a
commit 4e44bed8d6
No known key found for this signature in database
GPG Key ID: C9A094959935A952
62 changed files with 386 additions and 682 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/quo/components/animated_header.cljs
View File

@ -58,6 +58,7 @@
:offset @offset})} :offset @offset})}
[header/header (merge [header/header (merge
{:get-layout (fn [el l] (swap! layout assoc el l)) {:get-layout (fn [el l] (swap! layout assoc el l))
:border-bottom false
:title-component [animated/view {:style (title-style @layout)} :title-component [animated/view {:style (title-style @layout)}
[extended-header {:value y [extended-header {:value y
:animation animation :animation animation

37
src/quo/components/header.cljs
View File

@ -10,13 +10,16 @@
(def header-height 56) (def header-height 56)
(defn header-wrapper-style [{:keys [height border-bottom]}] (defn header-wrapper-style [{:keys [height border-bottom background]}]
(merge (merge
(:x-tiny spacing/padding-horizontal)
{:background-color (:ui-background @colors/theme) {:background-color (:ui-background @colors/theme)
:height height} :height height}
(when background
{:background-color background})
(when border-bottom (when border-bottom
{:border-bottom-width 1 {:border-bottom-width 1
:border-bottom-color (:ui-02 @colors/theme)}))) :border-bottom-color (:ui-01 @colors/theme)})))
(def absolute-fill {:position :absolute (def absolute-fill {:position :absolute
:top 0 :top 0
@ -49,9 +52,10 @@
(case title-align (case title-align
:left {:left (:width left) :left {:left (:width left)
:right (:width right)} :right (:width right)}
{:align-items :center {:align-items :center
:left (max (:width left) (:width right)) :justify-content :center
:right (max (:width left) (:width right))}))) :left (max (:width left) (:width right))
:right (max (:width left) (:width right))})))
(def header-actions-style (def header-actions-style
(merge (merge
@ -59,7 +63,7 @@
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:justify-content :center} :justify-content :center}
(:tiny spacing/padding-horizontal))) (:x-tiny spacing/padding-horizontal)))
(def header-action-placeholder (def header-action-placeholder
{:width (:base spacing/spacing)}) {:width (:base spacing/spacing)})
@ -68,8 +72,9 @@
:justify-content :center :justify-content :center
:flex 1}) :flex 1})
(defn header-action [{:keys [icon label on-press accessibility-label]}] (defn header-action [{:keys [icon label on-press disabled accessibility-label]}]
[button/button (merge {:on-press on-press} [button/button (merge {:on-press on-press
:disabled disabled}
(cond (cond
icon {:type :icon icon {:type :icon
:theme :icon} :theme :icon}
@ -103,19 +108,20 @@
:number-of-lines 1} :number-of-lines 1}
title] title]
[text/text {:weight :regular [text/text {:weight :regular
:color :secondary
:number-of-lines 1} :number-of-lines 1}
subtitle]] subtitle]]
title [text/text {:weight :bold title [text/text {:weight :bold
:number-of-lines 2 :number-of-lines 0
:align title-align :align title-align
:size :large} :size :large}
title])]) title])])
(defn header [] (defn header [{:keys [left-width right-width]}]
(let [layout (reagent/atom {:left {:width 8 (let [layout (reagent/atom {:left {:width (or left-width 8)
:height header-height} :height header-height}
:right {:width 8 :right {:width (or right-width 8)
:height header-height} :height header-height}
:title {:width 0 :title {:width 0
:height header-height}}) :height header-height}})
@ -130,11 +136,14 @@
:height height}))))] :height height}))))]
(fn [{:keys [left-accessories left-component border-bottom (fn [{:keys [left-accessories left-component border-bottom
right-accessories right-component insets get-layout right-accessories right-component insets get-layout
title subtitle title-component style title-align] title subtitle title-component style title-align
:or {title-align :center}}] background]
:or {title-align :center
border-bottom true}}]
(let [status-bar-height (get insets :top 0) (let [status-bar-height (get insets :top 0)
height (+ header-height status-bar-height)] height (+ header-height status-bar-height)]
[animated/view {:style (header-wrapper-style {:height height [animated/view {:style (header-wrapper-style {:height height
:background background
:border-bottom border-bottom})} :border-bottom border-bottom})}
[rn/view {:pointer-events :box-none [rn/view {:pointer-events :box-none
:height status-bar-height}] :height status-bar-height}]

2
src/status_im/network/ui/edit_network/views.cljs
View File

@ -29,7 +29,7 @@
(let [custom? (= (get-in manage-network [:chain :value]) :custom)] (let [custom? (= (get-in manage-network [:chain :value]) :custom)]
[react/view styles/container [react/view styles/container
[react/keyboard-avoiding-view components.styles/flex [react/keyboard-avoiding-view components.styles/flex
[topbar/topbar {:title :t/add-network}] [topbar/topbar {:title (i18n/label :t/add-network)}]
[react/scroll-view [react/scroll-view
[react/view styles/edit-network-view [react/view styles/edit-network-view
[react/view {:padding-vertical 8} [react/view {:padding-vertical 8}

2
src/status_im/network/ui/network_details/views.cljs
View File

@ -19,7 +19,7 @@
custom? (seq (filter #(= (:id %) id) (:custom networks)))] custom? (seq (filter #(= (:id %) id) (:custom networks)))]
[react/view st/container [react/view st/container
[react/view components.styles/flex [react/view components.styles/flex
[topbar/topbar {:title :t/network-details}] [topbar/topbar {:title (i18n/label :t/network-details)}]
[react/view components.styles/flex [react/view components.styles/flex
[network-settings/network-badge [network-settings/network-badge
{:name name {:name name

9
src/status_im/network/ui/views.cljs
View File

@ -45,9 +45,10 @@
(views/letsubs [current-network [:networks/current-network] (views/letsubs [current-network [:networks/current-network]
networks [:get-networks]] networks [:get-networks]]
[react/view components.styles/flex [react/view components.styles/flex
[topbar/topbar {:title :t/network-settings [topbar/topbar {:title (i18n/label :t/network-settings)
:accessories [{:icon :main-icons/add :right-accessories
:handler #(re-frame/dispatch [::network/add-network-pressed])}]}] [{:icon :main-icons/add
:on-press #(re-frame/dispatch [::network/add-network-pressed])}]}]
[react/view styles/wrapper [react/view styles/wrapper
[list/section-list {:sections [{:title (i18n/label :t/main-networks) [list/section-list {:sections [{:title (i18n/label :t/main-networks)
:key :mainnet :key :mainnet
@ -60,4 +61,4 @@
:data (:custom networks)}] :data (:custom networks)}]
:key-fn :id :key-fn :id
:default-separator? true :default-separator? true
:render-fn (render-network current-network)}]]])) :render-fn (render-network current-network)}]]]))

7
src/status_im/subs.cljs
View File

@ -619,6 +619,13 @@
(not group-chat) (not group-chat)
(assoc :show-input? true))))) (assoc :show-input? true)))))
(re-frame/reg-sub
:current-chat/metadata
:<- [:chats/current-raw-chat]
(fn [current-chat]
(select-keys current-chat
[:public? :group-chat :chat-id :chat-name :color])))
(re-frame/reg-sub (re-frame/reg-sub
:current-chat/one-to-one-chat? :current-chat/one-to-one-chat?
:<- [:chats/current-raw-chat] :<- [:chats/current-raw-chat]

2
src/status_im/ui/components/profile_header/view.cljs
View File

@ -22,7 +22,7 @@
{:margin-bottom (:tiny spacing/spacing) {:margin-bottom (:tiny spacing/spacing)
:height (:small spacing/spacing) :height (:small spacing/spacing)
:border-bottom-width 1 :border-bottom-width 1
:border-bottom-color (:ui-02 @colors/theme)}) :border-bottom-color (:ui-01 @colors/theme)})
(defn header-text [] (defn header-text []
{:padding-left (:base spacing/spacing) {:padding-left (:base spacing/spacing)

24
src/status_im/ui/components/toolbar/actions.cljs
View File

@ -1,24 +0,0 @@
(ns status-im.ui.components.toolbar.actions
(:require [re-frame.core :as re-frame]))
(defn opts [options]
{:icon :main-icons/more
:options options})
(defn back [handler]
{:icon :main-icons/arrow-left
:handler handler
:accessibility-label :back-button})
(def default-handler #(re-frame/dispatch [:navigate-back]))
(def default-back
(back default-handler))
(defn close [handler]
{:icon :main-icons/close
:handler handler
:accessibility-label :done-button})
(def default-close
(close default-handler))

24
src/status_im/ui/components/toolbar/styles.cljs
View File

@ -1,24 +0,0 @@
(ns status-im.ui.components.toolbar.styles
(:require [status-im.ui.components.colors :as colors]))
(def toolbar-height 56)
(def toolbar-title-container
{:justify-content :center
:align-items :center
:flex-direction :column})
(def toolbar-title-text
{:typography :title-bold
:text-align :center})
(def touchable-area
{:width 56
:height 56
:justify-content :center
:align-items :center})
(def item-text
{:color colors/blue})
(def toolbar-text-action-disabled
{:color colors/gray})

150
src/status_im/ui/components/toolbar/view.cljs
View File

@ -1,150 +0,0 @@
(ns status-im.ui.components.toolbar.view
(:require [re-frame.core :as re-frame]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.styles :as styles]
[status-im.utils.core :as utils]))
;; Navigation item
(defn nav-item
[{:keys [handler accessibility-label style] :or {handler #(re-frame/dispatch [:navigate-back])}} item]
[react/touchable-highlight
(merge {:on-press handler
:style styles/touchable-area}
(when accessibility-label
{:accessibility-label accessibility-label}))
[react/view {:style style}
item]])
(defn nav-button
[{:keys [icon icon-opts] :as props}]
[nav-item props
[vector-icons/icon icon icon-opts]])
(defn nav-text
([text] (nav-text nil text))
([{:keys [handler] :as props} text]
[react/touchable-highlight {:on-press (or handler #(re-frame/dispatch [:navigate-back]))}
[react/text (utils/deep-merge {:style styles/item-text}
props)
text]]))
(def default-nav-back [nav-button actions/default-back])
(def default-nav-close [nav-button actions/default-close])
;; Content
(defn content-title
([title] (content-title nil title))
([title-style title]
(content-title title-style title nil nil))
([title-style title subtitle-style subtitle]
(content-title title-style title subtitle-style subtitle nil))
([title-style title subtitle-style subtitle additional-text-props]
[react/view {:style styles/toolbar-title-container}
[react/text (merge {:style (merge styles/toolbar-title-text title-style)
:numberOfLines 1
:ellipsizeMode :tail}
additional-text-props) title]
(when subtitle
[react/text {:style subtitle-style}
subtitle])]))
;; Actions
(defn text-action [{:keys [style handler disabled? accessibility-label]} title]
[react/touchable-highlight {:on-press (when-not disabled?
handler)
:style styles/touchable-area}
[react/text (cond-> {:style (merge styles/item-text
style
(when disabled?
styles/toolbar-text-action-disabled))}
accessibility-label
(assoc :accessibility-label accessibility-label))
title]])
(def blank-action [react/view {:style {:flex 1}}])
(defn- icon-action [icon {:keys [overlay-style] :as icon-opts} handler]
[react/touchable-highlight {:on-press handler
:style styles/touchable-area}
[react/view
(when overlay-style
[react/view overlay-style])
[vector-icons/icon icon icon-opts]]])
(defn- option-actions [icon icon-opts options]
[icon-action icon icon-opts
#(list-selection/show {:options options})])
(defn actions [v]
[react/view {:style {:flex-direction :row}}
(for [{:keys [image icon icon-opts options handler]} v]
(with-meta
(cond (= image :blank)
blank-action
options
[option-actions icon icon-opts options]
:else
[icon-action icon icon-opts handler])
{:key (str "action-" (or image icon))}))])
;;TODO remove
(defn toolbar
([props nav-item content-item] (toolbar props nav-item content-item nil))
([{:keys [style border-bottom-color transparent? browser? chat?]}
nav-item
content-item
action-items]
[react/view {:style (cond-> {:height styles/toolbar-height}
;; i.e. for qr code scanner
(not transparent?)
(assoc :border-bottom-color (or border-bottom-color
colors/gray-lighter)
:border-bottom-width 1)
transparent?
(assoc :background-color :transparent
:z-index 1)
:always
(merge style))}
(when content-item
(cond
browser?
content-item
chat?
[react/view
{:position :absolute
:right 56
:left 56
:top 10}
content-item]
:else
[react/view {:position :absolute
:left 56
:right 56
:height styles/toolbar-height
:justify-content :center
:align-items :center}
content-item]))
(when nav-item
[react/view {:style {:position :absolute
:left 0
:height styles/toolbar-height
:justify-content :center
:align-items :center}}
nav-item])
[react/view {:position :absolute
:right 0
:height styles/toolbar-height
:justify-content :center
:align-items :center}
action-items]]))

89
src/status_im/ui/components/topbar.cljs
View File

@ -1,62 +1,37 @@
(ns status-im.ui.components.topbar (ns status-im.ui.components.topbar
(:require [status-im.ui.components.react :as react] (:require [re-frame.core :as re-frame]
[re-frame.core :as re-frame] [quo.core :as quo]))
[status-im.ui.components.colors :as colors]
[reagent.core :as reagent]
[quo.core :as quo]
[status-im.utils.label :as utils.label]))
(defn default-navigation [modal?] (def default-button-width 48)
{:icon (if modal? :main-icons/close :main-icons/arrow-left)
:accessibility-label :back-button
:handler #(re-frame/dispatch [:navigate-back])})
(defn container [style title-padding & children] (defn default-navigation [modal? {:keys [on-press label icon]}]
(into [] (cond-> {:icon (if modal? :main-icons/close :main-icons/arrow-left)
(concat :accessibility-label :back-button
[react/view {:style style :on-press #(re-frame/dispatch [:navigate-back])}
:on-layout #(reset! title-padding (max (-> ^js % .-nativeEvent .-layout .-width) on-press
@title-padding))}] (assoc :on-press on-press)
children)))
(defn button [value nav?] icon
(let [{:keys [handler icon label accessibility-label]} value] (assoc :icon icon)
[react/view {:padding-horizontal (if nav? 8 0)}
[quo/button (merge {:on-press #(when handler (handler))}
(cond
icon {:type :icon
:theme :icon}
label {:type :secondary})
(when accessibility-label
{:accessibility-label accessibility-label}))
(cond
icon icon
label (utils.label/stringify label))]]))
(def default-title-padding 16) label
;; TODO(Ferossgp): Tobbar should handle safe area (dissoc :icon)
(defn topbar [{:keys [initial-title-padding]}]
(let [title-padding (reagent/atom (or initial-title-padding default-title-padding))] label
(fn [& [{:keys [title navigation accessories show-border? modal? content]}]] (assoc :label label)))
(let [navigation (or navigation (default-navigation modal?))]
[react/view (cond-> {:height 56 :align-items :center :flex-direction :row} (defn topbar [{:keys [navigation use-insets right-accessories modal? content]
show-border? :as props}]
(assoc :border-bottom-width 1 :border-bottom-color colors/gray-lighter)) (let [navigation (if (= navigation :none)
(when-not (= navigation :none) nil
[container {} title-padding [(default-navigation modal? navigation)])]
[button navigation true]]) [quo/safe-area-consumer
[react/view {:flex 1}] (fn [insets]
(when accessories [quo/header (merge {:left-accessories navigation
[container {:flex-direction :row :padding-right 6} title-padding :title-component content
(for [value accessories] :insets (when use-insets insets)
^{:key value} :left-width (when navigation
[button value false])]) default-button-width)}
(when content props
[react/view {:position :absolute :left @title-padding :right @title-padding (when (seq right-accessories)
:top 0 :bottom 0} {:right-accessories right-accessories}))])]))
content])
(when title
[react/view {:position :absolute :left @title-padding :right @title-padding
:top 0 :bottom 0 :align-items :center :justify-content :center}
[react/text {:style {:typography :title-bold :text-align :center} :number-of-lines 2}
(utils.label/stringify title)]])]))))

2
src/status_im/ui/screens/about_app/views.cljs
View File

@ -14,7 +14,7 @@
(views/letsubs [app-version [:get-app-short-version] (views/letsubs [app-version [:get-app-short-version]
node-version [:get-app-node-version]] node-version [:get-app-node-version]]
[react/view {:flex 1 :background-color colors/white} [react/view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/about-app}] [topbar/topbar {:title (i18n/label :t/about-app)}]
[react/scroll-view [react/scroll-view
[quo/list-item [quo/list-item
{:size :small {:size :small

13
src/status_im/ui/screens/add_new/new_chat/views.cljs
View File

@ -64,13 +64,14 @@
{:keys [state ens-name public-key error]} [:contacts/new-identity]] {:keys [state ens-name public-key error]} [:contacts/new-identity]]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:title :t/new-chat {:title (i18n/label :t/new-chat)
:modal? true :modal? true
:accessories [{:icon :qr :right-accessories
:accessibility-label :scan-contact-code-button [{:icon :qr
:handler #(re-frame/dispatch [::qr-scanner/scan-code :accessibility-label :scan-contact-code-button
{:title (i18n/label :t/new-contact) :handler #(re-frame/dispatch [::qr-scanner/scan-code
:handler :contact/qr-code-scanned}])}]}] {:title (i18n/label :t/new-contact)
:handler :contact/qr-code-scanned}])}]}]
[react/view {:flex-direction :row [react/view {:flex-direction :row
:padding 16} :padding 16}
[react/view {:flex 1 [react/view {:flex 1

20
src/status_im/ui/screens/add_new/new_public_chat/view.cljs
View File

@ -9,7 +9,6 @@
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.add-new.new-public-chat.db :as db] [status-im.ui.screens.add-new.new-public-chat.db :as db]
[status-im.chat.models :as chat.models] [status-im.chat.models :as chat.models]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.icons.vector-icons :as icons]) [status-im.ui.components.icons.vector-icons :as icons])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
@ -80,8 +79,9 @@
(views/defview new-public-chat [] (views/defview new-public-chat []
(views/letsubs [topic [:public-group-topic] (views/letsubs [topic [:public-group-topic]
error [:public-chat.new/topic-error-message]] error [:public-chat.new/topic-error-message]]
[react/view components.styles/flex [react/view {:style {:flex 1}}
[topbar/topbar {:title :t/new-public-group-chat :modal? true}] [topbar/topbar {:title (i18n/label :t/new-public-group-chat)
:modal? true}]
[react/scroll-view {:style {:flex 1}} [react/scroll-view {:style {:flex 1}}
[react/view {:padding-horizontal 16} [react/view {:padding-horizontal 16}
[react/view {:align-items :center :padding-vertical 8} [react/view {:align-items :center :padding-vertical 8}
@ -93,16 +93,16 @@
[react/view {:margin-top 32} [react/view {:margin-top 32}
(for [[section chats] (chat.models/chats)] (for [[section chats] (chat.models/chats)]
[react/view [react/view
[react/view {:margin-right 16 :padding-left 16 :padding-vertical 3 [react/view {:margin-right 16 :padding-left 16 :padding-vertical 3
:border-bottom-width 1 :border-bottom-color colors/gray-lighter :border-bottom-width 1 :border-bottom-color colors/gray-lighter
:border-top-width 1 :border-top-color colors/gray-lighter :border-top-width 1 :border-top-color colors/gray-lighter
:border-right-width 1 :border-right-color colors/gray-lighter :border-right-width 1 :border-right-color colors/gray-lighter
:border-bottom-right-radius 14 :border-top-right-radius 14} :border-bottom-right-radius 14 :border-top-right-radius 14}
[quo/text {:weight :medium} section]] [quo/text {:weight :medium} section]]
[react/view {:flex-direction :row :flex-wrap :wrap :margin-vertical 8 :padding-horizontal 16} [react/view {:flex-direction :row :flex-wrap :wrap :margin-vertical 8 :padding-horizontal 16}
(let [lang-topic (get-language-topic) (let [lang-topic (get-language-topic)
chats (if (and (= section-featured section) lang-topic) chats (if (and (= section-featured section) lang-topic)
(conj chats lang-topic) (conj chats lang-topic)
chats)] chats)]
(for [chat chats] (for [chat chats]
(render-topic chat)))]])]]])) (render-topic chat)))]])]]]))

2
src/status_im/ui/screens/advanced_settings/views.cljs
View File

@ -128,7 +128,7 @@
current-log-level [:log-level/current-log-level] current-log-level [:log-level/current-log-level]
current-fleet [:fleets/current-fleet]] current-fleet [:fleets/current-fleet]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/advanced}] [topbar/topbar {:title (i18n/label :t/advanced)}]
[list/flat-list [list/flat-list
{:data (flat-list-data {:data (flat-list-data
{:network-name network-name {:network-name network-name

4
src/status_im/ui/screens/appearance/views.cljs
View File

@ -21,9 +21,9 @@
(views/defview appearance [] (views/defview appearance []
(views/letsubs [{:keys [appearance]} [:multiaccount]] (views/letsubs [{:keys [appearance]} [:multiaccount]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/appearance :show-border? true}] [topbar/topbar {:title (i18n/label :t/appearance)}]
[quo/list-header (i18n/label :t/preference)] [quo/list-header (i18n/label :t/preference)]
[react/view {:flex-direction :row :flex 1 :padding-horizontal 8 [react/view {:flex-direction :row :flex 1 :padding-horizontal 8
:justify-content :space-between :margin-top 16} :justify-content :space-between :margin-top 16}
[button :t/light :theme-light 1 (= 1 appearance)] [button :t/light :theme-light 1 (= 1 appearance)]
[button :t/dark :theme-dark 2 (= 2 appearance)] [button :t/dark :theme-dark 2 (= 2 appearance)]

2
src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs
View File

@ -29,7 +29,7 @@
is-valid? (empty? validation-errors) is-valid? (empty? validation-errors)
invalid-url? (contains? validation-errors :url)] invalid-url? (contains? validation-errors :url)]
[react/keyboard-avoiding-view {:flex 1} [react/keyboard-avoiding-view {:flex 1}
[topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}] [topbar/topbar {:title (i18n/label (if id :t/bootnode-details :t/add-bootnode))}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-bootnode-view [react/view styles/edit-bootnode-view
[react/view {:padding-vertical 8} [react/view {:padding-vertical 8}

10
src/status_im/ui/screens/bootnodes_settings/views.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.bootnodes-settings.views (ns status-im.ui.screens.bootnodes-settings.views
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.screens.profile.components.views :as profile.components] [status-im.ui.screens.profile.components.views :as profile.components]
@ -23,10 +24,11 @@
(views/letsubs [bootnodes-enabled [:custom-bootnodes/enabled?] (views/letsubs [bootnodes-enabled [:custom-bootnodes/enabled?]
bootnodes [:custom-bootnodes/network-bootnodes]] bootnodes [:custom-bootnodes/network-bootnodes]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/bootnodes-settings [topbar/topbar {:title (i18n/label :t/bootnodes-settings)
:accessories [{:icon :main-icons/add :right-accessories
:accessibility-label :add-bootnode [{:icon :main-icons/add
:handler #(navigate-to-add-bootnode nil)}]}] :accessibility-label :add-bootnode
:on-press #(navigate-to-add-bootnode nil)}]}]
[react/view styles/switch-container [react/view styles/switch-container
[profile.components/settings-switch-item [profile.components/settings-switch-item
{:label-kw :t/bootnodes-enabled {:label-kw :t/bootnodes-enabled

4
src/status_im/ui/screens/browser/styles.cljs
View File

@ -39,11 +39,9 @@
:max-height 36 :max-height 36
:background-color colors/gray-lighter :background-color colors/gray-lighter
:padding-horizontal 10 :padding-horizontal 10
:margin-right 16
:align-items :center :align-items :center
:align-self :center :align-self :center
:margin-top 10 :margin-top 10})
:margin-left 56})
(def url-input (def url-input
{:flex 1 {:flex 1

23
src/status_im/ui/screens/browser/views.cljs
View File

@ -10,8 +10,7 @@
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.toolbar.view :as toolbar.view]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.webview :as components.webview] [status-im.ui.components.webview :as components.webview]
[status-im.ui.screens.browser.accounts :as accounts] [status-im.ui.screens.browser.accounts :as accounts]
@ -51,15 +50,17 @@
[icons/icon :main-icons/refresh]])])) [icons/icon :main-icons/refresh]])]))
(defn toolbar [error? url url-original browser browser-id url-editing? unsafe?] (defn toolbar [error? url url-original browser browser-id url-editing? unsafe?]
[toolbar.view/toolbar [topbar/topbar
{:browser? true} {:navigation {:icon :main-icons/close
[toolbar.view/nav-button :on-press (fn []
(actions/close (fn [] (debounce/clear :browser/navigation-state-changed)
(debounce/clear :browser/navigation-state-changed) (re-frame/dispatch [:navigate-back])
(re-frame/dispatch [:navigate-back]) (when error?
(when error? (re-frame/dispatch [:browser.ui/remove-browser-pressed browser-id])))}
(re-frame/dispatch [:browser.ui/remove-browser-pressed browser-id]))))] :title-align :left
[toolbar-content url url-original browser url-editing? unsafe?]]) :title-component
[react/view {:flex 1}
[toolbar-content url url-original browser url-editing? unsafe?]]}])
(defn- web-view-error [_ _ desc] (defn- web-view-error [_ _ desc]
(reagent/as-element (reagent/as-element

30
src/status_im/ui/screens/chat/views.cljs
View File

@ -30,22 +30,18 @@
[status-im.ui.screens.chat.components.input :as components] [status-im.ui.screens.chat.components.input :as components]
[status-im.ui.screens.chat.message.datemark :as message-datemark])) [status-im.ui.screens.chat.message.datemark :as message-datemark]))
(defn topbar [current-chat] (defn topbar []
[topbar/topbar (let [current-chat @(re-frame/subscribe [:current-chat/metadata])]
{:content [toolbar-content/toolbar-content-view] [topbar/topbar
:show-border? true {:content [toolbar-content/toolbar-content-view]
:initial-title-padding 56 :navigation {:on-press #(re-frame/dispatch [:navigate-to :home])}
:navigation {:icon :main-icons/arrow-left :right-accessories [{:icon :main-icons/more
:accessibility-label :back-button :accessibility-label :chat-menu-button
:handler :on-press
#(re-frame/dispatch [:navigate-to :home])} #(re-frame/dispatch [:bottom-sheet/show-sheet
:accessories [{:icon :main-icons/more {:content (fn []
:accessibility-label :chat-menu-button [sheets/actions current-chat])
:handler :height 256}])}]}]))
#(re-frame/dispatch [:bottom-sheet/show-sheet
{:content (fn []
[sheets/actions current-chat])
:height 256}])}]}])
(defn add-contact-bar [public-key] (defn add-contact-bar [public-key]
(let [added? @(re-frame/subscribe [:contacts/contact-added? public-key])] (let [added? @(re-frame/subscribe [:contacts/contact-added? public-key])]
@ -227,7 +223,7 @@
@(re-frame/subscribe [:chats/current-chat])] @(re-frame/subscribe [:chats/current-chat])]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[connectivity/connectivity [connectivity/connectivity
[topbar current-chat] [topbar]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
(when-not group-chat (when-not group-chat
[add-contact-bar chat-id]) [add-contact-bar chat-id])

4
src/status_im/ui/screens/contacts_list/views.cljs
View File

@ -31,7 +31,7 @@
(letsubs [blocked-contacts-count [:contacts/blocked-count] (letsubs [blocked-contacts-count [:contacts/blocked-count]
contacts [:contacts/active]] contacts [:contacts/active]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/contacts}] [topbar/topbar {:title (i18n/label :t/contacts)}]
[react/scroll-view {:flex 1} [react/scroll-view {:flex 1}
[add-new-contact] [add-new-contact]
(when (pos? blocked-contacts-count) (when (pos? blocked-contacts-count)
@ -59,7 +59,7 @@
(letsubs [blocked-contacts [:contacts/blocked]] (letsubs [blocked-contacts [:contacts/blocked]]
[react/view {:flex 1 [react/view {:flex 1
:background-color colors/white} :background-color colors/white}
[topbar/topbar {:title :t/blocked-users}] [topbar/topbar {:title (i18n/label :t/blocked-users)}]
[react/scroll-view {:style {:background-color colors/white [react/scroll-view {:style {:background-color colors/white
:padding-vertical 8}} :padding-vertical 8}}
[list.views/flat-list [list.views/flat-list

3
src/status_im/ui/screens/currency_settings/views.cljs
View File

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :as views]) (:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
@ -30,7 +31,7 @@
(re-frame/dispatch [:search/currency-filter-changed nil]) (re-frame/dispatch [:search/currency-filter-changed nil])
(reset! search-active? false))} (reset! search-active? false))}
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/main-currency}] [topbar/topbar {:title (i18n/label :t/main-currency)}]
[react/view {:flex 1} [react/view {:flex 1}
[react/view {:padding-horizontal 16 [react/view {:padding-horizontal 16
:padding-vertical 10} :padding-vertical 10}

2
src/status_im/ui/screens/dapps_permissions/views.cljs
View File

@ -34,7 +34,7 @@
(views/defview dapps-permissions [] (views/defview dapps-permissions []
(views/letsubs [permissions [:dapps/permissions]] (views/letsubs [permissions [:dapps/permissions]]
[react/view {:flex 1 :background-color colors/white} [react/view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/dapps-permissions}] [topbar/topbar {:title (i18n/label :t/dapps-permissions)}]
[list/flat-list [list/flat-list
{:data (vec (map prepare-items (vals permissions))) {:data (vec (map prepare-items (vals permissions)))
:key-fn (fn [_ i] (str i)) :key-fn (fn [_ i] (str i))

6
src/status_im/ui/screens/ens/views.cljs
View File

@ -80,7 +80,7 @@
{:color colors/white-persist}]]) {:color colors/white-persist}]])
(defn- toolbar [] (defn- toolbar []
[topbar/topbar {:title :t/ens-your-username}]) [topbar/topbar {:title (i18n/label :t/ens-your-username)}])
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;; SEARCH SCREEN ;;; SEARCH SCREEN
@ -423,7 +423,7 @@
(views/defview terms [] (views/defview terms []
(views/letsubs [{:keys [contract]} [:get-screen-params :ens-terms]] (views/letsubs [{:keys [contract]} [:get-screen-params :ens-terms]]
[react/scroll-view {:style {:flex 1}} [react/scroll-view {:style {:flex 1}}
[topbar/topbar {:title :t/ens-terms-registration}] [topbar/topbar {:title (i18n/label :t/ens-terms-registration)}]
[react/view {:style {:height 136 :background-color colors/gray-lighter :justify-content :center :align-items :center}} [react/view {:style {:height 136 :background-color colors/gray-lighter :justify-content :center :align-items :center}}
[react/text {:style {:text-align :center :typography :header :letter-spacing -0.275}} [react/text {:style {:text-align :center :typography :header :letter-spacing -0.275}}
(i18n/label :t/ens-terms-header)]] (i18n/label :t/ens-terms-header)]]
@ -680,7 +680,7 @@
(views/defview main [] (views/defview main []
(views/letsubs [{:keys [names multiaccount show? registrations]} [:ens.main/screen]] (views/letsubs [{:keys [names multiaccount show? registrations]} [:ens.main/screen]]
[react/keyboard-avoiding-view {:style {:flex 1}} [react/keyboard-avoiding-view {:style {:flex 1}}
[topbar/topbar {:title :t/ens-usernames}] [topbar/topbar {:title (i18n/label :t/ens-usernames)}]
(if (or (seq names) registrations) (if (or (seq names) registrations)
[registered names multiaccount show? registrations] [registered names multiaccount show? registrations]
[welcome])])) [welcome])]))

3
src/status_im/ui/screens/fleet_settings/views.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.fleet-settings.views (ns status-im.ui.screens.fleet-settings.views
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.node.core :as node] [status-im.node.core :as node]
[status-im.i18n :as i18n]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
@ -35,7 +36,7 @@
(views/letsubs [custom-fleets [:fleets/custom-fleets] (views/letsubs [custom-fleets [:fleets/custom-fleets]
current-fleet [:fleets/current-fleet]] current-fleet [:fleets/current-fleet]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/fleet-settings}] [topbar/topbar {:title (i18n/label :t/fleet-settings)}]
[react/view styles/wrapper [react/view styles/wrapper
[list/flat-list {:data (fleets custom-fleets) [list/flat-list {:data (fleets custom-fleets)
:default-separator? false :default-separator? false

2
src/status_im/ui/screens/glossary/view.cljs
View File

@ -50,7 +50,7 @@
:data v})))] :data v})))]
[react/view {:flex 1 [react/view {:flex 1
:background-color colors/white} :background-color colors/white}
[topbar/topbar {:title :t/glossary}] [topbar/topbar {:title (i18n/label :t/glossary)}]
[list/section-list [list/section-list
{:contentContainerStyle {:padding-horizontal 16 {:contentContainerStyle {:padding-horizontal 16
:padding-bottom 16} :padding-bottom 16}

62
src/status_im/ui/screens/group/views.cljs
View File

@ -6,7 +6,6 @@
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.chat-icon.screen :as chat-icon] [status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.contact.contact :as contact] [status-im.ui.components.contact.contact :as contact]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.keyboard-avoid-presentation [status-im.ui.components.keyboard-avoid-presentation
@ -16,8 +15,7 @@
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.search-input.view :as search] [status-im.ui.components.search-input.view :as search]
[status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.group.styles :as styles] [status-im.ui.screens.group.styles :as styles]
[quo.core :as quo] [quo.core :as quo]
@ -100,17 +98,11 @@
(let [save-btn-enabled? (and (spec/valid? :global/not-empty-string group-name) (pos? (count contacts)))] (let [save-btn-enabled? (and (spec/valid? :global/not-empty-string group-name) (pos? (count contacts)))]
[kb-presentation/keyboard-avoiding-view {:style styles/group-container} [kb-presentation/keyboard-avoiding-view {:style styles/group-container}
[react/view {:flex 1} [react/view {:flex 1}
[toolbar/toolbar {} [topbar/topbar {:use-insets false
toolbar/default-nav-back :title (i18n/label :t/new-group-chat)
[react/view {:style styles/toolbar-header-container} :subtitle (i18n/label :t/group-chat-members-count
[react/view {:selected (inc (count contacts))
[react/text (i18n/label :t/new-group-chat)]] :max constants/max-group-chat-participants})}]
[react/view
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (inc (count contacts))
:max constants/max-group-chat-participants})]]]]
[react/view {:style {:padding-top 16 [react/view {:style {:padding-top 16
:flex 1}} :flex 1}}
[react/view {:style {:padding-horizontal 16}} [react/view {:style {:padding-horizontal 16}}
@ -130,7 +122,7 @@
:bounces false :bounces false
:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always
:enable-empty-sections true}]]] :enable-empty-sections true}]]]
[bottom-toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true
:left :left
[quo/button {:type :secondary [quo/button {:type :secondary
@ -165,23 +157,19 @@
(views/letsubs [contacts [:contacts/active] (views/letsubs [contacts [:contacts/active]
selected-contacts-count [:selected-contacts-count]] selected-contacts-count [:selected-contacts-count]]
[kb-presentation/keyboard-avoiding-view {:style styles/group-container} [kb-presentation/keyboard-avoiding-view {:style styles/group-container}
[toolbar/toolbar {:border-bottom-color colors/white} [topbar/topbar {:use-insets false
toolbar/default-nav-back :border-bottom false
[react/view {:style styles/toolbar-header-container} :title (i18n/label :t/new-group-chat)
[react/view :subtitle (i18n/label :t/group-chat-members-count
[react/text (i18n/label :t/new-group-chat)]] {:selected (inc selected-contacts-count)
[react/view :max constants/max-group-chat-participants})}]
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (inc selected-contacts-count)
:max constants/max-group-chat-participants})]]]]
[searchable-contact-list [searchable-contact-list
{:contacts contacts {:contacts contacts
:no-contacts-label (i18n/label :t/group-chat-no-contacts) :no-contacts-label (i18n/label :t/group-chat-no-contacts)
:toggle-fn group-toggle-contact :toggle-fn group-toggle-contact
:allow-new-users? (< selected-contacts-count :allow-new-users? (< selected-contacts-count
(dec constants/max-group-chat-participants))}] (dec constants/max-group-chat-participants))}]
[bottom-toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true
:right :right
[quo/button {:type :secondary [quo/button {:type :secondary
@ -198,16 +186,12 @@
selected-contacts-count [:selected-participants-count]] selected-contacts-count [:selected-participants-count]]
(let [current-participants-count (count (:contacts current-chat))] (let [current-participants-count (count (:contacts current-chat))]
[kb-presentation/keyboard-avoiding-view {:style styles/group-container} [kb-presentation/keyboard-avoiding-view {:style styles/group-container}
[toolbar/toolbar {:border-bottom-color colors/white} [topbar/topbar {:use-insets false
toolbar/default-nav-back :border-bottom false
[react/view {:style styles/toolbar-header-container} :title (i18n/label :t/add-members)
[react/view :subtitle (i18n/label :t/group-chat-members-count
[react/text (i18n/label :t/add-members)]] {:selected (+ current-participants-count selected-contacts-count)
[react/view :max constants/max-group-chat-participants})}]
[react/text {:style (styles/toolbar-sub-header)}
(i18n/label :t/group-chat-members-count
{:selected (+ current-participants-count selected-contacts-count)
:max constants/max-group-chat-participants})]]]]
[searchable-contact-list [searchable-contact-list
{:contacts contacts {:contacts contacts
:no-contacts-label (i18n/label :t/group-chat-all-contacts-invited) :no-contacts-label (i18n/label :t/group-chat-all-contacts-invited)
@ -215,7 +199,7 @@
:allow-new-users? (< (+ current-participants-count :allow-new-users? (< (+ current-participants-count
selected-contacts-count) selected-contacts-count)
constants/max-group-chat-participants)}] constants/max-group-chat-participants)}]
[bottom-toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true
:center :center
[quo/button {:type :secondary [quo/button {:type :secondary
@ -229,7 +213,7 @@
new-group-chat-name (reagent/atom nil)] new-group-chat-name (reagent/atom nil)]
[kb-presentation/keyboard-avoiding-view {:style styles/group-container} [kb-presentation/keyboard-avoiding-view {:style styles/group-container}
[topbar/topbar [topbar/topbar
{:title :t/edit-group {:title (i18n/label :t/edit-group)
:modal? true}] :modal? true}]
[react/scroll-view {:style {:padding 16 [react/scroll-view {:style {:padding 16
:flex 1}} :flex 1}}
@ -242,7 +226,7 @@
:accessibility-label :new-chat-name :accessibility-label :new-chat-name
:return-key-type :go}]] :return-key-type :go}]]
[react/view {:style {:flex 1}}] [react/view {:style {:flex 1}}]
[bottom-toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true
:center :center
[quo/button {:type :secondary [quo/button {:type :secondary

2
src/status_im/ui/screens/help_center/views.cljs
View File

@ -39,7 +39,7 @@
(defn help-center [] (defn help-center []
[react/view {:flex 1 :background-color colors/white} [react/view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/need-help}] [topbar/topbar {:title (i18n/label :t/need-help)}]
[list/flat-list [list/flat-list
{:data data {:data data
:key-fn (fn [_ i] (str i)) :key-fn (fn [_ i] (str i))

4
src/status_im/ui/screens/home/views.cljs
View File

@ -172,7 +172,7 @@
(defn home [] (defn home []
[react/keyboard-avoiding-view {:style styles/home-container} [react/keyboard-avoiding-view {:style styles/home-container}
[connectivity/connectivity [connectivity/connectivity
[topbar/topbar {:title :t/chat :navigation :none [topbar/topbar {:title (i18n/label :t/chat)
:show-border? true}] :navigation :none}]
[chats-list]] [chats-list]]
[plus-button]]) [plus-button]])

3
src/status_im/ui/screens/intro/password.cljs
View File

@ -33,7 +33,8 @@
(reset! show-error true))))] (reset! show-error true))))]
[rn/keyboard-avoiding-view {:flex 1} [rn/keyboard-avoiding-view {:flex 1}
[topbar/topbar [topbar/topbar
{:navigation {:border-bottom false
:navigation
{:icon :main-icons/back {:icon :main-icons/back
:accessibility-label :back-button :accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}] :handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]

37
src/status_im/ui/screens/intro/views.cljs
View File

@ -317,10 +317,9 @@
(letsubs [wizard-state [:intro-wizard/generate-key]] (letsubs [wizard-state [:intro-wizard/generate-key]]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:navigation {:border-bottom false
{:icon :main-icons/arrow-left :navigation
:accessibility-label :back-button {:on-press #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between}} :justify-content :space-between}}
[top-bar {:step :generate-key}] [top-bar {:step :generate-key}]
@ -333,9 +332,10 @@
(letsubs [wizard-state [:intro-wizard/choose-key]] (letsubs [wizard-state [:intro-wizard/choose-key]]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:navigation {:border-bottom false
{:label :t/cancel :navigation
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}] {:label (i18n/label :t/cancel)
:on-press #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between}} :justify-content :space-between}}
[top-bar {:step :choose-key}] [top-bar {:step :choose-key}]
@ -349,12 +349,9 @@
[topbar/topbar [topbar/topbar
{:navigation {:navigation
(if (:recovering? wizard-state) (if (:recovering? wizard-state)
{:label :t/cancel {:label (i18n/label :t/cancel)
:accessibility-label :back-button :on-press #(re-frame/dispatch [:intro-wizard/navigate-back])}
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])} {:on-press #(re-frame/dispatch [:intro-wizard/navigate-back])})}]
{:icon :main-icons/arrow-left
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])})}]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between}} :justify-content :space-between}}
[top-bar {:step :select-key-storage}] [top-bar {:step :select-key-storage}]
@ -366,10 +363,9 @@
(letsubs [wizard-state [:intro-wizard/enter-phrase]] (letsubs [wizard-state [:intro-wizard/enter-phrase]]
[react/keyboard-avoiding-view {:style {:flex 1}} [react/keyboard-avoiding-view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:navigation {:border-bottom false
{:icon :main-icons/arrow-left :navigation
:accessibility-label :back-button {:on-press #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between}} :justify-content :space-between}}
[top-bar {:step :enter-phrase}] [top-bar {:step :enter-phrase}]
@ -383,10 +379,9 @@
existing-account? [:intro-wizard/recover-existing-account?]] existing-account? [:intro-wizard/recover-existing-account?]]
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:navigation {:border-bottom false
{:icon :main-icons/arrow-left :navigation
:accessibility-label :back-button {:on-press #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:justify-content :space-between}} :justify-content :space-between}}
[top-bar {:step :recovery-success}] [top-bar {:step :recovery-success}]

59
src/status_im/ui/screens/keycard/onboarding/views.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.keycard.onboarding.views (ns status-im.ui.screens.keycard.onboarding.views
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.keycard.onboarding :as keycard.onboarding] [status-im.keycard.onboarding :as keycard.onboarding]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar :as bottom-toolbar]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
@ -93,16 +92,10 @@
steps [:keycard-flow-steps] steps [:keycard-flow-steps]
puk-code [:keycard-puk-code]] puk-code [:keycard-puk-code]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed])
{:transparent? true} :label (i18n/label :t/cancel)}
[toolbar/nav-text :title (i18n/label :t/step-i-of-n {:step "2"
{:handler #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) :number steps})}]
:style {:padding-left 21}}
(i18n/label :t/cancel)]
[react/text {:style {:color colors/gray}
:accessibility-label :cancel-keycard-setup}
(i18n/label :t/step-i-of-n {:step "2"
:number steps})]]
[react/scroll-view {:content-container-style {:flex-grow 1 [react/scroll-view {:content-container-style {:flex-grow 1
:justify-content :space-between}} :justify-content :space-between}}
[react/view {:flex 1 [react/view {:flex 1
@ -188,16 +181,11 @@
small-screen? [:dimensions/small-screen?] small-screen? [:dimensions/small-screen?]
setup-step [:keycard-setup-step]] setup-step [:keycard-setup-step]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed])
{:transparent? true} :label (i18n/label :t/cancel)}
[toolbar/nav-text :title (when-not (= setup-step :loading-keys)
{:handler #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) (i18n/label :t/step-i-of-n {:number steps
:style {:padding-left 21}} :step 1}))}]
(i18n/label :t/cancel)]
(when-not (= setup-step :loading-keys)
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:number steps
:step 1})])]
[react/view {:flex 1 [react/view {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between
@ -234,15 +222,11 @@
(defview recovery-phrase [] (defview recovery-phrase []
(letsubs [mnemonic [:keycard-mnemonic]] (letsubs [mnemonic [:keycard-mnemonic]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar
{:transparent? true} {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed])
[toolbar/nav-text :label (i18n/label :t/cancel)}
{:handler #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) :title (i18n/label :t/step-i-of-n {:step "3"
:style {:padding-left 21}} :number "3"})}]
(i18n/label :t/cancel)]
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:step "3"
:number "3"})]]
[react/scroll-view {:content-container-style {:flex-grow 1 [react/scroll-view {:content-container-style {:flex-grow 1
:justify-content :space-between}} :justify-content :space-between}}
[react/view {:flex-direction :column [react/view {:flex-direction :column
@ -299,15 +283,12 @@
error [:keycard-recovery-phrase-confirm-error]] error [:keycard-recovery-phrase-confirm-error]]
(let [{:keys [idx]} word] (let [{:keys [idx]} word]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar
{:transparent? true} {:navigation {:on-press #(re-frame/dispatch [::keycard.onboarding/cancel-pressed])
[toolbar/nav-text :accessibility-label :cancel-keycard-setup
{:handler #(re-frame/dispatch [::keycard.onboarding/cancel-pressed]) :label (i18n/label :t/cancel)}
:accessibility-label :cancel-keycard-setup :title (i18n/label :t/step-i-of-n {:step "3"
:style {:padding-left 21}} :number "3"})}]
(i18n/label :t/cancel)]
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:step 3 :number 3})]]
[react/view {:flex 1 [react/view {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between

25
src/status_im/ui/screens/keycard/recovery/views.cljs
View File

@ -7,7 +7,6 @@
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.toolbar :as bottom-toolbar] [status-im.ui.components.toolbar :as bottom-toolbar]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.tooltip.views :as tooltip] [status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.keycard.pin.views :as pin.views] [status-im.ui.screens.keycard.pin.views :as pin.views]
@ -74,16 +73,12 @@
small-screen? [:dimensions/small-screen?] small-screen? [:dimensions/small-screen?]
retry-counter [:keycard/retry-counter]] retry-counter [:keycard/retry-counter]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar
{:transparent? true} {:navigation {:on-press #(re-frame/dispatch [::keycard.recovery/cancel-pressed])
[toolbar/nav-text :label (i18n/label :t/cancel)}
{:handler #(re-frame/dispatch [::keycard.recovery/cancel-pressed]) :title (when-not (#{:frozen-card :blocked-card} status)
:style {:padding-left 21}} (i18n/label :t/step-i-of-n {:number 2
(i18n/label :t/cancel)] :step 2}))}]
(when-not (#{:frozen-card :blocked-card} status)
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:number 2
:step 2})])]
(case status (case status
:frozen-card :frozen-card
[keycard.views/frozen-card] [keycard.views/frozen-card]
@ -114,12 +109,8 @@
error [:keycard-setup-error] error [:keycard-setup-error]
{:keys [free-pairing-slots]} [:keycard-application-info]] {:keys [free-pairing-slots]} [:keycard-application-info]]
[react/view styles/container [react/view styles/container
[toolbar/toolbar [topbar/topbar {:title (i18n/label :t/step-i-of-n {:number 2
{:transparent? true} :step 1})}]
toolbar/default-nav-back
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:number 2
:step 1})]]
[react/view {:flex 1 [react/view {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between

4
src/status_im/ui/screens/keycard/settings/views.cljs
View File

@ -30,7 +30,7 @@
(defview reset-card [] (defview reset-card []
(letsubs [disabled? [:keycard-reset-card-disabled?]] (letsubs [disabled? [:keycard-reset-card-disabled?]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/reset-card}] [topbar/topbar {:title (i18n/label :t/reset-card)}]
[react/view {:flex 1 [react/view {:flex 1
:background-color colors/white} :background-color colors/white}
[react/view {:margin-top 71 [react/view {:margin-top 71
@ -67,7 +67,7 @@
puk-retry-counter [:keycard/puk-retry-counter] puk-retry-counter [:keycard/puk-retry-counter]
pairing [:keycard-multiaccount-pairing]] pairing [:keycard-multiaccount-pairing]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/status-keycard}] [topbar/topbar {:title (i18n/label :t/status-keycard)}]
[react/scroll-view {:flex 1} [react/scroll-view {:flex 1}
[react/view {:margin-top 47 [react/view {:margin-top 47
:align-items :center} :align-items :center}

48
src/status_im/ui/screens/keycard/views.cljs
View File

@ -246,16 +246,6 @@
:on-press #(.openURL ^js react/linking "https://status.im/faq/#keycard")} :on-press #(.openURL ^js react/linking "https://status.im/faq/#keycard")}
(i18n/label :t/learn-more)]]]]) (i18n/label :t/learn-more)]]]])
(defn- step-view [step]
[react/view
{:style {:flex 1
:justify-content :center
:align-items :center}}
[react/text {:style {:typography :title-bold :text-align :center}}
(i18n/label :t/keycard-reset-passcode)]
[react/text {:style {:color colors/gray}}
(i18n/label :t/keycard-enter-new-passcode {:step step})]])
(defview login-pin [{:keys [back-button-handler (defview login-pin [{:keys [back-button-handler
hide-login-actions? hide-login-actions?
default-enter-step] default-enter-step]
@ -275,30 +265,22 @@
enter-step (or enter-step default-enter-step)] enter-step (or enter-step default-enter-step)]
[react/view styles/container [react/view styles/container
[topbar/topbar [topbar/topbar
{:accessories [(when-not hide-login-actions? (merge
{:icon :main-icons/more {:right-accessories [(when-not hide-login-actions?
:handler #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])})] {:icon :main-icons/more
:content (cond :on-press #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])})]
(= :reset enter-step) :title (cond
[step-view 1] (#{:reset :reset-confirmation} enter-step)
(i18n/label :t/keycard-reset-passcode)
(= :reset-confirmation enter-step) (and (= :puk enter-step)
[step-view 2] (not= :blocked-card status))
(i18n/label :t/enter-puk-code))
(and (= :puk enter-step) :navigation {:on-press #(re-frame/dispatch
(not= :blocked-card status)) [(or back-button-handler
[react/view :keycard.login.pin.ui/cancel-pressed)])}}
{:style {:flex 1 (when (#{:reset :reset-confirmation} enter-step)
:justify-content :center {:subtitle (i18n/label :t/keycard-enter-new-passcode {:step (if (= :reset enter-step) 1 2)})}))]
:align-items :center}}
[react/text {:style {:color colors/gray}}
(i18n/label :t/enter-puk-code)]])
:navigation
{:icon :main-icons/arrow-left
:accessibility-label :back-button
:handler #(re-frame/dispatch
[(or back-button-handler
:keycard.login.pin.ui/cancel-pressed)])}}]
[react/view {:flex 1 [react/view {:flex 1
:flex-direction :column :flex-direction :column
:justify-content :space-between :justify-content :space-between

8
src/status_im/ui/screens/language_settings/views.cljs
View File

@ -1,8 +0,0 @@
(ns status-im.ui.screens.language-settings.views
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar]))
(defn language-settings []
[react/view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/language}]])

3
src/status_im/ui/screens/log_level_settings/views.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.log-level-settings.views (ns status-im.ui.screens.log-level-settings.views
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
@ -44,7 +45,7 @@
(views/defview log-level-settings [] (views/defview log-level-settings []
(views/letsubs [current-log-level [:log-level/current-log-level]] (views/letsubs [current-log-level [:log-level/current-log-level]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/log-level-settings}] [topbar/topbar {:title (i18n/label :t/log-level-settings)}]
[react/view styles/wrapper [react/view styles/wrapper
[list/flat-list {:data log-levels [list/flat-list {:data log-levels
:default-separator? false :default-separator? false

2
src/status_im/ui/screens/mobile_network_settings/view.cljs
View File

@ -24,7 +24,7 @@
remember-syncing-choice?]} remember-syncing-choice?]}
[:multiaccount]] [:multiaccount]]
[react/view {:style styles/container} [react/view {:style styles/container}
[topbar/topbar {:title :t/mobile-network-settings}] [topbar/topbar {:title (i18n/label :t/mobile-network-settings)}]
[react/view {:style styles/switch-container} [react/view {:style styles/switch-container}
[profile.components/settings-switch-item [profile.components/settings-switch-item
{:label-kw :t/mobile-network-use-mobile {:label-kw :t/mobile-network-use-mobile

2
src/status_im/ui/screens/multiaccounts/login/views.cljs
View File

@ -44,7 +44,7 @@
view-id [:view-id] view-id [:view-id]
supported-biometric-auth [:supported-biometric-auth]] supported-biometric-auth [:supported-biometric-auth]]
[react/keyboard-avoiding-view {:style ast/multiaccounts-view} [react/keyboard-avoiding-view {:style ast/multiaccounts-view}
[topbar/topbar {}] [topbar/topbar {:border-bottom false}]
[react/scroll-view {:keyboardShouldPersistTaps :always [react/scroll-view {:keyboardShouldPersistTaps :always
:style styles/login-view} :style styles/login-view}
[react/view styles/login-badge-container [react/view styles/login-badge-container

12
src/status_im/ui/screens/multiaccounts/views.cljs
View File

@ -37,12 +37,12 @@
(defview multiaccounts [] (defview multiaccounts []
(letsubs [multiaccounts [:multiaccounts/multiaccounts]] (letsubs [multiaccounts [:multiaccounts/multiaccounts]]
[react/view styles/multiaccounts-view [react/view styles/multiaccounts-view
[topbar/topbar {:show-border? true [topbar/topbar {:navigation :none
:navigation :none :title (i18n/label :t/your-keys)
:title (i18n/label :t/your-keys) :right-accessories [{:icon :more
:accessories [{:icon :more :accessibility-label :your-keys-more-icon
:accessibility-label :your-keys-more-icon :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
:handler #(re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/actions-sheet}])}]}] {:content sheets/actions-sheet}])}]}]
[react/view styles/multiaccounts-container [react/view styles/multiaccounts-container
[list/flat-list {:data (vals multiaccounts) [list/flat-list {:data (vals multiaccounts)
:contentContainerStyle styles/multiaccounts-list-container :contentContainerStyle styles/multiaccounts-list-container

3
src/status_im/ui/screens/network_info/views.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.network-info.views (ns status-im.ui.screens.network-info.views
(:require [status-im.ui.components.topbar :as topbar] (:require [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.i18n :as i18n]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -81,5 +82,5 @@
(defn network-info [] (defn network-info []
[react/view components.styles/flex [react/view components.styles/flex
[topbar/topbar [topbar/topbar
{:title :t/network-info}] {:title (i18n/label :t/network-info)}]
[check-lag]]) [check-lag]])

2
src/status_im/ui/screens/offline_messaging_settings/edit_mailserver/views.cljs
View File

@ -38,7 +38,7 @@
(empty? validation-errors)) (empty? validation-errors))
invalid-url? (contains? validation-errors :url)] invalid-url? (contains? validation-errors :url)]
[react/keyboard-avoiding-view {:style {:flex 1}} [react/keyboard-avoiding-view {:style {:flex 1}}
[topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}] [topbar/topbar {:title (i18n/label (if id :t/mailserver-details :t/add-mailserver))}]
[react/scroll-view {:keyboard-should-persist-taps :handled} [react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-mailserver-view [react/view styles/edit-mailserver-view
[react/view {:padding-vertical 8} [react/view {:padding-vertical 8}

7
src/status_im/ui/screens/offline_messaging_settings/views.cljs
View File

@ -48,9 +48,10 @@
mailservers [:mailserver/fleet-mailservers]] mailservers [:mailserver/fleet-mailservers]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar [topbar/topbar
{:title :t/offline-messaging-settings {:title (i18n/label :t/offline-messaging-settings)
:accessories [{:icon :main-icons/add :right-accessories
:handler #(re-frame/dispatch [:mailserver.ui/add-pressed])}]}] [{:icon :main-icons/add
:on-press #(re-frame/dispatch [:mailserver.ui/add-pressed])}]}]
[react/view styles/wrapper [react/view styles/wrapper
[pinned-state preferred-mailserver-id] [pinned-state preferred-mailserver-id]
[list/flat-list {:data (vals mailservers) [list/flat-list {:data (vals mailservers)

2
src/status_im/ui/screens/pairing/views.cljs
View File

@ -163,7 +163,7 @@
(views/defview installations [] (views/defview installations []
(views/letsubs [installations [:pairing/installations]] (views/letsubs [installations [:pairing/installations]]
[react/view {:flex 1} [react/view {:flex 1}
[topbar/topbar {:title :t/devices}] [topbar/topbar {:title (i18n/label :t/devices)}]
[react/scroll-view [react/scroll-view
(if (string/blank? (-> installations first :name)) (if (string/blank? (-> installations first :name))
[edit-installation-name] [edit-installation-name]

2
src/status_im/ui/screens/privacy_and_security_settings/views.cljs
View File

@ -19,7 +19,7 @@
auth-method [:auth-method] auth-method [:auth-method]
keycard? [:keycard-multiaccount?]] keycard? [:keycard-multiaccount?]]
[react/view {:flex 1 :background-color colors/white} [react/view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/privacy-and-security}] [topbar/topbar {:title (i18n/label :t/privacy-and-security)}]
[react/scroll-view {:padding-vertical 8} [react/scroll-view {:padding-vertical 8}
[quo/list-header (i18n/label :t/security)] [quo/list-header (i18n/label :t/security)]
[quo/list-item {:size :small [quo/list-item {:size :small

25
src/status_im/ui/screens/profile/seed/views.cljs
View File

@ -1,8 +1,7 @@
(ns status-im.ui.screens.profile.seed.views (ns status-im.ui.screens.profile.seed.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as not.toolbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -141,18 +140,14 @@
(letsubs [current-multiaccount [:multiaccount] (letsubs [current-multiaccount [:multiaccount]
{:keys [step first-word second-word error word]} [:my-profile/recovery]] {:keys [step first-word second-word error word]} [:my-profile/recovery]]
[react/keyboard-avoiding-view {:style {:flex 1}} [react/keyboard-avoiding-view {:style {:flex 1}}
[not.toolbar/toolbar [topbar/topbar {:title (i18n/label :t/backup-recovery-phrase)
nil :subtitle (i18n/label :t/step-i-of-n {:step (steps-numbers step) :number 3})
(when-not (= :finish step) :navigation (if (= :finish step)
(not.toolbar/nav-button (actions/back #(step-back step)))) :none
[react/view {:on-press #(step-back step)})}]
[react/text {:style styles/backup-seed}
(i18n/label :t/backup-recovery-phrase)]
[react/text {:style styles/step-n}
(i18n/label :t/step-i-of-n {:step (steps-numbers step) :number 3})]]]
(case step (case step
:intro [intro] :intro [intro]
:12-words [twelve-words current-multiaccount] :12-words [twelve-words current-multiaccount]
:first-word [enter-word step first-word error word] :first-word [enter-word step first-word error word]
:second-word [enter-word step second-word error word] :second-word [enter-word step second-word error word]
:finish [finish])])) :finish [finish])]))

74
src/status_im/ui/screens/profile/tribute_to_talk/views.cljs
View File

@ -6,8 +6,7 @@
[quo.core :as quo] [quo.core :as quo]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.toolbar.view :as not.toolbar]
[status-im.ui.components.toolbar :as toolbar] [status-im.ui.components.toolbar :as toolbar]
[status-im.ui.screens.profile.tribute-to-talk.styles :as styles]) [status-im.ui.screens.profile.tribute-to-talk.styles :as styles])
(:require-macros [status-im.utils.views :refer [defview letsubs]])) (:require-macros [status-im.utils.views :refer [defview letsubs]]))
@ -278,15 +277,12 @@
(defn learn-more [owner?] (defn learn-more [owner?]
[react/view {:flex 1} [react/view {:flex 1}
(when-not owner? (when-not owner?
[not.toolbar/toolbar nil not.toolbar/default-nav-close [topbar/topbar {:modal? true
[react/view :title (i18n/label :t/tribute-to-talk)
[react/text {:style styles/tribute-to-talk} :subtitle (i18n/label :t/learn-more)}])
(i18n/label :t/tribute-to-talk)]
[react/text {:style styles/step-n}
(i18n/label :t/learn-more)]]])
[react/scroll-view {:content-container-style styles/learn-more-container} [react/scroll-view {:content-container-style styles/learn-more-container}
[react/image {:source (resources/get-image :tribute-to-talk) [react/image {:source (resources/get-image :tribute-to-talk)
:style styles/learn-more-image}] :style styles/learn-more-image}]
[react/text {:style styles/learn-more-title-text} [react/text {:style styles/learn-more-title-text}
(i18n/label :t/tribute-to-talk)] (i18n/label :t/tribute-to-talk)]
[react/view {:style styles/learn-more-text-container-1} [react/view {:style styles/learn-more-text-container-1}
@ -294,13 +290,13 @@
(i18n/label (if owner? :t/tribute-to-talk-learn-more-1 (i18n/label (if owner? :t/tribute-to-talk-learn-more-1
:t/tribute-to-talk-paywall-learn-more-1))]] :t/tribute-to-talk-paywall-learn-more-1))]]
[separator] [separator]
[pay-to-chat-message {:snt-amount 1000 [pay-to-chat-message {:snt-amount 1000
:token " SNT" :token " SNT"
:fiat-currency "USD" :fiat-currency "USD"
:fiat-amount "5" :fiat-amount "5"
:style (assoc styles/learn-more-section :style (assoc styles/learn-more-section
:align-items :flex-start :align-items :flex-start
:margin-top 24)}] :margin-top 24)}]
[react/view {:style styles/learn-more-text-container-2} [react/view {:style styles/learn-more-text-container-2}
[react/text {:style styles/learn-more-text} [react/text {:style styles/learn-more-text}
(i18n/label (if owner? :t/tribute-to-talk-learn-more-2 (i18n/label (if owner? :t/tribute-to-talk-learn-more-2
@ -321,34 +317,34 @@
:t/tribute-to-talk-paywall-learn-more-3))]]]]) :t/tribute-to-talk-paywall-learn-more-3))]]]])
(defview tribute-to-talk [] (defview tribute-to-talk []
(letsubs [{:keys [step snt-amount editing? (letsubs [{:keys [step snt-amount
fiat-value disable-button? state]} fiat-value disable-button? state]}
[:tribute-to-talk/settings-ui]] [:tribute-to-talk/settings-ui]]
[react/keyboard-avoiding-view {:style styles/container} [react/keyboard-avoiding-view {:style styles/container}
[react/view {:style {:flex 1}} [react/view {:style {:flex 1}}
[not.toolbar/toolbar ;; [toolbar/toolbar
nil ;; nil
(when-not (= :finish step) ;; (when-not (= :finish step)
(not.toolbar/nav-button ;; (toolbar/nav-button
(actions/back #(re-frame/dispatch ;; (actions/back #(re-frame/dispatch
[:tribute-to-talk.ui/step-back-pressed])))) ;; [:tribute-to-talk.ui/step-back-pressed]))))
[react/view ;; [react/view
[react/text {:style styles/tribute-to-talk} ;; [react/text {:style styles/tribute-to-talk}
(i18n/label :t/tribute-to-talk)] ;; (i18n/label :t/tribute-to-talk)]
(when-not (#{:edit :learn-more} step) ;; (when-not (#{:edit :learn-more} step)
[react/text {:style styles/step-n} ;; [react/text {:style styles/step-n}
(if (= step :finish) ;; (if (= step :finish)
(i18n/label (case state ;; (i18n/label (case state
:completed :t/completed ;; :completed :t/completed
:pending :t/pending ;; :pending :t/pending
:signing :t/signing ;; :signing :t/signing
:transaction-failed :t/transaction-failed ;; :transaction-failed :t/transaction-failed
:disabled :t/disabled)) ;; :disabled :t/disabled))
(i18n/label :t/step-i-of-n {:step ((steps-numbers editing?) step) ;; (i18n/label :t/step-i-of-n {:step ((steps-numbers editing?) step)
:number (if editing? 2 3)}))]) ;; :number (if editing? 2 3)}))])
(when (= step :learn-more) ;; (when (= step :learn-more)
[react/text {:style styles/step-n} ;; [react/text {:style styles/step-n}
(i18n/label :t/learn-more)])]] ;; (i18n/label :t/learn-more)])]]
(case step (case step
:intro [intro] :intro [intro]

99
src/status_im/ui/screens/qr_scanner/views.cljs
View File

@ -3,50 +3,46 @@
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[clojure.string :as string] [clojure.string :as string]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.topbar :as topbar]
[status-im.ui.components.camera :as camera] [status-im.ui.components.camera :as camera]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.screens.qr-scanner.styles :as styles] [status-im.ui.screens.qr-scanner.styles :as styles]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[quo.core :as quo] [quo.core :as quo]))
[quo.components.safe-area :as safe-area]))
(defn- topbar [_ {:keys [title] :as opts}] (defn- topbar [_ {:keys [title] :as opts}]
[topbar/toolbar [topbar/topbar
{:transparent? true} {:background colors/black-persist
[topbar/nav-text :use-insets true
{:style {:color colors/white-persist :margin-left 16} :border-bottom false
:handler #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])} :navigation :none
(i18n/label :t/cancel)] :left-component [quo/button {:type :secondary
[topbar/content-title {:color colors/white-persist} :on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}
(or title (i18n/label :t/scan-qr))] [quo/text {:style {:color colors/white-persist}}
#_[topbar/actions [{:icon (if (= :on camera-flashlight) (i18n/label :t/cancel)]]
:main-icons/flash-active :title-component [quo/text {:style {:color colors/white-persist}
:main-icons/flash-inactive) :weight :bold
:icon-opts {:color colors/white} :number-of-lines 1
:handler #(re-frame/dispatch [:wallet/toggle-flashlight])}]]]) :align :center
:size :large}
(or title (i18n/label :t/scan-qr))]}])
(defn qr-test-view [opts] (defn qr-test-view [opts]
(let [text-value (atom "")] (let [text-value (atom "")]
[safe-area/consumer [react/view {:flex 1
(fn [insets] :align-items :center
[react/view {:flex 1 :background-color colors/black-persist :justify-content :center}
:padding-top (:top insets) :padding-bottom (:bottom insets)} [react/text-input {:multiline true
[topbar nil opts] :style {:color colors/white-persist}
[react/view {:flex 1 :on-change-text #(reset! text-value %)}]
:align-items :center [react/view {:flex-direction :row}
:justify-content :center} [quo/button
[react/text-input {:multiline true {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}
:style {:color colors/white-persist} "Cancel"]
:on-change-text #(reset! text-value %)}] [quo/button
[react/view {:flex-direction :row} {:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}
[quo/button "Ok"]]]))
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-cancel opts])}
"Cancel"]
[quo/button
{:on-press #(re-frame/dispatch [:qr-scanner.callback/scan-qr-code-success opts (when-let [text @text-value] (string/trim text))])}
"Ok"]]]])]))
(defn corner [border1 border2 corner] (defn corner [border1 border2 corner]
[react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)]) [react/view (assoc {:border-color colors/white-persist :width 60 :height 60} border1 5 border2 5 corner 32)])
@ -70,21 +66,20 @@
camera-flashlight [:wallet.send/camera-flashlight] camera-flashlight [:wallet.send/camera-flashlight]
opts [:get-screen-params] opts [:get-screen-params]
camera-ref (atom nil)] camera-ref (atom nil)]
(if config/qr-test-menu-enabled? [react/view {:flex 1
[qr-test-view opts] :background-color colors/black-persist}
[safe-area/consumer [topbar camera-flashlight opts]
(fn [insets] (if config/qr-test-menu-enabled?
[react/view {:flex 1 :background-color colors/black-persist [qr-test-view opts]
:padding-top (:top insets) :padding-bottom (:bottom insets)} [react/view {:flex 1}
[topbar camera-flashlight opts] [react/with-activity-indicator
[react/with-activity-indicator {}
{} [camera/camera
[camera/camera {:ref #(reset! camera-ref %)
{:ref #(reset! camera-ref %) :style {:flex 1}
:style {:flex 1} :camera-options {:zoomMode :off}
:camera-options {:zoomMode :off} :scan-barcode true
:scan-barcode true :on-read-code #(when-not @read-once?
:on-read-code #(when-not @read-once? (reset! read-once? true)
(reset! read-once? true) (on-barcode-read opts %))}]]
(on-barcode-read opts %))}]] [viewfinder (int (* 2 (/ (min height width) 3)))]])]))
[viewfinder (int (* 2 (/ (min height width) 3)))]])])))

1
src/status_im/ui/screens/routing/browser_stack.cljs
View File

@ -10,6 +10,7 @@
[stack {:initial-route-name :open-dapp [stack {:initial-route-name :open-dapp
:header-mode :none} :header-mode :none}
[{:name :open-dapp [{:name :open-dapp
:insets {:top true}
:style {:padding-bottom tabbar.styles/tabs-diff} :style {:padding-bottom tabbar.styles/tabs-diff}
:component open-dapp/open-dapp} :component open-dapp/open-dapp}
{:name :browser {:name :browser

3
src/status_im/ui/screens/routing/profile_stack.cljs
View File

@ -16,7 +16,6 @@
offline-messaging-settings] offline-messaging-settings]
[status-im.ui.screens.dapps-permissions.views :as dapps-permissions] [status-im.ui.screens.dapps-permissions.views :as dapps-permissions]
[status-im.ui.screens.privacy-and-security-settings.views :as privacy-and-security] [status-im.ui.screens.privacy-and-security-settings.views :as privacy-and-security]
[status-im.ui.screens.language-settings.views :as language-settings]
[status-im.ui.screens.sync-settings.views :as sync-settings] [status-im.ui.screens.sync-settings.views :as sync-settings]
[status-im.ui.screens.advanced-settings.views :as advanced-settings] [status-im.ui.screens.advanced-settings.views :as advanced-settings]
[status-im.ui.screens.help-center.views :as help-center] [status-im.ui.screens.help-center.views :as help-center]
@ -84,8 +83,6 @@
:component privacy-and-security/privacy-and-security} :component privacy-and-security/privacy-and-security}
{:name :appearance {:name :appearance
:component appearance/appearance} :component appearance/appearance}
{:name :language-settings
:component language-settings/language-settings}
{:name :sync-settings {:name :sync-settings
:component sync-settings/sync-settings} :component sync-settings/sync-settings}
{:name :advanced-settings {:name :advanced-settings

2
src/status_im/ui/screens/stickers/views.cljs
View File

@ -60,7 +60,7 @@
(letsubs [packs [:stickers/all-packs]] (letsubs [packs [:stickers/all-packs]]
[react/view styles/screen [react/view styles/screen
[react/keyboard-avoiding-view components.styles/flex [react/keyboard-avoiding-view components.styles/flex
[topbar/topbar {:title :t/sticker-market}] [topbar/topbar {:title (i18n/label :t/sticker-market)}]
(if (seq packs) (if (seq packs)
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:padding 16}} [react/scroll-view {:keyboard-should-persist-taps :handled :style {:padding 16}}
[react/view [react/view

2
src/status_im/ui/screens/sync_settings/views.cljs
View File

@ -11,7 +11,7 @@
(views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount] (views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount]
mailserver-id [:mailserver/current-id]] mailserver-id [:mailserver/current-id]]
[react/view {:style {:flex 1 :background-color colors/white}} [react/view {:style {:flex 1 :background-color colors/white}}
[topbar/topbar {:title :t/sync-settings}] [topbar/topbar {:title (i18n/label :t/sync-settings)}]
[react/scroll-view [react/scroll-view
[quo/list-header (i18n/label :t/message-syncing)] [quo/list-header (i18n/label :t/message-syncing)]
[quo/list-item {:size :small [quo/list-item {:size :small

10
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -23,11 +23,11 @@
(defn toolbar-view [title] (defn toolbar-view [title]
[topbar/topbar [topbar/topbar
{:title title {:title title
:accessories :right-accessories
[{:icon :main-icons/more [{:icon :main-icons/more
:handler #(re-frame/dispatch [:bottom-sheet/show-sheet :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content sheets/account-settings {:content sheets/account-settings
:content-height 60}])}]}]) :content-height 60}])}]}])
(defn button [label icon color handler] (defn button [label icon color handler]
[react/touchable-highlight {:on-press handler :style {:flex 1}} [react/touchable-highlight {:on-press handler :style {:flex 1}}

16
src/status_im/ui/screens/wallet/account_settings/views.cljs
View File

@ -44,15 +44,15 @@
keycard? [:keycard-multiaccount?]] keycard? [:keycard-multiaccount?]]
[react/keyboard-avoiding-view {:flex 1} [react/keyboard-avoiding-view {:flex 1}
[topbar/topbar [topbar/topbar
(cond-> {:title :t/account-settings} (cond-> {:title (i18n/label :t/account-settings)}
(and @new-account (not= "" (:name @new-account))) (and @new-account (not= "" (:name @new-account)))
(assoc :accessories [{:label :t/apply (assoc :right-accessories [{:label (i18n/label :t/apply)
:handler :on-press
#(do #(do
(re-frame/dispatch [:wallet.accounts/save-account (re-frame/dispatch [:wallet.accounts/save-account
account account
@new-account]) @new-account])
(reset! new-account nil))}]))] (reset! new-account nil))}]))]
[react/scroll-view {:keyboard-should-persist-taps :handled [react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1}} :style {:flex 1}}
[react/view {:padding-bottom 28 :padding-top 10} [react/view {:padding-bottom 28 :padding-top 10}

13
src/status_im/ui/screens/wallet/add_new/views.cljs
View File

@ -26,11 +26,12 @@
:key :t/add-private-key-account :key :t/add-private-key-account
"")] "")]
[topbar/topbar [topbar/topbar
(merge {:title title} (merge {:title (i18n/label title)}
(when (= type :watch) (when (= type :watch)
{:accessories [{:icon :qr {:right-accessories
:handler #(re-frame/dispatch [:wallet.add-new/qr-scanner [{:icon :qr
{:handler :wallet.add-new/qr-scanner-result}])}]}))])) :handler #(re-frame/dispatch [:wallet.add-new/qr-scanner
{:handler :wallet.add-new/qr-scanner-result}])}]}))]))
(defn common-settings [account] (defn common-settings [account]
[react/view {:margin-horizontal 16} [react/view {:margin-horizontal 16}
@ -120,9 +121,9 @@
[react/keyboard-avoiding-view {:style {:flex 1}} [react/keyboard-avoiding-view {:style {:flex 1}}
[topbar/topbar [topbar/topbar
{:navigation :none {:navigation :none
:accessories :right-accessories
[{:label :t/cancel [{:label :t/cancel
:handler #(re-frame/dispatch [:keycard/new-account-pin-sheet-hide])}]}] :on-press #(re-frame/dispatch [:keycard/new-account-pin-sheet-hide])}]}]
[pin.views/pin-view [pin.views/pin-view
{:pin pin {:pin pin
:status status :status status

24
src/status_im/ui/screens/wallet/components/views.cljs
View File

@ -4,7 +4,7 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.wallet.components.styles :as styles] [status-im.ui.screens.wallet.components.styles :as styles]
[quo.core :as quo] [quo.core :as quo]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
@ -15,20 +15,14 @@
[react/view (styles/separator)]) [react/view (styles/separator)])
(defn- recipient-topbar [content] (defn- recipient-topbar [content]
[topbar/toolbar {:transparent? true} [topbar/topbar {:navigation {:label (i18n/label :t/cancel)
[topbar/nav-text :on-press #(do
{:style {:margin-left 16} (re-frame/dispatch [:set-in [:wallet/prepare-transaction :modal-opened?] false])
:handler #(do (re-frame/dispatch [:navigate-back]))}
(re-frame/dispatch [:set-in [:wallet/prepare-transaction :modal-opened?] false]) :title (i18n/label :t/recipient)
(re-frame/dispatch [:navigate-back]))} :right-accessories [{:on-press #(debounce/dispatch-and-chill [:wallet.send/set-recipient content] 3000)
(i18n/label :t/cancel)] :label (i18n/label :t/done)
[topbar/content-title {} :disabled (string/blank? content)}]}])
(i18n/label :t/recipient)]
[topbar/text-action
{:disabled? (string/blank? content)
:style {:margin-right 16}
:handler #(debounce/dispatch-and-chill [:wallet.send/set-recipient content] 3000)}
(i18n/label :t/done)]])
(views/defview contact-code [] (views/defview contact-code []
(views/letsubs [content (reagent/atom nil)] (views/letsubs [content (reagent/atom nil)]

2
src/status_im/ui/screens/wallet/custom_tokens/views.cljs
View File

@ -23,7 +23,7 @@
(letsubs [{:keys [contract name symbol decimals in-progress? error error-name error-symbol]} (letsubs [{:keys [contract name symbol decimals in-progress? error error-name error-symbol]}
[:wallet/custom-token-screen]] [:wallet/custom-token-screen]]
[react/keyboard-avoiding-view {:flex 1 :background-color colors/white} [react/keyboard-avoiding-view {:flex 1 :background-color colors/white}
[topbar/topbar {:title :t/add-custom-token}] [topbar/topbar {:title (i18n/label :t/add-custom-token)}]
[react/scroll-view {:keyboard-should-persist-taps :handled [react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1 :style {:flex 1
:padding-horizontal 16}} :padding-horizontal 16}}

6
src/status_im/ui/screens/wallet/settings/views.cljs
View File

@ -16,11 +16,9 @@
(defn toolbar [] (defn toolbar []
[topbar/topbar [topbar/topbar
{:title :t/wallet-assets {:title (i18n/label :t/wallet-assets)
:navigation :navigation
{:icon :main-icons/arrow-left {:on-press #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed])}}])
:accessibility-label :back-button
:handler #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed])}}])
(defn hide-sheet-and-dispatch [event] (defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide]) (re-frame/dispatch [:bottom-sheet/hide])

23
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -6,8 +6,8 @@
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions] [status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.toolbar.view :as toolbar-old] [status-im.ui.components.topbar :as topbar]
[status-im.ui.screens.wallet.transactions.styles :as styles] [status-im.ui.screens.wallet.transactions.styles :as styles]
[quo.core :as quo] [quo.core :as quo]
[status-im.ui.components.toolbar :as toolbar]) [status-im.ui.components.toolbar :as toolbar])
@ -212,22 +212,23 @@
[details-list-row :t/data data]]) [details-list-row :t/data data]])
(defn details-action [hash url] (defn details-action [hash url]
[(actions/opts [{:label (i18n/label :t/copy-transaction-hash) [{:label (i18n/label :t/copy-transaction-hash)
:action #(react/copy-to-clipboard hash)} :action #(react/copy-to-clipboard hash)}
{:label (i18n/label :t/open-on-etherscan) {:label (i18n/label :t/open-on-etherscan)
:action #(.openURL ^js react/linking url)}])]) :action #(.openURL ^js react/linking url)}])
(defview transaction-details-view [hash address] (defview transaction-details-view [hash address]
(letsubs [{:keys [url type confirmations confirmations-progress (letsubs [{:keys [url type confirmations confirmations-progress
date amount-text currency-text] date amount-text currency-text]
:as transaction} :as transaction}
[:wallet.transactions.details/screen hash address]] [:wallet.transactions.details/screen hash address]]
[react/view {:style components.styles/flex} [react/view {:style components.styles/flex}
;;TODO options should be replaced by bottom sheet ,and topbar should be used here ;;TODO options should be replaced by bottom sheet ,and topbar should be used here
[toolbar-old/toolbar {} [topbar/topbar {:title (i18n/label :t/transaction-details)
toolbar-old/default-nav-back :right-accessories (when transaction
[toolbar-old/content-title (i18n/label :t/transaction-details)] [{:icon :main-icons/more
(when transaction [toolbar-old/actions (details-action hash url)])] :on-press #(list-selection/show {:options
(details-action hash url)})}])}]
[react/scroll-view {:style components.styles/flex} [react/scroll-view {:style components.styles/flex}
[details-header date type amount-text currency-text] [details-header date type amount-text currency-text]
[details-confirmations confirmations confirmations-progress (= :failed type)] [details-confirmations confirmations confirmations-progress (= :failed type)]

2
test/appium/tests/atomic/dapps_and_browsing/test_browsing.py
View File

@ -140,11 +140,13 @@ class TestBrowsing(SingleDeviceTestCase):
home_view = sign_in.create_user() home_view = sign_in.create_user()
daap_view = home_view.dapp_tab_button.click() daap_view = home_view.dapp_tab_button.click()
browsing_view = daap_view.open_url('https://www.bbc.com') browsing_view = daap_view.open_url('https://www.bbc.com')
browsing_view.wait_for_d_aap_to_load()
browsing_view.url_edit_box_lock_icon.click() browsing_view.url_edit_box_lock_icon.click()
browsing_view.find_full_text(connection_is_secure_text) browsing_view.find_full_text(connection_is_secure_text)
browsing_view.cross_icon.click() browsing_view.cross_icon.click()
browsing_view = daap_view.open_url('https://instant.airswap.io') browsing_view = daap_view.open_url('https://instant.airswap.io')
browsing_view.wait_for_d_aap_to_load()
browsing_view.url_edit_box_lock_icon.click() browsing_view.url_edit_box_lock_icon.click()
browsing_view.find_full_text(connection_is_secure_text) browsing_view.find_full_text(connection_is_secure_text)

2
test/appium/views/wallet_view.py
View File

@ -88,7 +88,7 @@ class OptionsButton(BaseButton):
class AccountOptionsButton(BaseButton): class AccountOptionsButton(BaseButton):
def __init__(self, driver, account_name): def __init__(self, driver, account_name):
super(AccountOptionsButton, self).__init__(driver) super(AccountOptionsButton, self).__init__(driver)
self.locator = self.Locator.xpath_selector('(//*[@text="%s"]/..//*[@content-desc="icon"])[2]' % account_name) self.locator = self.Locator.xpath_selector('(//*[@text="%s"]/../..//*[@content-desc="icon"])[2]' % account_name)
class ManageAssetsButton(BaseButton): class ManageAssetsButton(BaseButton):