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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.re-natal
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",

2
package.json
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",

2
react-native/src/status_im/react_native/js_dependencies.cljs
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"))

7
resources/icons/bottom/home_blue.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 963 B

6
resources/icons/bottom/home_gray.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 709 B

6
resources/icons/bottom/profile_blue.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
resources/icons/bottom/profile_gray.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 984 B

26
src/status_im/chat/new_chat/view.cljs
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]]}])]))

4
src/status_im/chat/views/toolbar_content.cljs
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]]

8
src/status_im/translations/en.cljs
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"

177
src/status_im/ui/components/drawer/styles.cljs
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}})

133
src/status_im/ui/components/drawer/view.cljs
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])

17
src/status_im/ui/components/icons/vector_icons.cljs
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")

4
src/status_im/ui/components/react.cljs
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

57
src/status_im/ui/components/tabs/views.cljs
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?])]))))

10
src/status_im/ui/components/toolbar/actions.cljs
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})

3
src/status_im/ui/screens/chats_list/styles.cljs
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})

88
src/status_im/ui/screens/chats_list/views.cljs
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]]))

17
src/status_im/ui/screens/contacts/contact_list/views.cljs
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?]]))

40
src/status_im/ui/screens/contacts/contact_list_modal/views.cljs
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}]]))

3
src/status_im/ui/screens/contacts/styles.cljs
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})

2
src/status_im/ui/screens/contacts/views.cljs
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)]])

2
src/status_im/ui/screens/discover/views.cljs
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)]

13
src/status_im/ui/components/tabs/styles.cljs → src/status_im/ui/screens/main_tabs/styles.cljs
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)})

103
src/status_im/ui/screens/main_tabs/views.cljs
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]]])))

3
src/status_im/ui/screens/profile/views.cljs
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

5
src/status_im/ui/screens/views.cljs
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

2
src/status_im/ui/screens/wallet/assets/styles.cljs
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

10
src/status_im/ui/screens/wallet/assets/views.cljs
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}]]))

3
src/status_im/ui/screens/wallet/main/views.cljs
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

5
src/status_im/ui/screens/wallet/transactions/styles.cljs
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}

30
src/status_im/ui/screens/wallet/transactions/views.cljs
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

2
test/cljs/status_im/react_native/js_dependencies.cljs
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 {}})