diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 5dea7514f6..f6e7051418 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -33,7 +33,9 @@ quo2.components.notifications.notification-dot quo2.components.tags.tags 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 dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) @@ -53,6 +55,8 @@ (def tabs quo2.components.tabs.tabs/tabs) (def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs) (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 (def account-avatar quo2.components.avatars.account-avatar/account-avatar) diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index c3f71f06b8..553cb9f6c5 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -48,3 +48,5 @@ (defn get-window [] (js->clj (.get (.-Dimensions ^js react-native) "window") :keywordize-keys true)) + +(def status-bar (.-StatusBar ^js react-native)) diff --git a/src/status_im/switcher/shell.cljs b/src/status_im/switcher/shell.cljs deleted file mode 100644 index 1c48b74e9c..0000000000 --- a/src/status_im/switcher/shell.cljs +++ /dev/null @@ -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)]]])]) - diff --git a/src/status_im/switcher/shell_stack.cljs b/src/status_im/switcher/shell_stack.cljs deleted file mode 100644 index 875fa9fb21..0000000000 --- a/src/status_im/switcher/shell_stack.cljs +++ /dev/null @@ -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)]]))]) diff --git a/src/status_im/ui2/screens/chat/messages/pinned_message.cljs b/src/status_im/ui2/screens/chat/messages/pinned_message.cljs index 44daccab15..e9349d679b 100644 --- a/src/status_im/ui2/screens/chat/messages/pinned_message.cljs +++ b/src/status_im/ui2/screens/chat/messages/pinned_message.cljs @@ -5,7 +5,6 @@ [quo.react-native :as rn] [quo2.foundations.typography :as typography] [quo2.foundations.colors :as colors] - [status-im.switcher.constants :as constants] [status-im.chat.models.pin-message :as models.pin-message] [status-im.utils.handlers :refer [evt]] [status-im.ui2.screens.chat.messages.style :as style] @@ -14,7 +13,7 @@ (defn pin-limit-popover [chat-id pinned-messages-list] [:f> (fn [] - (let [{:keys [width]} (constants/dimensions) + (let [width (])]) (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) [counter/counter {:outline false :override-text-color colors/white :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}] [:<> @@ -71,7 +71,7 @@ :size :large :override-theme :dark}] :community-card [fast-image/fast-image {:source (:source avatar-params) - :style (styles/community-avatar)}])) + :style (style/community-avatar)}])) (defn subtitle [{:keys [content-type data]}] (case content-type @@ -92,18 +92,18 @@ (let [color-50 (colors/custom-color customization-color 50) color-60 (colors/custom-color customization-color 60)] [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 [rn/image {:source (:source banner) :style {:width 160}}]) - [rn/view {:style (styles/secondary-container)} - [text/text (styles/title-props) title] - [text/text (styles/subtitle-props) (subtitle content)] + [rn/view {:style (style/secondary-container)} + [text/text (style/title-props) title] + [text/text (style/subtitle-props) (subtitle content)] [bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]] (when avatar - [rn/view {:style (styles/avatar-container)} + [rn/view {:style (style/avatar-container)} [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 (defn browser-card [_] diff --git a/src/status_im/switcher/constants.cljs b/src/status_im2/contexts/shell/constants.cljs similarity index 75% rename from src/status_im/switcher/constants.cljs rename to src/status_im2/contexts/shell/constants.cljs index fface503d8..1ecffea652 100644 --- a/src/status_im/switcher/constants.cljs +++ b/src/status_im2/contexts/shell/constants.cljs @@ -1,24 +1,20 @@ -(ns status-im.switcher.constants - (:require [quo.react-native :as rn] - [reagent.core :as reagent] - [status-im.utils.handlers :refer [ (status-bar-offset) 28) (+ height (status-bar-offset)) @@ -43,5 +39,3 @@ :chats-stack :chats-tab-icon-opacity :wallet-stack :wallet-tab-icon-opacity :browser-stack :browser-tab-icon-opacity}) - -(def pass-through? (reagent/atom false)) diff --git a/src/status_im/switcher/home_stack.cljs b/src/status_im2/contexts/shell/home_stack.cljs similarity index 88% rename from src/status_im/switcher/home_stack.cljs rename to src/status_im2/contexts/shell/home_stack.cljs index b2c07d5a42..4093e5bbaf 100644 --- a/src/status_im/switcher/home_stack.cljs +++ b/src/status_im2/contexts/shell/home_stack.cljs @@ -1,11 +1,13 @@ -(ns status-im.switcher.home-stack - (:require [status-im.switcher.styles :as styles] - [react-native.reanimated :as reanimated] - [status-im.switcher.constants :as constants] - [status-im.ui2.screens.chat.home :as chat.home] - [status-im.switcher.bottom-tabs :as bottom-tabs] +(ns status-im2.contexts.shell.home-stack + (:require [react-native.reanimated :as reanimated] + [status-im2.contexts.shell.style :as styles] + [status-im2.contexts.shell.constants :as constants] + [status-im2.contexts.shell.bottom-tabs :as bottom-tabs] + + ;; TODO move to status-im2 [status-im.ui.screens.profile.user.views :as profile.user] [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])) (defn load-stack? [stack-id] diff --git a/src/status_im/switcher/styles.cljs b/src/status_im2/contexts/shell/style.cljs similarity index 88% rename from src/status_im/switcher/styles.cljs rename to src/status_im2/contexts/shell/style.cljs index 563d163d71..c5ee83f831 100644 --- a/src/status_im/switcher/styles.cljs +++ b/src/status_im2/contexts/shell/style.cljs @@ -1,7 +1,7 @@ -(ns status-im.switcher.styles +(ns status-im2.contexts.shell.style (:require [quo2.foundations.colors :as colors] - [status-im.utils.platform :as platform] - [status-im.switcher.constants :as constants])) + [status-im2.contexts.shell.constants :as constants] + [react-native.platform :as platform])) ;; Bottom Tabs (defn bottom-tabs-container [pass-through?] diff --git a/src/status_im2/contexts/shell/view.cljs b/src/status_im2/contexts/shell/view.cljs new file mode 100644 index 0000000000..cb11ec13b1 --- /dev/null +++ b/src/status_im2/contexts/shell/view.cljs @@ -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)]]))]) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 1e944642e9..8a609523de 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -4,9 +4,9 @@ [status-im.ui2.screens.chat.home :as chat.home] [status-im.ui2.screens.chat.view :as chat] [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 - [status-im.switcher.shell-stack :as shell-stack] + ;; TODO remove when not used anymore [status-im.ui.screens.screens :as old-screens])) (def components @@ -17,7 +17,7 @@ [{:name :shell-stack :insets {:top false} - :component shell-stack/shell-stack} + :component shell/shell-stack} {:name :home :component chat.home/home} @@ -27,7 +27,6 @@ :component chat/chat} {:name :discover-communities - ;;TODO animated-header scroll behaviours :options {:topBar {:visible false}} :component discover-communities/communities}] diff --git a/src/status_im2/setup/core.cljs b/src/status_im2/setup/core.cljs index 593e7aea65..55dd87fbf5 100644 --- a/src/status_im2/setup/core.cljs +++ b/src/status_im2/setup/core.cljs @@ -18,12 +18,12 @@ [status-im2.setup.i18n-resources :as i18n-resources] [status-im2.setup.config :as config] [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 + status-im.events [status-im.native-module.core :as status] [status-im.notifications.local :as notifications] - [status-im.switcher.animation :as animation] [status-im.async-storage.core :as async-storage] [status-im.utils.universal-links.core :as utils.universal-links]))