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

Update shell placeholder screen with new designs (#14572)

This commit is contained in:
Parvesh Monu 2022-12-19 14:51:53 +05:30 committed by GitHub
parent cbb6571954
commit dbd61a34a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 199 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/foundations/colors.cljs
View File

@ -67,11 +67,13 @@
(def neutral-95-opa-95 (alpha neutral-95 0.95)) (def neutral-95-opa-95 (alpha neutral-95 0.95))
;;100 with transparency ;;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-60 (alpha neutral-100 0.6))
(def neutral-100-opa-70 (alpha neutral-100 0.7)) (def neutral-100-opa-70 (alpha neutral-100 0.7))
(def neutral-100-opa-80 (alpha neutral-100 0.8)) (def neutral-100-opa-80 (alpha neutral-100 0.8))
(def neutral-100-opa-90 (alpha neutral-100 0.9)) (def neutral-100-opa-90 (alpha neutral-100 0.9))
(def neutral-100-opa-95 (alpha neutral-100 0.95)) (def neutral-100-opa-95 (alpha neutral-100 0.95))
(def neutral-100-opa-100 (alpha neutral-100 1))
;;;;White ;;;;White

3
src/react_native/core.cljs
View File

@ -57,6 +57,9 @@
(def status-bar (.-StatusBar ^js react-native)) (def status-bar (.-StatusBar ^js react-native))
(defn status-bar-height []
(.-currentHeight ^js status-bar))
(defn hw-back-add-listener [callback] (defn hw-back-add-listener [callback]
(.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback)) (.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))

32
src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View File

