status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

topbar. first iteration 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-12-20 11:30:41 +01:00
parent a72d4c7d85
commit f90fe2f04d
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
50 changed files with 343 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
fiddle/deps.edn
View File

@ -10,7 +10,6 @@
com.taoensso/encore {:mvn/version "2.94.0"}
hickory {:mvn/version "0.7.1"}
com.cognitect/transit-cljs {:mvn/version "0.8.248"}
status-im/pluto {:mvn/version "iteration-4-9"}
cljs-bean {:mvn/version "1.3.0"}}
:paths ["src" "../src" "resources" "target" "../resources"]

4
fiddle/src/fiddle/views/main.cljs
View File

@ -9,6 +9,7 @@
[fiddle.views.list-items :as list-items]
[fiddle.views.ui :as ui]
[fiddle.views.toolbar :as toolbar]
[fiddle.views.topbar :as topbar]
[re-frame.core :as re-frame]))
(defn btn [id label view-id]
@ -44,7 +45,8 @@
:screens [screens/screens]
:typography [typography/typography]
:list-items [list-items/list-items]
:toolbar [toolbar/toolbar]
:toolbar [toolbar/toolbar-view]
:top-bar [topbar/topbar-view]
:list-header [list-items/list-header]
:ui [ui/ui]
[react/text "TODO"])]))

16
fiddle/src/fiddle/views/toolbar.cljs
View File

@ -1,13 +1,13 @@
(ns fiddle.views.toolbar
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar :as toolbar-comp]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.colors :as colors]
cljs.pprint
[reagent.core :as reagent]
[status-im.ui.components.button :as button])
(:require-macros [fiddle.snippets :as snippets]))
(defn toolbar []
(defn toolbar-view []
[react/view
{:background-color colors/gray-lighter
:flex 1
@ -16,14 +16,14 @@
:flex-wrap :wrap}
[react/view {:width 375}
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:center {:type :secondary :label "Label"}}])]
(snippets/code-snippet [toolbar/toolbar {:center {:type :secondary :label "Label"}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}])]
(snippets/code-snippet [toolbar/toolbar {:left {:type :previous :label "Label"} :right {:type :next :label "Label"}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}])]
(snippets/code-snippet [toolbar/toolbar {:left {:type :secondary :label "Label"} :right {:label "Label"}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:left {:type :previous :label "Label"}}])]
(snippets/code-snippet [toolbar/toolbar {:left {:type :previous :label "Label"}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:right {:type :next :label "Label"}}])]
(snippets/code-snippet [toolbar/toolbar {:right {:type :next :label "Label"}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [toolbar-comp/toolbar {:center {:label "Label"}}])]]])
(snippets/code-snippet [toolbar/toolbar {:center {:label "Label"}}])]]])

33
fiddle/src/fiddle/views/topbar.cljs Normal file
View File

@ -0,0 +1,33 @@
(ns fiddle.views.topbar
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.topbar :as topbar]
[status-im.ui.components.colors :as colors]
cljs.pprint
[reagent.core :as reagent])
(:require-macros [fiddle.snippets :as snippets]))
(defn topbar-view []
[react/view
{:background-color colors/gray-lighter
:flex 1
:padding 20
:flex-direction :row
:flex-wrap :wrap}
[react/view {:width 375}
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Chat Invites"}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Chat Invites tile tile title tile tile title tile tile title tile tile title tile tile title tile tile title 3"}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Chat" :navigation :none :show-border? true}])
[react/view {:height 10}]]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Blocked Users" :accessories [{:label "Done" :handler #(js/alert "Done")}]}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Blocked Users" :accessories [{:label "Done" :handler #(js/alert "Done")}] :navigation {:label "Cancel" :handler #(js/alert "Cancel")}}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Chat Invites" :accessories [{:icon :more :handler #(js/alert "More")}]}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "Title" :accessories [{:icon :more :handler #(js/alert "More")} {:icon :share :handler #(js/alert "Share")}]}])]
[react/view {:background-color :white :margin 10}
(snippets/code-snippet [topbar/topbar {:title "test"}])]]])

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

