reworked main tabs, removed swiper and drawer npm libs

This commit is contained in:
Andrey Shovkoplyas 2018-01-10 16:23:16 +03:00 committed by Andrey Shovkoplyas
parent 350fc7aa03
commit d582e6e366
33 changed files with 194 additions and 601 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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"))

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="" fill-rule="evenodd">
<path d="M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z" opacity=".2"/>
<path fill-rule="nonzero" d="M12,19.2 C15.9764502,19.2 19.2,15.9764502 19.2,12 C19.2,8.0235498 15.9764502,4.8 12,4.8 C8.0235498,4.8 4.8,8.0235498 4.8,12 C4.8,15.9764502 8.0235498,19.2 12,19.2 Z M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z"/>
<path fill-rule="nonzero" d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 963 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="">
<path d="M12,19 C15.8659932,19 19,15.8659932 19,12 C19,8.13400675 15.8659932,5 12,5 C8.13400675,5 5,8.13400675 5,12 C5,15.8659932 8.13400675,19 12,19 Z M12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 Z"/>
<path d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 709 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="" fill-rule="evenodd">
<path d="M11.991,3 C16.968,3 21,7.032 21,12 C21,16.968 16.968,21 11.991,21 C7.023,21 3,16.968 3,12 C3,7.032 7.023,3 11.991,3 Z" opacity=".12"/>
<path d="M11.991,3 C16.968,3 21,7.032 21,12 C21,16.968 16.968,21 11.991,21 C7.023,21 3,16.968 3,12 C3,7.032 7.023,3 11.991,3 Z M12,19.2 C15.978,19.2 19.2,15.978 19.2,12 C19.2,8.022 15.978,4.8 12,4.8 C8.022,4.8 4.8,8.022 4.8,12 C4.8,15.978 8.022,19.2 12,19.2 Z M15.15,11.1 C14.403,11.1 13.8,10.497 13.8,9.75 C13.8,9.003 14.403,8.4 15.15,8.4 C15.897,8.4 16.5,9.003 16.5,9.75 C16.5,10.497 15.897,11.1 15.15,11.1 Z M8.85,11.1 C8.103,11.1 7.5,10.497 7.5,9.75 C7.5,9.003 8.103,8.4 8.85,8.4 C9.597,8.4 10.2,9.003 10.2,9.75 C10.2,10.497 9.597,11.1 8.85,11.1 Z M15.4688093,14.5657156 C15.4688093,14.5657156 13.9636364,16.7127275 12,16.7127275 C10.0363636,16.7127275 8.53119066,14.5657156 8.53119066,14.5657156 C7.89684701,13.8749327 8.16592908,13.2763638 9.10951692,13.2763638 L14.8904831,13.2763638 C15.8306042,13.2763638 16.0929964,13.8536263 15.4688093,14.5657156 Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="" fill-rule="evenodd" d="M11.991,3 C16.968,3 21,7.032 21,12 C21,16.968 16.968,21 11.991,21 C7.023,21 3,16.968 3,12 C3,7.032 7.023,3 11.991,3 Z M12,19.2 C15.978,19.2 19.2,15.978 19.2,12 C19.2,8.022 15.978,4.8 12,4.8 C8.022,4.8 4.8,8.022 4.8,12 C4.8,15.978 8.022,19.2 12,19.2 Z M15.15,11.1 C14.403,11.1 13.8,10.497 13.8,9.75 C13.8,9.003 14.403,8.4 15.15,8.4 C15.897,8.4 16.5,9.003 16.5,9.75 C16.5,10.497 15.897,11.1 15.15,11.1 Z M8.85,11.1 C8.103,11.1 7.5,10.497 7.5,9.75 C7.5,9.003 8.103,8.4 8.85,8.4 C9.597,8.4 10.2,9.003 10.2,9.75 C10.2,10.497 9.597,11.1 8.85,11.1 Z M15.4688093,14.5657156 C15.4688093,14.5657156 13.9636364,16.7127275 12,16.7127275 C10.0363636,16.7127275 8.53119066,14.5657156 8.53119066,14.5657156 C7.89684701,13.8749327 8.16592908,13.2763638 9.10951692,13.2763638 L14.8904831,13.2763638 C15.8306042,13.2763638 16.0929964,13.8536263 15.4688093,14.5657156 Z"/>
</svg>

After

Width:  |  Height:  |  Size: 984 B

View File

@ -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]]}])]))

View File

@ -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]]

View File

@ -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"

View File

@ -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}})

View File

@ -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])

View File

@ -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")

View File

@ -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

View File

@ -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?])]))))

View File

@ -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})

View File

@ -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})

View File

@ -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]]))

View File

@ -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?]]))

View File

@ -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}]]))

View File

@ -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})

View File

@ -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)]])

View File

@ -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)]

View File

@ -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)})

View File

@ -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]]])))

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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}]]))

View File

@ -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

View File

@ -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}

View File

@ -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

View File

@ -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 {}})