From dbd61a34a0e42a8e26617fdd1327927645be3609 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 19 Dec 2022 14:51:53 +0530 Subject: [PATCH] Update shell placeholder screen with new designs (#14572) --- src/quo2/foundations/colors.cljs | 2 + src/react_native/core.cljs | 3 + .../quo_preview/switcher/switcher_cards.cljs | 32 ++++--- src/status_im2/contexts/shell/animation.cljs | 46 ++++----- .../contexts/shell/bottom_tabs.cljs | 4 +- .../contexts/shell/cards/style.cljs | 39 +------- src/status_im2/contexts/shell/cards/view.cljs | 72 ++++++++++---- src/status_im2/contexts/shell/constants.cljs | 19 ++-- src/status_im2/contexts/shell/events.cljs | 2 +- src/status_im2/contexts/shell/home_stack.cljs | 6 +- src/status_im2/contexts/shell/style.cljs | 40 +++++++- src/status_im2/contexts/shell/view.cljs | 94 +++++++++---------- 12 files changed, 199 insertions(+), 160 deletions(-) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index 259e766ac5..27fd09b43a 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -67,11 +67,13 @@ (def neutral-95-opa-95 (alpha neutral-95 0.95)) ;;100 with transparency +(def neutral-100-opa-0 (alpha neutral-100 0)) (def neutral-100-opa-60 (alpha neutral-100 0.6)) (def neutral-100-opa-70 (alpha neutral-100 0.7)) (def neutral-100-opa-80 (alpha neutral-100 0.8)) (def neutral-100-opa-90 (alpha neutral-100 0.9)) (def neutral-100-opa-95 (alpha neutral-100 0.95)) +(def neutral-100-opa-100 (alpha neutral-100 1)) ;;;;White diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index 925f5aa533..b13d8b6c32 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -57,6 +57,9 @@ (def status-bar (.-StatusBar ^js react-native)) +(defn status-bar-height [] + (.-currentHeight ^js status-bar)) + (defn hw-back-add-listener [callback] (.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback)) diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index e419167be6..8b7bff4830 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -1,31 +1,33 @@ (ns status-im2.contexts.quo-preview.switcher.switcher-cards (:require [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.shell.constants :as constants] - [status-im2.contexts.quo-preview.preview :as preview] [quo2.foundations.colors :as colors] [status-im.react-native.resources :as resources] + [status-im2.contexts.quo-preview.preview :as preview] + [status-im2.contexts.shell.constants :as shell.constants] [status-im2.contexts.shell.cards.view :as switcher-cards])) (def descriptor [{:label "Type" :key :type :type :select - :options [{:key constants/communities-discover + :options [{:key shell.constants/communities-discover :value "Communities Discover"} - {:key constants/one-to-one-chat-card + {:key shell.constants/one-to-one-chat-card :value "Messaging"} - {:key constants/private-group-chat-card + {:key shell.constants/private-group-chat-card :value "Group Messaging"} - {:key constants/community-card + {:key shell.constants/community-card :value "Community Card"} - {:key constants/browser-card + {:key shell.constants/browser-card :value "Browser Card"} - {:key constants/wallet-card + {:key shell.constants/wallet-card :value "Wallet Card"} - {:key constants/wallet-collectible + {:key shell.constants/wallet-collectible :value "Wallet Collectible"} - {:key constants/wallet-graph - :value "Wallet Graph"}]} + {:key shell.constants/wallet-graph + :value "Wallet Graph"} + {:key shell.constants/empty-card + :value "Empty Card"}]} {:label "Title" :key :title :type :text} @@ -117,13 +119,13 @@ :content-type (:content-type data) :data (get-mock-content data)}} (case type - constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}} - constants/private-group-chat-card {} - constants/community-card {:avatar-params community-avatar} + shell.constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}} + shell.constants/private-group-chat-card {} + shell.constants/community-card {:avatar-params community-avatar} {}))) (defn cool-preview [] - (let [state (reagent/atom {:type constants/private-group-chat-card + (let [state (reagent/atom {:type shell.constants/private-group-chat-card :title "Alisher Yakupov" :customization-color :turquoise :new-notifications? true diff --git a/src/status_im2/contexts/shell/animation.cljs b/src/status_im2/contexts/shell/animation.cljs index a52d7023a5..81e1fdbcdb 100644 --- a/src/status_im2/contexts/shell/animation.cljs +++ b/src/status_im2/contexts/shell/animation.cljs @@ -3,14 +3,14 @@ [re-frame.core :as re-frame] [react-native.reanimated :as reanimated] [quo2.foundations.colors :as colors] - [status-im2.contexts.shell.constants :as constants] + [status-im2.contexts.shell.constants :as shell.constants] ;;TODO remove when not used anymore [status-im.async-storage.core :as async-storage])) ;; Atoms (def selected-stack-id (atom nil)) -(def home-stack-state (atom constants/close-with-animation)) +(def home-stack-state (atom shell.constants/close-with-animation)) (def pass-through? (atom false)) ;; TODO - Use dynamic pass-through for transparent bottom tabs (def shared-values-atom (atom nil)) @@ -23,8 +23,8 @@ ;; Helper Functions (defn home-stack-open? [] (let [state @home-stack-state] - (or (= state constants/open-with-animation) - (= state constants/open-without-animation)))) + (or (= state shell.constants/open-with-animation) + (= state shell.constants/open-without-animation)))) (defn load-stack [stack-id] (case stack-id @@ -39,25 +39,25 @@ (reset! home-stack-state (if (some? stack-id) - constants/open-with-animation - constants/close-with-animation))) + shell.constants/open-with-animation + shell.constants/close-with-animation))) (defn calculate-home-stack-position [] - (let [{:keys [width height]} (constants/dimensions) + (let [{:keys [width height]} (shell.constants/dimensions) bottom-nav-tab-width 90 minimize-scale (/ bottom-nav-tab-width width) empty-space-half-scale (/ (- 1 minimize-scale) 2) left-margin (/ (- width (* 4 bottom-nav-tab-width)) 2) left-empty-space (* empty-space-half-scale width) top-empty-space (* empty-space-half-scale - (- height (constants/bottom-tabs-container-height)))] + (- height (shell.constants/bottom-tabs-container-height)))] {:left (reduce (fn [acc stack-id] (assoc acc stack-id (+ (- left-margin left-empty-space) - (* (.indexOf constants/stacks-ids stack-id) + (* (.indexOf shell.constants/stacks-ids stack-id) bottom-nav-tab-width)))) - {:none 0} constants/stacks-ids) - :top (+ top-empty-space (constants/bottom-tabs-container-height)) + {:none 0} shell.constants/stacks-ids) + :top (+ top-empty-space (shell.constants/bottom-tabs-container-height)) :scale minimize-scale})) (def shell-worklets (js/require "../src/js/shell_worklets.js")) @@ -74,9 +74,9 @@ (reset! shared-values-atom (reduce (fn [acc id] - (let [tabs-icon-color-keyword (get constants/tabs-icon-color-keywords id) - stack-opacity-keyword (get constants/stacks-opacity-keywords id) - stack-pointer-keyword (get constants/stacks-pointer-keywords id)] + (let [tabs-icon-color-keyword (get shell.constants/tabs-icon-color-keywords id) + stack-opacity-keyword (get shell.constants/stacks-opacity-keywords id) + stack-pointer-keyword (get shell.constants/stacks-pointer-keywords id)] (assoc acc stack-opacity-keyword (.stackOpacity @@ -111,17 +111,17 @@ (:scale home-stack-position)) :bottom-tabs-height (.bottomTabsHeight ^js shell-worklets home-stack-state-sv - (constants/bottom-tabs-container-height) - (constants/bottom-tabs-extended-container-height))} - constants/stacks-ids))) + (shell.constants/bottom-tabs-container-height) + (shell.constants/bottom-tabs-extended-container-height))} + shell.constants/stacks-ids))) @shared-values-atom) ;; Animations (defn open-home-stack [stack-id animate?] (let [home-stack-state-value (if animate? - constants/open-with-animation - constants/open-without-animation)] + shell.constants/open-with-animation + shell.constants/open-without-animation)] (reanimated/set-shared-value (:selected-stack-id @shared-values-atom) (name stack-id)) (reanimated/set-shared-value @@ -129,7 +129,7 @@ (when-not (colors/dark?) (js/setTimeout #(re-frame/dispatch [:change-root-status-bar-style :dark]) - constants/shell-animation-time)) + shell.constants/shell-animation-time)) (reset! home-stack-state home-stack-state-value) (reset! selected-stack-id stack-id) (async-storage/set-item! :selected-stack-id stack-id))) @@ -143,7 +143,7 @@ (defn bottom-tab-on-press [stack-id] (when-not (= stack-id @selected-stack-id) (let [stack-load-delay (if (home-stack-open?) - 0 constants/shell-animation-time)] + 0 shell.constants/shell-animation-time)] (if (home-stack-open?) (change-tab stack-id) (open-home-stack stack-id true)) @@ -151,8 +151,8 @@ (defn close-home-stack [animate?] (let [home-stack-state-value (if animate? - constants/close-with-animation - constants/close-without-animation)] + shell.constants/close-with-animation + shell.constants/close-without-animation)] (reanimated/set-shared-value (:animate-home-stack-left @shared-values-atom) true) (reanimated/set-shared-value diff --git a/src/status_im2/contexts/shell/bottom_tabs.cljs b/src/status_im2/contexts/shell/bottom_tabs.cljs index 0e631bb384..07259f818b 100644 --- a/src/status_im2/contexts/shell/bottom_tabs.cljs +++ b/src/status_im2/contexts/shell/bottom_tabs.cljs @@ -2,8 +2,8 @@ (:require [react-native.core :as rn] [react-native.reanimated :as reanimated] [status-im2.contexts.shell.style :as styles] - [status-im2.contexts.shell.constants :as constants] [status-im2.contexts.shell.animation :as animation] + [status-im2.contexts.shell.constants :as shell.constants] [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab])) (defn bottom-tab [icon stack-id shared-values] @@ -12,7 +12,7 @@ :icon icon :icon-color-anim (get shared-values - (get constants/tabs-icon-color-keywords stack-id)) + (get shell.constants/tabs-icon-color-keywords stack-id)) :on-press #(animation/bottom-tab-on-press stack-id) :accessibility-label (str (name stack-id) "-tab")}]) diff --git a/src/status_im2/contexts/shell/cards/style.cljs b/src/status_im2/contexts/shell/cards/style.cljs index 6dedcc6840..6d46c10c31 100644 --- a/src/status_im2/contexts/shell/cards/style.cljs +++ b/src/status_im2/contexts/shell/cards/style.cljs @@ -16,6 +16,11 @@ :border-radius 16 :background-color (colors/alpha background-color 0.4)}) +(defn empty-card [] + (merge + (base-container nil) + {:background-color colors/neutral-95})) + (def secondary-container {:width 160 :height 120 @@ -30,24 +35,12 @@ :margin-horizontal 12 :color (:title-color colors-map)}) -(def title-props - {:size :paragraph-1 - :weight :semi-bold - :number-of-lines 1 - :ellipsize-mode :tail - :style title}) - (def subtitle {:position :absolute :top 50 :margin-horizontal 12 :color (:subtitle-color colors-map)}) -(def subtitle-props - {:size :paragraph-2 - :weight :medium - :style subtitle}) - (defn content-container [new-notifications?] {:position :absolute :max-width (if new-notifications? 108 136) @@ -68,13 +61,6 @@ (def last-message-text {:color (:last-message-text-color colors-map)}) -(def last-message-text-props - {:size :paragraph-2 - :weight :regular - :number-of-lines 1 - :ellipsize-mode :tail - :style last-message-text}) - (def close-button {:position :absolute :right 8 @@ -82,14 +68,6 @@ :background-color (:close-button-bg-color colors-map) :icon-color (:close-button-icon-color colors-map)}) -(defn close-button-props [on-press] - {:size 24 - :type :grey - :icon true - :on-press on-press - :override-theme :dark - :style close-button}) - (def avatar-container {:width 48 :height 48 @@ -133,10 +111,3 @@ (def community-channel {:margin-left 8 :color (:community-channel colors-map)}) - -(def community-channel-props - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :ellipsize-mode :tail - :style community-channel}) diff --git a/src/status_im2/contexts/shell/cards/view.cljs b/src/status_im2/contexts/shell/cards/view.cljs index caafc8d24b..42cfd46c87 100644 --- a/src/status_im2/contexts/shell/cards/view.cljs +++ b/src/status_im2/contexts/shell/cards/view.cljs @@ -6,13 +6,19 @@ [quo2.foundations.colors :as colors] [react-native.fast-image :as fast-image] [status-im2.contexts.shell.cards.style :as style] - [status-im2.contexts.shell.constants :as constants])) + [status-im2.contexts.shell.constants :as shell.constants])) (defn content-container [{:keys [content-type data new-notifications? color-50]}] [rn/view {:style (style/content-container new-notifications?)} - ;; TODO - Use status-im2.common.constants for content type + ;; TODO - Use status-im2.common.shell.constants for content type (case content-type - :text [quo/text style/last-message-text-props data] + :text [quo/text + {:size :paragraph-2 + :weight :regular + :number-of-lines 1 + :ellipsize-mode :tail + :style style/last-message-text} + data] :photo [quo/preview-list {:type :photo :more-than-99-label (i18n/label :counter-99-plus) :size 24 @@ -26,7 +32,13 @@ [quo/channel-avatar {:emoji (:emoji data) :emoji-background-color (colors/alpha color-50 0.1)}] - [quo/text style/community-channel-props (:channel-name data)]] + [quo/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :ellipsize-mode :tail + :style style/community-channel} + (:channel-name data)]] :community-info (case (:type data) :pending [quo/status-tag {:status {:type :pending} @@ -58,19 +70,19 @@ (defn avatar [avatar-params type customization-color] (case type - constants/one-to-one-chat-card + shell.constants/one-to-one-chat-card [quo/user-avatar (merge {:ring? false :size :medium :status-indicator? false} avatar-params)] - constants/private-group-chat-card + shell.constants/private-group-chat-card [quo/group-avatar {:color customization-color :size :large :override-theme :dark}] - constants/community-card + shell.constants/community-card (if (:source avatar-params) [fast-image/fast-image {:source (:source avatar-params) @@ -107,13 +119,30 @@ [rn/image {:source (:source banner) :style {:width 160}}]) [rn/view {:style style/secondary-container} - [quo/text style/title-props title] - [quo/text style/subtitle-props (subtitle content)] + [quo/text + {:size :paragraph-1 + :weight :semi-bold + :number-of-lines 1 + :ellipsize-mode :tail + :style style/title} + title] + [quo/text + {:size :paragraph-2 + :weight :medium + :style style/subtitle} + (subtitle content)] [bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]] (when avatar-params [rn/view {:style style/avatar-container} [avatar avatar-params type customization-color]]) - [quo/button (style/close-button-props on-close) :i/close]]])) + [quo/button + {:size 24 + :type :grey + :icon true + :on-press on-close + :override-theme :dark + :style style/close-button} + :i/close]]])) ;; browser Card (defn browser-card [_] @@ -129,32 +158,39 @@ (defn wallet-graph [_] [:<>]) +(defn empty-card [] + [rn/view {:style (style/empty-card)}]) + ;; Home Card (defn communities-discover [_] [:<>]) (defn card [{:keys [type] :as data}] (case type - constants/one-to-one-chat-card ;; Screens Card + + shell.constants/empty-card ;; Placeholder + [empty-card] + + shell.constants/one-to-one-chat-card ;; Screens Card [screens-card data] - constants/private-group-chat-card ;; Screens Card + shell.constants/private-group-chat-card ;; Screens Card [screens-card data] - constants/community-card ;; Screens Card + shell.constants/community-card ;; Screens Card [screens-card data] - constants/browser-card ;; Browser Card + shell.constants/browser-card ;; Browser Card [browser-card data] - constants/wallet-card ;; Wallet Card + shell.constants/wallet-card ;; Wallet Card [wallet-card data] - constants/wallet-collectible ;; Wallet Card + shell.constants/wallet-collectible ;; Wallet Card [wallet-collectible data] - constants/wallet-graph ;; Wallet Card + shell.constants/wallet-graph ;; Wallet Card [wallet-graph data] - constants/communities-discover ;; Home Card + shell.constants/communities-discover ;; Home Card [communities-discover data])) diff --git a/src/status_im2/contexts/shell/constants.cljs b/src/status_im2/contexts/shell/constants.cljs index 514c76a4b1..e0360fc40f 100644 --- a/src/status_im2/contexts/shell/constants.cljs +++ b/src/status_im2/contexts/shell/constants.cljs @@ -12,7 +12,7 @@ (if platform/android? 90 120)) (defn status-bar-offset [] - (if platform/android? (.-currentHeight ^js rn/status-bar) 0)) + (if platform/android? (rn/status-bar-height) 0)) ;; 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 @@ -51,11 +51,12 @@ (def ^:const open-without-animation 4) ;; Switcher Cards -(def ^:const one-to-one-chat-card 0) -(def ^:const private-group-chat-card 1) -(def ^:const community-card 2) -(def ^:const browser-card 3) -(def ^:const wallet-card 4) -(def ^:const wallet-collectible 5) -(def ^:const wallet-graph 6) -(def ^:const communities-discover 7) +(def ^:const empty-card 0) +(def ^:const one-to-one-chat-card 1) +(def ^:const private-group-chat-card 2) +(def ^:const community-card 3) +(def ^:const browser-card 4) +(def ^:const wallet-card 5) +(def ^:const wallet-collectible 6) +(def ^:const wallet-graph 7) +(def ^:const communities-discover 8) diff --git a/src/status_im2/contexts/shell/events.cljs b/src/status_im2/contexts/shell/events.cljs index 45751d7bba..5685632ea7 100644 --- a/src/status_im2/contexts/shell/events.cljs +++ b/src/status_im2/contexts/shell/events.cljs @@ -1,8 +1,8 @@ (ns status-im2.contexts.shell.events (:require [utils.re-frame :as rf] [re-frame.core :as re-frame] - [status-im2.navigation.events :as navigation] [status-im2.common.constants :as constants] + [status-im2.navigation.events :as navigation] [status-im2.contexts.shell.animation :as animation] [status-im2.contexts.shell.constants :as shell.constants])) diff --git a/src/status_im2/contexts/shell/home_stack.cljs b/src/status_im2/contexts/shell/home_stack.cljs index edd9fc5559..712ecbc143 100644 --- a/src/status_im2/contexts/shell/home_stack.cljs +++ b/src/status_im2/contexts/shell/home_stack.cljs @@ -3,7 +3,7 @@ [react-native.core :as rn] [status-im2.contexts.shell.style :as styles] [status-im2.contexts.shell.animation :as animation] - [status-im2.contexts.shell.constants :as constants] + [status-im2.contexts.shell.constants :as shell.constants] [status-im2.contexts.communities.home.view :as communities] [status-im2.contexts.chat.home.view :as chat] @@ -25,8 +25,8 @@ (fn [] [reanimated/view {:style (reanimated/apply-animations-to-style - {:opacity (get shared-values (get constants/stacks-opacity-keywords stack-id)) - :pointer-events (get shared-values (get constants/stacks-pointer-keywords stack-id))} + {:opacity (get shared-values (get shell.constants/stacks-opacity-keywords stack-id)) + :pointer-events (get shared-values (get shell.constants/stacks-pointer-keywords stack-id))} {:position :absolute :top 0 :bottom 0 diff --git a/src/status_im2/contexts/shell/style.cljs b/src/status_im2/contexts/shell/style.cljs index c5ee83f831..bdb63b5feb 100644 --- a/src/status_im2/contexts/shell/style.cljs +++ b/src/status_im2/contexts/shell/style.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.shell.style (:require [quo2.foundations.colors :as colors] - [status-im2.contexts.shell.constants :as constants] - [react-native.platform :as platform])) + [react-native.platform :as platform] + [status-im2.contexts.shell.constants :as shell.constants])) ;; Bottom Tabs (defn bottom-tabs-container [pass-through?] @@ -9,7 +9,7 @@ :flex 1 :align-items :center :flex-direction :column - :height (constants/bottom-tabs-container-height) + :height (shell.constants/bottom-tabs-container-height) :position :absolute :bottom -1 :right 0 @@ -25,11 +25,41 @@ ;; Home Stack (defn home-stack [] - (let [{:keys [width height]} (constants/dimensions)] + (let [{:keys [width height]} (shell.constants/dimensions)] {:border-bottom-left-radius 20 :border-bottom-right-radius 20 :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95) :overflow :hidden :position :absolute :width width - :height (- height (constants/bottom-tabs-container-height))})) + :height (- height (shell.constants/bottom-tabs-container-height))})) + +;; Placeholder +(defn placeholder-container [status-bar-height] + {:position :absolute + :top (+ 112 status-bar-height) + :left 0 + :right 0 + :bottom (shell.constants/bottom-tabs-container-height) + :align-items :center + :accessibility-label :shell-placeholder-view}) + +(def placeholder-image + {:margin-top 186 + :width 120 + :height 120}) + +(def placeholder-title + {:margin-top 20 + :color colors/white}) + +(def placeholder-subtitle + {:margin-top 4 + :color colors/white}) + +;; Shell +(defn jump-to-text [status-bar-height] + {:color colors/white + :margin-top (+ 68 status-bar-height) + :margin-bottom 20 + :margin-left 20}) diff --git a/src/status_im2/contexts/shell/view.cljs b/src/status_im2/contexts/shell/view.cljs index de2d6e1c9e..c80303c925 100644 --- a/src/status_im2/contexts/shell/view.cljs +++ b/src/status_im2/contexts/shell/view.cljs @@ -5,84 +5,78 @@ [react-native.core :as rn] [quo2.foundations.colors :as colors] [react-native.safe-area :as safe-area] + [status-im2.contexts.shell.style :as style] [status-im2.common.home.view :as common.home] - [status-im2.contexts.shell.constants :as constants] + [react-native.linear-gradient :as linear-gradient] [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] - [status-im2.contexts.shell.cards.view :as switcher-cards])) + [status-im2.contexts.shell.cards.view :as switcher-cards] + [status-im2.contexts.shell.constants :as shell.constants])) -;; TODO -;; 1 : Update Placeholder screen as per new designs -;; 2 : Move styles to style namespace (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)] + [linear-gradient/linear-gradient + {:colors [colors/neutral-100-opa-0 colors/neutral-100-opa-100] + :start {:x 0 :y 0} + :end {:x 0 :y 1} + :style (style/placeholder-container (rn/status-bar-height))} + [rn/image {:source nil ;; TODO(parvesh) - add placeholder image + :style style/placeholder-image}] [quo/text {:size :paragraph-1 + :weight :semi-bold + :style style/placeholder-title} + (i18n/label :t/shell-placeholder-title)] + [quo/text {:size :paragraph-2 :weight :regular :align :center - :style {:margin-top 8 - :color colors/white}} + :style style/placeholder-subtitle} (i18n/label :t/shell-placeholder-subtitle)]]) (defn jump-to-text [] [quo/text {:size :heading-1 :weight :semi-bold - :style {:color colors/white - :margin-top (+ 68 (.-currentHeight ^js rn/status-bar)) - :margin-bottom 20 - :margin-left 20}} + :style (style/jump-to-text (rn/status-bar-height))} (i18n/label :t/jump-to)]) (defn render-card [{:keys [id type content] :as card}] (let [card-data (case type - constants/one-to-one-chat-card + shell.constants/one-to-one-chat-card (rf/sub [:shell/one-to-one-chat-card id]) - constants/private-group-chat-card + shell.constants/private-group-chat-card (rf/sub [:shell/private-group-chat-card id]) - constants/community-card + shell.constants/community-card (if content (rf/sub [:shell/community-channel-card id (get-in content [:data :channel-id]) content]) - (rf/sub [:shell/community-card id])))] + (rf/sub [:shell/community-card id])) + + nil)] [switcher-cards/card (merge card card-data)])) +(def empty-cards (repeat 6 {:type shell.constants/empty-card})) + (defn jump-to-list [switcher-cards shell-margin] - (if (seq switcher-cards) - [rn/flat-list - {:data switcher-cards - :render-fn render-card - :key-fn :id - :header (jump-to-text) - :num-columns 2 - :column-wrapper-style {:margin-horizontal shell-margin - :justify-content :space-between - :margin-bottom 16} - :style {:top 0 - :left 0 - :right 0 - :bottom -1 - :position :absolute}}] - [placeholder])) + (let [data (if (seq switcher-cards) switcher-cards empty-cards)] + [:<> + [rn/flat-list + {:data data + :render-fn render-card + :key-fn :id + :header (jump-to-text) + :num-columns 2 + :column-wrapper-style {:margin-horizontal shell-margin + :justify-content :space-between + :margin-bottom 16} + :style {:top 0 + :left 0 + :right 0 + :bottom -1 + :position :absolute}}] + (when-not (seq switcher-cards) + [placeholder])])) (defn shell [] (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) @@ -113,5 +107,5 @@ {:jump-to {:on-press #(animation/close-home-stack true) :label (i18n/label :t/jump-to)}} {:position :absolute - :bottom (+ (constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 + 5(padding on button) + :bottom (+ (shell.constants/bottom-tabs-container-height) 7)} ;; bottom offset is 12 = 7 + 5(padding on button) (:home-stack-opacity shared-values)]]))])