@ -11,7 +11,8 @@
[status-im.ui.components.text-input.view :as text-input]
[status-im.network.core :as network]
[status-im.network.ui.edit-network.styles :as styles]
[clojure.string :as string]))
[clojure.string :as string]
[status-im.ui.components.topbar :as topbar]))
(defn- render-network-type [manage-network type]
(let [name (case type
@ -31,7 +32,7 @@
(let [custom? (= (get-in manage-network [:chain :value]) :custom)]
[react/view styles/container
[react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar (i18n/label :t/add-network)]
[topbar/topbar {:title :t/add-network}]
[react/scroll-view
[react/view styles/edit-network-view
[text-input/text-input-with-label

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

@ -8,7 +8,8 @@
[status-im.ui.components.common.common :as components.common]
[status-im.network.ui.styles :as st]
[status-im.network.core :as network]
[status-im.network.ui.views :as network-settings]))
[status-im.network.ui.views :as network-settings]
[status-im.ui.components.topbar :as topbar]))
(views/defview network-details []
(views/letsubs [{:keys [networks/selected-network]} [:get-screen-params]
@ -19,7 +20,7 @@
custom? (seq (filter #(= (:id %) id) (:custom networks)))]
[react/view st/container
[react/view components.styles/flex
[toolbar/simple-toolbar (i18n/label :t/network-details)]
[topbar/topbar {:title :t/network-details}]
[react/view components.styles/flex
[network-settings/network-badge
{:name name

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

@ -7,8 +7,7 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.components.toolbar.view :as toolbar])
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views]))
(defn- network-icon [connected? size]
@ -45,11 +44,9 @@
(views/letsubs [current-network [:networks/current-network]
networks [:get-networks]]
[react/view components.styles/flex
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/network-settings)]
[toolbar/actions
[(toolbar.actions/add false #(re-frame/dispatch [::network/add-network-pressed]))]]]
[topbar/topbar {:title :t/network-settings
:accessories [{:icon :main-icons/add
:handler #(re-frame/dispatch [::network/add-network-pressed])}]}]
[react/view styles/wrapper
[list/section-list {:sections [{:title (i18n/label :t/main-networks)
:key :mainnet

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

@ -162,11 +162,4 @@
:height styles/toolbar-height
:justify-content :center
:align-items :center}
action-items]]))
;;TODO remove
(defn simple-toolbar
"A simple toolbar composed of a nav-back item and a single line title."
([] (simple-toolbar nil))
([title] (simple-toolbar title false))
([title modal?] (toolbar nil (if modal? default-nav-close default-nav-back) [content-title title])))
action-items]]))

55
src/status_im/ui/components/topbar.cljs Normal file
View File

@ -0,0 +1,55 @@
(ns status-im.ui.components.topbar
(:require [status-im.ui.components.react :as react]
[re-frame.core :as re-frame]
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.colors :as colors]
[reagent.core :as reagent]
[status-im.utils.label :as utils.label]))
(defn default-navigation [modal?]
{:icon (if modal? :main-icons/close :main-icons/back)
:accessibility-label :back-button
:handler #(re-frame/dispatch [:navigate-back])})
(defn container [style title-padding & children]
(into []
(concat
[react/view {:style style
:on-layout #(reset! title-padding (max (-> % .-nativeEvent .-layout .-width)
@title-padding))}]
children)))
(defn button [value nav?]
(let [{:keys [handler icon label accessibility-label]} value]
[react/touchable-highlight {:on-press #(when handler (handler))}
[react/view (cond-> {:padding-horizontal (if nav? 16 10) :height 56
:align-items :center :justify-content :center}
accessibility-label
(assoc :accessibility-label accessibility-label))
(cond
icon
[icons/icon icon]
label
[react/text {:style {:color colors/blue}} label])]]))
(defn topbar [& [{:keys [title navigation accessories show-border? modal?]}]]
(let [navigation (or navigation (default-navigation modal?))
title-padding (reagent/atom 16)]
(fn [_]
[react/view (cond-> {:height 56 :align-items :center :flex-direction :row}
show-border?
(assoc :border-bottom-width 1 :border-bottom-color colors/gray-lighter))
(when-not (= navigation :none)
[container {} title-padding
[button navigation true]])
[react/view {:flex 1}]
(when accessories
[container {:flex-direction :row :padding-right 6} title-padding
(for [value accessories]
^{:key value}
[button value false])])
(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)]])])))

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

@ -8,8 +8,8 @@
[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.toolbar.view :as toolbar]
[status-im.ui.screens.about-app.styles :as styles]))
[status-im.ui.screens.about-app.styles :as styles]
[status-im.ui.components.topbar :as topbar]))
(defn- data [app-version node-version]
[{:type :small
@ -56,8 +56,7 @@
(views/letsubs [app-version [:get-app-short-version]
node-version [:get-app-node-version]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/about-app)]
[topbar/topbar {:title :t/about-app}]
[list/flat-list
{:data (data app-version node-version)
:key-fn (fn [_ i] (str i))

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

@ -12,7 +12,8 @@
[status-im.utils.platform :as platform]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.multiaccounts.core :as multiaccounts]))
[status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.topbar :as topbar]))
(defn- render-row [row _ _]
[list-item/list-item {:title (multiaccounts/displayed-name row)
@ -25,7 +26,7 @@
new-identity [:contacts/new-identity]
error-message [:new-identity-error]]
[react/view {:style {:flex 1}}
[toolbar.view/simple-toolbar (i18n/label :t/new-chat) true]
[topbar/topbar {:title :t/new-chat :modal? true}]
[react/view add-new.styles/new-chat-container
[react/view add-new.styles/new-chat-input-container
[react/text-input {:on-change-text #(re-frame/dispatch [:new-chat/set-new-identity %])

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

@ -12,7 +12,8 @@
status-im.utils.db
[status-im.react-native.resources :as resources]
[status-im.ui.components.colors :as colors]
[status-im.i18n-resources :as i18n-resources])
[status-im.i18n-resources :as i18n-resources]
[status-im.ui.components.topbar :as topbar])
(:require-macros
[status-im.utils.slurp :refer [slurp]]
[status-im.utils.views :as views]))
@ -73,9 +74,7 @@
(views/letsubs [topic [:public-group-topic]
error [:public-chat.new/topic-error-message]]
[react/view {:style styles/group-container}
[toolbar/simple-toolbar
(i18n/label :t/new-public-group-chat)
true]
[topbar/topbar {:title :t/new-public-group-chat :modal? true}]
[react/scroll-view {:style {:flex 1}}
[react/view {:padding-horizontal 16}
[react/view {:align-items :center :padding-vertical 12}

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

@ -1,11 +1,10 @@
(ns status-im.ui.screens.advanced-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]))
[status-im.ui.components.topbar :as topbar]))
(defn- normal-mode-settings-data [network-name current-log-level
current-fleet dev-mode?]
@ -93,8 +92,7 @@
current-log-level [:settings/current-log-level]
current-fleet [:settings/current-fleet]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/advanced)]
[topbar/topbar {:title :t/advanced}]
[list/flat-list
{:data (flat-list-data
network-name current-log-level

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

@ -14,7 +14,8 @@
[status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles]
[status-im.utils.platform :as platform]
[status-im.ui.components.tooltip.views :as tooltip]
[clojure.string :as string]))
[clojure.string :as string]
[status-im.ui.components.topbar :as topbar]))
(defn delete-button [id]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:bootnodes.ui/delete-pressed id])}
@ -42,7 +43,7 @@
invalid-url? (contains? validation-errors :url)]
[react/view styles/container
[react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar (i18n/label (if id :t/bootnode-details :t/add-bootnode))]
[topbar/topbar {:title (if id :t/bootnode-details :t/add-bootnode)}]
[react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-bootnode-view
[text-input/text-input-with-label

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

@ -1,16 +1,11 @@
(ns status-im.ui.screens.bootnodes-settings.views
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.utils.config :as config]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.bootnodes-settings.styles :as styles]))
[status-im.ui.screens.bootnodes-settings.styles :as styles]
[status-im.ui.components.topbar :as topbar]))
(defn navigate-to-add-bootnode [id]
(re-frame/dispatch [:bootnodes.ui/add-bootnode-pressed id]))
@ -28,11 +23,9 @@
(views/letsubs [bootnodes-enabled [:settings/bootnodes-enabled]
bootnodes [:settings/network-bootnodes]]
[react/view {:flex 1}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/bootnodes-settings)]
[toolbar/actions
[(toolbar.actions/add false #(navigate-to-add-bootnode nil))]]]
[topbar/topbar {:title :t/bootnodes-settings
:accessories [{:icon :main-icons/add
:handler #(navigate-to-add-bootnode nil)}]}]
[react/view styles/switch-container
[profile.components/settings-switch-item
{:label-kw :t/bootnodes-enabled

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

@ -5,8 +5,7 @@
[status-im.ui.components.list.views :as list.views]
[status-im.ui.components.react :as react]
[status-im.i18n :as i18n]
[status-im.ui.components.contact.contact :as contact-view]
[status-im.ui.components.toolbar.view :as toolbar.view])
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn contacts-list-item [{:keys [public-key] :as contact}]
@ -20,9 +19,7 @@
(letsubs [blocked-contacts-count [:contacts/blocked-count]
contacts [:contacts/active]]
[react/view {:flex 1}
[toolbar.view/toolbar nil
toolbar.view/default-nav-back
(toolbar.view/content-title (i18n/label :t/contacts))]
[topbar/topbar {:title :t/contacts}]
[react/scroll-view {:flex 1}
[list.views/big-list-item
{:style {:margin-vertical 16}
@ -41,7 +38,7 @@
(letsubs [blocked-contacts [:contacts/blocked]]
[react/view {:flex 1
:background-color colors/white}
[toolbar.view/simple-toolbar (i18n/label :t/blocked-users)]
[topbar/topbar {:title :t/blocked-users}]
[react/scroll-view {:style {:background-color colors/white
:padding-vertical 8}}
[list.views/flat-list

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

@ -8,7 +8,8 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.currency-settings.styles :as styles]
[status-im.constants :as constants]))
[status-im.constants :as constants]
[status-im.ui.components.topbar :as topbar]))
(defn render-currency [current-currency-id]
(fn [{:keys [id code display-name] :as currency}]
@ -25,8 +26,7 @@
(views/defview currency-settings []
(views/letsubs [currency-id [:wallet.settings/currency]]
[react/view {:flex 1}
[toolbar/simple-toolbar
(i18n/label :t/main-currency)]
[topbar/topbar {:title :t/main-currency}]
[react/view styles/wrapper
[list/flat-list {:data (->> constants/currencies
vals

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

@ -9,7 +9,8 @@
[status-im.ui.screens.dapps-permissions.styles :as styles]
[status-im.constants :as constants]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as icons]))
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.topbar :as topbar]))
(defn d-icon []
[react/view styles/icon-container
@ -32,8 +33,7 @@
(views/defview dapps-permissions []
(views/letsubs [permissions [:dapps/permissions]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/dapps-permissions)]
[topbar/topbar {:title :t/dapps-permissions}]
[list/flat-list
{:data (vec (map prepare-items (vals permissions)))
:key-fn (fn [_ i] (str i))
@ -43,7 +43,7 @@
(views/letsubs [{:keys [dapp permissions]} [:get-screen-params]
{:keys [name]} [:dapps-account]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar dapp]
[topbar/topbar {:title dapp}]
[list/flat-list
{:data (vec (map (prepare-items-manage name) permissions))
:key-fn (fn [_ i] (str i))

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

@ -23,7 +23,8 @@
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.screens.chat.photos :as photos]
[status-im.multiaccounts.core :as multiaccounts]
[status-im.utils.debounce :as debounce])
[status-im.utils.debounce :as debounce]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views]))
(defn- button
@ -90,9 +91,7 @@
{:color colors/white}]])
(defn- toolbar []
[toolbar/toolbar nil
[toolbar/nav-button (actions/back #(re-frame/dispatch [:navigate-back]))]
[toolbar/content-title (i18n/label :t/ens-your-username)]])
[topbar/topbar {:title :t/ens-your-username}])
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;; SEARCH SCREEN
@ -441,8 +440,7 @@
(views/defview terms []
(views/letsubs [{:keys [contract]} [:get-screen-params :ens-terms]]
[react/scroll-view {:style {:flex 1}}
[toolbar/simple-toolbar
(i18n/label :t/ens-terms-registration)]
[topbar/topbar {:title :t/ens-terms-registration}]
[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}}
(i18n/label :t/ens-terms-header)]]
@ -483,8 +481,7 @@
(views/letsubs [{:keys [name address custom-domain? public-key pending?]}
[:ens.name/screen]]
[react/view {:style {:flex 1}}
[toolbar/simple-toolbar
name]
[topbar/topbar {:title name}]
[react/scroll-view {:style {:flex 1}}
(when-not custom-domain?
[react/view {:style {:flex 1 :margin-horizontal 16}}
@ -661,8 +658,7 @@
(views/defview main []
(views/letsubs [{:keys [names multiaccount show?]} [:ens.main/screen]]
[react/keyboard-avoiding-view {:style {:flex 1}}
[toolbar/simple-toolbar
(i18n/label :t/ens-usernames)]
[topbar/topbar {:title :t/ens-usernames}]
(if (seq names)
[registered names multiaccount show?]
[welcome])]))

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

@ -7,7 +7,8 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.fleet-settings.styles :as styles]
[status-im.node.core :as node]
[status-im.utils.platform :as platform])
[status-im.utils.platform :as platform]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views]))
(defn- fleet-icon [current?]
@ -40,9 +41,7 @@
(views/letsubs [custom-fleets [:fleets/custom-fleets]
current-fleet [:settings/current-fleet]]
[react/view {:flex 1}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/fleet-settings)]]
[topbar/topbar {:title :t/fleet-settings}]
[react/view styles/wrapper
[list/flat-list {:data (fleets custom-fleets)
:default-separator? false

7
src/status_im/ui/screens/hardwallet/authentication_method/views.cljs
View File

@ -8,7 +8,8 @@
[status-im.ui.components.common.common :as common]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.react-native.resources :as resources]))
[status-im.react-native.resources :as resources]
[status-im.ui.components.topbar :as topbar]))
(defn authentication-method-row [{:keys [title on-press icon]}]
[react/touchable-highlight {:on-press on-press}
@ -24,9 +25,7 @@
(defn hardwallet-authentication-method []
[react/view styles/container
[react/view components.styles/flex
[toolbar/toolbar {}
toolbar/default-nav-back
nil]
[topbar/topbar]
[common/separator]
[react/view styles/choose-authentication-method
[react/view styles/lock-image-container

15
src/status_im/ui/screens/hardwallet/connect/views.cljs
View File

@ -5,11 +5,10 @@
[status-im.ui.screens.hardwallet.connect.styles :as styles]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.styles :as components.styles]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.toolbar.actions :as toolbar.actions]))
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.components.topbar :as topbar]))
(defview nfc-enabled []
(letsubs [card-read-in-progress? [:hardwallet/card-read-in-progress?]]
@ -46,11 +45,11 @@
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between}
[toolbar/toolbar {}
[toolbar/nav-button (assoc toolbar.actions/default-back
:handler
#(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked]))]
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:hardwallet.ui/hardwallet-connect-navigate-back-button-clicked])}}]
[react/view styles/hardwallet-connect
(if nfc-enabled?
[nfc-enabled]

16
src/status_im/ui/screens/hardwallet/pin/views.cljs
View File

@ -6,10 +6,9 @@
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.screens.hardwallet.pin.styles :as styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform]
[status-im.ui.components.topbar :as topbar]))
(defn numpad-button [n step enabled? small-screen?]
[react/touchable-highlight
@ -143,12 +142,11 @@
error-label [:hardwallet/pin-error-label]]
[react/view {:flex 1
:background-color colors/white}
[toolbar/toolbar
nil
[toolbar/nav-button (assoc toolbar.actions/default-back
:handler
#(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked]))]
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:hardwallet.ui/enter-pin-navigate-back-button-clicked])}}]
(if (zero? pin-retry-counter)
[pin-view {:pin pin
:retry-counter (when (< puk-retry-counter puk-retries) puk-retry-counter)

10
src/status_im/ui/screens/hardwallet/settings/views.cljs
View File

@ -3,11 +3,11 @@
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.react-native.resources :as resources]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]))
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.topbar :as topbar]))
(defn- action-row [{:keys [icon label on-press color-theme]}]
[react/touchable-highlight
@ -51,8 +51,7 @@
(defview reset-card []
(letsubs [disabled? [:keycard-reset-card-disabled?]]
[react/view {:flex 1}
[toolbar/simple-toolbar
(i18n/label :t/reset-card)]
[topbar/topbar {:title :t/reset-card}]
[react/view {:flex 1
:background-color :white}
[react/view {:margin-top 71
@ -89,8 +88,7 @@
puk-retry-counter [:hardwallet/puk-retry-counter]
pairing [:keycard-multiaccount-pairing]]
[react/view {:flex 1}
[toolbar/simple-toolbar
(i18n/label :t/status-keycard)]
[topbar/topbar {:title :t/status-keycard}]
[react/view {:flex 1
:background-color :white}
[react/view {:margin-top 47

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

@ -1,11 +1,10 @@
(ns status-im.ui.screens.help-center.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.colors :as colors]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform]
[status-im.ui.components.topbar :as topbar]))
(def data
[{:type :small
@ -36,8 +35,7 @@
(defn help-center []
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/need-help)]
[topbar/topbar {:title :t/need-help}]
[list/flat-list
{:data data
:key-fn (fn [_ i] (str i))

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

@ -14,16 +14,15 @@
[status-im.utils.gfycat.core :as gfy]
[status-im.ui.components.colors :as colors]
[reagent.core :as r]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.screens.intro.styles :as styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.utils.platform :as platform]
[status-im.utils.security :as security]
[status-im.i18n :as i18n]
[status-im.constants :as constants]
[status-im.utils.config :as config]
[status-im.utils.platform :as platform]))
[status-im.utils.platform :as platform]
[status-im.ui.components.topbar :as topbar]))
(defn dots-selector [{:keys [on-press n selected color]}]
[react/view {:style (styles/dot-selector n)}
@ -453,12 +452,11 @@
(defview wizard-generate-key []
(letsubs [wizard-state [:intro-wizard/generate-key]]
[react/view {:style {:flex 1}}
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-top 16}}
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :generate-key}]
@ -470,14 +468,10 @@
(defview wizard-choose-key []
(letsubs [wizard-state [:intro-wizard/choose-key]]
[react/view {:style {:flex 1}}
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-left 16
:margin-top 16}}
(toolbar/nav-text
{:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
(i18n/label :t/cancel))
nil]
[topbar/topbar
{:navigation
{:label :t/cancel
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :choose-key}]
@ -488,18 +482,15 @@
(defview wizard-select-key-storage []
(letsubs [wizard-state [:intro-wizard/select-key-storage]]
[react/view {:style {:flex 1}}
[toolbar/toolbar
{:style (merge {:border-bottom-width 0
:margin-top 16}
(when (:recovering? wizard-state)
{:margin-left 16}))}
(if (:recovering? wizard-state)
(toolbar/nav-text
{:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
(i18n/label :t/cancel))
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
nil]
[topbar/topbar
{:navigation
(if (:recovering? wizard-state)
{:label :t/cancel
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])})}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :select-key-storage}]
@ -510,12 +501,11 @@
(defview wizard-create-code []
(letsubs [wizard-state [:intro-wizard/create-code]]
[react/keyboard-avoiding-view {:style {:flex 1}}
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-top 16}}
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :create-code :encrypt-with-password? (:encrypt-with-password? wizard-state)}]
@ -527,13 +517,12 @@
(defview wizard-confirm-code []
(letsubs [wizard-state [:intro-wizard/confirm-code]]
[react/keyboard-avoiding-view {:style {:flex 1}}
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-top 16}}
[topbar/topbar
(when-not (:processing? wizard-state)
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back]))))
nil]
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}})]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :confirm-code :encrypt-with-password? (:encrypt-with-password? wizard-state)}]
@ -545,10 +534,11 @@
(defview wizard-enter-phrase []
(letsubs [wizard-state [:intro-wizard/enter-phrase]]
[react/keyboard-avoiding-view {:style {:flex 1}}
[toolbar/toolbar {:style {:border-bottom-width 0}}
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :enter-phrase}]
@ -561,12 +551,11 @@
(letsubs [{:keys [pubkey processing? name photo-path]} [:intro-wizard/recovery-success]
existing-account? [:intro-wizard/recover-existing-account?]]
[react/view {:style {:flex 1}}
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-top 16}}
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:intro-wizard/navigate-back])))
nil]
[topbar/topbar
{:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:intro-wizard/navigate-back])}}]
[react/view {:style {:flex 1
:justify-content :space-between}}
[top-bar {:step :recovery-success}]

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

@ -13,16 +13,13 @@
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.screens.hardwallet.pin.views :as pin.views]))
[status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.ui.components.topbar :as topbar]))
(defview intro []
(letsubs [flow [:hardwallet-flow]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
toolbar/default-nav-back
nil]
[topbar/topbar]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -103,11 +100,7 @@
(defn start []
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
toolbar/default-nav-back
nil]
[topbar/topbar]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -140,8 +133,7 @@
puk-code [:hardwallet-puk-code]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}
@ -242,8 +234,7 @@
small-screen? [:dimensions/small-screen?]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}
@ -287,8 +278,7 @@
(letsubs [mnemonic [:hardwallet-mnemonic]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}
@ -358,8 +348,7 @@
(let [{:keys [word idx]} word]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}

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

@ -4,7 +4,6 @@
[status-im.ui.components.react :as react]
[status-im.ui.screens.keycard.styles :as styles]
[status-im.ui.screens.keycard.views :as views]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as vector-icons]
@ -17,16 +16,12 @@
[status-im.utils.identicon :as identicon]
[status-im.utils.core :as utils.core]
[status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.ui.components.tooltip.views :as tooltip]))
[status-im.ui.components.tooltip.views :as tooltip]
[status-im.ui.components.topbar :as topbar]))
(defn intro []
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
(toolbar/nav-button
(actions/back #(re-frame/dispatch [:navigate-back])))
nil]
[topbar/topbar]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -76,11 +71,7 @@
(defn start []
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
toolbar/default-nav-back
nil]
[topbar/topbar]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -119,8 +110,7 @@
retry-counter [:hardwallet/retry-counter]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}
@ -154,8 +144,7 @@
ref (atom nil)]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
[toolbar/nav-text
{:handler #(re-frame/dispatch [:keycard.onboarding.ui/cancel-pressed])
:style {:padding-left 21}}
@ -218,11 +207,7 @@
(letsubs [address [:hardwallet-multiaccount-wallet-address]
whisper-public-key [:hardwallet-multiaccount-whisper-public-key]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
nil
nil]
[topbar/topbar {:navigation :none}]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -277,11 +262,7 @@
(defview no-key []
(letsubs [card-state [:hardwallet-card-state]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
nil
nil]
[topbar/topbar {:navigation :none}]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between

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

@ -2,9 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.react :as react]
[status-im.ui.components.checkbox.view :as checkbox]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.screens.keycard.styles :as styles]
[status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
@ -13,10 +11,9 @@
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.screens.hardwallet.pin.views :as pin.views]
[status-im.utils.core :as utils.core]
[status-im.utils.gfycat.core :as gfy]
[status-im.utils.identicon :as identicon]
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.screens.chat.photos :as photos]))
[status-im.ui.screens.chat.photos :as photos]
[status-im.ui.components.topbar :as topbar]))
(defview connection-lost []
(letsubs [{:keys [card-connected?]} [:keycard]]
@ -89,11 +86,7 @@
(defn nfc-on []
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
toolbar/default-nav-back
nil]
[topbar/topbar]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -121,9 +114,7 @@
(defn loading [title-label]
[react/view styles/container
[toolbar/toolbar {:transparent? true
:style {:margin-top 32}}
nil nil]
[topbar/topbar {:navigation :none}]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -370,18 +361,14 @@
small-screen? [:dimensions/small-screen?]
retry-counter [:hardwallet/retry-counter]]
[react/view styles/container
[toolbar/toolbar
{:transparent? true}
(when multiple-multiaccounts?
[toolbar/nav-button
(actions/back
#(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed]))])
nil
[react/view {:margin-right 20}
[react/touchable-highlight
{:on-press #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])}
[vector-icons/icon :main-icons/more {:color colors/black
:container-style {:margin-left 5}}]]]]
[topbar/topbar
(cond-> {:accessories [{:icon :main-icons/more
:handler #(re-frame/dispatch [:keycard.login.pin.ui/more-icon-pressed])}]}
multiple-multiaccounts?
(assoc :navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:keycard.login.pin.ui/cancel-pressed])}))]
[react/view {:flex 1
:flex-direction :column
:justify-content :space-between
@ -449,8 +436,7 @@
(let [in-progress? (= status :verifying)]
[react/view styles/container
[toolbar/toolbar
{:transparent? true
:style {:margin-top 32}}
{:transparent? true}
nil
[react/text {:style {:color colors/gray}}
(i18n/label :t/step-i-of-n {:number 2

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

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

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

@ -1,12 +1,11 @@
(ns status-im.ui.screens.log-level-settings.views
(: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.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.log-level-settings.styles :as styles]
[status-im.utils.platform :as platform])
[status-im.utils.platform :as platform]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views]))
(defn- log-level-icon [current?]
@ -49,9 +48,7 @@
(views/defview log-level-settings []
(views/letsubs [current-log-level [:settings/current-log-level]]
[react/view {:flex 1}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/log-level-settings)]]
[topbar/topbar {:title :t/log-level-settings}]
[react/view styles/wrapper
[list/flat-list {:data log-levels
:default-separator? false

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

@ -5,10 +5,10 @@
[status-im.i18n :as i18n]
[re-frame.core :as re-frame]
status-im.ui.screens.mobile-network-settings.events
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.utils.platform :as platform]
[status-im.ui.screens.mobile-network-settings.sheets :as sheets]))
[status-im.ui.screens.mobile-network-settings.sheets :as sheets]
[status-im.ui.components.topbar :as topbar]))
(defn settings-separator []
[react/view
@ -20,7 +20,7 @@
remember-syncing-choice?]}
[:multiaccount]]
[react/view {:style styles/container}
[toolbar/simple-toolbar (i18n/label :t/mobile-network-settings)]
[topbar/topbar {:title :t/mobile-network-settings}]
(when platform/ios?
[settings-separator])
[react/view {:style styles/switch-container}

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

@ -15,16 +15,17 @@
[status-im.utils.platform :as platform]
[status-im.utils.security :as security]
[status-im.utils.utils :as utils]
[status-im.ui.components.icons.vector-icons :as icons])
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn login-toolbar [can-navigate-back?]
[toolbar/toolbar
{:style {:border-bottom-width 0
:margin-top 0}}
(when can-navigate-back?
[toolbar/nav-button (act/back #(re-frame/dispatch [:navigate-reset :multiaccounts]))])
nil])
[topbar/topbar
{:navigation (if can-navigate-back?
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:navigate-reset :multiaccounts])}
:none)}])
(defn login-multiaccount [password-text-input]
(.blur password-text-input)

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

@ -1,11 +1,9 @@
(ns status-im.ui.screens.notifications-settings.views
(:require [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors]
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]))
[status-im.ui.components.topbar :as topbar]))
(defn notifications-settings []
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/notifications)]])
[topbar/topbar {:title :t/notifications}]])

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

@ -14,7 +14,8 @@
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.offline-messaging-settings.edit-mailserver.styles :as styles]
[status-im.ui.components.tooltip.views :as tooltip]
[clojure.string :as string]))
[clojure.string :as string]
[status-im.ui.components.topbar :as topbar]))
(defn connect-button [id]
[react/touchable-highlight {:on-press #(re-frame/dispatch [:mailserver.ui/connect-pressed id])}
@ -51,7 +52,7 @@
invalid-url? (contains? validation-errors :url)]
[react/view components.styles/flex
[react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar (i18n/label (if id :t/mailserver-details :t/add-mailserver))]
[topbar/topbar {:title (if id :t/mailserver-details :t/add-mailserver)}]
[react/scroll-view {:keyboard-should-persist-taps :handled}
[react/view styles/edit-mailserver-view
[text-input/text-input-with-label

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

@ -2,15 +2,13 @@
(:require-macros [status-im.utils.views :as views])
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.utils.config :as config]
[status-im.ui.components.checkbox.view :as checkbox.views]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.utils.platform :as platform]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.toolbar.actions :as toolbar.actions]
[status-im.ui.screens.offline-messaging-settings.styles :as styles]))
[status-im.ui.screens.offline-messaging-settings.styles :as styles]
[status-im.ui.components.topbar :as topbar]))
(defn- mailserver-icon [connected?]
[react/view (if platform/desktop?
@ -52,11 +50,10 @@
preferred-mailserver-id [:mailserver/preferred-id]
mailservers [:mailserver/fleet-mailservers]]
[react/view {:flex 1}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/offline-messaging-settings)]
[toolbar/actions
[(toolbar.actions/add false #(re-frame/dispatch [:mailserver.ui/add-pressed]))]]]
[topbar/topbar
{:title :t/offline-messaging-settings
:accessories [{:icon :main-icons/add
:handler #(re-frame/dispatch [:mailserver.ui/add-pressed])}]}]
[react/view styles/wrapper
[pinned-state preferred-mailserver-id]
[list/flat-list {:data (vals mailservers)

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

@ -13,9 +13,9 @@
[status-im.ui.components.checkbox.view :as checkbox.views]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.text-input.view :as text-input]
[status-im.ui.screens.pairing.styles :as styles]))
[status-im.ui.screens.pairing.styles :as styles]
[status-im.ui.components.topbar :as topbar]))
(def syncing (reagent/atom false))
(def installation-name (reagent/atom ""))
@ -186,9 +186,7 @@
(views/defview installations []
(views/letsubs [installations [:pairing/installations]]
[react/view {:flex 1}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/devices)]]
[topbar/topbar {:title :t/devices}]
[react/scroll-view {:style {:background-color :white}}
(if (string/blank? (-> installations first :name))
[edit-installation-name]

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

@ -8,7 +8,8 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.multiaccounts.biometric.core :as biometric])
[status-im.multiaccounts.biometric.core :as biometric]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :as views]))
(defn- list-data [mnemonic settings supported-biometric-auth biometric-auth? keycard?]
@ -88,8 +89,7 @@
auth-method [:auth-method]
keycard-multiaccount? [:keycard-multiaccount?]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/privacy-and-security)]
[topbar/topbar {:title :t/privacy-and-security}]
[list/flat-list
{:data (list-data mnemonic settings supported-biometric-auth
(= auth-method "biometric") keycard-multiaccount?)

27
src/status_im/ui/screens/profile/group_chat/views.cljs
View File

@ -2,36 +2,23 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.utils.platform :as platform]
[status-im.constants :as constants]
[status-im.ui.screens.profile.group-chat.styles :as styles]
[status-im.ui.components.react :as react]
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.components.contact.contact :as contact]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.toolbar.view :as toolbar]
[re-frame.core :as re-frame]
[status-im.ui.components.common.styles :as common.styles]
[status-im.i18n :as i18n]
[status-im.utils.utils :as utils]
[status-im.ui.components.list-item.views :as list-item]))
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar]))
(defn group-chat-profile-toolbar [admin?]
[toolbar/toolbar {}
toolbar/default-nav-back
nil
[topbar/topbar
(when admin?
[toolbar/text-action {:handler #(re-frame/dispatch [:group-chat-profile/start-editing])
:accessibility-label :edit-button}
(i18n/label :t/edit)])])
(defn group-chat-profile-edit-toolbar []
[toolbar/toolbar {}
nil
nil
[toolbar/text-action {:handler #(re-frame/dispatch [:group-chats.ui/save-pressed])
:accessibility-label :done-button}
(i18n/label :t/done)]])
{:accessories
[{:label :t/edit
:accessibility-label :edit-button
:handler #(re-frame/dispatch [:group-chat-profile/start-editing])}]})])
(defn member-actions [chat-id member us-admin?]
(concat

8
src/status_im/ui/screens/profile/photo_capture/views.cljs
View File

@ -3,12 +3,12 @@
[reagent.core :as reagent]
[status-im.ui.components.camera :as camera]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.i18n :as i18n]
[status-im.ui.screens.profile.photo-capture.styles :as styles]
[status-im.utils.image-processing :as image-processing]
[taoensso.timbre :as log]
[status-im.ui.components.icons.vector-icons :as icons]))
[status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.topbar :as topbar]))
(defn image-captured [data]
(let [path (.-uri data)
@ -24,9 +24,7 @@
(defn profile-photo-capture []
(let [camera-ref (reagent/atom nil)]
[react/view styles/container
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/image-source-title)]]
[topbar/topbar {:title :t/image-source-title}]
[camera/camera {:style {:flex 1}
;:aspect (:fill camera/aspects)
:captureQuality "480p"

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

@ -137,7 +137,6 @@
:collectibles-list collectibles/collectibles-list
:contact-code [:modal wallet.components/contact-code]
:wallet-transaction-details wallet-transactions/transaction-details
:wallet-settings-hook wallet-settings/settings-hook
:wallet-settings-assets wallet-settings/manage-assets
:wallet-add-custom-token custom-tokens/add-custom-token
:wallet-custom-token-details custom-tokens/custom-token-details

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

@ -9,7 +9,8 @@
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.stickers.styles :as styles]
[status-im.utils.contenthash :as contenthash]
[status-im.utils.money :as money])
[status-im.utils.money :as money]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn- thumbnail-icon [uri size]
@ -61,7 +62,7 @@
(letsubs [packs [:stickers/all-packs]]
[react/view styles/screen
[react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar (i18n/label :t/sticker-market)]
[topbar/topbar {:title :t/sticker-market}]
(if (seq packs)
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:padding 16}}
[react/view
@ -79,7 +80,7 @@
:as pack}
[:stickers/get-current-pack]]
[react/keyboard-avoiding-view components.styles/flex
[toolbar/simple-toolbar nil modal?]
[topbar/topbar {:modal? modal?}]
(if pack
[react/view {:flex 1}
[react/view {:height 74 :align-items :center :flex-direction :row :padding-horizontal 16}

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

@ -5,7 +5,8 @@
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]))
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.topbar :as topbar]))
(defn- list-data [mailserver-id use-mobile-data?]
(let [mobile-data-usage-state (if use-mobile-data?
@ -51,8 +52,7 @@
(views/letsubs [{:keys [syncing-on-mobile-network?]} [:multiaccount]
mailserver-id [:mailserver/current-id]]
[react/view {:flex 1 :background-color colors/white}
[toolbar/simple-toolbar
(i18n/label :t/sync-settings)]
[topbar/topbar {:title :t/sync-settings}]
[list/flat-list
{:data (list-data mailserver-id syncing-on-mobile-network?)
:key-fn (fn [_ i] (str i))

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

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.account.views
(:require-macros [status-im.utils.views :as views])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.colors :as colors]
[re-frame.core :as re-frame]
[status-im.ui.screens.wallet.accounts.views :as accounts]
@ -16,21 +15,19 @@
[status-im.ethereum.core :as ethereum]
[status-im.ui.components.list-item.views :as list-item]
[status-im.utils.money :as money]
[status-im.wallet.utils :as wallet.utils]))
[status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.topbar :as topbar]))
(def state (reagent/atom {:tab :assets}))
(defn toolbar-view [title]
[react/view
[toolbar/toolbar {:transparent? true}
toolbar/default-nav-back
[toolbar/content-title title]
[toolbar/actions
[{:icon :main-icons/more
:icon-opts {:color :black}
:handler #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content sheets/account-settings
:content-height 60}])}]]]])
[topbar/topbar
{:title title
:accessories
[{:icon :main-icons/more
:handler #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content sheets/account-settings
:content-height 60}])}]}])
(defn button [label icon handler]
[react/touchable-highlight {:on-press handler :style {:flex 1}}

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

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.account-settings.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.ui.components.text-input.view :as text-input]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
@ -12,7 +11,8 @@
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.copyable-text :as copyable-text]
[reagent.core :as reagent]
[status-im.ui.components.list-item.views :as list-item]))
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar]))
(defview colors-popover [selected-color on-press]
(letsubs [width [:dimensions/window-width]]
@ -83,14 +83,16 @@
(letsubs [{:keys [address color path type] :as account} [:multiaccount/current-account]
new-account (reagent/atom nil)]
[react/keyboard-avoiding-view {:flex 1}
[topbar/toolbar {}
topbar/default-nav-back
[topbar/content-title (i18n/label :t/account-settings)]
(when (and @new-account (not= "" (:name @new-account)))
[button/button {:type :secondary :label (i18n/label :t/apply)
:on-press #(do
(re-frame/dispatch [:wallet.accounts/save-account account @new-account])
(reset! new-account nil))}])]
[topbar/topbar
(cond-> {:title :t/account-settings}
(and @new-account (not= "" (:name @new-account)))
(assoc :accessories [{:label :t/apply
:handler
#(do
(re-frame/dispatch [:wallet.accounts/save-account
account
@new-account])
(reset! new-account nil))}]))]
[react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1}}
[react/view {:padding-bottom 28 :padding-top 10}

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

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.add-new.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.view :as topbar]
[status-im.i18n :as i18n]
[re-frame.core :as re-frame]
[status-im.ui.components.colors :as colors]
@ -11,11 +10,12 @@
[status-im.multiaccounts.db :as multiaccounts.db]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.components.styles :as components.styles]
[status-im.ethereum.core :as ethereum]))
[status-im.ethereum.core :as ethereum]
[status-im.ui.components.topbar :as topbar]))
(defn add-account []
[react/view {:flex 1}
[topbar/simple-toolbar]
[topbar/topbar]
[react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1}}
[react/view {:align-items :center :padding-horizontal 40 :margin-bottom 52}
@ -63,7 +63,7 @@
(defview add-watch-account []
(letsubs [{:keys [address]} [:add-account]]
[react/keyboard-avoiding-view {:flex 1}
[topbar/simple-toolbar]
[topbar/topbar]
[react/view {:flex 1
:justify-content :space-between
:align-items :center :margin-horizontal 16}
@ -89,7 +89,7 @@
(letsubs [{:keys [error]} [:add-account]
entered-password (reagent/atom "")]
[react/keyboard-avoiding-view {:style {:flex 1}}
[topbar/simple-toolbar]
[topbar/topbar]
[react/view {:flex 1
:justify-content :space-between
:align-items :center :margin-horizontal 16}

8
src/status_im/ui/screens/wallet/collectibles/views.cljs
View File

@ -5,8 +5,8 @@
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as component.styles]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.wallet.collectibles.styles :as styles]))
[status-im.ui.screens.wallet.collectibles.styles :as styles]
[status-im.ui.components.topbar :as topbar]))
(defmulti render-collectible (fn [symbol _] symbol))
@ -19,9 +19,7 @@
collectibles [:screen-collectibles]]
[react/view styles/container
[react/view {:style component.styles/flex}
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title name]]
[topbar/topbar {:title name}]
(cond
(nil? collectibles)
[react/view {:style styles/loading-indicator}

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

@ -8,7 +8,8 @@
[status-im.ui.components.common.common :as components.common]
[clojure.string :as string]
[status-im.i18n :as i18n]
[status-im.ui.components.list-item.views :as list-item]))
[status-im.ui.components.list-item.views :as list-item]
[status-im.ui.components.topbar :as topbar]))
(def debounce-timers (atom {}))
@ -24,10 +25,7 @@
(letsubs [{:keys [contract name symbol balance decimals in-progress? error error-name error-symbol]}
[:wallet/custom-token-screen]]
[react/keyboard-avoiding-view {:flex 1 :background-color :white}
[toolbar/toolbar nil
toolbar/default-nav-back
[toolbar/content-title
(i18n/label :t/add-custom-token)]]
[topbar/topbar {:title :t/add-custom-token}]
[react/scroll-view {:keyboard-should-persist-taps :handled :style {:flex 1 :margin-top 8 :padding-horizontal 16}}
[react/view {:style {:flex-direction :row :justify-content :space-between :padding-vertical 10}}
[react/text (i18n/label :t/contract-address)]
@ -106,9 +104,7 @@
(letsubs [{:keys [address name symbol decimals custom?] :as token}
[:get-screen-params]]
[react/keyboard-avoiding-view {:flex 1 :background-color :white}
[toolbar/toolbar nil
toolbar/default-nav-back
[toolbar/content-title name]]
[topbar/topbar {:title name}]
[react/scroll-view {:keyboard-should-persist-taps :handled
:style {:flex 1 :margin-top 8}}
[react/view {:padding-horizontal 16}

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

@ -1,25 +1,22 @@
(ns status-im.ui.screens.wallet.settings.views
(:require [re-frame.core :as re-frame]
[status-im.ethereum.core :as ethereum]
[status-im.i18n :as i18n]
[status-im.ui.components.chat-icon.screen :as chat-icon]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.list-item.views :as list-item]
[reagent.core :as reagent])
[reagent.core :as reagent]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn toolbar []
[toolbar/toolbar nil
[toolbar/nav-button
(actions/back #(re-frame/dispatch
[:wallet.settings.ui/navigate-back-pressed]))]
[toolbar/content-title
(i18n/label :t/wallet-assets)]])
[topbar/topbar
{:title :t/wallet-assets
:navigation
{:icon :main-icons/back
:accessibility-label :back-button
:handler #(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed])}}])
(defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide-sheet])
@ -97,44 +94,4 @@
:render-section-header-fn
(fn [{:keys [title data]}]
[list-item/list-item {:type :section-header :title title}])
:render-fn render-token-wrapper}]]]))
(defn- create-payload [address]
{:address (ethereum/normalized-hex address)})
(defview settings-hook []
(letsubs [{:keys [label view on-close]} [:get-screen-params :wallet-settings-hook]
{address :address} [:multiaccount]]
[react/keyboard-avoiding-view {:style {:flex 1 :background-color colors/blue}}
[toolbar/toolbar
{:style {:border-bottom-color colors/white-transparent-10}}
[toolbar/nav-button
(actions/back-white
#(re-frame/dispatch [:wallet.settings.ui/navigate-back-pressed
(when (fn? on-close)
(on-close (create-payload address)))]))]
[toolbar/content-title {:color colors/white}
label]]
[view (create-payload address)]]))
(defn- setting->action [address {:keys [label on-open] :as m}]
{:label label
:action #(do
(when (fn? on-open)
(on-open (create-payload address)))
(re-frame/dispatch [:navigate-to :wallet-settings-hook m]))})
(defview toolbar-view []
(letsubs [settings [:wallet/settings]
{address :address} [:multiaccount]]
[toolbar/toolbar {:style {:background-color colors/blue
:border-bottom-width 0}}
nil
[toolbar/content-wrapper]
[toolbar/actions
[{:icon :main-icons/more
:icon-opts {:color colors/white
:accessibility-label :options-menu-button}
:options (into [{:label (i18n/label :t/wallet-manage-assets)
:action #(re-frame/dispatch [:navigate-to :wallet-settings-assets])}]
(map #(setting->action address %) settings))}]]]))
:render-fn render-token-wrapper}]]]))

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

@ -7,26 +7,10 @@
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.wallet.transactions.styles :as styles])
[status-im.ui.screens.wallet.transactions.styles :as styles]
[status-im.ui.components.topbar :as topbar])
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn history-action
[all-filters?]
(cond-> {:icon :main-icons/filter
:icon-opts {:accessibility-label :filters-button}
:handler #(re-frame/dispatch [:navigate-to :wallet-transactions-filter])}
(not all-filters?)
(assoc-in [:icon-opts :overlay-style] styles/corner-dot)))
(defn- toolbar-view
[all-filters?]
[toolbar/toolbar nil
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transactions-history)]
[toolbar/actions
[(history-action all-filters?)]]])
(defn- transaction-icon
[icon-key background-color color]
{:icon icon-key
@ -113,17 +97,11 @@
(letsubs [{:keys [filters all-filters? on-touch-select-all]}
[:wallet.transactions.filters/screen]]
[react/view styles/filter-container
[toolbar/toolbar {}
[toolbar/nav-clear-text
{:accessibility-label :done-button}
(i18n/label :t/done)]
[toolbar/content-title
(i18n/label :t/transactions-filter-title)]
[toolbar/text-action
{:handler on-touch-select-all
:disabled? all-filters?
:accessibility-label :select-all-button}
(i18n/label :t/transactions-filter-select-all)]]
[topbar/topbar {:title :t/transactions-filter-title
:navigation {:label (i18n/label :t/done)
:handler #(re-frame/dispatch [:navigate-back])}
:accessories [{:label :t/transactions-filter-select-all
:handler on-touch-select-all}]}]
[react/view
{:style (merge {:background-color :white} components.styles/flex)}
[list/section-list {:sections [{:title
@ -221,6 +199,7 @@
:as transaction}
[:wallet.transactions.details/screen hash address]]
[react/view {:style components.styles/flex}
;;TODO options should be replaced by bottom sheet ,and topbar should be used here
[toolbar/toolbar {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transaction-details)]