Update shell placeholder screen with new designs (#14572)
This commit is contained in:
Parvesh Monu
GitHub
parent
cbb6571954
commit
dbd61a34a0
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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")}])
|
||||
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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]))
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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)]]))])
|
||||
|
|
|
|||
Loading…
Reference in New Issue