diff --git a/src/status_im/chat/new_chat/view.cljs b/src/status_im/chat/new_chat/view.cljs index b1bca15e68..0e1aaa2501 100644 --- a/src/status_im/chat/new_chat/view.cljs +++ b/src/status_im/chat/new_chat/view.cljs @@ -9,7 +9,7 @@ [status-im.components.react :refer [view text list-view list-item]] [status-im.components.contact.contact :refer [contact-view]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.components.toolbar.view :refer [toolbar-with-search]] [status-im.components.drawer.view :refer [drawer-view]] [status-im.chat.new-chat.styles :as styles] [status-im.utils.listview :as lw] diff --git a/src/status_im/chat/new_public_chat/view.cljs b/src/status_im/chat/new_public_chat/view.cljs index d1c8d4243a..7c3bde2318 100644 --- a/src/status_im/chat/new_public_chat/view.cljs +++ b/src/status_im/chat/new_public_chat/view.cljs @@ -2,11 +2,11 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :refer [dispatch]] status-im.utils.db - [status-im.components.react :refer [view text]] + [status-im.components.react :as react :refer [text]] [status-im.components.text-field.view :refer [text-field]] - [status-im.components.styles :as common] + [status-im.components.styles :as components.styles] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.view :as toolbar] [status-im.chat.new-public-chat.styles :as styles] [status-im.chat.new-public-chat.db :as v] [status-im.i18n :refer [label]] @@ -15,20 +15,19 @@ (defview new-public-chat-toolbar [] (letsubs [topic [:get :public-group-topic]] (let [create-btn-enabled? (spec/valid? ::v/topic topic)] - [view + [react/view [status-bar] - [toolbar - {:title (label :t/new-public-group-chat) - :actions [{:image {:source {:uri (if create-btn-enabled? - :icon_ok_blue - :icon_ok_disabled)} - :style common/icon-ok} - :handler (when create-btn-enabled? - #(dispatch [:create-new-public-chat topic]))}]}]]))) + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title (label :t/new-public-group-chat)] + [toolbar/actions [{:icon :icons/ok + :icon-opts {:color (if create-btn-enabled? components.styles/color-blue4 components.styles/color-gray11)} + :handler (when create-btn-enabled? + #(dispatch [:create-new-public-chat topic]))}]]]]))) (defview chat-name-input [] (letsubs [topic [:get :public-group-topic]] - [view + [react/view [text-field {:error (cond (not (spec/valid? :global/not-empty-string topic)) @@ -37,8 +36,8 @@ (not (spec/valid? ::v/topic topic)) (label :t/topic-format)) :wrapper-style styles/group-chat-name-wrapper - :error-color common/color-blue - :line-color common/color-gray4 + :error-color components.styles/color-blue + :line-color components.styles/color-gray4 :label-hidden? true :input-style styles/group-chat-topic-input :auto-focus true @@ -46,13 +45,13 @@ :value topic :validator #(re-matches #"[a-z\-]*" %) :auto-capitalize :none}] - [text {:style styles/topic-hash} "#"]])) + [react/text {:style styles/topic-hash} "#"]])) (defn new-public-chat [] - [view styles/group-container + [react/view styles/group-container [new-public-chat-toolbar] - [view styles/chat-name-container - [text {:style styles/members-text - :font :medium} + [react/view styles/chat-name-container + [react/text {:style styles/members-text + :font :medium} (label :t/public-group-topic)] [chat-name-input]]]) diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 651d4bd64c..eb459e18b2 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -18,7 +18,7 @@ [status-im.utils.datetime :as time] [status-im.utils.platform :as platform :refer [platform-specific]] [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.view :as toolbar] [status-im.chat.views.toolbar-content :refer [toolbar-content-view]] [status-im.chat.views.message.message :refer [chat-message]] [status-im.chat.views.message.datemark :refer [chat-datemark]] @@ -113,7 +113,7 @@ creating? [:get :accounts/creating-account?]] [view [status-bar] - [toolbar/toolbar2 {:show-sync-bar? true} + [toolbar/toolbar {:show-sync-bar? true} (when-not (or show-actions? creating?) (if (empty? accounts) [toolbar/nav-clear-text (label :t/recover) #(dispatch [:navigate-to-modal :recover-modal])] diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index 79f3d22312..798677b8aa 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -1,18 +1,10 @@ (ns status-im.chat.styles.screen (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.components.styles :refer [chat-background - selected-message-color - separator-color - text1-color - text2-color - text4-color - color-black - color-gray6]] - [status-im.components.toolbar.styles :refer [toolbar-background1]])) + (:require [status-im.components.styles :as component.styles])) (def chat-view {:flex 1 - :background-color chat-background}) + :background-color component.styles/chat-background}) (def toolbar-container {}) @@ -25,7 +17,7 @@ (def toolbar-view {:flexDirection :row :height 56 - :backgroundColor toolbar-background1 + :backgroundColor component.styles/color-white :elevation 2}) (def action @@ -54,7 +46,7 @@ :ios {:align-items :center}}) (def chat-name-text - {:color color-gray6 + {:color component.styles/color-gray6 :fontSize 16}) (def group-icon @@ -68,19 +60,19 @@ :height 8}) (defstyle members - {:color text4-color + {:color component.styles/text4-color :ios {:font-size 14 :margin-top 4} :android {:font-size 13}}) (defstyle last-activity-text - {:color text4-color + {:color component.styles/text4-color :ios {:font-size 14 :margin-top 4} :android {:font-size 13}}) (defn actions-wrapper [status-bar-height] - {:backgroundColor toolbar-background1 + {:backgroundColor component.styles/color-white :elevation 2 :position :absolute :top (+ 55 status-bar-height) @@ -90,7 +82,7 @@ (def actions-separator {:marginLeft 16 :height 1.5 - :backgroundColor separator-color}) + :backgroundColor component.styles/separator-color}) (def actions-view {:marginVertical 10}) @@ -111,12 +103,12 @@ (def action-title {:margin-top -2.5 - :color text1-color + :color component.styles/text1-color :font-size 14}) (def action-subtitle {:margin-top 1 - :color text2-color + :color component.styles/text2-color :font-size 12}) (def actions-overlay @@ -141,12 +133,12 @@ {:borderRadius 14 :padding 12 :height 38 - :backgroundColor selected-message-color}) + :backgroundColor component.styles/selected-message-color}) (def typing-text {:marginTop -2 :fontSize 12 - :color text2-color}) + :color component.styles/text2-color}) (def overlay-highlight {:flex 1}) @@ -163,7 +155,7 @@ :elevation 8}) (defn bottom-info-container [height] - {:backgroundColor toolbar-background1 + {:backgroundColor component.styles/color-white :elevation 2 :position :absolute :bottom 16 diff --git a/src/status_im/chat/views/input/animations/responder.cljs b/src/status_im/chat/views/input/animations/responder.cljs index a1e14f0cb0..4e5fb6daa1 100644 --- a/src/status_im/chat/views/input/animations/responder.cljs +++ b/src/status_im/chat/views/input/animations/responder.cljs @@ -5,7 +5,7 @@ [re-frame.core :refer [dispatch]] [taoensso.timbre :as log] [status-im.utils.platform :as p] - [status-im.components.toolbar-new.styles :as toolbar-st])) + [status-im.components.toolbar.styles :as toolbar-st])) ;; todo bad name. Ideas? (defn enough-dy [gesture] diff --git a/src/status_im/chat/views/input/utils.cljs b/src/status_im/chat/views/input/utils.cljs index df86191fc1..566f5b3750 100644 --- a/src/status_im/chat/views/input/utils.cljs +++ b/src/status_im/chat/views/input/utils.cljs @@ -1,6 +1,6 @@ (ns status-im.chat.views.input.utils (:require [taoensso.timbre :as log] - [status-im.components.toolbar-new.styles :as toolbar-st] + [status-im.components.toolbar.styles :as toolbar-st] [status-im.utils.platform :as p])) (def min-height 19) diff --git a/src/status_im/components/toolbar/actions.cljs b/src/status_im/components/toolbar/actions.cljs index e778f8646e..f474e63013 100644 --- a/src/status_im/components/toolbar/actions.cljs +++ b/src/status_im/components/toolbar/actions.cljs @@ -1,31 +1,65 @@ (ns status-im.components.toolbar.actions - (:require [status-im.components.toolbar.styles :as st])) - -(def nothing - {:image {:source nil - :style st/action-search}}) + (:require [re-frame.core :refer [dispatch]] + [status-im.components.toolbar.styles :as st])) (defn hamburger [handler] - {:image {:source {:uri :icon_hamburger} - :style st/action-hamburger} - :handler handler}) + {:icon :icons/hamburger + :handler handler + :accessibility-label :toolbar-hamburger-menu}) + +(defn hamburger-white [handler] + (merge (hamburger handler) + {:icon-opts {:color :white} + :handler handler})) (defn add [handler] - {:image {:source {:uri :icon_add} - :style st/action-add} + {:icon :icons/add :handler handler}) +(defn opts [options] + {:icon :icons/options + :options options}) + (defn search [handler] - {:image {:source {:uri :icon_search} - :style st/action-search} + {:icon :icons/search :handler handler}) +(def search-icon + {:icon :icons/search + :icon-opts {:container-style {:opacity 0.4}}}) + (defn back [handler] - {:image {:source {:uri :icon_back_dark} - :style st/action-back} - :handler handler}) + {:icon :icons/back + :handler handler + :accessibility-label :toolbar-back-button}) + +(def default-handler #(dispatch [:navigate-back])) + +(def default-back + (back default-handler)) (defn back-white [handler] - {:image {:source {:uri :icon_back_white} - :style st/action-back} - :handler handler}) \ No newline at end of file + {:icon :icons/back + :icon-opts {:color :white} + :handler handler}) + +(defn close [handler] + {:icon :icons/close + :handler handler}) + +(def default-close + (close default-handler)) + +(defn close-white [handler] + {:icon :icons/close + :icon-opts {:color :white} + :handler handler}) + +(defn list-white [handler] + {:icon :icons/transaction-history + :icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}} + :handler handler}) + +(defn add-wallet [handler] + {:icon :icons/add-wallet + :handler handler}) diff --git a/src/status_im/components/toolbar/styles.cljs b/src/status_im/components/toolbar/styles.cljs index b111d3acb4..97c2577404 100644 --- a/src/status_im/components/toolbar/styles.cljs +++ b/src/status_im/components/toolbar/styles.cljs @@ -1,103 +1,114 @@ (ns status-im.components.toolbar.styles - (:require [status-im.components.styles :refer [text1-color - color-white - color-light-gray - color-blue - color-black]])) + (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) + (:require [status-im.components.styles :as styles] + [status-im.utils.platform :as p])) -(def toolbar-background1 color-white) -(def toolbar-background2 color-light-gray) +(def toolbar-background1 styles/color-white) (def toolbar-height 56) -(def toolbar-icon-width 32) -(def toolbar-icon-spacing 8) +(def toolbar-icon-width 24) +(def toolbar-icon-height 24) +(def toolbar-icon-spacing 24) -(def toolbar-gradient - {:height 4}) +(defnstyle toolbar [background-color flat?] + {:flex 0 + :flex-direction :row + :align-items :center + :justify-content :space-between + :background-color (or background-color toolbar-background1) + :elevation (if flat? 0 2) + :android {:height 55} + :ios {:height 56}}) -(defn toolbar-wrapper [background-color] - {:backgroundColor (or background-color toolbar-background1) - :elevation 2}) - -(def toolbar +(defnstyle toolbar-nav-actions-container + [actions] {:flex-direction :row - :height toolbar-height}) + :margin-left 4}) -(defn toolbar-nav-actions-container [actions] - {:width (when (and actions (> (count actions) 0)) - (-> (+ toolbar-icon-width toolbar-icon-spacing) - (* (count actions)) - (+ toolbar-icon-spacing))) - :flex-direction "row"}) - -(def toolbar-nav-action - {:width toolbar-height - :height toolbar-height - :align-items :center - :justify-content :center - :padding-right 12}) +(defstyle toolbar-container + {:flex 1 + :android {:padding-left 18} + :ios {:align-items :center}}) (def toolbar-title-container {:flex 1 - :alignItems :center - :justifyContent :center}) + :flex-direction :column + :margin-left 6}) -(def toolbar-title-text - {:margin-top 0 - :color text1-color - :font-size 16}) +(defstyle toolbar-title-text + {:color styles/text1-color + :letter-spacing -0.2 + :font-size 17 + :ios {:text-align "center"}}) + +(def toolbar-border-container + (get-in p/platform-specific [:component-styles :toolbar-border-container])) + +(def toolbar-border + (get-in p/platform-specific [:component-styles :toolbar-border])) + +(def toolbar-actions + {:flex 0 + :flex-direction :row}) (defn toolbar-actions-container [actions-count custom] - (merge {:flex-direction "row" - :margin-left toolbar-icon-spacing} + (merge {:flex-direction :row} + (when-not custom {:margin-right 4}) (when (and (zero? actions-count) (not custom)) {:width (+ toolbar-icon-width toolbar-icon-spacing)}))) (def toolbar-action {:width toolbar-icon-width - :height toolbar-height - :margin-right toolbar-icon-spacing + :height toolbar-icon-height :align-items :center :justify-content :center}) (def toolbar-with-search - {:background-color toolbar-background2 - :elevation 0}) + {:background-color toolbar-background1}) -(def toolbar-with-search-content - {:flex 1 - :align-items :center - :justify-content :center}) +(defstyle toolbar-with-search-content + {:flex 1 + :android {:padding-left 18} + :ios {:align-items :center}}) -(def toolbar-search-input - {:flex 1 - :align-self :stretch - :margin-left 18 - :margin-top 2 - :font-size 14 - :color color-blue}) +(defstyle toolbar-search-input + {:line-height 24 + :height 24 + :font-size 17 + :padding-top 0 + :padding-left 0 + :padding-bottom 0 + :text-align-vertical :center + :color styles/color-black + :ios {:padding-left 8 + :padding-top 2 + :letter-spacing -0.2}}) -(def toolbar-with-search-title - {:color color-black - :align-self :center - :text-align :center - :font-size 16}) - - -;; Specific actions - -(def action-hamburger - {:width 16 - :height 12}) - -(def action-add - {:width 17 - :height 17}) - -(def action-search - {:width 17 - :height 17}) - -(def action-back +(def action-default {:width 24 :height 24}) + +(def nav-item-button + {:padding-vertical 16 + :padding-horizontal 12}) + +(def nav-item-text + {:padding-vertical 18 + :padding-horizontal 16}) + +(defstyle item + {:ios {:marginHorizontal 12 + :marginVertical 16} + :android {:margin 16}}) + +(def item-text + {:color styles/color-blue4 + :font-size 17}) + +(def toolbar-text-action-disabled {:color styles/color-gray7}) + +(def item-text-white-background {:color styles/color-blue4}) + +;;TODO(goranjovic) - Breaks the toolbar title into new line on smaller screens +;;e.g. see Discover > Popular hashtags on iPhone 5s +(def ios-content-item {:position :absolute :right 40 :left 40}) diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs index b45ed24893..e6eee0d35a 100644 --- a/src/status_im/components/toolbar/view.cljs +++ b/src/status_im/components/toolbar/view.cljs @@ -1,96 +1,182 @@ (ns status-im.components.toolbar.view - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.react :refer [view - text - text-input - image - touchable-highlight]] - [status-im.components.sync-state.gradient :refer [sync-state-gradient-view]] - [status-im.components.styles :refer [icon-back - icon-search]] + (:require [reagent.core :as r] + [re-frame.core :as rf] + [status-im.components.react :as rn] + [status-im.components.sync-state.gradient :as sync-state-gradient-view] + [status-im.components.styles :as st] + [status-im.components.context-menu :as context-menu] [status-im.components.toolbar.actions :as act] - [status-im.components.toolbar.styles :as st] - [status-im.utils.platform :refer [platform-specific]])) + [status-im.components.toolbar.styles :as tst] + [status-im.components.icons.vector-icons :as vi] + [status-im.utils.platform :as platform])) -;; TODO This is our old toolbar component. Please do not use it and consider moving legacy usage to the new toolbar_new component. +;; Navigation item -(defn toolbar [{title :title - nav-action :nav-action - hide-nav? :hide-nav? - actions :actions - custom-action :custom-action - background-color :background-color - custom-content :custom-content - style :style}] - (let [style (merge (st/toolbar-wrapper background-color) style)] - [view {:style style} - [view st/toolbar - [view (st/toolbar-nav-actions-container actions) - (when-not hide-nav? - (if nav-action - [touchable-highlight {:on-press (:handler nav-action)} - [view (get-in platform-specific [:component-styles :toolbar-nav-action]) - [image (:image nav-action)]]] - [touchable-highlight {:on-press #(dispatch [:navigate-back]) - :accessibility-label :toolbar-back-button} - [view (get-in platform-specific [:component-styles :toolbar-nav-action]) - [image {:source {:uri :icon_back} - :style icon-back}]]]))] - (or custom-content - [view {:style st/toolbar-title-container} - [text {:style st/toolbar-title-text - :font :toolbar-title} - title]]) - [view (st/toolbar-actions-container (count actions) custom-action) - (if actions - (for [{action-image :image - action-handler :handler - accessibility-label :accessibility-label} actions] - ^{:key (str "action-" action-image)} - [touchable-highlight {:on-press action-handler - :accessibility-label (:or accessibility-label :toolbar-action)} - [view st/toolbar-action - [image action-image]]]) - custom-action)]] - [sync-state-gradient-view]])) +(defn nav-item + [{:keys [handler accessibility-label style] :or {handler #(rf/dispatch [:navigate-back])}} item] + [rn/touchable-highlight + (merge {:on-press handler} + (when accessibility-label + {:accessibility-label accessibility-label})) + [rn/view {:style style} + item]]) + +(defn nav-button + [{:keys [icon icon-opts] :as props}] + [nav-item (merge {:style tst/nav-item-button} props) + [vi/icon icon icon-opts]]) + +(defn nav-text + ([text] (nav-text text nil)) + ([text handler] (nav-text nil text handler)) + ([props text handler] + [rn/text (merge {:style (merge tst/item tst/item-text) :on-press (or handler #(rf/dispatch [:navigate-back]))}) + text])) + +(defn nav-clear-text + ([text] (nav-clear-text text nil)) + ([text handler] + (nav-text tst/item-text-white-background text handler))) + +(def default-nav-back [nav-button act/default-back]) + +;; Content + +(defn content-wrapper [content] + [rn/view {:style tst/toolbar-container} + 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] + [rn/view {:style tst/toolbar-title-container} + [rn/text {:style (merge tst/toolbar-title-text title-style) + :font :toolbar-title} + title] + (when subtitle [rn/text {:style subtitle-style} subtitle])])) + +;; Actions + +(defn text-action [{:keys [style handler disabled?]} title] + [rn/text {:style (merge tst/item tst/item-text style + (when disabled? tst/toolbar-text-action-disabled)) + :on-press (when-not disabled? handler)} + title]) + +(def blank-action [rn/view {:style (merge tst/item tst/toolbar-action)}]) + +(defn- option-actions [icon icon-opts options] + [context-menu/context-menu + [rn/view {:style tst/toolbar-action} + [vi/icon icon icon-opts]] + options + nil + tst/item]) + +(defn- icon-action [icon icon-opts handler] + [rn/touchable-highlight {:on-press handler} + [rn/view {:style (merge tst/item tst/toolbar-action)} + [vi/icon icon icon-opts]]]) + +(defn actions [v] + [rn/view {:style tst/toolbar-actions} + (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))}))]) + +(defn toolbar + ([props nav-item content-item] (toolbar props nav-item content-item [actions [{:image :blank}]])) + ([{:keys [background-color style flat? show-sync-bar?]} + nav-item + content-item + action-items] + ;; TODO remove extra view wen we remove sync-state-gradient + [rn/view + [rn/view {:style (merge (tst/toolbar background-color flat?) style)} + ;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex + (when platform/ios? + [rn/view tst/ios-content-item + content-item]) + (when nav-item + [rn/view {:style (tst/toolbar-nav-actions-container 0)} + nav-item]) + (if platform/ios? + [rn/view st/flex] + content-item) + action-items] + (when show-sync-bar? [sync-state-gradient-view/sync-state-gradient-view])])) + +(defn simple-toolbar + "A simple toolbar whose content is a single line text" + ([] (simple-toolbar nil)) + ([title] (toolbar nil default-nav-back [content-title title]))) + +(def search-text-input (r/atom nil)) (defn- toolbar-search-submit [on-search-submit] - (let [text @(subscribe [:get-in [:toolbar-search :text]])] + (let [text @(rf/subscribe [:get-in [:toolbar-search :text]])] (on-search-submit text) - (dispatch [:set-in [:toolbar-search :text] nil]))) + (rf/dispatch [:set-in [:toolbar-search :text] nil]))) (defn- toolbar-with-search-content [{:keys [show-search? search-placeholder title + custom-title on-search-submit]}] - [view st/toolbar-with-search-content + [rn/view tst/toolbar-with-search-content (if show-search? - [text-input - {:style st/toolbar-search-input - :auto-focus true - :placeholder search-placeholder - :return-key-type "search" - :on-blur #(dispatch [:set-in [:toolbar-search :show] nil]) - :on-change-text #(dispatch [:set-in [:toolbar-search :text] %]) - :on-submit-editing #(toolbar-search-submit on-search-submit)}] - [view - [text {:style st/toolbar-with-search-title - :font :toolbar-title} - title]])]) + [rn/text-input + {:style tst/toolbar-search-input + :ref #(reset! search-text-input %) + :auto-focus true + :placeholder search-placeholder + :placeholder-text-color st/color-gray4 + :on-change-text #(rf/dispatch [:set-in [:toolbar-search :text] %]) + :on-submit-editing (when on-search-submit + #(toolbar-search-submit on-search-submit))}] + (or custom-title + [rn/view + [rn/text {:style tst/toolbar-title-text + :font :toolbar-title} + title]]))]) + +(defn- toggle-search-fn [text] + (rf/dispatch [:set-in [:toolbar-search :show] text]) + (rf/dispatch [:set-in [:toolbar-search :text] ""])) + +(defn- search-actions [show-search? search-text search-key actions] + (if show-search? + (if (pos? (count search-text)) + [(act/close #(do + (.clear @search-text-input) + (rf/dispatch [:set-in [:toolbar-search :text] ""])))] + [act/search-icon]) + (into [(act/search #(toggle-search-fn search-key))] actions))) + (defn toolbar-with-search [{:keys [show-search? + search-text search-key nav-action - actions style - on-search-submit] + modal?] :as opts}] - (let [toggle-search-fn #(dispatch [:set-in [:toolbar-search :show] %]) - actions (if-not show-search? - (into actions [(act/search #(toggle-search-fn search-key))]))] - [toolbar {:style (merge st/toolbar-with-search style) - :nav-action (if show-search? - (act/back #(toggle-search-fn nil)) - nav-action) - :custom-content [toolbar-with-search-content opts] - :actions actions}])) + ;; TODO(jeluard) refactor to components? Drop modal? and nav-action support + [toolbar {:modal? modal? + :style style} + [nav-button + (if show-search? + (act/back #(toggle-search-fn nil)) + (or nav-action (if modal? act/default-close act/default-back)))] + [toolbar-with-search-content opts] + [actions (search-actions show-search? search-text search-key (:actions opts))]]) \ No newline at end of file diff --git a/src/status_im/components/toolbar_new/actions.cljs b/src/status_im/components/toolbar_new/actions.cljs deleted file mode 100644 index c6d1691d56..0000000000 --- a/src/status_im/components/toolbar_new/actions.cljs +++ /dev/null @@ -1,65 +0,0 @@ -(ns status-im.components.toolbar-new.actions - (:require [re-frame.core :refer [dispatch]] - [status-im.components.toolbar-new.styles :as st])) - -(defn hamburger [handler] - {:icon :icons/hamburger - :handler handler - :accessibility-label :toolbar-hamburger-menu}) - -(defn hamburger-white [handler] - (merge (hamburger handler) - {:icon-opts {:color :white} - :handler handler})) - -(defn add [handler] - {:icon :icons/add - :handler handler}) - -(defn opts [options] - {:icon :icons/options - :options options}) - -(defn search [handler] - {:icon :icons/search - :handler handler}) - -(def search-icon - {:icon :icons/search - :icon-opts {:container-style {:opacity 0.4}}}) - -(defn back [handler] - {:icon :icons/back - :handler handler - :accessibility-label :toolbar-back-button}) - -(def default-handler #(dispatch [:navigate-back])) - -(def default-back - (back default-handler)) - -(defn back-white [handler] - {:icon :icons/back - :icon-opts {:color :white} - :handler handler}) - -(defn close [handler] - {:icon :icons/close - :handler handler}) - -(def default-close - (close default-handler)) - -(defn close-white [handler] - {:icon :icons/close - :icon-opts {:color :white} - :handler handler}) - -(defn list-white [handler] - {:icon :icons/transaction-history - :icon-opts {:color :white :style {:viewBox "-108 65.9 24 24"}} - :handler handler}) - -(defn add-wallet [handler] - {:icon :icons/add-wallet - :handler handler}) diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs deleted file mode 100644 index fde7eb4b1c..0000000000 --- a/src/status_im/components/toolbar_new/styles.cljs +++ /dev/null @@ -1,125 +0,0 @@ -(ns status-im.components.toolbar-new.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.components.styles :as styles] - [status-im.utils.platform :as p])) - -(def toolbar-background1 styles/color-white) - -(def toolbar-icon-width 24) -(def toolbar-icon-height 24) -(def toolbar-icon-spacing 24) - -;; TODO remove both definitions when toolbar will be replaced by toolbar2 -(defn toolbar-wrapper [background-color flat?] - {:background-color (or background-color toolbar-background1) - :elevation (if flat? 0 2)}) - -(defstyle toolbar-old - {:flex-direction :row - :align-items :center - :justify-content :space-between - :android {:height 55} - :ios {:height 56}}) - -(defnstyle toolbar [background-color flat?] - {:flex 0 - :flex-direction :row - :align-items :center - :justify-content :space-between - :background-color (or background-color toolbar-background1) - :elevation (if flat? 0 2) - :android {:height 55} - :ios {:height 56}}) - -(defnstyle toolbar-nav-actions-container - [actions] - {:flex-direction :row - :margin-left 4}) - -(defstyle toolbar-container - {:flex 1 - :android {:padding-left 18} - :ios {:align-items :center}}) - -(def toolbar-title-container - {:flex 1 - :flex-direction :column - :margin-left 6}) - -(defstyle toolbar-title-text - {:color styles/text1-color - :letter-spacing -0.2 - :font-size 17 - :ios {:text-align "center"}}) - -(def toolbar-border-container - (get-in p/platform-specific [:component-styles :toolbar-border-container])) - -(def toolbar-border - (get-in p/platform-specific [:component-styles :toolbar-border])) - -(def toolbar-actions - {:flex 0 - :flex-direction :row}) - -(defn toolbar-actions-container [actions-count custom] - (merge {:flex-direction :row} - (when-not custom {:margin-right 4}) - (when (and (zero? actions-count) (not custom)) - {:width (+ toolbar-icon-width toolbar-icon-spacing)}))) - -(def toolbar-action - {:width toolbar-icon-width - :height toolbar-icon-height - :align-items :center - :justify-content :center}) - -(def toolbar-with-search - {:background-color toolbar-background1}) - -(defstyle toolbar-with-search-content - {:flex 1 - :android {:padding-left 18} - :ios {:align-items :center}}) - -(defstyle toolbar-search-input - {:line-height 24 - :height 24 - :font-size 17 - :padding-top 0 - :padding-left 0 - :padding-bottom 0 - :text-align-vertical :center - :color styles/color-black - :ios {:padding-left 8 - :padding-top 2 - :letter-spacing -0.2}}) - -(def action-default - {:width 24 - :height 24}) - -(def nav-item-button - {:padding-vertical 16 - :padding-horizontal 12}) - -(def nav-item-text - {:padding-vertical 18 - :padding-horizontal 16}) - -(defstyle item - {:ios {:marginHorizontal 12 - :marginVertical 16} - :android {:margin 16}}) - -(def item-text - {:color styles/color-blue4 - :font-size 17}) - -(def toolbar-text-action-disabled {:color styles/color-gray7}) - -(def item-text-white-background {:color styles/color-blue4}) - -;;TODO(goranjovic) - Breaks the toolbar title into new line on smaller screens -;;e.g. see Discover > Popular hashtags on iPhone 5s -(def ios-content-item {:position :absolute :right 40 :left 40}) diff --git a/src/status_im/components/toolbar_new/view.cljs b/src/status_im/components/toolbar_new/view.cljs deleted file mode 100644 index 3caca588e8..0000000000 --- a/src/status_im/components/toolbar_new/view.cljs +++ /dev/null @@ -1,229 +0,0 @@ -(ns status-im.components.toolbar-new.view - (:require [reagent.core :as r] - [re-frame.core :as rf] - [status-im.components.react :as rn] - [status-im.components.sync-state.gradient :as sync-state-gradient-view] - [status-im.components.styles :as st] - [status-im.components.context-menu :as context-menu] - [status-im.components.toolbar-new.actions :as act] - [status-im.components.toolbar-new.styles :as tst] - [status-im.components.icons.vector-icons :as vi] - [status-im.utils.platform :as platform])) - -;; Navigation item - -(defn nav-item - [{:keys [handler accessibility-label style] :or {handler #(rf/dispatch [:navigate-back])}} item] - [rn/touchable-highlight - (merge {:on-press handler} - (when accessibility-label - {:accessibility-label accessibility-label})) - [rn/view {:style style} - item]]) - -(defn nav-button - [{:keys [icon icon-opts] :as props}] - [nav-item (merge {:style tst/nav-item-button} props) - [vi/icon icon icon-opts]]) - -(defn nav-text - ([text] (nav-text text nil)) - ([text handler] (nav-text nil text handler)) - ([props text handler] - [rn/text (merge {:style (merge tst/item tst/item-text) :on-press (or handler #(rf/dispatch [:navigate-back]))}) - text])) - -(defn nav-clear-text - ([text] (nav-clear-text text nil)) - ([text handler] - (nav-text tst/item-text-white-background text handler))) - -(def default-nav-back [nav-button act/default-back]) - -;; Content - -(defn content-wrapper [content] - [rn/view {:style tst/toolbar-container} - 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] - [rn/view {:style tst/toolbar-title-container} - [rn/text {:style (merge tst/toolbar-title-text title-style) - :font :toolbar-title} - title] - (when subtitle [rn/text {:style subtitle-style} subtitle])])) - -;; Actions - -(defn text-action [{:keys [style handler disabled?]} title] - [rn/text {:style (merge tst/item tst/item-text style - (when disabled? tst/toolbar-text-action-disabled)) - :on-press (when-not disabled? handler)} - title]) - -(def blank-action [rn/view {:style (merge tst/item tst/toolbar-action)}]) - -(defn- option-actions [icon icon-opts options] - [context-menu/context-menu - [rn/view {:style tst/toolbar-action} - [vi/icon icon icon-opts]] - options - nil - tst/item]) - -(defn- icon-action [icon icon-opts handler] - [rn/touchable-highlight {:on-press handler} - [rn/view {:style (merge tst/item tst/toolbar-action)} - [vi/icon icon icon-opts]]]) - -(defn actions [v] - [rn/view {:style tst/toolbar-actions} - (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))}))]) - -(defn toolbar2 - ([title] (toolbar2 nil title)) - ([props title] (toolbar2 props default-nav-back [content-title title])) - ([props nav-item content-item] (toolbar2 props nav-item content-item [actions [{:image :blank}]])) - ([{:keys [background-color style flat? show-sync-bar?]} - nav-item - content-item - action-items] - ;; TODO remove extra view wen we remove sync-state-gradient - [rn/view - [rn/view {:style (merge (tst/toolbar background-color flat?) style)} - ;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex - (when platform/ios? - [rn/view tst/ios-content-item - content-item]) - (when nav-item - [rn/view {:style (tst/toolbar-nav-actions-container 0)} - nav-item]) - (if platform/ios? - [rn/view st/flex] - content-item) - action-items] - (when show-sync-bar? [sync-state-gradient-view/sync-state-gradient-view])])) - -(defn toolbar - "DEPRECATED - Do not use, in the process of being replaced by toolbar2" - [{:keys [title - nav-action - hide-nav? - actions - custom-action - background-color - custom-content - hide-border? - modal? - border-style - title-style - style]}] - (let [style (merge (tst/toolbar-wrapper background-color false) style)] - [rn/view {:style style} - [rn/view tst/toolbar-old - (when-not hide-nav? - [rn/view (tst/toolbar-nav-actions-container actions) - [nav-button (or nav-action (if modal? act/default-close act/default-back))]]) - (or custom-content - [rn/view {:style tst/toolbar-container} - [rn/text {:style (merge tst/toolbar-title-text title-style) - :font :toolbar-title} - title]]) - - [rn/view (tst/toolbar-actions-container (count actions) custom-action) - (if actions - (for [{:keys [image icon icon-opts options handler]} actions] - (with-meta - (cond (= image :blank) - [rn/view tst/toolbar-action] - - options - [context-menu/context-menu - [rn/view tst/toolbar-action - [vi/icon icon icon-opts]] - options - nil - tst/item] - - :else - [rn/touchable-highlight {:style tst/item - :on-press handler} - [rn/view tst/toolbar-action - [vi/icon icon icon-opts]]]) - {:key (str "action-" (or icon image))})) - custom-action)]] - [sync-state-gradient-view/sync-state-gradient-view] - (when-not hide-border? - [rn/view (merge tst/toolbar-border-container border-style) - [rn/view tst/toolbar-border]])])) - -(def search-text-input (r/atom nil)) - -(defn- toolbar-search-submit [on-search-submit] - (let [text @(rf/subscribe [:get-in [:toolbar-search :text]])] - (on-search-submit text) - (rf/dispatch [:set-in [:toolbar-search :text] nil]))) - -(defn- toolbar-with-search-content [{:keys [show-search? - search-placeholder - title - custom-title - on-search-submit]}] - [rn/view tst/toolbar-with-search-content - (if show-search? - [rn/text-input - {:style tst/toolbar-search-input - :ref #(reset! search-text-input %) - :auto-focus true - :placeholder search-placeholder - :placeholder-text-color st/color-gray4 - :on-change-text #(rf/dispatch [:set-in [:toolbar-search :text] %]) - :on-submit-editing (when on-search-submit - #(toolbar-search-submit on-search-submit))}] - (or custom-title - [rn/view - [rn/text {:style tst/toolbar-title-text - :font :toolbar-title} - title]]))]) - -(defn toolbar-with-search [{:keys [show-search? - search-text - search-key - nav-action - actions - style - modal? - on-search-submit] - :as opts}] - (let [toggle-search-fn #(do - (rf/dispatch [:set-in [:toolbar-search :show] %]) - (rf/dispatch [:set-in [:toolbar-search :text] ""])) - actions (if show-search? - (if (pos? (count search-text)) - [(act/close #(do - (.clear @search-text-input) - (rf/dispatch [:set-in [:toolbar-search :text] ""])))] - [act/search-icon]) - (into [(act/search #(toggle-search-fn search-key))] actions))] - [toolbar {:modal? modal? - :style style - :nav-action (if show-search? - (act/back #(toggle-search-fn nil)) - nav-action) - :custom-content [toolbar-with-search-content opts] - :actions actions}])) diff --git a/src/status_im/ui/screens/accounts/login/views.cljs b/src/status_im/ui/screens/accounts/login/views.cljs index 2e196818f9..1670cbd436 100644 --- a/src/status_im/ui/screens/accounts/login/views.cljs +++ b/src/status_im/ui/screens/accounts/login/views.cljs @@ -6,15 +6,15 @@ [status-im.ui.screens.accounts.views :refer [account-badge]] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.ui.screens.accounts.login.styles :as st] [status-im.components.react :as react] [status-im.i18n :as i18n] [status-im.components.react :as components])) (defn login-toolbar [] - [toolbar/toolbar2 + [toolbar/toolbar {:background-color :transparent :hide-border? true} [toolbar/nav-button (act/back-white #(dispatch [:navigate-back]))] diff --git a/src/status_im/ui/screens/accounts/recover/views.cljs b/src/status_im/ui/screens/accounts/recover/views.cljs index b5bffb16db..40bc6ae0af 100644 --- a/src/status_im/ui/screens/accounts/recover/views.cljs +++ b/src/status_im/ui/screens/accounts/recover/views.cljs @@ -9,8 +9,8 @@ touchable-highlight]] [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar]] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.i18n :as i18n] [status-im.ui.screens.accounts.recover.styles :as st] [status-im.ui.screens.accounts.recover.db :as v] @@ -47,7 +47,8 @@ (spec/valid? ::v/password password))] [keyboard-avoiding-view {:style st/screen-container} [status-bar] - [toolbar {:title (i18n/label :t/recover-access) :modal? modal?}] + [toolbar/simple-toolbar {:modal? modal?} + (i18n/label :t/recover-access)] [passphrase-input (or passphrase "")] [password-input (or password "")] [view {:flex 1}] diff --git a/src/status_im/ui/screens/accounts/views.cljs b/src/status_im/ui/screens/accounts/views.cljs index f65a4263fa..cf09993a48 100644 --- a/src/status_im/ui/screens/accounts/views.cljs +++ b/src/status_im/ui/screens/accounts/views.cljs @@ -4,7 +4,7 @@ [status-im.ui.screens.accounts.styles :as st] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.actions :as act] [status-im.components.common.common :as common] [status-im.components.action-button.action-button :refer [action-button]] [status-im.utils.listview :as lw] diff --git a/src/status_im/ui/screens/chats_list/styles.cljs b/src/status_im/ui/screens/chats_list/styles.cljs index 7d1729c803..fc9f7eccce 100644 --- a/src/status_im/ui/screens/chats_list/styles.cljs +++ b/src/status_im/ui/screens/chats_list/styles.cljs @@ -1,30 +1,20 @@ (ns status-im.ui.screens.chats-list.styles (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.components.styles :refer [color-white - color-light-gray - color-blue - color-gray5 - text1-color - text2-color - text4-color - separator-color - new-messages-count-color]] + (:require [status-im.components.styles :as component.styles] [status-im.components.tabs.styles :as tabs-st] - [status-im.components.toolbar.styles :refer [toolbar-background1 - toolbar-background2]] [status-im.utils.platform :as p])) (defn toolbar [] - (merge {:background-color toolbar-background1} + (merge {:background-color component.styles/color-white} (get-in p/platform-specific [:component-styles :toolbar]))) (def chat-separator-item {:border-bottom-width 1 - :border-bottom-color color-gray5}) + :border-bottom-color component.styles/color-gray5}) (defstyle chat-container {:flex-direction :row - :background-color color-white + :background-color component.styles/color-white :android {:height 76} :ios {:height 74}}) @@ -71,7 +61,7 @@ :margin-right 4}) (def name-text - {:color text1-color + {:color component.styles/text1-color :font-size 16}) (defstyle private-group-icon-container @@ -100,7 +90,7 @@ {:flex-shrink 1}) (defstyle last-message-text - {:color text4-color + {:color component.styles/text4-color :android {:font-size 14 :height 24} :ios {:font-size 15 @@ -118,7 +108,7 @@ :height 16}) (defstyle datetime-text - {:color text4-color + {:color component.styles/text4-color :android {:font-size 14} :ios {:font-size 15}}) @@ -126,13 +116,13 @@ {:width 22 :height 22 :margin-left 15 - :background-color new-messages-count-color + :background-color component.styles/new-messages-count-color :border-radius 50}) (defstyle new-messages-text {:left 0 :fontSize 12 - :color color-blue + :color component.styles/color-blue :text-align :center :android {:top 2} :ios {:top 3}}) @@ -141,9 +131,9 @@ {:flex 1}) (defstyle list-container - {:android {:background-color color-light-gray} + {:android {:background-color component.styles/color-light-gray} - :ios {:background-color color-white}}) + :ios {:background-color component.styles/color-white}}) (def toolbar-actions {:flex-direction :row @@ -159,7 +149,7 @@ (def create-icon {:fontSize 20 :height 22 - :color color-white}) + :color component.styles/color-white}) (def group-icon {:margin-top 8 diff --git a/src/status_im/ui/screens/chats_list/views.cljs b/src/status_im/ui/screens/chats_list/views.cljs index 7f04b9b03d..3b6bd63a55 100644 --- a/src/status_im/ui/screens/chats_list/views.cljs +++ b/src/status_im/ui/screens/chats_list/views.cljs @@ -8,9 +8,9 @@ [status-im.components.drawer.view :as drawer] [status-im.components.styles :refer [color-blue]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] - [status-im.components.toolbar-new.styles :as tst] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] + [status-im.components.toolbar.styles :as tst] [status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.sync-state.offline :refer [offline-view]] [status-im.components.context-menu :refer [context-menu]] @@ -38,7 +38,7 @@ (act/add #(re-frame/dispatch [:navigate-to :new-chat]))]) (defn toolbar-view [] - [toolbar/toolbar2 {:show-sync-bar? true} + [toolbar/toolbar {:show-sync-bar? true} [toolbar/nav-button (act/hamburger drawer/open-drawer!)] [toolbar/content-title (i18n/label :t/chats)] [toolbar/actions @@ -47,7 +47,7 @@ (android-toolbar-actions))]]) (defn toolbar-edit [] - [toolbar/toolbar2 {:show-sync-bar? true} + [toolbar/toolbar {:show-sync-bar? true} [toolbar/nav-button (act/back #(re-frame/dispatch [:set-in [:chat-list-ui-props :edit?] false]))] [toolbar/content-title (i18n/label :t/edit-chats)]]) diff --git a/src/status_im/ui/screens/contacts/contact_list/views.cljs b/src/status_im/ui/screens/contacts/contact_list/views.cljs index ca7c023394..e7ccced9ae 100644 --- a/src/status_im/ui/screens/contacts/contact_list/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list/views.cljs @@ -6,8 +6,8 @@ [status-im.ui.screens.contacts.views :refer [contact-options]] [status-im.components.react :refer [view list-view list-item]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.components.drawer.view :refer [drawer-view]] [status-im.ui.screens.contacts.styles :as st] [status-im.utils.listview :as lw] @@ -23,16 +23,17 @@ :extend-options (contact-options row group)}]))) (defview contact-list-toolbar-edit [group] - [toolbar {:nav-action (act/back #(dispatch [:set-in [:contacts/list-ui-props :edit?] false])) - :actions [{:image :blank}] - :title (if-not group - (label :t/contacts) - (or (:name group) (label :t/contacts-group-new-chat)))}]) + [toolbar/toolbar {} + [toolbar/nav-button (act/back #(dispatch [:set-in [:contacts/list-ui-props :edit?] false]))] + [toolbar/content-title + (if-not group + (label :t/contacts) + (or (:name group) (label :t/contacts-group-new-chat)))]]) (defview contact-list-toolbar [group] (letsubs [show-search [:get-in [:toolbar-search :show]] search-text [:get-in [:toolbar-search :text]]] - (toolbar-with-search + (toolbar/toolbar-with-search {:show-search? (= show-search :contact-list) :search-text search-text :search-key :contact-list diff --git a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs index 4f84e649b9..1aea4cb220 100644 --- a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs @@ -9,7 +9,7 @@ action-separator]] [status-im.components.action-button.styles :refer [actions-list]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.components.toolbar.view :refer [toolbar-with-search]] [status-im.components.drawer.view :refer [drawer-view]] [status-im.ui.screens.contacts.styles :as st] [status-im.utils.listview :as lw] diff --git a/src/status_im/ui/screens/contacts/new_contact/views.cljs b/src/status_im/ui/screens/contacts/new_contact/views.cljs index 5218ef004d..2b41927e3c 100644 --- a/src/status_im/ui/screens/contacts/new_contact/views.cljs +++ b/src/status_im/ui/screens/contacts/new_contact/views.cljs @@ -1,89 +1,79 @@ (ns status-im.ui.screens.contacts.new-contact.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [re-frame.core :refer [dispatch]] - [clojure.string :as str] - [status-im.components.react :refer [view text]] - [status-im.components.text-field.view :refer [text-field]] - [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar.view :refer [toolbar]] - [status-im.components.toolbar.actions :as act] - [status-im.components.toolbar.styles :refer [toolbar-title-container - toolbar-title-text - toolbar-background1]] - [status-im.components.styles :refer [icon-ok button-input-container button-input color-blue]] - [status-im.components.image-button.view :refer [scan-button]] - [status-im.i18n :refer [label]] + (:require [re-frame.core :as re-frame] + [clojure.string :as string] [cljs.spec.alpha :as s] + [status-im.components.react :as react] + [status-im.components.text-field.view :as text-field] + [status-im.components.status-bar :as status-bar] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.styles :as components.styles :refer [icon-ok button-input-container button-input color-blue]] + [status-im.components.image-button.view :as scan-button] + [status-im.i18n :as i18n] + [status-im.ui.screens.contacts.db :as v] [status-im.ui.screens.contacts.styles :as st] - [status-im.utils.hex :refer [normalize-hex]] - [status-im.utils.platform :refer [platform-specific]] - [status-im.ui.screens.contacts.db :as v])) - -(def toolbar-title - [view toolbar-title-container - [text {:style toolbar-title-text} - (label :t/add-new-contact)]]) + [status-im.utils.hex :as hex] + [status-im.utils.platform :as platform])) (defn- validation-error-message [whisper-identity {:keys [address public-key]} error] (cond - (#{(normalize-hex address) (normalize-hex public-key)} - (normalize-hex whisper-identity)) - (label :t/can-not-add-yourself) + (#{(hex/normalize-hex address) (hex/normalize-hex public-key)} + (hex/normalize-hex whisper-identity)) + (i18n/label :t/can-not-add-yourself) (not (s/valid? :global/public-key whisper-identity)) - (label :t/enter-valid-public-key) + (i18n/label :t/enter-valid-public-key) (not (v/contact-can-be-added? whisper-identity)) - (label :t/contact-already-added) + (i18n/label :t/contact-already-added) :else error)) -(defn toolbar-actions [new-contact-identity account error] +(defn- toolbar-actions [new-contact-identity account error] (let [error-message (validation-error-message new-contact-identity account error)] - [{:image {:source {:uri (if (str/blank? error-message) - :icon_ok_blue - :icon_ok_disabled)} - :style icon-ok} - :handler #(when (str/blank? error-message) - (dispatch [:add-contact-handler new-contact-identity])) + [{:icon :icons/ok + :icon-opts {:color (if (string/blank? error-message) + components.styles/color-blue4 + components.styles/color-gray11)} + :handler #(when (string/blank? error-message) + (re-frame/dispatch [:add-contact-handler new-contact-identity])) :accessibility-label :confirm-button}])) (defview contact-whisper-id-input [whisper-identity error] (letsubs [current-account [:get-current-account]] - (let [error (when-not (str/blank? whisper-identity) + (let [error (when-not (string/blank? whisper-identity) (validation-error-message whisper-identity current-account error))] - [view button-input-container - [text-field + [react/view button-input-container + [text-field/text-field {:error error :error-color color-blue :input-style st/qr-input :value whisper-identity :wrapper-style button-input - :label (label :t/public-key) + :label (i18n/label :t/public-key) :on-change-text #(do - (dispatch [:set :contacts/new-identity %]) - (dispatch [:set :contacts/new-public-key-error nil])) + (re-frame/dispatch [:set :contacts/new-identity %]) + (re-frame/dispatch [:set :contacts/new-public-key-error nil])) :accessibility-label :public-key-input}] - [scan-button {:show-label? (zero? (count whisper-identity)) - :handler #(dispatch [:scan-qr-code - {:toolbar-title (label :t/new-contact)} - :set-contact-identity-from-qr])}]]))) + [scan-button/scan-button {:show-label? (zero? (count whisper-identity)) + :handler #(re-frame/dispatch [:scan-qr-code + {:toolbar-title (i18n/label :t/new-contact)} + :set-contact-identity-from-qr])}]]))) (defview new-contact [] (letsubs [new-contact-identity [:get :contacts/new-identity] error [:get :contacts/new-public-key-error] account [:get-current-account]] - [view st/contact-form-container - [status-bar] - [toolbar {:background-color toolbar-background1 - :style (get-in platform-specific [:component-styles :toolbar]) - :nav-action (act/back #(dispatch [:navigate-back])) - :title (label :t/add-new-contact) - :actions (toolbar-actions new-contact-identity account error)}] - [view st/form-container + [react/view st/contact-form-container + [status-bar/status-bar] + [toolbar/toolbar {:style (get-in platform/platform-specific [:component-styles :toolbar])} + toolbar/default-nav-back + [toolbar/content-title (i18n/label :t/add-new-contact)] + [toolbar/actions (toolbar-actions new-contact-identity account error)]] + [react/view st/form-container [contact-whisper-id-input new-contact-identity error]] - [view st/address-explication-container - [text {:style st/address-explication - :font :default} - (label :t/address-explication)]]])) + [react/view st/address-explication-container + [react/text {:style st/address-explication + :font :default} + (i18n/label :t/address-explication)]]])) diff --git a/src/status_im/ui/screens/contacts/views.cljs b/src/status_im/ui/screens/contacts/views.cljs index 95663a9ba0..6ee95d327d 100644 --- a/src/status_im/ui/screens/contacts/views.cljs +++ b/src/status_im/ui/screens/contacts/views.cljs @@ -6,8 +6,8 @@ [status-im.components.icons.vector-icons :as vi] [status-im.components.native-action-button :refer [native-action-button native-action-button-item]] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.components.drawer.view :as drawer] [status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.contact.contact :refer [contact-view]] @@ -31,14 +31,14 @@ (act/opts (if ios? toolbar-options (rest toolbar-options)))]) (defn toolbar-view [] - [toolbar/toolbar2 {} + [toolbar/toolbar {} [toolbar/nav-button (act/hamburger drawer/open-drawer!)] [toolbar/content-title (label :t/contacts)] [toolbar/actions (toolbar-actions)]]) (defn toolbar-edit [] - [toolbar/toolbar2 {} + [toolbar/toolbar {} [toolbar/nav-button (act/back #(dispatch [:set-in [:contacts/ui-props :edit?] false]))] [toolbar/content-title (label :t/edit-contacts)]]) diff --git a/src/status_im/ui/screens/discover/all_dapps/views.cljs b/src/status_im/ui/screens/discover/all_dapps/views.cljs index 96b364c9b2..4a0f72fd79 100644 --- a/src/status_im/ui/screens/discover/all_dapps/views.cljs +++ b/src/status_im/ui/screens/discover/all_dapps/views.cljs @@ -8,7 +8,7 @@ [status-im.ui.screens.discover.components.views :as discover-components] [status-im.ui.screens.discover.styles :as styles] [status-im.i18n :as i18n] - [status-im.components.toolbar-new.view :as toolbar])) + [status-im.components.toolbar.view :as toolbar])) (defn navigate-to-dapp [dapp] (do (re-frame/dispatch [:set :discover-current-dapp dapp]) @@ -49,7 +49,7 @@ tabs-hidden? [:tabs-hidden?]] (when (seq all-dapps) [react/view styles/all-dapps-container - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/dapps)]] [list/flat-list {:data (vals all-dapps) diff --git a/src/status_im/ui/screens/discover/dapp_details/views.cljs b/src/status_im/ui/screens/discover/dapp_details/views.cljs index bfea034df4..29bd344896 100644 --- a/src/status_im/ui/screens/discover/dapp_details/views.cljs +++ b/src/status_im/ui/screens/discover/dapp_details/views.cljs @@ -5,7 +5,7 @@ [status-im.components.chat-icon.screen :as chat-icon.screen] [status-im.components.common.common :as common] [status-im.components.icons.vector-icons :as vector-icons] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.view :as toolbar] [status-im.ui.screens.discover.styles :as styles] [status-im.i18n :as i18n] [re-frame.core :as re-frame])) @@ -22,7 +22,7 @@ (defview dapp-details [] (letsubs [{:keys [photo-path name dapp-url] :as dapp} [:get :discover-current-dapp]] [react/view styles/dapp-details-container - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/dapp-profile)]] [react/view styles/dapp-details-inner-container diff --git a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs index f4533266df..6f87d18f3d 100644 --- a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs +++ b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs @@ -6,7 +6,7 @@ [status-im.components.list.views :as list] [re-frame.core :as re-frame] [status-im.i18n :as i18n] - [status-im.components.toolbar-new.view :as toolbar])) + [status-im.components.toolbar.view :as toolbar])) (defn render-tag [tag] [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :discover-search-tags [tag]]) @@ -30,7 +30,7 @@ contacts [:get-contacts] {:keys [discoveries]} [:get-popular-discoveries 10]] ;uses the tags passed via :discover-search-tags state [react/view styles/all-recent-container - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/popular-tags)]] [tags-menu (map :name popular-tags)] diff --git a/src/status_im/ui/screens/discover/recent_statuses/views.cljs b/src/status_im/ui/screens/discover/recent_statuses/views.cljs index c541fbb857..b0febaf5cd 100644 --- a/src/status_im/ui/screens/discover/recent_statuses/views.cljs +++ b/src/status_im/ui/screens/discover/recent_statuses/views.cljs @@ -3,7 +3,7 @@ (:require [status-im.components.react :as react] [status-im.ui.screens.discover.components.views :as components] [status-im.ui.screens.discover.styles :as styles] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.view :as toolbar] [status-im.i18n :as i18n])) (defview discover-all-recent [] @@ -12,7 +12,7 @@ current-account [:get-current-account] contacts [:get-contacts]] [react/view styles/all-recent-container - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/recent)]] (when (seq discoveries) diff --git a/src/status_im/ui/screens/discover/search_results/views.cljs b/src/status_im/ui/screens/discover/search_results/views.cljs index 339af0b587..96e228650f 100644 --- a/src/status_im/ui/screens/discover/search_results/views.cljs +++ b/src/status_im/ui/screens/discover/search_results/views.cljs @@ -2,12 +2,11 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [status-im.components.react :as react] [status-im.components.icons.vector-icons :as vi] - [status-im.components.toolbar.view :refer [toolbar]] [status-im.ui.screens.discover.components.views :as components] [status-im.i18n :as i18n] [status-im.ui.screens.discover.styles :as styles] [status-im.ui.screens.contacts.styles :as contacts-styles] - [status-im.components.toolbar-new.view :as toolbar])) + [status-im.components.toolbar.view :as toolbar])) ;; TOOD(oskarth): Refactor this, very similar to discover-all-hashtags view (defview discover-search-results [] @@ -16,7 +15,7 @@ contacts [:get-contacts] current-account [:get-current-account]] [react/view styles/discover-tag-container - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (str "#" (first tags) " " total)]] (if (empty? discoveries) diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index a6a332b5b3..245aa24a9a 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -1,10 +1,11 @@ (ns status-im.ui.screens.discover.styles (:require-macros [status-im.utils.styles :refer [defstyle]]) - (:require [status-im.components.styles :as styles] - [status-im.components.toolbar.styles :refer [toolbar-background2]])) + (:require [status-im.components.styles :as styles])) ;; Common +(def background-color styles/color-light-gray) + (def row-separator {:border-bottom-width 1 :border-bottom-color styles/color-light-gray4}) @@ -83,7 +84,7 @@ {:flex-direction :column}) (def popular-container - {:background-color toolbar-background2}) + {:background-color background-color}) (def carousel-page-style {}) @@ -168,7 +169,7 @@ ;; discover_recent (def status-list-outer - {:background-color toolbar-background2}) + {:background-color background-color}) (def status-list-inner {:background-color :white @@ -179,7 +180,7 @@ (def all-dapps-container {:flex 1 :margin-top 16 - :background-color toolbar-background2}) + :background-color background-color}) (def all-dapps-flat-list {:justify-content :center @@ -292,7 +293,7 @@ styles/color-gray-transparent)}) (def recent-statuses-preview-container - {:background-color toolbar-background2}) + {:background-color background-color}) (def recent-statuses-preview-content {:border-radius 4 diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 79af06f440..0d8beada23 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -4,8 +4,8 @@ [clojure.string :as string] [status-im.components.react :as react] [status-im.components.icons.vector-icons :as vector-icons] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as actions] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as actions] [status-im.components.drawer.view :as drawer] [status-im.components.carousel.carousel :as carousel] [status-im.ui.screens.discover.components.views :as components] @@ -127,7 +127,7 @@ (re-frame/dispatch [:create-new-public-chat topic])) (defn render-public-chats-item [{:keys [name color topic] :as item}] - [react/touchable-highlight {:on-press #(navigate-to-public-chat topic)} + [react/touchable-highlight {:on-press #(navigate-to-public-chat topic)}] [react/view styles/public-chats-item-container [react/view styles/public-chats-icon-container @@ -142,7 +142,7 @@ name]] [react/view {} [react/text {:style {:color :lightgray}} - (str "#" topic)]]]]]) + (str "#" topic)]]]]) (defn public-chats-teaser [] [react/view styles/public-chats-container @@ -162,13 +162,13 @@ [react/view styles/discover-container [toolbar-view (and current-view? (= show-search :discover)) search-text] - [react/scroll-view styles/list-container - [recent-statuses-preview {:contacts contacts + [react/scroll-view styles/list-container + [recent-statuses-preview {:contacts contacts :current-account current-account :discoveries discoveries}] - [popular-hashtags-preview {:popular-tags popular-tags + [popular-hashtags-preview {:popular-tags popular-tags :popular-discoveries popular-discoveries :contacts contacts - :current-account current-account}] - [all-dapps/preview all-dapps] - [public-chats-teaser]]])) + :current-account current-account}] + [all-dapps/preview all-dapps] + [public-chats-teaser]]])) diff --git a/src/status_im/ui/screens/group/add_contacts/views.cljs b/src/status_im/ui/screens/group/add_contacts/views.cljs index 4b8890fec3..aa2bdfbfbd 100644 --- a/src/status_im/ui/screens/group/add_contacts/views.cljs +++ b/src/status_im/ui/screens/group/add_contacts/views.cljs @@ -6,7 +6,7 @@ text list-view list-item]] [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.components.toolbar.view :refer [toolbar-with-search]] [status-im.utils.listview :refer [to-datasource]] [status-im.ui.screens.group.styles :as styles] [status-im.ui.screens.contacts.styles :as cstyles] diff --git a/src/status_im/ui/screens/group/edit_contacts/views.cljs b/src/status_im/ui/screens/group/edit_contacts/views.cljs index c62f83b238..2b287c7612 100644 --- a/src/status_im/ui/screens/group/edit_contacts/views.cljs +++ b/src/status_im/ui/screens/group/edit_contacts/views.cljs @@ -5,7 +5,7 @@ [status-im.components.renderers.renderers :as renderers] [status-im.components.react :refer [view list-view list-item]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.components.toolbar.view :refer [toolbar-with-search]] [status-im.utils.listview :refer [to-datasource]] [status-im.ui.screens.group.styles :as styles] [status-im.i18n :refer [label]])) diff --git a/src/status_im/ui/screens/group/reorder/views.cljs b/src/status_im/ui/screens/group/reorder/views.cljs index 607c26d40a..bcc67a0d81 100644 --- a/src/status_im/ui/screens/group/reorder/views.cljs +++ b/src/status_im/ui/screens/group/reorder/views.cljs @@ -6,7 +6,7 @@ [status-im.components.icons.vector-icons :as vi] [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar.view :as toolbar] [status-im.components.sortable-list-view :refer [sortable-list-view sortable-item]] [status-im.components.common.common :as common] [status-im.ui.screens.group.styles :as styles] @@ -14,8 +14,8 @@ (defn toolbar-view [] - [toolbar {:actions [{:image :blank}] - :title (label :t/reorder-groups)}]) + [toolbar/simple-toolbar + (label :t/reorder-groups)]) (defn group-item [{:keys [name contacts] :as group}] (let [cnt (count contacts)] diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index 855c6da565..f46c6f4ed6 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -9,7 +9,7 @@ [status-im.components.icons.vector-icons :as vi] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar.view :as toolbar] [status-im.utils.platform :refer [platform-specific]] [status-im.components.sticky-button :refer [sticky-button]] [status-im.utils.listview :refer [to-datasource]] @@ -24,12 +24,11 @@ (defn group-toolbar [group-type edit?] [view [status-bar] - [toolbar - {:title (label - (if (= group-type :contact-group) - (if edit? :t/edit-group :t/new-group) - (if edit? :t/chat-settings :t/new-group-chat))) - :actions [{:image :blank}]}]]) + [toolbar/simple-toolbar + (label + (if (= group-type :contact-group) + (if edit? :t/edit-group :t/new-group) + (if edit? :t/chat-settings :t/new-group-chat)))]]) (defview group-name-view [] (letsubs [new-group-name [:get :new-chat-name]] diff --git a/src/status_im/ui/screens/network_settings/add_rpc/views.cljs b/src/status_im/ui/screens/network_settings/add_rpc/views.cljs index 2d49745050..bc1f58bbc6 100644 --- a/src/status_im/ui/screens/network_settings/add_rpc/views.cljs +++ b/src/status_im/ui/screens/network_settings/add_rpc/views.cljs @@ -2,7 +2,7 @@ (:require [re-frame.core :refer [dispatch]] [status-im.components.status-bar :as status-bar] - [status-im.components.toolbar-new.view :as toolbar-new] + [status-im.components.toolbar.view :as toolbar] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] [status-im.ui.screens.network-settings.views :as network-settings] [status-im.components.react :as react] @@ -14,7 +14,8 @@ (let [rpc-url "text"] [react/view {:flex 1} [status-bar/status-bar] - [toolbar-new/toolbar {:title (i18n/label :t/add-network)}] + [toolbar/simple-toolbar + (i18n/label :t/add-network)] [network-settings/network-badge] [react/view {:margin-top 8} [text-input-with-label {:label (i18n/label :t/rpc-url)}]] diff --git a/src/status_im/ui/screens/network_settings/network_details/views.cljs b/src/status_im/ui/screens/network_settings/network_details/views.cljs index 06b6a14d3b..ee0897cac5 100644 --- a/src/status_im/ui/screens/network_settings/network_details/views.cljs +++ b/src/status_im/ui/screens/network_settings/network_details/views.cljs @@ -3,7 +3,7 @@ (:require [re-frame.core :as rf] [status-im.components.status-bar :as status-bar] - [status-im.components.toolbar-new.view :as new-toolbar] + [status-im.components.toolbar.view :as toolbar] [status-im.components.context-menu :as context-menu] [status-im.ui.screens.network-settings.views :as network-settings] [status-im.components.react :as react] @@ -27,7 +27,7 @@ (let [connected? (= id network)] [react/view {:flex 1} [status-bar/status-bar] - [new-toolbar/toolbar] + [toolbar/simple-toolbar] [network-settings/network-badge {:name name :connected? connected?}] diff --git a/src/status_im/ui/screens/network_settings/parse_json/views.cljs b/src/status_im/ui/screens/network_settings/parse_json/views.cljs index e08e243deb..f0ee8b1c40 100644 --- a/src/status_im/ui/screens/network_settings/parse_json/views.cljs +++ b/src/status_im/ui/screens/network_settings/parse_json/views.cljs @@ -2,7 +2,7 @@ (:require [re-frame.core :refer [dispatch]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar.view :as toolbar] [status-im.ui.screens.network-settings.views :as network-settings] [status-im.components.react :refer [view text text-input]] [status-im.components.sticky-button :as sticky-button] @@ -15,7 +15,8 @@ error nil] [view {:flex 1} [status-bar] - [toolbar {:title (i18n/label :t/add-network)}] + [toolbar/simple-toolbar + (i18n/label :t/add-network)] [network-settings/network-badge] [view {:margin-top 16 :margin-left 16 diff --git a/src/status_im/ui/screens/network_settings/views.cljs b/src/status_im/ui/screens/network_settings/views.cljs index c9fd568971..daf96ac507 100644 --- a/src/status_im/ui/screens/network_settings/views.cljs +++ b/src/status_im/ui/screens/network_settings/views.cljs @@ -4,12 +4,11 @@ [status-im.utils.listview :as lw] [re-frame.core :as rf] [status-im.components.status-bar :as status-bar] - [status-im.components.toolbar-new.view :as toolbar-new] + [status-im.components.toolbar.view :as toolbar] [status-im.components.action-button.action-button :as action-button] [status-im.components.action-button.styles :as action-button-styles] [status-im.components.react :as react] [status-im.components.icons.vector-icons :as vi] - #_[status-im.components.context-menu :refer [context-menu]] [status-im.components.common.common :as common] [status-im.components.renderers.renderers :as renderers] [status-im.ui.screens.network-settings.styles :as st] @@ -34,10 +33,10 @@ ;; TODO(rasom): uncomment add-new-network button when it will be functional, ;; https://github.com/status-im/status-react/issues/2104 #_[react/view {:opacity 0.4} - [action-button/action-button - {:label (i18n/label :t/add-new-network) - :icon :icons/add - :icon-opts {:color :blue}}]] + [action-button/action-button + {:label (i18n/label :t/add-new-network) + :icon :icons/add + :icon-opts {:color :blue}}]] #_[context-menu ; TODO should be implemented later [action-button-view (i18n/label :t/add-new-network) :add_blue] [{:text (i18n/label :t/add-json-file) :value #(dispatch [:navigate-to :paste-json-text])} @@ -64,7 +63,8 @@ (views/letsubs [{:keys [network networks]} [:get-current-account]] [react/view {:flex 1} [status-bar/status-bar] - [toolbar-new/toolbar {:title (i18n/label :t/network-settings)}] + [toolbar/simple-toolbar + (i18n/label :t/network-settings)] [react/view {:flex 1} [react/list-view {:dataSource (lw/to-datasource (vals networks)) :renderRow (render-row network) diff --git a/src/status_im/ui/screens/profile/edit/views.cljs b/src/status_im/ui/screens/profile/edit/views.cljs index 5b666282a0..f6d8858a35 100644 --- a/src/status_im/ui/screens/profile/edit/views.cljs +++ b/src/status_im/ui/screens/profile/edit/views.cljs @@ -10,7 +10,7 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.sticky-button :refer [sticky-button]] [status-im.components.text-input-with-label.view :refer [text-input-with-label]] - [status-im.components.toolbar-new.view :refer [toolbar]] + [status-im.components.toolbar.view :as toolbar] [status-im.i18n :refer [label]] [status-im.ui.screens.profile.db :as db] [status-im.ui.screens.profile.events :as profile.events] @@ -20,8 +20,9 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn edit-my-profile-toolbar [] - [toolbar {:title (label :t/edit-profile) - :actions [{:image :blank}]}]) + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title (label :t/edit-profile)]]) (defview profile-name-input [] (letsubs [profile-name [:my-profile/get :name] diff --git a/src/status_im/ui/screens/profile/photo_capture/views.cljs b/src/status_im/ui/screens/profile/photo_capture/views.cljs index 99236df4ab..168b04615c 100644 --- a/src/status_im/ui/screens/profile/photo_capture/views.cljs +++ b/src/status_im/ui/screens/profile/photo_capture/views.cljs @@ -1,16 +1,14 @@ (ns status-im.ui.screens.profile.photo-capture.views - (:require [re-frame.core :refer [dispatch]] - [reagent.core :as r] - [status-im.components.camera :refer [aspects camera capture-targets]] - [status-im.components.icons.custom-icons :refer [ion-icon]] + (:require [re-frame.core :as re-frame] + [reagent.core :as reagent] + [status-im.components.camera :as camera] + [status-im.components.icons.custom-icons :as custom-icons] [status-im.components.react :as react] - [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar.actions :as actions] - [status-im.components.toolbar.styles :refer [toolbar-background1]] - [status-im.components.toolbar.view :refer [toolbar]] - [status-im.i18n :refer [label]] + [status-im.components.status-bar :as status-bar] + [status-im.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 :refer [img->base64]] + [status-im.utils.image-processing :as image-processing] [taoensso.timbre :as log])) (defn image-captured [data] @@ -18,27 +16,26 @@ _ (log/debug "Captured image: " path) on-success (fn [base64] (log/debug "Captured success: " base64) - (dispatch [:my-profile/update-picture base64]) - (dispatch [:navigate-back])) + (re-frame/dispatch [:my-profile/update-picture base64]) + (re-frame/dispatch [:navigate-back])) on-error (fn [type error] (log/debug type error))] - (img->base64 path on-success on-error))) + (image-processing/img->base64 path on-success on-error))) (defn profile-photo-capture [] - (let [camera-ref (r/atom nil)] + (let [camera-ref (reagent/atom nil)] [react/view styles/container - [status-bar] - [toolbar {:title (label :t/image-source-title) - :nav-action (actions/back #(dispatch [:navigate-back])) - :background-color toolbar-background1}] - [camera {:style {:flex 1} - :aspect (:fill aspects) - :captureQuality "480p" - :captureTarget (:disk capture-targets) - :type "front" - :ref #(reset! camera-ref %)}] - [react/view {:style {:padding 10 - :background-color toolbar-background1}} + [status-bar/status-bar] + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title (i18n/label :t/image-source-title)]] + [camera/camera {:style {:flex 1} + :aspect (:fill camera/aspects) + :captureQuality "480p" + :captureTarget (:disk camera/capture-targets) + :type "front" + :ref #(reset! camera-ref %)}] + [react/view {:style {:padding 10}} [react/touchable-highlight {:style {:align-self "center"} :on-press (fn [] (let [camera @camera-ref] @@ -46,5 +43,5 @@ (.then image-captured) (.catch #(log/debug "Error capturing image: " %)))))} [react/view - [ion-icon {:name :md-camera - :style {:font-size 36}}]]]]])) + [custom-icons/ion-icon {:name :md-camera + :style {:font-size 36}}]]]]])) diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index 567512706f..25b6ade715 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -13,8 +13,8 @@ [status-im.components.icons.vector-icons :as vi] [status-im.components.status-bar :refer [status-bar]] [status-im.components.styles :refer [color-blue]] - [status-im.components.toolbar-new.actions :as actions] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.actions :as actions] + [status-im.components.toolbar.view :as toolbar] [status-im.i18n :refer [label]] [status-im.ui.screens.profile.styles :as styles] [status-im.utils.datetime :as time] @@ -24,15 +24,22 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn my-profile-toolbar [] - [toolbar/toolbar {:actions [(actions/opts [{:value #(dispatch [:my-profile/edit-profile]) - :text (label :t/edit)}])]}]) + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title ""] + [toolbar/actions + [(actions/opts [{:value #(dispatch [:my-profile/edit-profile]) + :text (label :t/edit)}])]]]) (defn profile-toolbar [contact] - [toolbar/toolbar - (when (and (not (:pending? contact)) - (not (:unremovable? contact))) - {:actions [(actions/opts [{:value #(dispatch [:hide-contact contact]) - :text (label :t/remove-from-contacts)}])]})]) + [toolbar/toolbar {} + toolbar/default-nav-back + [toolbar/content-title ""] + [toolbar/actions + (when (and (not (:pending? contact)) + (not (:unremovable? contact))) + [(actions/opts [{:value #(dispatch [:hide-contact contact]) + :text (label :t/remove-from-contacts)}])])]]) (defn online-text [last-online] (let [last-online-date (time/to-date last-online) diff --git a/src/status_im/ui/screens/qr_scanner/styles.cljs b/src/status_im/ui/screens/qr_scanner/styles.cljs index c83ebf08db..476398236e 100644 --- a/src/status_im/ui/screens/qr_scanner/styles.cljs +++ b/src/status_im/ui/screens/qr_scanner/styles.cljs @@ -1,6 +1,6 @@ (ns status-im.ui.screens.qr-scanner.styles (:require [status-im.components.styles :refer [color-white]] - [status-im.components.toolbar.styles :refer [toolbar-height]] + [status-im.components.toolbar.styles :as toolbar.styles] [status-im.utils.platform :as p])) (def barcode-scanner-container @@ -15,7 +15,7 @@ (def rectangle-container {:position :absolute :left 0 - :top toolbar-height + :top toolbar.styles/toolbar-height :bottom 0 :right 0 :flex 1 diff --git a/src/status_im/ui/screens/qr_scanner/views.cljs b/src/status_im/ui/screens/qr_scanner/views.cljs index a0c96c594d..8451a3b563 100644 --- a/src/status_im/ui/screens/qr_scanner/views.cljs +++ b/src/status_im/ui/screens/qr_scanner/views.cljs @@ -6,27 +6,21 @@ [status-im.components.camera :as camera] [status-im.components.status-bar :as status-bar] [status-im.components.toolbar.view :as toolbar] - [status-im.components.toolbar.actions :as action] - [status-im.components.toolbar.styles :as toolbar.styles] [status-im.ui.screens.qr-scanner.styles :as styles])) (defview qr-scanner-toolbar [title hide-nav?] (letsubs [modal [:get :modal]] [react/view [status-bar/status-bar] - [toolbar/toolbar {:title title - :background-color toolbar.styles/toolbar-background1 - :hide-nav? hide-nav? - :nav-action (when modal - (action/back #(re-frame/dispatch [:navigate-back])))}]])) + [toolbar/simple-toolbar title]])) (defview qr-scanner [] (letsubs [identifier [:get :current-qr-context] camera-initialized? (reagent/atom false)] + [react/view styles/barcode-scanner-container [qr-scanner-toolbar (:toolbar-title identifier) (not @camera-initialized?)] [camera/camera {:onBarCodeRead #(re-frame/dispatch [:set-qr-code identifier (camera/get-qr-code-data %)]) - ;:barCodeTypes [:qr] :ref #(reset! camera-initialized? true) :captureAudio false :style styles/barcode-scanner}] diff --git a/src/status_im/ui/screens/wallet/choose_recipient/views.cljs b/src/status_im/ui/screens/wallet/choose_recipient/views.cljs index b69494d55d..3f6017a456 100644 --- a/src/status_im/ui/screens/wallet/choose_recipient/views.cljs +++ b/src/status_im/ui/screens/wallet/choose_recipient/views.cljs @@ -6,8 +6,8 @@ [status-im.components.icons.vector-icons :as vector-icons] [status-im.components.react :as react] [status-im.components.status-bar :as status-bar] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.i18n :as i18n] [status-im.ui.screens.wallet.choose-recipient.styles :as styles] [status-im.utils.platform :as platform] @@ -21,7 +21,7 @@ :params {:hide-actions? true}}])) (defn toolbar-view [camera-flashlight] - [toolbar/toolbar2 {:style wallet.styles/toolbar} + [toolbar/toolbar {:style wallet.styles/toolbar} [toolbar/nav-button (act/back-white act/default-handler)] [toolbar/content-title {:color :white} (i18n/label :t/wallet-choose-recipient)] [toolbar/actions [{:icon (if (= :on camera-flashlight) :icons/flash-active diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 3e6edd7d8b..922bc259a3 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -7,8 +7,8 @@ [status-im.components.list.views :as list] [status-im.components.react :as react] [status-im.components.icons.vector-icons :as vi] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as act] [status-im.i18n :as i18n] [status-im.react-native.resources :as resources] [status-im.utils.config :as config] @@ -42,7 +42,7 @@ :handler #(rf/dispatch [:navigate-to :transactions-history])}) (defn toolbar-view [] - [toolbar/toolbar2 {:style wallet.styles/toolbar} + [toolbar/toolbar {:style wallet.styles/toolbar} [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)] [toolbar/content-wrapper [toolbar-title]] diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index d26c851ef5..820a892179 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -4,8 +4,8 @@ [re-frame.core :as re-frame] [status-im.components.react :as react] [status-im.components.qr-code :as components.qr-code] - [status-im.components.toolbar-new.actions :as actions] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.actions :as actions] + [status-im.components.toolbar.view :as toolbar] [status-im.components.status-bar :as status-bar] [status-im.ui.screens.wallet.styles :as wallet.styles] [status-im.components.icons.vector-icons :as vi] @@ -18,7 +18,7 @@ [status-im.components.common.common :as common])) (defn toolbar-view [] - [toolbar/toolbar2 {:style wallet.styles/toolbar :hide-border? true} + [toolbar/toolbar {:style wallet.styles/toolbar :hide-border? true} [toolbar/nav-button (actions/back-white actions/default-handler)] [toolbar/content-title {:color :white} (i18n/label :t/request-transaction)]]) diff --git a/src/status_im/ui/screens/wallet/send/views.cljs b/src/status_im/ui/screens/wallet/send/views.cljs index 241de897c4..10c2e25f47 100644 --- a/src/status_im/ui/screens/wallet/send/views.cljs +++ b/src/status_im/ui/screens/wallet/send/views.cljs @@ -7,8 +7,8 @@ [status-im.components.react :as react] [status-im.components.status-bar :as status-bar] [status-im.components.styles :as components.styles] - [status-im.components.toolbar-new.actions :as act] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.actions :as act] + [status-im.components.toolbar.view :as toolbar] [status-im.i18n :as i18n] [status-im.ui.screens.wallet.components.views :as components] [status-im.ui.screens.wallet.send.animations :as send.animations] @@ -20,7 +20,7 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn toolbar-view [signing?] - [toolbar/toolbar2 {:style wallet.styles/toolbar} + [toolbar/toolbar {:style wallet.styles/toolbar} [toolbar/nav-button (act/back-white (if signing? #(re-frame/dispatch [:wallet/discard-transaction-navigate-back]) act/default-handler))] @@ -142,7 +142,7 @@ (when in-progress? [react/view send.styles/processing-view])]))) (defn toolbar-modal [from-chat?] - [toolbar/toolbar2 {:style wallet.styles/toolbar} + [toolbar/toolbar {:style wallet.styles/toolbar} [toolbar/nav-button (act/close-white (if from-chat? #(re-frame/dispatch [:wallet/discard-transaction-navigate-back]) act/default-handler))] diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 08ac7ef9b8..8e3244fb2b 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -7,8 +7,8 @@ [status-im.components.status-bar :as status-bar] [status-im.components.styles :as styles] [status-im.components.tabs.views :as tabs] - [status-im.components.toolbar-new.actions :as actions] - [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar.actions :as actions] + [status-im.components.toolbar.view :as toolbar] [status-im.i18n :as i18n] [status-im.ui.screens.wallet.transactions.styles :as transactions.styles] [status-im.ui.screens.wallet.views :as wallet.views] @@ -39,13 +39,13 @@ :handler #(utils/show-popup "TODO" "Not implemented") #_(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}) (defn toolbar-view [current-tab unsigned-transactions-count] - [toolbar/toolbar2 {:flat? true} + [toolbar/toolbar {:flat? true} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/transactions)] (case current-tab :transactions-history [toolbar/actions [history-action]] - :unsigned-transactions nil ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count] - )]) + :unsigned-transactions nil)]) ;; TODO (andrey) implement [unsigned-action unsigned-transactions-count] + (defn action-buttons [{:keys [id to value] :as transaction}] [react/view {:style transactions.styles/action-buttons} @@ -162,7 +162,7 @@ (defview filter-history [] [] [react/view - [toolbar/toolbar2 {} + [toolbar/toolbar {} [toolbar/nav-clear-text (i18n/label :t/done)] [toolbar/content-title (i18n/label :t/transactions-filter-title)] [toolbar/text-action {:handler #(utils/show-popup "TODO" "Select All")} @@ -269,7 +269,7 @@ confirmations-progress [:wallet.transactions.details/confirmations-progress]] [react/view {:style styles/flex} [status-bar/status-bar] - [toolbar/toolbar2 {} + [toolbar/toolbar {} toolbar/default-nav-back [toolbar/content-title (i18n/label :t/transaction-details)] (when transaction [toolbar/actions (details-action hash url)])] diff --git a/src/status_im/ui/screens/wallet/wallet_list/views.cljs b/src/status_im/ui/screens/wallet/wallet_list/views.cljs index f0c5201c3d..f5baa3312c 100644 --- a/src/status_im/ui/screens/wallet/wallet_list/views.cljs +++ b/src/status_im/ui/screens/wallet/wallet_list/views.cljs @@ -5,14 +5,14 @@ [status-im.components.list.views :as list] [status-im.components.react :as react] [status-im.components.status-bar :as status-bar] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as actions] + [status-im.components.toolbar.view :as toolbar] + [status-im.components.toolbar.actions :as actions] [status-im.i18n :as i18n] [status-im.ui.screens.wallet.wallet-list.styles :as styles] [status-im.utils.utils :as utils])) (defn- toolbar-view [transactions] - [toolbar/toolbar2 {:style styles/toolbar} + [toolbar/toolbar {:style styles/toolbar} [toolbar/nav-clear-text (i18n/label :t/done) #(re-frame/dispatch [:navigate-back])] [toolbar/content-title (i18n/label :t/wallets)] [toolbar/actions