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

Implementation of new UI toggle (#13384)

This commit is contained in:
Parvesh Monu 2022-05-25 21:55:17 +05:30 committed by GitHub
parent 8aee3cfbbd
commit 1ccb01532e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 189 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/core.cljs
View File

@ -16,6 +16,7 @@
[status-im.utils.universal-links.core :as utils.universal-links]
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :as react]
[status-im.async-storage.core :as async-storage]
["react-native" :refer (DevSettings LogBox)]
["react-native-languages" :default react-native-languages]
["react-native-shake" :as react-native-shake]))
@ -39,6 +40,9 @@
(utils.universal-links/initialize)
(when config/quo-preview-enabled?
(async-storage/get-item :new-ui-enabled? #(reset! config/new-ui-enabled? %)))
;;DEV
(snoopy/subscribe!)
(when (and js/goog.DEBUG platform/ios? DevSettings)

2
src/status_im/multiaccounts/login/core.cljs
View File

@ -472,7 +472,7 @@
"Decides which root should be initialised depending on user and app state"
[db]
(if (get db :tos/accepted?)
(re-frame/dispatch [:init-root :chat-stack])
(re-frame/dispatch [:init-root (if @config/new-ui-enabled? :home-stack :chat-stack)])
(re-frame/dispatch [:init-root :tos])))
(fx/defn login-only-events

233
src/status_im/navigation/roots.cljs
View File

@ -2,7 +2,8 @@
(:require [quo.design-system.colors :as colors]
[status-im.utils.platform :as platform]
[status-im.ui.components.icons.icons :as icons]
[status-im.ui.screens.views :as views]))
[status-im.ui.screens.views :as views]
[status-im.navigation2.roots :as nav2-roots]))
(defn status-bar-options []
(if platform/android?
@ -65,126 +66,128 @@
;;TODO problem here is that we have two places for screens, here and in screens ns, and we have handler in navigate
(defn roots []
;;TABS
{:chat-stack
{:root
{:bottomTabs
{:id :tabs-stack
:options (merge (default-root)
{:bottomTabs {:titleDisplayMode :alwaysHide
:tabsAttachMode :onSwitchToTab
:backgroundColor colors/white}})
:children [;CHAT STACK
{:stack {:id :chat-stack
:children [{:component {:name :home
:id :home
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/message :home-tab-button)}}}
;BROWSER STACK
{:stack {:id :browser-stack
:children [{:component {:name :empty-tab
:id :empty-tab
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
(merge
{:chat-stack
{:root
{:bottomTabs
{:id :tabs-stack
:options (merge (default-root)
{:bottomTabs {:titleDisplayMode :alwaysHide
:tabsAttachMode :onSwitchToTab
:backgroundColor colors/white}})
:children [;CHAT STACK
{:stack {:id :chat-stack
:children [{:component {:name :home
:id :home
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/message :home-tab-button)}}}
;BROWSER STACK
{:stack {:id :browser-stack
:children [{:component {:name :empty-tab
:id :empty-tab
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/browser :dapp-tab-button)}}}
;WALLET STACK
{:stack {:id :wallet-stack
:children [{:component {:name :wallet
:id :wallet
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/wallet :wallet-tab-button)}}}
;STATUS STACK
{:stack {:id :status-stack
:children [{:component {:name :status
:id :status
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/status :status-tab-button)}}}
;PROFILE STACK
{:stack {:id :profile-stack
:children [{:component {:name :my-profile
:id :my-profile
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}}
:options {:bottomTab (bottom-tab-general :main-icons/browser :dapp-tab-button)}}}
;WALLET STACK
{:stack {:id :wallet-stack
:children [{:component {:name :wallet
:id :wallet
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/wallet :wallet-tab-button)}}}
;STATUS STACK
{:stack {:id :status-stack
:children [{:component {:name :status
:id :status
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/status :status-tab-button)}}}
;PROFILE STACK
{:stack {:id :profile-stack
:children [{:component {:name :my-profile
:id :my-profile
:options (merge (status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}]
:options {:bottomTab (bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}}
;;INTRO (onboarding carousel)
:intro
{:root {:stack {:children [{:component {:name :intro
:id :intro
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;INTRO (onboarding carousel)
:intro
{:root {:stack {:children [{:component {:name :intro
:id :intro
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;; ONBOARDING
:onboarding
{:root {:stack {:id :onboarding
:children [{:component {:name :get-your-keys
:id :get-your-keys
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :elevation 0 :noBorder true :animate false)})}}}
;; ONBOARDING
:onboarding
{:root {:stack {:id :onboarding
:children [{:component {:name :get-your-keys
:id :get-your-keys
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :elevation 0 :noBorder true :animate false)})}}}
;;PROGRESS
:progress
{:root {:stack {:children [{:component {:name :progress
:id :progress
:options (status-bar-options)}}]
:options (merge (default-root)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;PROGRESS
:progress
{:root {:stack {:children [{:component {:name :progress
:id :progress
:options (status-bar-options)}}]
:options (merge (default-root)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;LOGIN
:multiaccounts
{:root {:stack {:id :multiaccounts-stack
:children [{:component {:name :multiaccounts
:id :multiaccounts
:options (get-screen-options :multiaccounts)}}
{:component {:name :login
:id :login
:options (get-screen-options :login)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (topbar-options)})}}}
;;LOGIN
:multiaccounts
{:root {:stack {:id :multiaccounts-stack
:children [{:component {:name :multiaccounts
:id :multiaccounts
:options (get-screen-options :multiaccounts)}}
{:component {:name :login
:id :login
:options (get-screen-options :login)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (topbar-options)})}}}
:multiaccounts-keycard
{:root {:stack {:id :multiaccounts-stack
:children [{:component {:name :multiaccounts
:id :multiaccounts
:options (get-screen-options :multiaccounts)}}
{:component {:name :keycard-login-pin
:id :keycard-login-pin
:options (get-screen-options :keycard-login-pin)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (topbar-options)})}}}
:multiaccounts-keycard
{:root {:stack {:id :multiaccounts-stack
:children [{:component {:name :multiaccounts
:id :multiaccounts
:options (get-screen-options :multiaccounts)}}
{:component {:name :keycard-login-pin
:id :keycard-login-pin
:options (get-screen-options :keycard-login-pin)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (topbar-options)})}}}
;;WELCOME
:welcome
{:root {:stack {:children [{:component {:name :welcome
:id :welcome
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;WELCOME
:welcome
{:root {:stack {:children [{:component {:name :welcome
:id :welcome
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;NOTIFICATIONS
:onboarding-notification
{:root {:stack {:children [{:component {:name :onboarding-notification
:id :onboarding-notification
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;;NOTIFICATIONS
:onboarding-notification
{:root {:stack {:children [{:component {:name :onboarding-notification
:id :onboarding-notification
:options (status-bar-options)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}
;; TERMS OF SERVICE
:tos
{:root {:stack {:children [{:component {:name :force-accept-tos
:id :force-accept-tos
:options (get-screen-options :force-accept-tos)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}})
;; TERMS OF SERVICE
:tos
{:root {:stack {:children [{:component {:name :force-accept-tos
:id :force-accept-tos
:options (get-screen-options :force-accept-tos)}}]
:options (merge (default-root)
(status-bar-options)
{:topBar (assoc (topbar-options) :visible false)})}}}}
(nav2-roots/roots)))

15
src/status_im/navigation2.cljs
View File

@ -1,9 +1,20 @@
(ns status-im.navigation2
(:require [status-im.utils.fx :as fx]
[status-im.utils.datetime :as datetime]))
[status-im.reloader :as reloader]
[status-im.utils.config :as config]
[status-im.utils.datetime :as datetime]
[status-im.async-storage.core :as async-storage]))
(def parent-stack (atom :home-stack))
(fx/defn toggle-new-ui
{:events [:toggle-new-ui]}
[_]
(swap! config/new-ui-enabled? not)
(reloader/reload)
{:dispatch [:init-root (if @config/new-ui-enabled? :home-stack :chat-stack)]
::async-storage/set! {:new-ui-enabled? @config/new-ui-enabled?}})
(fx/defn init-root-nav2
{:events [:init-root-nav2]}
[_ root-id]
@ -38,7 +49,7 @@
[{:keys [db] :as cofx} go-to-view-id id screen-params from-switcher?]
(let [view-id (:view-id db)
stacks (:navigation2/navigation2-stacks db)
from-home? (= view-id :home-stack)]
from-home? (= view-id :chat-stack)]
(if from-switcher?
(navigate-from-switcher go-to-view-id id db from-home?)
(if from-home?

6
src/status_im/navigation2/home_stack.cljs
View File

@ -4,7 +4,8 @@
[status-im.switcher.switcher :as switcher]
[status-im.ui.screens.home.views :as home]
[status-im.switcher.constants :as switcher-constants]
[status-im.ui.screens.browser.empty-tab.views :as empty-tab]
[status-im.ui.screens.profile.user.views :as profile.user]
;; [status-im.ui.screens.browser.empty-tab.views :as empty-tab]
[status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
[status-im.switcher.bottom-tabs :as bottom-tabs]))
@ -18,7 +19,8 @@
:chats-stack [home/home]
:communities-stack [quo2.preview/main-screen]
:wallet-stack [wallet.accounts/accounts-overview]
:browser-stack [empty-tab/empty-tab])]))
;;:browser-stack [empty-tab/empty-tab])]))
:browser-stack [profile.user/my-profile])]))
(defn home []
[:<>

4
src/status_im/navigation2/roots.cljs
View File

@ -4,6 +4,6 @@
{:home-stack
{:root
{:stack {:id :home-stack
:children [{:component {:name :home-stack
:id :home-stack
:children [{:component {:name :chat-stack
:id :chat-stack
:options {:topBar {:visible false}}}}]}}}})

12
src/status_im/navigation2/screens.cljs
View File

@ -1,6 +1,14 @@
(ns status-im.navigation2.screens
(:require [status-im.navigation2.home-stack :as home-stack]))
(:require [status-im.ui.screens.chat.views :as chat]
[status-im.navigation2.home-stack :as home-stack]
[status-im.navigation2.stack-with-switcher :as stack-with-switcher]))
(def screens [{:name :home-stack
;; We have to use the home screen name :chat-stack for now, for compatibility with navigation.cljs
(def screens [{:name :chat-stack ;; TODO(parvesh) - rename to home-stack
:insets {:top false}
:component home-stack/home}])
;; These screens will overwrite navigation/screens.cljs screens on enabling new UI toggle
(def screen-overwrites
[{:name :chat
:component #(stack-with-switcher/overlap-stack chat/chat :chat)}])

3
src/status_im/subs.cljs
View File

@ -1538,7 +1538,8 @@
:<- [:view-id]
:<- [:home-items-show-number]
(fn [[search-filter filtered-chats communities view-id home-items-show-number]]
(if (= view-id :home)
(if (or (= view-id :home)
(and config/new-ui-enabled? (= view-id :chat-stack)))
(let [communities-count (count communities)
chats-count (count filtered-chats)
;; If we have both communities & chats we want to display

2
src/status_im/switcher/styles.cljs
View File

@ -31,7 +31,7 @@
:justify-content :space-around
:height (constants/bottom-tabs-height)
:position :absolute
:bottom 0
:bottom -1
:right 0
:left 0
:opacity animation/bottom-tabs-opacity

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

@ -14,7 +14,8 @@
wakuv2-flag
current-fleet
webview-debug
wallet-connect-enabled?]}]
wallet-connect-enabled?
new-ui-enabled?]}]
(keep
identity
[{:size :small
@ -115,7 +116,15 @@
#(re-frame/dispatch
[:multiaccounts.ui/switch-wallet-connect-enabled (not wallet-connect-enabled?)])
:accessory :switch
:active wallet-connect-enabled?}]))
:active wallet-connect-enabled?}
(when config/quo-preview-enabled?
{:size :small
:title (i18n/label :t/new-ui)
:accessibility-label :new-ui-toggle
:container-margin-bottom 8
:on-press #(re-frame/dispatch [:toggle-new-ui])
:accessory :switch
:active new-ui-enabled?})]))
(defn- flat-list-data [options]
(normal-mode-settings-data options))
@ -146,6 +155,7 @@
:wakuv2-flag wakuv2-flag
:waku-bloom-filter-mode waku-bloom-filter-mode
:webview-debug webview-debug
:wallet-connect-enabled? wallet-connect-enabled?})
:wallet-connect-enabled? wallet-connect-enabled?
:new-ui-enabled? @config/new-ui-enabled?})
:key-fn (fn [_ i] (str i))
:render-fn render-item}]))

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

@ -12,6 +12,7 @@
[status-im.ui.screens.home.views.inner-item :as inner-item]
[quo.design-system.colors :as colors]
[quo.core :as quo]
[quo.platform :as platform]
[status-im.add-new.core :as new-chat]
[status-im.ui.components.search-input.view :as search-input]
[status-im.add-new.db :as db]
@ -22,7 +23,8 @@
[status-im.ui.screens.chat.sheets :as sheets]
[status-im.ui.components.tabbar.core :as tabbar]
["react-native-navigation" :refer (Navigation)]
[status-im.ui.components.invite.views :as invite])
[status-im.ui.components.invite.views :as invite]
[status-im.utils.config :as config])
(:require-macros [status-im.utils.views :as views]))
(defn home-tooltip-view []
@ -102,7 +104,9 @@
home-item
{:on-press (fn []
(re-frame/dispatch [:dismiss-keyboard])
(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
(if (and @config/new-ui-enabled? platform/android?)
(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]))
(re-frame/dispatch [:search/home-filter-changed nil])
(re-frame/dispatch [:accept-all-activity-center-notifications-from-chat chat-id]))
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet

1
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -123,7 +123,6 @@
:accessibility-label :appearance-settings-button
:chevron true
:on-press #(re-frame/dispatch [:navigate-to :quo2-preview])}])
;; :on-press #(re-frame/dispatch [:init-root-nav2 :home-stack])}])
[quo/list-item
{:icon :main-icons/appearance
:title (i18n/label :t/appearance)

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

@ -120,7 +120,6 @@
[quo2.screens.main :as quo2.preview]
[status-im.utils.config :as config]
[status-im.navigation2.screens :as navigation2.screens]))
;[status-im.navigation2.stack-with-switcher :as stack-with-switcher]))
;[quo2.foundations.colors :as quo2.colors]))
(def components
@ -131,7 +130,7 @@
{:id id
:icon (icons/icon-source icon)})
(def screens
(defn screens []
(concat [;;INTRO, ONBOARDING, LOGIN
;Multiaccounts
@ -228,7 +227,6 @@
:rightButtons (right-button-options :chat :more)}}
:right-handler chat/topbar-button
:component chat/chat}
;; :component #(stack-with-switcher/overlap-stack chat/chat :chat)}
;Pinned messages
{:name :chat-pinned-messages
@ -897,5 +895,7 @@
quo2.preview/screens)
(when config/quo-preview-enabled?
navigation2.screens/screens)
(when @config/new-ui-enabled?
navigation2.screens/screen-overwrites)
(when config/quo-preview-enabled?
quo2.preview/main-screens)))

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

@ -21,7 +21,7 @@
(fn [acc screen]
(assoc acc (:name screen) screen))
{}
screens/screens))
(screens/screens)))
;;we need this for hot reload (for some reason it doesn't reload, so we have to call get-screens if debug true)
(def screens (get-screens))
@ -58,7 +58,11 @@
(defn screen [key]
(reagent.core/reactify-component
(fn []
(let [{:keys [component insets]} (get (if js/goog.DEBUG (get-screens) screens) (keyword key))]
(let [{:keys [component insets]} (get
(if (or js/goog.DEBUG @config/new-ui-enabled?)
(get-screens)
screens)
(keyword key))]
^{:key (str "root" key @reloader/cnt)}
[react/safe-area-provider
[react/safe-area-consumer
@ -158,4 +162,4 @@
[inactive]
[wallet-connect/wallet-connect-app-management-sheet-view]
(when js/goog.DEBUG
[reloader/reload-view])])))
[reloader/reload-view])])))

4
src/status_im/utils/config.cljs
View File

@ -171,4 +171,6 @@
:url "#"
:icons ["https://statusnetwork.com/img/press-kit-status-logo.svg"]})
(def wallet-connect-project-id "87815d72a81d739d2a7ce15c2cfdefb3")
(def wallet-connect-project-id "87815d72a81d739d2a7ce15c2cfdefb3")
(def new-ui-enabled? (atom false))

3
translations/en.json
View File

@ -1737,5 +1737,6 @@
"manage-connections": "Manage connections from within Application Connections",
"wallet-manage-app-connections": "Manage app connections",
"connection-request": "Connection Request",
"disconnect": "Disconnect"
"disconnect": "Disconnect",
"new-ui": "New UI"
}