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

move switcher (#14378) 

* move switcher
This commit is contained in:
flexsurfer 2022-11-16 12:00:16 +01:00 committed by GitHub
parent 255049c312
commit 803328dc4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 132 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/core.cljs
View File

@ -33,7 +33,9 @@
quo2.components.notifications.notification-dot quo2.components.notifications.notification-dot
quo2.components.tags.tags quo2.components.tags.tags
quo2.components.tabs.tabs quo2.components.tabs.tabs
quo2.components.tabs.account-selector)) quo2.components.tabs.account-selector
quo2.components.navigation.top-nav
quo2.components.navigation.floating-shell-button))
(def button quo2.components.buttons.button/button) (def button quo2.components.buttons.button/button)
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
@ -53,6 +55,8 @@
(def tabs quo2.components.tabs.tabs/tabs) (def tabs quo2.components.tabs.tabs/tabs)
(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs) (def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
(def account-selector quo2.components.tabs.account-selector/account-selector) (def account-selector quo2.components.tabs.account-selector/account-selector)
(def top-nav quo2.components.navigation.top-nav/top-nav)
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
;;;; AVATAR ;;;; AVATAR
(def account-avatar quo2.components.avatars.account-avatar/account-avatar) (def account-avatar quo2.components.avatars.account-avatar/account-avatar)

2
src/react_native/core.cljs
View File

@ -48,3 +48,5 @@
(defn get-window [] (defn get-window []
(js->clj (.get (.-Dimensions ^js react-native) "window") :keywordize-keys true)) (js->clj (.get (.-Dimensions ^js react-native) "window") :keywordize-keys true))
(def status-bar (.-StatusBar ^js react-native))

54
src/status_im/switcher/shell.cljs
View File

@ -1,54 +0,0 @@
(ns status-im.switcher.shell
(:require [quo.react-native :as rn]
[status-im.i18n.i18n :as i18n]
[quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text]
[quo.components.safe-area :as safe-area]
[quo2.components.navigation.top-nav :as top-nav]))
(defn placeholder []
[rn/view {:style {:position :absolute
:top 0
:left 0
:right 0
:bottom -1
:justify-content :center
:align-items :center
:accessibility-label :shell-placeholder-view}}
[rn/view {:style {:margin-top 12
:width 80
:height 80
:border-radius 16
:background-color colors/neutral-90}}]
[text/text {:size :heading-2
:weight :semi-bold
:style {:margin-top 20
:color colors/white}}
(i18n/label :t/shell-placeholder-title)]
[text/text {:size :paragraph-1
:weight :regular
:align :center
:style {:margin-top 8
:color colors/white}}
(i18n/label :t/shell-placeholder-subtitle)]])
(defn shell []
[safe-area/consumer
(fn [insets]
[rn/view {:style {:top 0
:left 0
:right 0
:bottom -1
:position :absolute
:background-color colors/neutral-100}}
[top-nav/top-nav {:type :shell
:style {:margin-top (:top insets)}}]
[placeholder]
[rn/scroll-view {:style {:padding-horizontal 20
:flex-direction :row}}
[text/text {:size :heading-1
:weight :semi-bold
:style {:color colors/white
:margin-top 12}}
(i18n/label :t/jump-to)]]])])

24
src/status_im/switcher/shell_stack.cljs
View File

@ -1,24 +0,0 @@
(ns status-im.switcher.shell-stack
(:require [status-im.i18n.i18n :as i18n]
[status-im.switcher.shell :as shell]
[status-im.switcher.constants :as constants]
[status-im.switcher.animation :as animation]
[status-im.switcher.home-stack :as home-stack]
[status-im.switcher.bottom-tabs :as bottom-tabs]
[quo2.components.navigation.floating-shell-button :as floating-shell-button]))
(defn shell-stack []
[:f>
(fn []
(let [shared-values (animation/get-shared-values)]
[:<>
[shell/shell]
[bottom-tabs/bottom-tabs shared-values]
[home-stack/home-stack shared-values]
[floating-shell-button/floating-shell-button
{:jump-to {:on-press #(animation/close-home-stack shared-values)
:label (i18n/label :t/jump-to)}}
{:position :absolute
:bottom (+ (constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 + 5(padding on button)
(:home-stack-opacity shared-values)
(:home-stack-pointer shared-values)]]))])

3
src/status_im/ui2/screens/chat/messages/pinned_message.cljs
View File

@ -5,7 +5,6 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[quo2.foundations.typography :as typography] [quo2.foundations.typography :as typography]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.switcher.constants :as constants]
[status-im.chat.models.pin-message :as models.pin-message] [status-im.chat.models.pin-message :as models.pin-message]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.handlers :refer [<sub >evt]]
[status-im.ui2.screens.chat.messages.style :as style] [status-im.ui2.screens.chat.messages.style :as style]
@ -14,7 +13,7 @@
(defn pin-limit-popover [chat-id pinned-messages-list] (defn pin-limit-popover [chat-id pinned-messages-list]
[:f> [:f>
(fn [] (fn []
(let [{:keys [width]} (constants/dimensions) (let [width (<sub [:dimensions/window-width])
show-pin-limit-modal? (<sub [:chats/pin-modal chat-id]) show-pin-limit-modal? (<sub [:chats/pin-modal chat-id])
opacity-animation (reanimated/use-shared-value 0) opacity-animation (reanimated/use-shared-value 0)
z-index-animation (reanimated/use-shared-value -1)] z-index-animation (reanimated/use-shared-value -1)]

2
src/status_im/ui2/screens/quo2_preview/switcher/switcher_cards.cljs
View File

@ -4,7 +4,7 @@
[status-im.ui2.screens.quo2-preview.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.switcher.switcher-cards.switcher-cards :as switcher-cards])) [status-im2.contexts.shell.cards.view :as switcher-cards]))
(def descriptor [{:label "Type" (def descriptor [{:label "Type"
:key :type :key :type

8
src/status_im/switcher/animation.cljs → src/status_im2/contexts/shell/animation.cljs
View File

@ -1,9 +1,11 @@
(ns status-im.switcher.animation (ns status-im2.contexts.shell.animation
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.async-storage.core :as async-storage] [status-im2.contexts.shell.constants :as constants]
[status-im.switcher.constants :as constants]))
;;TODO remove when not used anymore
[status-im.async-storage.core :as async-storage]))
;;;; Bottom Tabs & Home Stack Animations ;;;; Bottom Tabs & Home Stack Animations

12
src/status_im/switcher/bottom_tabs.cljs → src/status_im2/contexts/shell/bottom_tabs.cljs
View File

@ -1,10 +1,10 @@
(ns status-im.switcher.bottom-tabs (ns status-im2.contexts.shell.bottom-tabs
(:require [quo.react-native :as rn] (:require [reagent.core :as reagent]
[reagent.core :as reagent]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.switcher.styles :as styles] [react-native.core :as rn]
[status-im.switcher.constants :as constants] [status-im2.contexts.shell.style :as styles]
[status-im.switcher.animation :as animation] [status-im2.contexts.shell.constants :as constants]
[status-im2.contexts.shell.animation :as animation]
[quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab])) [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]))
;; Reagent atoms used for lazily loading home screen tabs ;; Reagent atoms used for lazily loading home screen tabs

2
src/status_im/switcher/switcher_cards/styles.cljs → src/status_im2/contexts/shell/cards/style.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.switcher.switcher-cards.styles (ns status-im2.contexts.shell.cards.style
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def colors-map (def colors-map

36
src/status_im/switcher/switcher_cards/switcher_cards.cljs → src/status_im2/contexts/shell/cards/view.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.switcher.switcher-cards.switcher-cards (ns status-im2.contexts.shell.cards.view
(:require [react-native.core :as rn] (:require [i18n.i18n :as i18n]
[react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
@ -10,27 +11,26 @@
[quo2.components.avatars.group-avatar :as group-avatar] [quo2.components.avatars.group-avatar :as group-avatar]
[quo2.components.list-items.preview-list :as preview-list] [quo2.components.list-items.preview-list :as preview-list]
[quo2.components.avatars.channel-avatar :as channel-avatar] [quo2.components.avatars.channel-avatar :as channel-avatar]
[status-im.switcher.switcher-cards.styles :as styles] [status-im2.contexts.shell.cards.style :as style]))
[status-im.i18n.i18n :as i18n]))
(defn content-container [{:keys [content-type data new-notifications? color-50]}] (defn content-container [{:keys [content-type data new-notifications? color-50]}]
[rn/view {:style (styles/content-container new-notifications?)} [rn/view {:style (style/content-container new-notifications?)}
(case content-type (case content-type
:text [text/text (styles/last-message-text-props) data] :text [text/text (style/last-message-text-props) data]
:photo [preview-list/preview-list {:type :photo :photo [preview-list/preview-list {:type :photo
:more-than-99-label (i18n/label :counter-99-plus) :more-than-99-label (i18n/label :counter-99-plus)
:size 24 :size 24
:override-theme :dark} data] :override-theme :dark} data]
:sticker [fast-image/fast-image {:source (:source data) :sticker [fast-image/fast-image {:source (:source data)
:style (styles/sticker)}] :style (style/sticker)}]
:gif [fast-image/fast-image {:source (:source data) :gif [fast-image/fast-image {:source (:source data)
:style (styles/gif)}] :style (style/gif)}]
:channel [rn/view {:style {:flex-direction :row :channel [rn/view {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
[channel-avatar/channel-avatar [channel-avatar/channel-avatar
{:emoji (:emoji data) {:emoji (:emoji data)
:emoji-background-color (colors/alpha color-50 0.1)}] :emoji-background-color (colors/alpha color-50 0.1)}]
[text/text (styles/community-channel-props) (:channel-name data)]] [text/text (style/community-channel-props) (:channel-name data)]]
:community-info (case (:type data) :community-info (case (:type data)
:pending [status-tags/status-tag :pending [status-tags/status-tag
{:status :pending {:status :pending
@ -47,12 +47,12 @@
[:<>])]) [:<>])])
(defn notification-container [{:keys [notification-indicator counter-label color-60]}] (defn notification-container [{:keys [notification-indicator counter-label color-60]}]
[rn/view {:style (styles/notification-container)} [rn/view {:style (style/notification-container)}
(if (= notification-indicator :counter) (if (= notification-indicator :counter)
[counter/counter {:outline false [counter/counter {:outline false
:override-text-color colors/white :override-text-color colors/white
:override-bg-color color-60} counter-label] :override-bg-color color-60} counter-label]
[rn/view {:style (styles/unread-dot color-60)}])]) [rn/view {:style (style/unread-dot color-60)}])])
(defn bottom-container [{:keys [new-notifications?] :as content}] (defn bottom-container [{:keys [new-notifications?] :as content}]
[:<> [:<>
@ -71,7 +71,7 @@
:size :large :size :large
:override-theme :dark}] :override-theme :dark}]
:community-card [fast-image/fast-image {:source (:source avatar-params) :community-card [fast-image/fast-image {:source (:source avatar-params)
:style (styles/community-avatar)}])) :style (style/community-avatar)}]))
(defn subtitle [{:keys [content-type data]}] (defn subtitle [{:keys [content-type data]}]
(case content-type (case content-type
@ -92,18 +92,18 @@
(let [color-50 (colors/custom-color customization-color 50) (let [color-50 (colors/custom-color customization-color 50)
color-60 (colors/custom-color customization-color 60)] color-60 (colors/custom-color customization-color 60)]
[rn/touchable-without-feedback {:on-press on-press} [rn/touchable-without-feedback {:on-press on-press}
[rn/view {:style (styles/base-container color-50)} [rn/view {:style (style/base-container color-50)}
(when banner (when banner
[rn/image {:source (:source banner) [rn/image {:source (:source banner)
:style {:width 160}}]) :style {:width 160}}])
[rn/view {:style (styles/secondary-container)} [rn/view {:style (style/secondary-container)}
[text/text (styles/title-props) title] [text/text (style/title-props) title]
[text/text (styles/subtitle-props) (subtitle content)] [text/text (style/subtitle-props) (subtitle content)]
[bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]] [bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]]
(when avatar (when avatar
[rn/view {:style (styles/avatar-container)} [rn/view {:style (style/avatar-container)}
[avatar avatar-params type customization-color]]) [avatar avatar-params type customization-color]])
[button/button (styles/close-button-props on-close) :i/close]]])) [button/button (style/close-button-props on-close) :i/close]]]))
;; browser Card ;; browser Card
(defn browser-card [_] (defn browser-card [_]

16
src/status_im/switcher/constants.cljs → src/status_im2/contexts/shell/constants.cljs
View File

@ -1,24 +1,20 @@
(ns status-im.switcher.constants (ns status-im2.contexts.shell.constants
(:require [quo.react-native :as rn] (:require [react-native.platform :as platform]
[reagent.core :as reagent] [utils.re-frame :as rf]
[status-im.utils.handlers :refer [<sub]] [react-native.core :as rn]))
[status-im.utils.platform :as platform]))
(def shell-animation-time 200) (def shell-animation-time 200)
(defn bottom-tabs-container-height [] (defn bottom-tabs-container-height []
(if platform/android? 57 82)) (if platform/android? 57 82))
(defn bottom-tabs-extended-container-height []
(if platform/android? 90 120))
(defn status-bar-offset [] (defn status-bar-offset []
(if platform/android? (.-currentHeight ^js rn/status-bar) 0)) (if platform/android? (.-currentHeight ^js rn/status-bar) 0))
;; status bar height is not included in : the dimensions/window for devices with a notch ;; status bar height is not included in : the dimensions/window for devices with a notch
;; https://github.com/facebook/react-native/issues/23693#issuecomment-662860819 ;; https://github.com/facebook/react-native/issues/23693#issuecomment-662860819
(defn dimensions [] (defn dimensions []
(let [{:keys [width height]} (<sub [:dimensions/window])] (let [{:keys [width height]} (rf/sub [:dimensions/window])]
{:width width {:width width
:height (if (> (status-bar-offset) 28) :height (if (> (status-bar-offset) 28)
(+ height (status-bar-offset)) (+ height (status-bar-offset))
@ -43,5 +39,3 @@
:chats-stack :chats-tab-icon-opacity :chats-stack :chats-tab-icon-opacity
:wallet-stack :wallet-tab-icon-opacity :wallet-stack :wallet-tab-icon-opacity
:browser-stack :browser-tab-icon-opacity}) :browser-stack :browser-tab-icon-opacity})
(def pass-through? (reagent/atom false))

14
src/status_im/switcher/home_stack.cljs → src/status_im2/contexts/shell/home_stack.cljs
View File

@ -1,11 +1,13 @@
(ns status-im.switcher.home-stack (ns status-im2.contexts.shell.home-stack
(:require [status-im.switcher.styles :as styles] (:require [react-native.reanimated :as reanimated]
[react-native.reanimated :as reanimated] [status-im2.contexts.shell.style :as styles]
[status-im.switcher.constants :as constants] [status-im2.contexts.shell.constants :as constants]
[status-im.ui2.screens.chat.home :as chat.home] [status-im2.contexts.shell.bottom-tabs :as bottom-tabs]
[status-im.switcher.bottom-tabs :as bottom-tabs]
;; TODO move to status-im2
[status-im.ui.screens.profile.user.views :as profile.user] [status-im.ui.screens.profile.user.views :as profile.user]
[status-im.ui.screens.wallet.accounts.views :as wallet.accounts] [status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
[status-im.ui2.screens.chat.home :as chat.home]
[status-im.ui2.screens.communities.communities-home :as communities-home])) [status-im.ui2.screens.communities.communities-home :as communities-home]))
(defn load-stack? [stack-id] (defn load-stack? [stack-id]

6
src/status_im/switcher/styles.cljs → src/status_im2/contexts/shell/style.cljs
View File

@ -1,7 +1,7 @@
(ns status-im.switcher.styles (ns status-im2.contexts.shell.style
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[status-im.utils.platform :as platform] [status-im2.contexts.shell.constants :as constants]
[status-im.switcher.constants :as constants])) [react-native.platform :as platform]))
;; Bottom Tabs ;; Bottom Tabs
(defn bottom-tabs-container [pass-through?] (defn bottom-tabs-container [pass-through?]

72
src/status_im2/contexts/shell/view.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns status-im2.contexts.shell.view
(:require [i18n.i18n :as i18n]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[status-im2.contexts.shell.constants :as constants]
[status-im2.contexts.shell.animation :as animation]
[status-im2.contexts.shell.home-stack :as home-stack]
[status-im2.contexts.shell.bottom-tabs :as bottom-tabs]))
(defn placeholder []
[rn/view {:style {:position :absolute
:top 0
:left 0
:right 0
:bottom -1
:justify-content :center
:align-items :center
:accessibility-label :shell-placeholder-view}}
[rn/view {:style {:margin-top 12
:width 80
:height 80
:border-radius 16
:background-color colors/neutral-90}}]
[quo/text {:size :heading-2
:weight :semi-bold
:style {:margin-top 20
:color colors/white}}
(i18n/label :t/shell-placeholder-title)]
[quo/text {:size :paragraph-1
:weight :regular
:align :center
:style {:margin-top 8
:color colors/white}}
(i18n/label :t/shell-placeholder-subtitle)]])
(defn shell []
[safe-area/consumer
(fn [insets]
[rn/view {:style {:top 0
:left 0
:right 0
:bottom -1
:position :absolute
:background-color colors/neutral-100}}
[quo/top-nav {:type :shell
:style {:margin-top (:top insets)}}]
[placeholder]
[rn/scroll-view {:style {:padding-horizontal 20
:flex-direction :row}}
[quo/text {:size :heading-1
:weight :semi-bold
:style {:color colors/white
:margin-top 12}}
(i18n/label :t/jump-to)]]])])
(defn shell-stack []
[:f>
(fn []
(let [shared-values (animation/get-shared-values)]
[:<>
[shell]
[bottom-tabs/bottom-tabs shared-values]
[home-stack/home-stack shared-values]
[quo/floating-shell-button
{:jump-to {:on-press #(animation/close-home-stack shared-values)
:label (i18n/label :t/jump-to)}}
{:position :absolute
:bottom (+ (constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 + 5(padding on button)
(:home-stack-opacity shared-values)
(:home-stack-pointer shared-values)]]))])

7
src/status_im2/navigation/screens.cljs
View File

@ -4,9 +4,9 @@
[status-im.ui2.screens.chat.home :as chat.home] [status-im.ui2.screens.chat.home :as chat.home]
[status-im.ui2.screens.chat.view :as chat] [status-im.ui2.screens.chat.view :as chat]
[status-im.ui2.screens.communities.discover-communities :as discover-communities] [status-im.ui2.screens.communities.discover-communities :as discover-communities]
[status-im2.contexts.shell.view :as shell]
;; TODO (14/11/22 flexsurfer) move to status-im2 namespace ;; TODO remove when not used anymore
[status-im.switcher.shell-stack :as shell-stack]
[status-im.ui.screens.screens :as old-screens])) [status-im.ui.screens.screens :as old-screens]))
(def components (def components
@ -17,7 +17,7 @@
[{:name :shell-stack [{:name :shell-stack
:insets {:top false} :insets {:top false}
:component shell-stack/shell-stack} :component shell/shell-stack}
{:name :home {:name :home
:component chat.home/home} :component chat.home/home}
@ -27,7 +27,6 @@
:component chat/chat} :component chat/chat}
{:name :discover-communities {:name :discover-communities
;;TODO animated-header scroll behaviours
:options {:topBar {:visible false}} :options {:topBar {:visible false}}
:component discover-communities/communities}] :component discover-communities/communities}]

4
src/status_im2/setup/core.cljs
View File

@ -18,12 +18,12 @@
[status-im2.setup.i18n-resources :as i18n-resources] [status-im2.setup.i18n-resources :as i18n-resources]
[status-im2.setup.config :as config] [status-im2.setup.config :as config]
[status-im2.setup.log :as log] [status-im2.setup.log :as log]
status-im.events [status-im2.contexts.shell.animation :as animation]
;; TODO (14/11/22 flexsurfer move to status-im2 namespace ;; TODO (14/11/22 flexsurfer move to status-im2 namespace
status-im.events
[status-im.native-module.core :as status] [status-im.native-module.core :as status]
[status-im.notifications.local :as notifications] [status-im.notifications.local :as notifications]
[status-im.switcher.animation :as animation]
[status-im.async-storage.core :as async-storage] [status-im.async-storage.core :as async-storage]
[status-im.utils.universal-links.core :as utils.universal-links])) [status-im.utils.universal-links.core :as utils.universal-links]))