From d582e6e366e385def82b0f7c20eddb0ca4b6873a Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Wed, 10 Jan 2018 16:23:16 +0300 Subject: [PATCH] reworked main tabs, removed swiper and drawer npm libs --- .re-natal | 2 - package.json | 2 - .../react_native/js_dependencies.cljs | 2 - resources/icons/bottom/home_blue.svg | 7 + resources/icons/bottom/home_gray.svg | 6 + resources/icons/bottom/profile_blue.svg | 6 + resources/icons/bottom/profile_gray.svg | 3 + src/status_im/chat/new_chat/view.cljs | 26 ++- src/status_im/chat/views/toolbar_content.cljs | 4 +- src/status_im/translations/en.cljs | 8 +- .../ui/components/drawer/styles.cljs | 177 ------------------ src/status_im/ui/components/drawer/view.cljs | 133 ------------- .../ui/components/icons/vector_icons.cljs | 17 +- src/status_im/ui/components/react.cljs | 4 - src/status_im/ui/components/tabs/views.cljs | 57 ------ .../ui/components/toolbar/actions.cljs | 10 - .../ui/screens/chats_list/styles.cljs | 3 +- .../ui/screens/chats_list/views.cljs | 88 +++------ .../screens/contacts/contact_list/views.cljs | 17 +- .../contacts/contact_list_modal/views.cljs | 40 ++-- src/status_im/ui/screens/contacts/styles.cljs | 3 +- src/status_im/ui/screens/contacts/views.cljs | 2 - src/status_im/ui/screens/discover/views.cljs | 2 - .../tabs => screens/main_tabs}/styles.cljs | 13 +- src/status_im/ui/screens/main_tabs/views.cljs | 103 +++++----- src/status_im/ui/screens/profile/views.cljs | 3 +- src/status_im/ui/screens/views.cljs | 5 +- .../ui/screens/wallet/assets/styles.cljs | 2 +- .../ui/screens/wallet/assets/views.cljs | 10 +- .../ui/screens/wallet/main/views.cljs | 3 +- .../screens/wallet/transactions/styles.cljs | 5 +- .../ui/screens/wallet/transactions/views.cljs | 30 ++- .../react_native/js_dependencies.cljs | 2 - 33 files changed, 194 insertions(+), 601 deletions(-) create mode 100644 resources/icons/bottom/home_blue.svg create mode 100644 resources/icons/bottom/home_gray.svg create mode 100644 resources/icons/bottom/profile_blue.svg create mode 100644 resources/icons/bottom/profile_gray.svg delete mode 100644 src/status_im/ui/components/drawer/styles.cljs delete mode 100644 src/status_im/ui/components/drawer/view.cljs delete mode 100644 src/status_im/ui/components/tabs/views.cljs rename src/status_im/ui/{components/tabs => screens/main_tabs}/styles.cljs (72%) diff --git a/.re-natal b/.re-natal index 40558f5bf9..fd1ba699d8 100644 --- a/.re-natal +++ b/.re-natal @@ -37,13 +37,11 @@ "react-native-image-resizer", "react-native-image-crop-picker", "react-native-webview-bridge", - "react-native-drawer-layout", "react-native-fcm", "homoglyph-finder", "web3", "eccjs", "chance", - "react-native-swiper", "react-native-emoji-picker", "react-native-autolink", "instabug-reactnative", diff --git a/package.json b/package.json index cf3a62c6ab..ad68302c82 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "react-native-contacts": "1.0.3", "react-native-crypto": "2.1.1", "react-native-dialogs": "0.0.20", - "react-native-drawer-layout": "2.0.0", "react-native-emoji-picker": "git+https://github.com/status-im/react-native-emoji-picker.git", "react-native-fcm": "10.0.3", "react-native-fs": "2.8.1", @@ -76,7 +75,6 @@ "react-native-sortable-listview": "0.2.6", "react-native-splash-screen": "3.0.6", "react-native-svg": "6.0.0", - "react-native-swiper": "1.5.13", "react-native-tcp": "^3.2.1", "react-native-udp": "2.2.1", "react-native-vector-icons": "4.4.2", diff --git a/react-native/src/status_im/react_native/js_dependencies.cljs b/react-native/src/status_im/react_native/js_dependencies.cljs index b7112caf74..99d6212fdf 100644 --- a/react-native/src/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/status_im/react_native/js_dependencies.cljs @@ -9,7 +9,6 @@ (def contacts (js/require "react-native-contacts")) (def dialogs (js/require "react-native-dialogs")) (def dismiss-keyboard (js/require "dismissKeyboard")) -(def drawer (js/require "react-native-drawer-layout")) (def emoji-picker (js/require "react-native-emoji-picker")) (def fs (js/require "react-native-fs")) (def http-bridge (js/require "react-native-http-bridge")) @@ -29,7 +28,6 @@ (def react-native (js/require "react-native")) (def realm (js/require "realm")) (def sortable-listview (js/require "react-native-sortable-listview")) -(def swiper (js/require "react-native-swiper")) (def vector-icons (js/require "react-native-vector-icons/Ionicons")) (def webview-bridge (js/require "react-native-webview-bridge")) (def svg (js/require "react-native-svg")) diff --git a/resources/icons/bottom/home_blue.svg b/resources/icons/bottom/home_blue.svg new file mode 100644 index 0000000000..c3dc3985ad --- /dev/null +++ b/resources/icons/bottom/home_blue.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/resources/icons/bottom/home_gray.svg b/resources/icons/bottom/home_gray.svg new file mode 100644 index 0000000000..49da5ae7f0 --- /dev/null +++ b/resources/icons/bottom/home_gray.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/resources/icons/bottom/profile_blue.svg b/resources/icons/bottom/profile_blue.svg new file mode 100644 index 0000000000..c8d58c86af --- /dev/null +++ b/resources/icons/bottom/profile_blue.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/icons/bottom/profile_gray.svg b/resources/icons/bottom/profile_gray.svg new file mode 100644 index 0000000000..ed5bc01e96 --- /dev/null +++ b/resources/icons/bottom/profile_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/status_im/chat/new_chat/view.cljs b/src/status_im/chat/new_chat/view.cljs index bcfe690573..b702cf33a7 100644 --- a/src/status_im/chat/new_chat/view.cljs +++ b/src/status_im/chat/new_chat/view.cljs @@ -10,7 +10,6 @@ [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :refer [status-bar]] [status-im.ui.components.toolbar.view :refer [toolbar-with-search]] - [status-im.ui.components.drawer.view :as drawer] [status-im.chat.new-chat.styles :as styles] [status-im.i18n :as i18n])) @@ -58,16 +57,15 @@ (defview new-chat [] (letsubs [contacts [:all-added-group-contacts-filtered] params [:get :contacts/click-params]] - [drawer/drawer-view - [react/view styles/contacts-list-container - [new-chat-toolbar] - (when contacts - [list/flat-list {:style styles/contacts-list - :data contacts - :render-fn contact-list-row - :bounces false - :keyboardShouldPersistTaps :always - :header (header contacts) - :footer [react/view - [common/list-footer] - [common/bottom-shadow]]}])]])) + [react/view styles/contacts-list-container + [new-chat-toolbar] + (when contacts + [list/flat-list {:style styles/contacts-list + :data contacts + :render-fn contact-list-row + :bounces false + :keyboardShouldPersistTaps :always + :header (header contacts) + :footer [react/view + [common/list-footer] + [common/bottom-shadow]]}])])) diff --git a/src/status_im/chat/views/toolbar_content.cljs b/src/status_im/chat/views/toolbar_content.cljs index 26d551c966..30eb11a028 100644 --- a/src/status_im/chat/views/toolbar_content.cljs +++ b/src/status_im/chat/views/toolbar_content.cljs @@ -4,8 +4,8 @@ [clojure.string :as str] [cljs-time.core :as t] [status-im.ui.components.react :refer [view - text - icon]] + text + icon]] [status-im.i18n :refer [get-contact-translated label label-pluralize]] diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 3f5e8cbb6b..40f8f809c9 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -26,8 +26,12 @@ :photos-access-error "To grant the required photos permission, please go to your system settings and make sure that Status > Photos is selected." ;;drawer - :switch-users "Switch users" - :current-network "Current network" + ;;not used in beta + ;:switch-users "Switch users" + ;:current-network "Current network" + + ;;home + :home "Home" ;;chat :is-typing "is typing" diff --git a/src/status_im/ui/components/drawer/styles.cljs b/src/status_im/ui/components/drawer/styles.cljs deleted file mode 100644 index ff2aa73936..0000000000 --- a/src/status_im/ui/components/drawer/styles.cljs +++ /dev/null @@ -1,177 +0,0 @@ -(ns status-im.ui.components.drawer.styles - (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as common])) - -(def drawer - {:flex 1 - :background-color common/color-white - :justify-content :space-between}) - -;; profile - -(def upper-container - {:margin 16 - :margin-top 0}) - -(def profile-container - {:padding 16 - :border-radius 8 - :background-color common/color-light-blue4}) - -(def user-photo-container - {:height 52 - :width 52}) - -(def name-input-wrapper - {:margin-top 24 - :padding 0 - :height 20}) - -(defnstyle name-input-text [valid?] - {:line-height 24 - :height 20 - :padding 0 - :color (if valid? common/color-black common/color-red) - :android {:font-size 16} - :ios {:font-size 17}}) - -(def status-container - {:flex-direction :row - :margin-top 3}) - -(defstyle status-input-view - {:min-height 67 - :width 236 - :font-size 15 - :line-height 21 - :padding-left 0 - :padding-top 5 - :padding-bottom 0 - :margin-bottom 0 - :text-align-vertical :top - :color common/color-black}) - -(defnstyle status-view [placeholder?] - (-> (dissoc status-input-view :color) - (cond-> placeholder? - (assoc :color common/color-gray)) - (merge - {:min-height 0 - :ios {:padding-top 10}}))) - -(def options-button - {:position :absolute - :top 16 - :right 16}) - -;; network - -(def network-label-container - {:margin-top 16}) - -(defstyle network-label - {:color common/color-gray4 - :android {:font-size 12} - :ios {:font-size 14}}) - -(def network-title - {:color common/color-gray6 - :font-size 16}) - -;; transactions - -(def transactions-list-separator - {:margin-left 48}) - -(def empty-transactions-title-container - {:align-items :center}) - -(defstyle transactions-title-container - {:margin-left 16 - :android {:margin-bottom 16} - :ios {:margin-bottom 8}}) - -(defstyle transactions-title - {:color common/color-gray4 - :android {:font-size 12} - :ios {:font-size 14}}) - -(def transaction - {:padding 16 - :flex-direction :row}) - -(defstyle transaction-icon - {:width 24 - :height 24 - :margin-right 8 - :android {:margin-top 2}}) - -(def transaction-info - {:width 180}) - -(def transaction-value-container - {:flex-direction :row}) - -(def transaction-value - {:font-size 20 - :line-height 22 - :color common/color-black}) - -(def transaction-unit - {:font-size 20 - :line-height 22 - :color common/color-gray - :margin-left 8}) - -(def transaction-details-container - {:margin-top 8 - :flex-direction :row}) - -(defstyle transaction-to - {:line-height 16 - :color common/color-gray4 - :android {:font-size 12} - :ios {:font-size 14}}) - -(defstyle transaction-recipient - {:line-height 16 - :margin-left 4 - :color common/color-black - :flex-shrink 1 - :android {:font-size 12} - :ios {:font-size 14}}) - -(defstyle transaction-time - {:line-height 16 - :color common/color-gray4 - :margin-left 8 - :android {:font-size 12} - :ios {:font-size 14}}) - -(def transaction-picture - {:margin-top 3 - :margin-left 16 - :min-width 40 - :min-height 40}) - -(def view-all-transactions-button - {:height 52 - :justify-content :center - :align-items :center - :border-top-width 1 - :border-top-color common/color-light-gray2}) - -(defstyle view-all-transactions-text - {:color common/color-light-blue - :android {:font-size 14} - :ios {:font-size 17}}) - -(def switch-account-container - {:align-items :center - :margin-bottom 10 - :margin-top 10}) - -(defstyle switch-account-text - {:color common/color-light-blue - :android {:font-size 14} - :ios {:font-size 17}}) diff --git a/src/status_im/ui/components/drawer/view.cljs b/src/status_im/ui/components/drawer/view.cljs deleted file mode 100644 index 8c6e7c21de..0000000000 --- a/src/status_im/ui/components/drawer/view.cljs +++ /dev/null @@ -1,133 +0,0 @@ -(ns status-im.ui.components.drawer.view - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [clojure.string :as string] - [reagent.core :as reagent] - [re-frame.core :as re-frame] - [status-im.ui.components.chat-icon.screen :as ci] - [status-im.ui.components.common.common :as common] - [status-im.ui.components.context-menu :as context-menu] - [status-im.ui.components.drawer.styles :as st] - [status-im.ui.components.react :as react] - [status-im.ui.components.icons.vector-icons :as vi] - [status-im.ui.components.status-view.view :as status-view] - [status-im.i18n :as i18n] - [status-im.ui.screens.profile.db :as profile.db] - [status-im.utils.datetime :as time] - [status-im.utils.gfycat.core :as gfycat] - [status-im.utils.platform :as platform] - [status-im.utils.utils :as utils] - [status-im.utils.money :as money] - [status-im.protocol.core :as protocol])) - -(defonce drawer-atom (atom nil)) -(defn open-drawer! [] (.openDrawer @drawer-atom)) -(defn close-drawer! [] (.closeDrawer @drawer-atom)) - -;; the save-event subscription is here because no save action would -;; be dispatched when the user presses a screen changing zone while -;; editing the name or status field - -(defn save-profile! [] - (when-let [save-event @(re-frame/subscribe [:my-profile.drawer/save-event])] - (re-frame/dispatch [save-event]))) - -(defn navigate-to-profile [] - (close-drawer!) - (save-profile!) - (re-frame/dispatch [:navigate-to :my-profile])) - -(defn navigate-to-accounts [] - (close-drawer!) - (save-profile!) - ;; TODO(rasom): probably not the best place for this call - (protocol/stop-whisper!) - (re-frame/dispatch [:navigate-to :accounts])) - -(defview profile-picture [] - (letsubs [account [:get-current-account]] - [react/touchable-opacity {:on-press navigate-to-profile - :style st/user-photo-container} - [react/view - [ci/chat-icon (:photo-path account) {:size 52 - :accessibility-label :drawer-profile-icon}]]])) - -(defview name-input [] - (letsubs [profile-name [:my-profile.drawer/get :name] - valid-name? [:my-profile.drawer/valid-name?] - placeholder [:get :my-profile/default-name]] - [react/view st/name-input-wrapper - [react/text-input - {:placeholder placeholder - :style (st/name-input-text valid-name?) - :font :medium - :default-value profile-name - :on-focus #(re-frame/dispatch [:my-profile.drawer/edit-name]) - :on-change-text #(re-frame/dispatch [:my-profile.drawer/update-name %]) - :on-end-editing #(re-frame/dispatch [:my-profile.drawer/save-name])}]])) - -(defview status-input [] - (letsubs [edit-status? [:my-profile.drawer/get :edit-status?] - status [:my-profile.drawer/get :status]] - (let [placeholder (i18n/label :t/update-status)] - [react/view st/status-container - (if edit-status? - [react/text-input {:style st/status-input-view - :multiline true - :auto-focus true - :focus edit-status? - :max-length 140 - :accessibility-label :drawer-status-input - :placeholder placeholder - :default-value status - :on-change-text #(re-frame/dispatch [:my-profile.drawer/update-status %]) - :on-end-editing #(when edit-status? - (re-frame/dispatch [:my-profile.drawer/save-status]))}] - [status-view/status-view {:style (st/status-view (string/blank? status)) - :number-of-lines 3 - :status (if (string/blank? status) - placeholder - status) - :on-press #(re-frame/dispatch [:my-profile.drawer/edit-status])}])]))) - -(defview current-network [] - (letsubs [network [:get-current-account-network]] - [react/view {:style st/network-label-container} - [react/text {:style st/network-label} (i18n/label :t/current-network)] - [react/text {:style st/network-title} (:name network)]])) - -(defn options-btn [] - [react/view {:style st/options-button} - [react/touchable-highlight {:on-press navigate-to-profile} - [react/view [vi/icon :icons/options]]]]) - -(defn switch-account [] - [react/view st/switch-account-container - [react/touchable-highlight - {:on-press navigate-to-accounts} - [react/view - [react/text {:style st/switch-account-text - :font (if platform/android? :medium :default) - :uppercase? platform/android?} - (i18n/label :t/switch-users)]]]]) - -(defn drawer [] - (fn [] - [react/touchable-without-feedback {:on-press #(react/dismiss-keyboard!)} - [react/view st/drawer - [react/view st/upper-container - [react/view st/profile-container - [profile-picture] - [name-input] - [status-input] - [options-btn]] - [current-network]] - [react/view - [switch-account]]]])) - -(defn drawer-view [items] - [react/drawer-layout {:drawerWidth 300 - :renderNavigationView #(reagent/as-element [drawer]) - :onDrawerSlide react/dismiss-keyboard! - :ref (fn [drawer] - (reset! drawer-atom drawer))} - items]) diff --git a/src/status_im/ui/components/icons/vector_icons.cljs b/src/status_im/ui/components/icons/vector_icons.cljs index f46d193242..1bfeeb63a1 100644 --- a/src/status_im/ui/components/icons/vector_icons.cljs +++ b/src/status_im/ui/components/icons/vector_icons.cljs @@ -23,12 +23,17 @@ (def use-def (get-class "Use")) (def defs (get-class "Defs")) -(def icons {:icons/chats (slurp-svg "./resources/icons/bottom/chats_gray.svg") - :icons/chats-active (slurp-svg "./resources/icons/bottom/chats_active.svg") - :icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") - :icons/contacts-active (slurp-svg "./resources/icons/bottom/contacts_active.svg") - :icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") - :icons/discover-active (slurp-svg "./resources/icons/bottom/discover_active.svg") +(def icons {;;NOT USED IN MVP + ;;:icons/chats (slurp-svg "./resources/icons/bottom/chats_gray.svg") + ;;:icons/chats-active (slurp-svg "./resources/icons/bottom/chats_active.svg") + ;;:icons/contacts (slurp-svg "./resources/icons/bottom/contacts_gray.svg") + ;;:icons/contacts-active (slurp-svg "./resources/icons/bottom/contacts_active.svg") + ;;:icons/discover (slurp-svg "./resources/icons/bottom/discover_gray.svg") + ;;:icons/discover-active (slurp-svg "./resources/icons/bottom/discover_active.svg") + :icons/home (slurp-svg "./resources/icons/bottom/home_gray.svg") + :icons/home-active (slurp-svg "./resources/icons/bottom/home_blue.svg") + :icons/profile (slurp-svg "./resources/icons/bottom/profile_gray.svg") + :icons/profile-active (slurp-svg "./resources/icons/bottom/profile_blue.svg") :icons/wallet (slurp-svg "./resources/icons/bottom/wallet_gray.svg") :icons/wallet-active (slurp-svg "./resources/icons/bottom/wallet_active.svg") :icons/speaker (slurp-svg "./resources/icons/speaker.svg") diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index e57c6f16f3..b7b7dc93fa 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -25,7 +25,6 @@ (def dismiss-keyboard! rn-dependencies/dismiss-keyboard) (def orientation rn-dependencies/orientation) (def back-handler (get-react-property "BackHandler")) -(def drawer rn-dependencies/drawer) (def splash-screen (.-SplashScreen native-modules)) @@ -39,7 +38,6 @@ (def view (get-class "View")) (def status-bar (get-class "StatusBar")) -(def drawer-layout (adapt-class (.-default drawer))) (def scroll-view (get-class "ScrollView")) (def web-view (get-class "WebView")) @@ -149,8 +147,6 @@ (.then images-fn) (.catch show-access-error)))) -(def swiper (adapt-class rn-dependencies/swiper)) - ;; Clipboard (def sharing diff --git a/src/status_im/ui/components/tabs/views.cljs b/src/status_im/ui/components/tabs/views.cljs deleted file mode 100644 index 6fdfdce494..0000000000 --- a/src/status_im/ui/components/tabs/views.cljs +++ /dev/null @@ -1,57 +0,0 @@ -(ns status-im.ui.components.tabs.views - (:require [re-frame.core :as re-frame] - [status-im.ui.components.react :as react] - [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.styles :as tabs.styles]) - (:require-macros [status-im.utils.views :refer [defview]])) - -(defview tab [index content tab-style on-press active?] - [react/touchable-highlight {:style (when tab-style - (tab-style active?)) - :disabled active? - :on-press #(on-press index)} - [react/view - [content active?]]]) - -(defn tabs [tabs-container-style indexed-tabs tab-style on-press is-current-tab?] - [react/view {:style tabs-container-style} - (for [[index {:keys [content view-id]}] indexed-tabs] - ^{:key index} [tab index content tab-style on-press (is-current-tab? view-id)])]) - -(defn swipable-tabs [tabs-list current-tab show-tabs? - {:keys [bottom-tabs? navigation-event main-container-style tabs-container-style tab-style] - :or {bottom-tabs false - navigation-event :navigate-to - tabs-container-style tabs.styles/tabs-container - tab-style tabs.styles/tab}}] - (let [swiper (atom nil) - indexed-tabs (map-indexed vector tabs-list) - tab->index (reduce (fn [acc [index tab]] - (assoc acc (:view-id tab) index)) - {} - indexed-tabs) - index->tab (clojure.set/map-invert tab->index) - get-tab-index #(get tab->index % 0)] - (fn [tabs-list current-tab show-tabs?] - (let [current-tab-index (get-tab-index current-tab) - on-press (fn [index] - (.scrollBy @swiper (- index current-tab-index))) - is-current-tab? (fn [view-id] - (= (get-tab-index view-id) current-tab-index))] - [react/view styles/main-container - (when (and (not bottom-tabs?) - show-tabs?) - [tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?]) - [react/swiper {:loop false - :shows-pagination false - :index (get-tab-index current-tab) - :ref #(reset! swiper %) - :on-index-changed #(re-frame/dispatch [navigation-event (index->tab %)])} - (for [[index {:keys [screen view-id]}] indexed-tabs] - ^{:key index} - [react/with-activity-indicator - {:enabled? (= current-tab view-id)} - [screen (is-current-tab? view-id)]])] - (when (and bottom-tabs? - show-tabs?) - [tabs tabs-container-style indexed-tabs tab-style on-press is-current-tab?])])))) diff --git a/src/status_im/ui/components/toolbar/actions.cljs b/src/status_im/ui/components/toolbar/actions.cljs index 9209abbf52..62094e328e 100644 --- a/src/status_im/ui/components/toolbar/actions.cljs +++ b/src/status_im/ui/components/toolbar/actions.cljs @@ -2,16 +2,6 @@ (:require [re-frame.core :refer [dispatch]] [status-im.ui.components.toolbar.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}) diff --git a/src/status_im/ui/screens/chats_list/styles.cljs b/src/status_im/ui/screens/chats_list/styles.cljs index 700932924b..e790b772e0 100644 --- a/src/status_im/ui/screens/chats_list/styles.cljs +++ b/src/status_im/ui/screens/chats_list/styles.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.screens.chats-list.styles (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) - (:require [status-im.ui.components.styles :as component.styles] - [status-im.ui.components.tabs.styles :as tabs-st])) + (:require [status-im.ui.components.styles :as component.styles])) (defn toolbar [] {:background-color component.styles/color-white}) diff --git a/src/status_im/ui/screens/chats_list/views.cljs b/src/status_im/ui/screens/chats_list/views.cljs index 59b0140210..0966df4368 100644 --- a/src/status_im/ui/screens/chats_list/views.cljs +++ b/src/status_im/ui/screens/chats_list/views.cljs @@ -1,66 +1,29 @@ (ns status-im.ui.screens.chats-list.views - (:require-macros [status-im.utils.views :refer [defview letsubs]]) + (:require-macros [status-im.utils.views :as views]) (:require [re-frame.core :as re-frame] - [status-im.ui.components.common.common :as common] + [status-im.ui.components.common.common :as components.common] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.native-action-button :refer [native-action-button]] - [status-im.ui.components.drawer.view :as drawer] - [status-im.ui.components.styles :refer [color-blue]] - [status-im.ui.components.status-bar.view :refer [status-bar]] + [status-im.ui.components.styles :as components.styles] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.ui.components.toolbar.actions :as act] - [status-im.ui.components.toolbar.styles :as tst] - [status-im.ui.components.icons.custom-icons :refer [ion-icon]] + [status-im.ui.components.toolbar.actions :as toolbar.actions] [status-im.ui.components.sync-state.offline :refer [offline-view]] - [status-im.ui.components.context-menu :refer [context-menu]] - [status-im.ui.components.tabs.styles :refer [tabs-height]] [status-im.ui.screens.chats-list.views.inner-item :as inner-item] - [status-im.ui.screens.chats-list.styles :as st] + [status-im.ui.screens.chats-list.styles :as styles] [status-im.i18n :as i18n] - [status-im.utils.platform :refer [platform-specific ios?]] - [status-im.utils.notifications :as notifications])) - -(def android-toolbar-popup-options - [{:text (i18n/label :t/edit) :value #(re-frame/dispatch [:set-in [:chat-list-ui-props :edit?] true])}]) - -(defn android-toolbar-actions [] - [(act/search #(re-frame/dispatch [:set-in [:toolbar-search :show] :chat-list])) - (act/opts android-toolbar-popup-options)]) - -(def ios-toolbar-popup-options - [{:text (i18n/label :t/edit-chats) :value #(re-frame/dispatch [:set-in [:chat-list-ui-props :edit?] true])} - {:text (i18n/label :t/search-chats) :value #(re-frame/dispatch [:set-in [:toolbar-search :show] :chat-list])}]) - -(defn ios-toolbar-actions [] - [(act/opts ios-toolbar-popup-options) - (act/add #(re-frame/dispatch [:navigate-to :new-chat]))]) + [status-im.utils.platform :as platform])) (defn toolbar-view [] [toolbar/toolbar {:show-sync-bar? true} - [toolbar/nav-button (act/hamburger drawer/open-drawer!)] - [toolbar/content-title (i18n/label :t/chats)] + nil + [toolbar/content-title (i18n/label :t/status)] [toolbar/actions - (if ios? - (ios-toolbar-actions) - (android-toolbar-actions))]]) - -(defn toolbar-edit [] - [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)]]) - -(defview toolbar-search [] - (letsubs [search-text [:get-in [:toolbar-search :text]]] - [toolbar/toolbar-with-search - {:show-search? true - :search-text search-text - :search-key :chat-list - :title (i18n/label :t/chats) - :search-placeholder (i18n/label :t/search-for)}])) + (when platform/ios? + [(toolbar.actions/add #(re-frame/dispatch [:navigate-to :new-chat]))])]]) (defn chats-action-button [] - [native-action-button {:button-color color-blue + [native-action-button {:button-color components.styles/color-blue :offset-x 16 :offset-y 40 :spacing 13 @@ -73,27 +36,22 @@ [react/view [inner-item/chat-list-item-inner-view (assoc chat :chat-id chat-id) edit?]]]) -(defview chats-list [] - (letsubs [chats [:filtered-chats] - edit? [:get-in [:chat-list-ui-props :edit?]] - show-search [:get-in [:toolbar-search :show]] - tabs-hidden? [:tabs-hidden?]] - [react/view st/chats-container - (cond - edit? [toolbar-edit] - (= show-search :chat-list) [toolbar-search] - :else [toolbar-view]) - [list/flat-list {:style st/list-container +(views/defview chats-list [] + (views/letsubs [chats [:filtered-chats] + edit? [:get-in [:chat-list-ui-props :edit?]] + show-search [:get-in [:toolbar-search :show]] + tabs-hidden? [:tabs-hidden?]] + [react/view styles/chats-container + [toolbar-view] + [list/flat-list {:style styles/list-container :data chats :render-fn (fn [chat] [chat-list-item chat edit?]) :header (when-not (empty? chats) list/default-header) :footer (when-not (empty? chats) [react/view - [common/list-footer] - [common/bottom-shadow]])}] + [components.common/list-footer] + [components.common/bottom-shadow]])}] - (when (and (not edit?) - (not= show-search :chat-list) - (get-in platform-specific [:chats :action-button?])) + (when platform/android? [chats-action-button]) - [offline-view]])) + [offline-view]])) \ No newline at end of file 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 523a381a7d..d53d022ad7 100644 --- a/src/status_im/ui/screens/contacts/contact_list/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list/views.cljs @@ -7,12 +7,10 @@ [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as act] - [status-im.ui.components.drawer.view :as drawer-view] [status-im.ui.screens.contacts.styles :as styles] [status-im.ui.screens.contacts.views :as contact-options] [status-im.i18n :as i18n])) - (defn render-row [group edit?] (fn [row _ _] [contact-view/contact-view {:contact row @@ -55,11 +53,10 @@ (defview contact-list [] (letsubs [edit? [:get-in [:contacts/list-ui-props :edit?]] group [:get-contact-group]] - [drawer-view/drawer-view - [react/view {:flex 1} - [react/view - [status-bar/status-bar] - (if edit? - [contact-list-toolbar-edit group] - [contact-list-toolbar group])] - [contacts-list-view group edit?]]])) + [react/view {:flex 1} + [react/view + [status-bar/status-bar] + (if edit? + [contact-list-toolbar-edit group] + [contact-list-toolbar group])] + [contacts-list-view group edit?]])) 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 0172906b6e..9d42b3a873 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 @@ -10,7 +10,6 @@ [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :refer [status-bar]] [status-im.ui.components.toolbar.view :refer [toolbar-with-search]] - [status-im.ui.components.drawer.view :refer [drawer-view]] [status-im.ui.screens.contacts.styles :as st] [status-im.i18n :as i18n])) @@ -58,23 +57,22 @@ click-handler [:get :contacts/click-handler] action [:get :contacts/click-action] params [:get :contacts/click-params]] - [drawer-view - [react/view {:flex 1} - [status-bar {:type :modal-white}] - [contact-list-modal-toolbar] - [list/flat-list {:style st/contacts-list-modal - :data contacts - :render-fn (render-row click-handler action params) - :header (when-not (:hide-actions? params) - [react/view - [actions-view action click-handler] - [common/bottom-shadow] - [common/form-title (i18n/label :t/choose-from-contacts) - {:count-value (count contacts)}] - [common/list-header]]) - :footer [react/view - [common/list-footer] - [common/bottom-shadow]] - :enableEmptySections true - :bounces false - :keyboardShouldPersistTaps :always}]]])) + [react/view {:flex 1} + [status-bar {:type :modal-white}] + [contact-list-modal-toolbar] + [list/flat-list {:style st/contacts-list-modal + :data contacts + :render-fn (render-row click-handler action params) + :header (when-not (:hide-actions? params) + [react/view + [actions-view action click-handler] + [common/bottom-shadow] + [common/form-title (i18n/label :t/choose-from-contacts) + {:count-value (count contacts)}] + [common/list-header]]) + :footer [react/view + [common/list-footer] + [common/bottom-shadow]] + :enableEmptySections true + :bounces false + :keyboardShouldPersistTaps :always}]])) diff --git a/src/status_im/ui/screens/contacts/styles.cljs b/src/status_im/ui/screens/contacts/styles.cljs index 35728f2e20..d96dff1c6c 100644 --- a/src/status_im/ui/screens/contacts/styles.cljs +++ b/src/status_im/ui/screens/contacts/styles.cljs @@ -1,7 +1,6 @@ (ns status-im.ui.screens.contacts.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) - (:require [status-im.ui.components.styles :as common] - [status-im.ui.components.tabs.styles :as tabs-st])) + (:require [status-im.ui.components.styles :as common])) (def toolbar-actions {:flex-direction :row}) diff --git a/src/status_im/ui/screens/contacts/views.cljs b/src/status_im/ui/screens/contacts/views.cljs index b756414e87..430c0c9c2f 100644 --- a/src/status_im/ui/screens/contacts/views.cljs +++ b/src/status_im/ui/screens/contacts/views.cljs @@ -8,7 +8,6 @@ native-action-button-item]] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as act] - [status-im.ui.components.drawer.view :as drawer] [status-im.ui.components.icons.custom-icons :refer [ion-icon]] [status-im.ui.components.contact.contact :refer [contact-view]] [status-im.utils.platform :refer [platform-specific ios? android?]] @@ -32,7 +31,6 @@ (defn toolbar-view [] [toolbar/toolbar {} - [toolbar/nav-button (act/hamburger drawer/open-drawer!)] [toolbar/content-title (label :t/contacts)] [toolbar/actions (toolbar-actions)]]) diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 754f6a6c63..752d73e343 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -6,7 +6,6 @@ [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.actions :as actions] - [status-im.ui.components.drawer.view :as drawer] [status-im.ui.components.carousel.carousel :as carousel] [status-im.ui.screens.discover.components.views :as components] [status-im.ui.screens.discover.all-dapps.views :as all-dapps] @@ -38,7 +37,6 @@ :search-key :discover :title (i18n/label :t/discover) :search-placeholder (i18n/label :t/search-tags) - :nav-action (actions/hamburger drawer/open-drawer!) :on-search-submit (fn [text] (when-not (string/blank? text) (let [tags (get-hashtags text)] diff --git a/src/status_im/ui/components/tabs/styles.cljs b/src/status_im/ui/screens/main_tabs/styles.cljs similarity index 72% rename from src/status_im/ui/components/tabs/styles.cljs rename to src/status_im/ui/screens/main_tabs/styles.cljs index 789a4c3ec6..856056f12a 100644 --- a/src/status_im/ui/components/tabs/styles.cljs +++ b/src/status_im/ui/screens/main_tabs/styles.cljs @@ -1,4 +1,4 @@ -(ns status-im.ui.components.tabs.styles +(ns status-im.ui.screens.main-tabs.styles (:require [status-im.ui.components.styles :as styles] [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.styles :refer [defnstyle]])) @@ -14,14 +14,7 @@ :border-top-color styles/color-light-gray3}) (def tab-container - {:flex 1 - :height tab-height - :justify-content :center - :align-items :center}) - -(defnstyle tab [active?] - {:flex 1 - :height tab-height + {:height tabs-height :justify-content :center :align-items :center}) @@ -34,4 +27,4 @@ styles/color-gray4)}) (defn tab-icon [active?] - {:color (if active? styles/color-blue4 styles/color-gray4)}) + {:color (if active? styles/color-blue4 styles/color-gray4)}) \ No newline at end of file diff --git a/src/status_im/ui/screens/main_tabs/views.cljs b/src/status_im/ui/screens/main_tabs/views.cljs index 735af1f58a..c92d81d760 100644 --- a/src/status_im/ui/screens/main_tabs/views.cljs +++ b/src/status_im/ui/screens/main_tabs/views.cljs @@ -1,58 +1,65 @@ (ns status-im.ui.screens.main-tabs.views - (:require [status-im.ui.components.drawer.view :refer [drawer-view]] - [status-im.ui.components.icons.vector-icons :as vector-icons] + (:require-macros [status-im.utils.views :as views]) + (:require [status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.react :as react] - [status-im.ui.components.status-bar.view :refer [status-bar]] - [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.styles :as tabs.styles] - [status-im.ui.components.tabs.views :as tabs] + [status-im.ui.components.status-bar.view :as status-bar.view] + [status-im.ui.components.styles :as common.styles] [status-im.i18n :as i18n] - [status-im.ui.screens.chats-list.views :refer [chats-list]] - [status-im.ui.screens.contacts.views :refer [contact-groups-list]] - [status-im.ui.screens.discover.views :refer [discover]] - [status-im.ui.screens.wallet.main.views :refer [wallet]]) - (:require-macros [status-im.utils.views :as views])) + [status-im.ui.screens.chats-list.views :as chats-list.views] + [status-im.ui.screens.profile.views :as profile.views] + [status-im.ui.screens.wallet.main.views :as wallet.views] + [status-im.ui.screens.main-tabs.styles :as styles] + [re-frame.core :as re-frame])) -(defn- tab-content [{:keys [title icon-active icon-inactive]}] - (fn [active?] - [react/view {:style tabs.styles/tab-container} - (let [icon (if active? icon-active icon-inactive)] - [react/view - [vector-icons/icon icon (tabs.styles/tab-icon active?)]]) - [react/view - [react/text {:style (tabs.styles/tab-title active?)} - title]]])) - -(def tabs-list* - [{:view-id :wallet +(def tabs-list-data + {:chat-list + {:view-id :chat-list + :content {:title (i18n/label :t/home) + :icon-inactive :icons/home + :icon-active :icons/home-active} + :screen chats-list.views/chats-list} + :wallet + {:view-id :wallet :content {:title (i18n/label :t/wallet) :icon-inactive :icons/wallet :icon-active :icons/wallet-active} - :screen wallet} - {:view-id :chat-list - :content {:title (i18n/label :t/chats) - :icon-inactive :icons/chats - :icon-active :icons/chats-active} - :screen chats-list} - {:view-id :discover - :content {:title (i18n/label :t/discover) - :icon-inactive :icons/discover - :icon-active :icons/discover-active} - :screen discover} - {:view-id :contact-list - :content {:title (i18n/label :t/contacts) - :icon-inactive :icons/contacts - :icon-active :icons/contacts-active} - :screen contact-groups-list}]) + :screen wallet.views/wallet} + :my-profile + {:view-id :my-profile + :content {:title (i18n/label :t/profile) + :icon-inactive :icons/profile + :icon-active :icons/profile-active} + :screen profile.views/my-profile}}) -(def tabs-list (map #(update % :content tab-content) tabs-list*)) +(defn- tab-content [{:keys [title icon-active icon-inactive]}] + (fn [active?] + [react/view {:style styles/tab-container} + (let [icon (if active? icon-active icon-inactive)] + [react/view + [vector-icons/icon icon (styles/tab-icon active?)]]) + [react/view + [react/text {:style (styles/tab-title active?)} + title]]])) + +(def tabs-list (map #(update % :content tab-content) (vals tabs-list-data))) + +(defn tab [view-id content active?] + [react/touchable-highlight {:style common.styles/flex + :disabled active? + :on-press #(re-frame/dispatch [:navigate-to-tab view-id])} + [react/view + [content active?]]]) + +(defn tabs [current-view-id] + [react/view {:style styles/tabs-container} + (for [{:keys [content view-id]} tabs-list] + ^{:key view-id} [tab view-id content (= view-id current-view-id)])]) (views/defview main-tabs [] - (views/letsubs [keyboard-height [:get :keyboard-height] - current-tab [:get :view-id]] - [react/view styles/flex - [status-bar {:type (if (= current-tab :wallet) :wallet :main)}] - [drawer-view - [tabs/swipable-tabs tabs-list current-tab (zero? keyboard-height) - {:bottom-tabs? true - :navigation-event :navigate-to-tab}]]])) + (views/letsubs [view-id [:get :view-id]] + (let [screen (get-in tabs-list-data [view-id :screen])] + [react/view common.styles/flex + [status-bar.view/status-bar {:type (if (= view-id :wallet) :wallet :main)}] + [react/view common.styles/main-container + [screen] + [tabs view-id]]]))) \ No newline at end of file diff --git a/src/status_im/ui/screens/profile/views.cljs b/src/status_im/ui/screens/profile/views.cljs index c642988a5b..2a90983e96 100644 --- a/src/status_im/ui/screens/profile/views.cljs +++ b/src/status_im/ui/screens/profile/views.cljs @@ -24,7 +24,7 @@ (defn my-profile-toolbar [] [toolbar/toolbar {} - toolbar/default-nav-back + nil [toolbar/content-title ""] [toolbar/actions [(actions/opts [{:value #(dispatch [:my-profile/edit-profile]) @@ -219,7 +219,6 @@ (defview my-profile [] (letsubs [{:keys [status public-key] :as current-account} [:get-current-account]] [react/view styles/profile - [status-bar] [my-profile-toolbar] [network-info] [react/scroll-view diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 6d35726e19..ba6450f496 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -15,7 +15,6 @@ [status-im.chat.new-chat.view :refer [new-chat]] [status-im.chat.new-public-chat.view :refer [new-public-chat]] - [status-im.ui.screens.contacts.contact-list.views :refer [contact-list]] [status-im.ui.screens.contacts.contact-list-modal.views :refer [contact-list-modal]] [status-im.ui.screens.contacts.new-contact.views :refer [new-contact]] @@ -74,7 +73,7 @@ (when view-id (let [current-view (validate-current-view view-id signed-up?)] (let [component (case current-view - (:wallet :chat-list :discover :contact-list) main-tabs + (:wallet :chat-list :my-profile) main-tabs :wallet-list wallet-list-screen :wallet-send-transaction send-transaction :wallet-transaction-sent transaction-sent @@ -95,13 +94,11 @@ :edit-chat-group-contact-list edit-chat-group-contact-list :new-public-chat new-public-chat :contact-toggle-list contact-toggle-list - :group-contacts contact-list :reorder-groups reorder-groups :new-contact new-contact :qr-scanner qr-scanner :chat chat :profile profile - :my-profile my-profile :edit-my-profile edit-my-profile :discover-all-recent discover-recent/discover-all-recent :discover-all-hashtags discover-popular/discover-all-hashtags diff --git a/src/status_im/ui/screens/wallet/assets/styles.cljs b/src/status_im/ui/screens/wallet/assets/styles.cljs index f76b15268b..11ee5b213b 100644 --- a/src/status_im/ui/screens/wallet/assets/styles.cljs +++ b/src/status_im/ui/screens/wallet/assets/styles.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.assets.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.styles :as tabs.styles] + [status-im.ui.screens.main-tabs.styles :as tabs.styles] [status-im.utils.platform :as platform])) ;; TODO(goranjovic) - the following styles will be removed once reusable components diff --git a/src/status_im/ui/screens/wallet/assets/views.cljs b/src/status_im/ui/screens/wallet/assets/views.cljs index a33fc94f30..085ed09d07 100644 --- a/src/status_im/ui/screens/wallet/assets/views.cljs +++ b/src/status_im/ui/screens/wallet/assets/views.cljs @@ -10,7 +10,6 @@ [status-im.ui.screens.wallet.components.views :as components] [status-im.ui.screens.wallet.assets.styles :as assets.styles] [status-im.ui.screens.wallet.main.styles :as main.styles] - [status-im.ui.components.tabs.views :as tabs] [status-im.ui.components.styles :as components.styles] [status-im.ui.screens.wallet.transactions.views :as transactions] [status-im.utils.utils :as utils] @@ -89,7 +88,8 @@ [toolbar/toolbar {:style assets.styles/token-toolbar-container} toolbar/default-nav-back [token-toolbar name symbol icon]] - [tabs/swipable-tabs tabs-list current-tab true - {:navigation-event :navigation-replace - :tab-style assets.styles/tab - :tabs-container-style assets.styles/tabs-container}]])) + ;;(andrey julien) cleanup + #_[tabs/swipable-tabs tabs-list current-tab true + {:navigation-event :navigation-replace + :tab-style assets.styles/tab + :tabs-container-style assets.styles/tabs-container}]])) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index c72f2575dd..4ddb5c522d 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -2,7 +2,6 @@ (:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require [re-frame.core :as re-frame] [status-im.ui.components.button.view :as btn] - [status-im.ui.components.drawer.view :as drawer] [status-im.ui.components.list.views :as list] [status-im.ui.components.react :as react] [status-im.ui.components.toolbar.view :as toolbar] @@ -32,7 +31,7 @@ (defn toolbar-view [] [toolbar/toolbar {:style wallet.styles/toolbar} - [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)] + nil [toolbar/content-wrapper [toolbar-title]] [toolbar/actions diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 0e8249a6ca..0962f4cda9 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.transactions.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.styles :as tabs.styles] + [status-im.ui.screens.main-tabs.styles :as tabs.styles] [status-im.utils.platform :as platform])) (def error-container @@ -29,7 +29,8 @@ styles/color-gray10-transparent)}) (def tabs-container - {:flexDirection :row}) + {:flexDirection :row + :height tabs.styles/tab-height}) (defnstyle tab-title [active?] {:ios {:font-size 15} diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 2da12fa4ae..4ac38fc181 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -6,13 +6,13 @@ [status-im.ui.components.react :as react] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.styles :as styles] - [status-im.ui.components.tabs.views :as tabs] [status-im.ui.components.toolbar.actions :as actions] [status-im.ui.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] - [status-im.utils.money :as money]) + [status-im.utils.money :as money] + [status-im.ui.components.styles :as common.styles]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn on-delete-transaction @@ -187,11 +187,21 @@ (def tabs-list [{:view-id :transactions-history - :content history-tab - :screen history-list} + :content history-tab} {:view-id :unsigned-transactions - :content unsigned-tab - :screen unsigned-list}]) + :content unsigned-tab}]) + +(defn tab [view-id content active?] + [react/touchable-highlight {:style common.styles/flex + :disabled active? + :on-press #(re-frame/dispatch [:navigation-replace view-id])} + [react/view {:style (transactions.styles/tab active?)} + [content active?]]]) + +(defn tabs [current-view-id] + [react/view {:style transactions.styles/tabs-container} + (for [{:keys [content view-id]} tabs-list] + ^{:key view-id} [tab view-id content (= view-id current-view-id)])]) (defview transactions [] (letsubs [unsigned-transactions-count [:wallet.transactions/unsigned-transactions-count] @@ -200,10 +210,10 @@ [react/view {:style styles/flex} [status-bar/status-bar] [toolbar-view current-tab unsigned-transactions-count filter-data] - [tabs/swipable-tabs tabs-list current-tab true - {:navigation-event :navigation-replace - :tab-style transactions.styles/tab - :tabs-container-style transactions.styles/tabs-container}]])) + [tabs current-tab] + (case current-tab + :transactions-history [history-list] + :unsigned-transactions [unsigned-list])])) (defn- pretty-print-asset [symbol amount] (case symbol diff --git a/test/cljs/status_im/react_native/js_dependencies.cljs b/test/cljs/status_im/react_native/js_dependencies.cljs index 6281d4331b..25e907ecb3 100644 --- a/test/cljs/status_im/react_native/js_dependencies.cljs +++ b/test/cljs/status_im/react_native/js_dependencies.cljs @@ -8,7 +8,6 @@ (def contacts #js {}) (def dialogs #js {}) (def dismiss-keyboard #js {}) -(def drawer #js {}) (def emoji-picker #js {:default #js {}}) (def fs #js {}) (def http-bridge #js {}) @@ -32,7 +31,6 @@ (def realm #js {:schemaVersion (fn []) :close (fn [])}) (def sortable-listview #js {}) -(def swiper #js {}) (def vector-icons #js {:default #js {}}) (def webview-bridge #js {:default #js {}}) (def svg #js {:default #js {}})