@ -1,31 +1,33 @@
(ns status-im2.contexts.quo-preview.switcher.switcher-cards (ns status-im2.contexts.quo-preview.switcher.switcher-cards
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.shell.constants :as constants]
[status-im2.contexts.quo-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-im2.contexts.quo-preview.preview :as preview]
[status-im2.contexts.shell.constants :as shell.constants]
[status-im2.contexts.shell.cards.view :as switcher-cards])) [status-im2.contexts.shell.cards.view :as switcher-cards]))
(def descriptor [{:label "Type" (def descriptor [{:label "Type"
:key :type :key :type
:type :select :type :select
:options [{:key constants/communities-discover :options [{:key shell.constants/communities-discover
:value "Communities Discover"} :value "Communities Discover"}
{:key constants/one-to-one-chat-card {:key shell.constants/one-to-one-chat-card
:value "Messaging"} :value "Messaging"}
{:key constants/private-group-chat-card {:key shell.constants/private-group-chat-card
:value "Group Messaging"} :value "Group Messaging"}
{:key constants/community-card {:key shell.constants/community-card
:value "Community Card"} :value "Community Card"}
{:key constants/browser-card {:key shell.constants/browser-card
:value "Browser Card"} :value "Browser Card"}
{:key constants/wallet-card {:key shell.constants/wallet-card
:value "Wallet Card"} :value "Wallet Card"}
{:key constants/wallet-collectible {:key shell.constants/wallet-collectible
:value "Wallet Collectible"} :value "Wallet Collectible"}
{:key constants/wallet-graph {:key shell.constants/wallet-graph
:value "Wallet Graph"}]} :value "Wallet Graph"}
{:key shell.constants/empty-card
:value "Empty Card"}]}
{:label "Title" {:label "Title"
:key :title :key :title
:type :text} :type :text}
@ -117,13 +119,13 @@
:content-type (:content-type data) :content-type (:content-type data)
:data (get-mock-content data)}} :data (get-mock-content data)}}
(case type (case type
constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}} shell.constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}}
constants/private-group-chat-card {} shell.constants/private-group-chat-card {}
constants/community-card {:avatar-params community-avatar} shell.constants/community-card {:avatar-params community-avatar}
{}))) {})))
(defn cool-preview [] (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" :title "Alisher Yakupov"
:customization-color :turquoise :customization-color :turquoise
:new-notifications? true :new-notifications? true

46
src/status_im2/contexts/shell/animation.cljs
View File

@ -3,14 +3,14 @@
[re-frame.core :as re-frame] [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-im2.contexts.shell.constants :as constants] [status-im2.contexts.shell.constants :as shell.constants]
;;TODO remove when not used anymore ;;TODO remove when not used anymore
[status-im.async-storage.core :as async-storage])) [status-im.async-storage.core :as async-storage]))
;; Atoms ;; Atoms
(def selected-stack-id (atom nil)) (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 pass-through? (atom false)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
(def shared-values-atom (atom nil)) (def shared-values-atom (atom nil))
@ -23,8 +23,8 @@
;; Helper Functions ;; Helper Functions
(defn home-stack-open? [] (defn home-stack-open? []
(let [state @home-stack-state] (let [state @home-stack-state]
(or (= state constants/open-with-animation) (or (= state shell.constants/open-with-animation)
(= state constants/open-without-animation)))) (= state shell.constants/open-without-animation))))
(defn load-stack [stack-id] (defn load-stack [stack-id]
(case stack-id (case stack-id
@ -39,25 +39,25 @@
(reset! (reset!
home-stack-state home-stack-state
(if (some? stack-id) (if (some? stack-id)
constants/open-with-animation shell.constants/open-with-animation
constants/close-with-animation))) shell.constants/close-with-animation)))
(defn calculate-home-stack-position [] (defn calculate-home-stack-position []
(let [{:keys [width height]} (constants/dimensions) (let [{:keys [width height]} (shell.constants/dimensions)
bottom-nav-tab-width 90 bottom-nav-tab-width 90
minimize-scale (/ bottom-nav-tab-width width) minimize-scale (/ bottom-nav-tab-width width)
empty-space-half-scale (/ (- 1 minimize-scale) 2) empty-space-half-scale (/ (- 1 minimize-scale) 2)
left-margin (/ (- width (* 4 bottom-nav-tab-width)) 2) left-margin (/ (- width (* 4 bottom-nav-tab-width)) 2)
left-empty-space (* empty-space-half-scale width) left-empty-space (* empty-space-half-scale width)
top-empty-space (* empty-space-half-scale top-empty-space (* empty-space-half-scale
(- height (constants/bottom-tabs-container-height)))] (- height (shell.constants/bottom-tabs-container-height)))]
{:left (reduce {:left (reduce
(fn [acc stack-id] (fn [acc stack-id]
(assoc acc stack-id (+ (- left-margin left-empty-space) (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)))) bottom-nav-tab-width))))
{:none 0} constants/stacks-ids) {:none 0} shell.constants/stacks-ids)
:top (+ top-empty-space (constants/bottom-tabs-container-height)) :top (+ top-empty-space (shell.constants/bottom-tabs-container-height))
:scale minimize-scale})) :scale minimize-scale}))
(def shell-worklets (js/require "../src/js/shell_worklets.js")) (def shell-worklets (js/require "../src/js/shell_worklets.js"))
@ -74,9 +74,9 @@
(reset! shared-values-atom (reset! shared-values-atom
(reduce (reduce
(fn [acc id] (fn [acc id]
(let [tabs-icon-color-keyword (get constants/tabs-icon-color-keywords id) (let [tabs-icon-color-keyword (get shell.constants/tabs-icon-color-keywords id)
stack-opacity-keyword (get constants/stacks-opacity-keywords id) stack-opacity-keyword (get shell.constants/stacks-opacity-keywords id)
stack-pointer-keyword (get constants/stacks-pointer-keywords id)] stack-pointer-keyword (get shell.constants/stacks-pointer-keywords id)]
(assoc (assoc
acc acc
stack-opacity-keyword (.stackOpacity stack-opacity-keyword (.stackOpacity
@ -111,17 +111,17 @@
(:scale home-stack-position)) (:scale home-stack-position))
:bottom-tabs-height (.bottomTabsHeight :bottom-tabs-height (.bottomTabsHeight
^js shell-worklets home-stack-state-sv ^js shell-worklets home-stack-state-sv
(constants/bottom-tabs-container-height) (shell.constants/bottom-tabs-container-height)
(constants/bottom-tabs-extended-container-height))} (shell.constants/bottom-tabs-extended-container-height))}
constants/stacks-ids))) shell.constants/stacks-ids)))
@shared-values-atom) @shared-values-atom)
;; Animations ;; Animations
(defn open-home-stack [stack-id animate?] (defn open-home-stack [stack-id animate?]
(let [home-stack-state-value (if animate? (let [home-stack-state-value (if animate?
constants/open-with-animation shell.constants/open-with-animation
constants/open-without-animation)] shell.constants/open-without-animation)]
(reanimated/set-shared-value (reanimated/set-shared-value
(:selected-stack-id @shared-values-atom) (name stack-id)) (:selected-stack-id @shared-values-atom) (name stack-id))
(reanimated/set-shared-value (reanimated/set-shared-value
@ -129,7 +129,7 @@
(when-not (colors/dark?) (when-not (colors/dark?)
(js/setTimeout (js/setTimeout
#(re-frame/dispatch [:change-root-status-bar-style :dark]) #(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! home-stack-state home-stack-state-value)
(reset! selected-stack-id stack-id) (reset! selected-stack-id stack-id)
(async-storage/set-item! :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] (defn bottom-tab-on-press [stack-id]
(when-not (= stack-id @selected-stack-id) (when-not (= stack-id @selected-stack-id)
(let [stack-load-delay (if (home-stack-open?) (let [stack-load-delay (if (home-stack-open?)
0 constants/shell-animation-time)] 0 shell.constants/shell-animation-time)]
(if (home-stack-open?) (if (home-stack-open?)
(change-tab stack-id) (change-tab stack-id)
(open-home-stack stack-id true)) (open-home-stack stack-id true))
@ -151,8 +151,8 @@
(defn close-home-stack [animate?] (defn close-home-stack [animate?]
(let [home-stack-state-value (if animate? (let [home-stack-state-value (if animate?
constants/close-with-animation shell.constants/close-with-animation
constants/close-without-animation)] shell.constants/close-without-animation)]
(reanimated/set-shared-value (reanimated/set-shared-value
(:animate-home-stack-left @shared-values-atom) true) (:animate-home-stack-left @shared-values-atom) true)
(reanimated/set-shared-value (reanimated/set-shared-value

4
src/status_im2/contexts/shell/bottom_tabs.cljs
View File

@ -2,8 +2,8 @@
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.reanimated :as reanimated] [react-native.reanimated :as reanimated]
[status-im2.contexts.shell.style :as styles] [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.animation :as animation]
[status-im2.contexts.shell.constants :as shell.constants]
[quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab])) [quo2.components.navigation.bottom-nav-tab :as bottom-nav-tab]))
(defn bottom-tab [icon stack-id shared-values] (defn bottom-tab [icon stack-id shared-values]
@ -12,7 +12,7 @@
:icon icon :icon icon
:icon-color-anim (get :icon-color-anim (get
shared-values 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) :on-press #(animation/bottom-tab-on-press stack-id)
:accessibility-label (str (name stack-id) "-tab")}]) :accessibility-label (str (name stack-id) "-tab")}])

39
src/status_im2/contexts/shell/cards/style.cljs
View File

@ -16,6 +16,11 @@
:border-radius 16 :border-radius 16
:background-color (colors/alpha background-color 0.4)}) :background-color (colors/alpha background-color 0.4)})
(defn empty-card []
(merge
(base-container nil)
{:background-color colors/neutral-95}))
(def secondary-container (def secondary-container
{:width 160 {:width 160
:height 120 :height 120
@ -30,24 +35,12 @@
:margin-horizontal 12 :margin-horizontal 12
:color (:title-color colors-map)}) :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 (def subtitle
{:position :absolute {:position :absolute
:top 50 :top 50
:margin-horizontal 12 :margin-horizontal 12
:color (:subtitle-color colors-map)}) :color (:subtitle-color colors-map)})
(def subtitle-props
{:size :paragraph-2
:weight :medium
:style subtitle})
(defn content-container [new-notifications?] (defn content-container [new-notifications?]
{:position :absolute {:position :absolute
:max-width (if new-notifications? 108 136) :max-width (if new-notifications? 108 136)
@ -68,13 +61,6 @@
(def last-message-text (def last-message-text
{:color (:last-message-text-color colors-map)}) {: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 (def close-button
{:position :absolute {:position :absolute
:right 8 :right 8
@ -82,14 +68,6 @@
:background-color (:close-button-bg-color colors-map) :background-color (:close-button-bg-color colors-map)
:icon-color (:close-button-icon-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 (def avatar-container
{:width 48 {:width 48
:height 48 :height 48
@ -133,10 +111,3 @@
(def community-channel (def community-channel
{:margin-left 8 {:margin-left 8
:color (:community-channel colors-map)}) :color (:community-channel colors-map)})
(def community-channel-props
{:size :paragraph-2
:weight :medium
:number-of-lines 1
:ellipsize-mode :tail
:style community-channel})

72
src/status_im2/contexts/shell/cards/view.cljs
View File

@ -6,13 +6,19 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[status-im2.contexts.shell.cards.style :as style] [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]}] (defn content-container [{:keys [content-type data new-notifications? color-50]}]
[rn/view {:style (style/content-container new-notifications?)} [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 (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 :photo [quo/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
@ -26,7 +32,13 @@
[quo/channel-avatar [quo/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)}]
[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) :community-info (case (:type data)
:pending [quo/status-tag :pending [quo/status-tag
{:status {:type :pending} {:status {:type :pending}
@ -58,19 +70,19 @@
(defn avatar [avatar-params type customization-color] (defn avatar [avatar-params type customization-color]
(case type (case type
constants/one-to-one-chat-card shell.constants/one-to-one-chat-card
[quo/user-avatar [quo/user-avatar
(merge {:ring? false (merge {:ring? false
:size :medium :size :medium
:status-indicator? false} :status-indicator? false}
avatar-params)] avatar-params)]
constants/private-group-chat-card shell.constants/private-group-chat-card
[quo/group-avatar {:color customization-color [quo/group-avatar {:color customization-color
:size :large :size :large
:override-theme :dark}] :override-theme :dark}]
constants/community-card shell.constants/community-card
(if (:source avatar-params) (if (:source avatar-params)
[fast-image/fast-image [fast-image/fast-image
{:source (:source avatar-params) {:source (:source avatar-params)
@ -107,13 +119,30 @@
[rn/image {:source (:source banner) [rn/image {:source (:source banner)
:style {:width 160}}]) :style {:width 160}}])
[rn/view {:style style/secondary-container} [rn/view {:style style/secondary-container}
[quo/text style/title-props title] [quo/text
[quo/text style/subtitle-props (subtitle content)] {: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)]] [bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]]
(when avatar-params (when avatar-params
[rn/view {:style style/avatar-container} [rn/view {:style style/avatar-container}
[avatar avatar-params type customization-color]]) [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 ;; browser Card
(defn browser-card [_] (defn browser-card [_]
@ -129,32 +158,39 @@
(defn wallet-graph [_] (defn wallet-graph [_]
[:<>]) [:<>])
(defn empty-card []
[rn/view {:style (style/empty-card)}])
;; Home Card ;; Home Card
(defn communities-discover [_] (defn communities-discover [_]
[:<>]) [:<>])
(defn card [{:keys [type] :as data}] (defn card [{:keys [type] :as data}]
(case type (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] [screens-card data]
constants/private-group-chat-card ;; Screens Card shell.constants/private-group-chat-card ;; Screens Card
[screens-card data] [screens-card data]
constants/community-card ;; Screens Card shell.constants/community-card ;; Screens Card
[screens-card data] [screens-card data]
constants/browser-card ;; Browser Card shell.constants/browser-card ;; Browser Card
[browser-card data] [browser-card data]
constants/wallet-card ;; Wallet Card shell.constants/wallet-card ;; Wallet Card
[wallet-card data] [wallet-card data]
constants/wallet-collectible ;; Wallet Card shell.constants/wallet-collectible ;; Wallet Card
[wallet-collectible data] [wallet-collectible data]
constants/wallet-graph ;; Wallet Card shell.constants/wallet-graph ;; Wallet Card
[wallet-graph data] [wallet-graph data]
constants/communities-discover ;; Home Card shell.constants/communities-discover ;; Home Card
[communities-discover data])) [communities-discover data]))

19
src/status_im2/contexts/shell/constants.cljs
View File

@ -12,7 +12,7 @@
(if platform/android? 90 120)) (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? (rn/status-bar-height) 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
@ -51,11 +51,12 @@
(def ^:const open-without-animation 4) (def ^:const open-without-animation 4)
;; Switcher Cards ;; Switcher Cards
(def ^:const one-to-one-chat-card 0) (def ^:const empty-card 0)
(def ^:const private-group-chat-card 1) (def ^:const one-to-one-chat-card 1)
(def ^:const community-card 2) (def ^:const private-group-chat-card 2)
(def ^:const browser-card 3) (def ^:const community-card 3)
(def ^:const wallet-card 4) (def ^:const browser-card 4)
(def ^:const wallet-collectible 5) (def ^:const wallet-card 5)
(def ^:const wallet-graph 6) (def ^:const wallet-collectible 6)
(def ^:const communities-discover 7) (def ^:const wallet-graph 7)
(def ^:const communities-discover 8)

2
src/status_im2/contexts/shell/events.cljs
View File

@ -1,8 +1,8 @@
(ns status-im2.contexts.shell.events (ns status-im2.contexts.shell.events
(:require [utils.re-frame :as rf] (:require [utils.re-frame :as rf]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im2.navigation.events :as navigation]
[status-im2.common.constants :as constants] [status-im2.common.constants :as constants]
[status-im2.navigation.events :as navigation]
[status-im2.contexts.shell.animation :as animation] [status-im2.contexts.shell.animation :as animation]
[status-im2.contexts.shell.constants :as shell.constants])) [status-im2.contexts.shell.constants :as shell.constants]))

6
src/status_im2/contexts/shell/home_stack.cljs
View File

@ -3,7 +3,7 @@
[react-native.core :as rn] [react-native.core :as rn]
[status-im2.contexts.shell.style :as styles] [status-im2.contexts.shell.style :as styles]
[status-im2.contexts.shell.animation :as animation] [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.communities.home.view :as communities]
[status-im2.contexts.chat.home.view :as chat] [status-im2.contexts.chat.home.view :as chat]
@ -25,8 +25,8 @@
(fn [] (fn []
[reanimated/view [reanimated/view
{:style (reanimated/apply-animations-to-style {:style (reanimated/apply-animations-to-style
{:opacity (get shared-values (get constants/stacks-opacity-keywords stack-id)) {:opacity (get shared-values (get shell.constants/stacks-opacity-keywords stack-id))
:pointer-events (get shared-values (get constants/stacks-pointer-keywords stack-id))} :pointer-events (get shared-values (get shell.constants/stacks-pointer-keywords stack-id))}
{:position :absolute {:position :absolute
:top 0 :top 0
:bottom 0 :bottom 0

40
src/status_im2/contexts/shell/style.cljs
View File

@ -1,7 +1,7 @@
(ns status-im2.contexts.shell.style (ns status-im2.contexts.shell.style
(:require [quo2.foundations.colors :as colors] (: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 ;; Bottom Tabs
(defn bottom-tabs-container [pass-through?] (defn bottom-tabs-container [pass-through?]
@ -9,7 +9,7 @@
:flex 1 :flex 1
:align-items :center :align-items :center
:flex-direction :column :flex-direction :column
:height (constants/bottom-tabs-container-height) :height (shell.constants/bottom-tabs-container-height)
:position :absolute :position :absolute
:bottom -1 :bottom -1
:right 0 :right 0
@ -25,11 +25,41 @@
;; Home Stack ;; Home Stack
(defn 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-left-radius 20
:border-bottom-right-radius 20 :border-bottom-right-radius 20
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95) :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)
:overflow :hidden :overflow :hidden
:position :absolute :position :absolute
:width width :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})

94
src/status_im2/contexts/shell/view.cljs
View File

@ -5,84 +5,78 @@
[react-native.core :as rn] [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[status-im2.contexts.shell.style :as style]
[status-im2.common.home.view :as common.home] [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.animation :as animation]
[status-im2.contexts.shell.home-stack :as home-stack] [status-im2.contexts.shell.home-stack :as home-stack]
[status-im2.contexts.shell.bottom-tabs :as bottom-tabs] [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 [] (defn placeholder []
[rn/view {:style {:position :absolute [linear-gradient/linear-gradient
:top 0 {:colors [colors/neutral-100-opa-0 colors/neutral-100-opa-100]
:left 0 :start {:x 0 :y 0}
:right 0 :end {:x 0 :y 1}
:bottom -1 :style (style/placeholder-container (rn/status-bar-height))}
:justify-content :center [rn/image {:source nil ;; TODO(parvesh) - add placeholder image
:align-items :center :style style/placeholder-image}]
: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 [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 :weight :regular
:align :center :align :center
:style {:margin-top 8 :style style/placeholder-subtitle}
:color colors/white}}
(i18n/label :t/shell-placeholder-subtitle)]]) (i18n/label :t/shell-placeholder-subtitle)]])
(defn jump-to-text [] (defn jump-to-text []
[quo/text {:size :heading-1 [quo/text {:size :heading-1
:weight :semi-bold :weight :semi-bold
:style {:color colors/white :style (style/jump-to-text (rn/status-bar-height))}
:margin-top (+ 68 (.-currentHeight ^js rn/status-bar))
:margin-bottom 20
:margin-left 20}}
(i18n/label :t/jump-to)]) (i18n/label :t/jump-to)])
(defn render-card [{:keys [id type content] :as card}] (defn render-card [{:keys [id type content] :as card}]
(let [card-data (case type (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]) (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]) (rf/sub [:shell/private-group-chat-card id])
constants/community-card shell.constants/community-card
(if content (if content
(rf/sub [:shell/community-channel-card (rf/sub [:shell/community-channel-card
id (get-in content [:data :channel-id]) id (get-in content [:data :channel-id])
content]) content])
(rf/sub [:shell/community-card id])))] (rf/sub [:shell/community-card id]))
nil)]
[switcher-cards/card (merge card card-data)])) [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] (defn jump-to-list [switcher-cards shell-margin]
(if (seq switcher-cards) (let [data (if (seq switcher-cards) switcher-cards empty-cards)]
[rn/flat-list [:<>
{:data switcher-cards [rn/flat-list
:render-fn render-card {:data data
:key-fn :id :render-fn render-card
:header (jump-to-text) :key-fn :id
:num-columns 2 :header (jump-to-text)
:column-wrapper-style {:margin-horizontal shell-margin :num-columns 2
:justify-content :space-between :column-wrapper-style {:margin-horizontal shell-margin
:margin-bottom 16} :justify-content :space-between
:style {:top 0 :margin-bottom 16}
:left 0 :style {:top 0
:right 0 :left 0
:bottom -1 :right 0
:position :absolute}}] :bottom -1
[placeholder])) :position :absolute}}]
(when-not (seq switcher-cards)
[placeholder])]))
(defn shell [] (defn shell []
(let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
@ -113,5 +107,5 @@
{:jump-to {:on-press #(animation/close-home-stack true) {:jump-to {:on-press #(animation/close-home-stack true)
:label (i18n/label :t/jump-to)}} :label (i18n/label :t/jump-to)}}
{:position :absolute {: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)]]))]) (:home-stack-opacity shared-values)]]))])