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

View File

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

View File

@ -472,7 +472,7 @@
"Decides which root should be initialised depending on user and app state" "Decides which root should be initialised depending on user and app state"
[db] [db]
(if (get db :tos/accepted?) (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]))) (re-frame/dispatch [:init-root :tos])))
(fx/defn login-only-events (fx/defn login-only-events

View File

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

View File

@ -1,9 +1,20 @@
(ns status-im.navigation2 (ns status-im.navigation2
(:require [status-im.utils.fx :as fx] (: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)) (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 (fx/defn init-root-nav2
{:events [:init-root-nav2]} {:events [:init-root-nav2]}
[_ root-id] [_ root-id]
@ -38,7 +49,7 @@
[{:keys [db] :as cofx} go-to-view-id id screen-params from-switcher?] [{:keys [db] :as cofx} go-to-view-id id screen-params from-switcher?]
(let [view-id (:view-id db) (let [view-id (:view-id db)
stacks (:navigation2/navigation2-stacks db) stacks (:navigation2/navigation2-stacks db)
from-home? (= view-id :home-stack)] from-home? (= view-id :chat-stack)]
(if from-switcher? (if from-switcher?
(navigate-from-switcher go-to-view-id id db from-home?) (navigate-from-switcher go-to-view-id id db from-home?)
(if from-home? (if from-home?

View File

@ -4,7 +4,8 @@
[status-im.switcher.switcher :as switcher] [status-im.switcher.switcher :as switcher]
[status-im.ui.screens.home.views :as home] [status-im.ui.screens.home.views :as home]
[status-im.switcher.constants :as switcher-constants] [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.ui.screens.wallet.accounts.views :as wallet.accounts]
[status-im.switcher.bottom-tabs :as bottom-tabs])) [status-im.switcher.bottom-tabs :as bottom-tabs]))
@ -18,7 +19,8 @@
:chats-stack [home/home] :chats-stack [home/home]
:communities-stack [quo2.preview/main-screen] :communities-stack [quo2.preview/main-screen]
:wallet-stack [wallet.accounts/accounts-overview] :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 [] (defn home []
[:<> [:<>

View File

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

View File

@ -1,6 +1,14 @@
(ns status-im.navigation2.screens (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} :insets {:top false}
:component home-stack/home}]) :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)}])

View File

@ -1538,7 +1538,8 @@
:<- [:view-id] :<- [:view-id]
:<- [:home-items-show-number] :<- [:home-items-show-number]
(fn [[search-filter filtered-chats communities 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) (let [communities-count (count communities)
chats-count (count filtered-chats) chats-count (count filtered-chats)
;; If we have both communities & chats we want to display ;; If we have both communities & chats we want to display

View File

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

View File

@ -14,7 +14,8 @@
wakuv2-flag wakuv2-flag
current-fleet current-fleet
webview-debug webview-debug
wallet-connect-enabled?]}] wallet-connect-enabled?
new-ui-enabled?]}]
(keep (keep
identity identity
[{:size :small [{:size :small
@ -115,7 +116,15 @@
#(re-frame/dispatch #(re-frame/dispatch
[:multiaccounts.ui/switch-wallet-connect-enabled (not wallet-connect-enabled?)]) [:multiaccounts.ui/switch-wallet-connect-enabled (not wallet-connect-enabled?)])
:accessory :switch :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] (defn- flat-list-data [options]
(normal-mode-settings-data options)) (normal-mode-settings-data options))
@ -146,6 +155,7 @@
:wakuv2-flag wakuv2-flag :wakuv2-flag wakuv2-flag
:waku-bloom-filter-mode waku-bloom-filter-mode :waku-bloom-filter-mode waku-bloom-filter-mode
:webview-debug webview-debug :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)) :key-fn (fn [_ i] (str i))
:render-fn render-item}])) :render-fn render-item}]))

View File

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

View File

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

View File

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

View File

@ -21,7 +21,7 @@
(fn [acc screen] (fn [acc screen]
(assoc acc (:name screen) 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) ;;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)) (def screens (get-screens))
@ -58,7 +58,11 @@
(defn screen [key] (defn screen [key]
(reagent.core/reactify-component (reagent.core/reactify-component
(fn [] (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)} ^{:key (str "root" key @reloader/cnt)}
[react/safe-area-provider [react/safe-area-provider
[react/safe-area-consumer [react/safe-area-consumer
@ -158,4 +162,4 @@
[inactive] [inactive]
[wallet-connect/wallet-connect-app-management-sheet-view] [wallet-connect/wallet-connect-app-management-sheet-view]
(when js/goog.DEBUG (when js/goog.DEBUG
[reloader/reload-view])]))) [reloader/reload-view])])))

View File

@ -171,4 +171,6 @@
:url "#" :url "#"
:icons ["https://statusnetwork.com/img/press-kit-status-logo.svg"]}) :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))

View File

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