update empty state image illustrations to reflect the applied theme
* update empty state image illustrations to reflect the applied theme * refactored the code to use theme provider
This commit is contained in:
parent
e11a761fcc
commit
99294fa8ea
|
@ -1,6 +1,6 @@
|
||||||
(ns status-im2.contexts.chat.home.view
|
(ns status-im2.contexts.chat.home.view
|
||||||
(:require [oops.core :as oops]
|
(:require [oops.core :as oops]
|
||||||
[quo2.theme :as theme]
|
[quo2.theme :as quo.theme]
|
||||||
[re-frame.core :as re-frame]
|
[re-frame.core :as re-frame]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
|
@ -27,31 +27,32 @@
|
||||||
(filter k)
|
(filter k)
|
||||||
(sort-by :timestamp >))))
|
(sort-by :timestamp >))))
|
||||||
|
|
||||||
(def empty-state-content
|
(defn empty-state-content
|
||||||
|
[theme]
|
||||||
#:tab{:contacts
|
#:tab{:contacts
|
||||||
{:title (i18n/label :t/no-contacts)
|
{:title (i18n/label :t/no-contacts)
|
||||||
:description (i18n/label :t/no-contacts-description)
|
:description (i18n/label :t/no-contacts-description)
|
||||||
:image (resources/get-image
|
:image (resources/get-image
|
||||||
(theme/theme-value :no-contacts-light :no-contacts-dark))}
|
(quo.theme/theme-value :no-contacts-light :no-contacts-dark theme))}
|
||||||
:groups
|
:groups
|
||||||
{:title (i18n/label :t/no-group-chats)
|
{:title (i18n/label :t/no-group-chats)
|
||||||
:description (i18n/label :t/no-group-chats-description)
|
:description (i18n/label :t/no-group-chats-description)
|
||||||
:image (resources/get-image
|
:image (resources/get-image
|
||||||
(theme/theme-value :no-group-chats-light :no-group-chats-dark))}
|
(quo.theme/theme-value :no-group-chats-light :no-group-chats-dark theme))}
|
||||||
:recent
|
:recent
|
||||||
{:title (i18n/label :t/no-messages)
|
{:title (i18n/label :t/no-messages)
|
||||||
:description (i18n/label :t/no-messages-description)
|
:description (i18n/label :t/no-messages-description)
|
||||||
:image (resources/get-image
|
:image (resources/get-image
|
||||||
(theme/theme-value :no-messages-light :no-messages-dark))}})
|
(quo.theme/theme-value :no-messages-light :no-messages-dark theme))}})
|
||||||
|
|
||||||
(defn chats
|
(defn chats
|
||||||
[{:keys [selected-tab set-scroll-ref scroll-shared-value]}]
|
[{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]
|
||||||
(let [unfiltered-items (rf/sub [:chats-stack-items])
|
(let [unfiltered-items (rf/sub [:chats-stack-items])
|
||||||
items (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
|
items (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
|
||||||
(if (empty? items)
|
(if (empty? items)
|
||||||
[common.home/empty-state-image
|
[common.home/empty-state-image
|
||||||
{:selected-tab selected-tab
|
{:selected-tab selected-tab
|
||||||
:tab->content empty-state-content}]
|
:tab->content (empty-state-content theme)}]
|
||||||
[reanimated/flat-list
|
[reanimated/flat-list
|
||||||
{:ref set-scroll-ref
|
{:ref set-scroll-ref
|
||||||
:key-fn #(or (:chat-id %) (:public-key %) (:id %))
|
:key-fn #(or (:chat-id %) (:public-key %) (:id %))
|
||||||
|
@ -81,12 +82,12 @@
|
||||||
item]))
|
item]))
|
||||||
|
|
||||||
(defn contacts
|
(defn contacts
|
||||||
[{:keys [pending-contact-requests set-scroll-ref scroll-shared-value]}]
|
[{:keys [theme pending-contact-requests set-scroll-ref scroll-shared-value]}]
|
||||||
(let [items (rf/sub [:contacts/active-sections])]
|
(let [items (rf/sub [:contacts/active-sections])]
|
||||||
(if (and (empty? items) (empty? pending-contact-requests))
|
(if (and (empty? items) (empty? pending-contact-requests))
|
||||||
[common.home/empty-state-image
|
[common.home/empty-state-image
|
||||||
{:selected-tab :tab/contacts
|
{:selected-tab :tab/contacts
|
||||||
:tab->content empty-state-content}]
|
:tab->content (empty-state-content theme)}]
|
||||||
[rn/section-list
|
[rn/section-list
|
||||||
{:ref set-scroll-ref
|
{:ref set-scroll-ref
|
||||||
:key-fn :public-key
|
:key-fn :public-key
|
||||||
|
@ -117,8 +118,8 @@
|
||||||
:title (i18n/label :t/invite-friends-to-status)
|
:title (i18n/label :t/invite-friends-to-status)
|
||||||
:description (i18n/label :t/share-invite-link)}})
|
:description (i18n/label :t/share-invite-link)}})
|
||||||
|
|
||||||
(defn home
|
(defn- f-view-internal
|
||||||
[]
|
[{:keys [theme]}]
|
||||||
(let [scroll-ref (atom nil)
|
(let [scroll-ref (atom nil)
|
||||||
set-scroll-ref #(reset! scroll-ref %)]
|
set-scroll-ref #(reset! scroll-ref %)]
|
||||||
(fn []
|
(fn []
|
||||||
|
@ -131,11 +132,13 @@
|
||||||
[contacts
|
[contacts
|
||||||
{:pending-contact-requests pending-contact-requests
|
{:pending-contact-requests pending-contact-requests
|
||||||
:set-scroll-ref set-scroll-ref
|
:set-scroll-ref set-scroll-ref
|
||||||
:scroll-shared-value scroll-shared-value}]
|
:scroll-shared-value scroll-shared-value
|
||||||
|
:theme theme}]
|
||||||
[chats
|
[chats
|
||||||
{:selected-tab selected-tab
|
{:selected-tab selected-tab
|
||||||
:set-scroll-ref set-scroll-ref
|
:set-scroll-ref set-scroll-ref
|
||||||
:scroll-shared-value scroll-shared-value}])
|
:scroll-shared-value scroll-shared-value
|
||||||
|
:theme theme}])
|
||||||
[:f> common.home.banner/animated-banner
|
[:f> common.home.banner/animated-banner
|
||||||
{:content banner-data
|
{:content banner-data
|
||||||
:customization-color customization-color
|
:customization-color customization-color
|
||||||
|
@ -153,3 +156,9 @@
|
||||||
:selected-tab selected-tab
|
:selected-tab selected-tab
|
||||||
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
|
:on-tab-change (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
|
||||||
:scroll-shared-value scroll-shared-value}]]))))
|
:scroll-shared-value scroll-shared-value}]]))))
|
||||||
|
|
||||||
|
(defn- internal-chats-home-view
|
||||||
|
[params]
|
||||||
|
[:f> f-view-internal params])
|
||||||
|
|
||||||
|
(def view (quo.theme/with-theme internal-chats-home-view))
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
(ns status-im2.contexts.communities.home.view
|
(ns status-im2.contexts.communities.home.view
|
||||||
(:require [oops.core :as oops]
|
(:require [oops.core :as oops]
|
||||||
[quo2.core :as quo]
|
[quo2.core :as quo]
|
||||||
[quo2.theme :as theme]
|
[quo2.theme :as quo.theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[status-im2.common.home.banner.view :as common.home.banner]
|
[status-im2.common.home.banner.view :as common.home.banner]
|
||||||
|
@ -37,7 +37,9 @@
|
||||||
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
|
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
|
||||||
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
|
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
|
||||||
|
|
||||||
(def empty-state-content
|
|
||||||
|
(defn empty-state-content
|
||||||
|
[theme]
|
||||||
{:joined
|
{:joined
|
||||||
{:title (i18n/label :t/no-communities)
|
{:title (i18n/label :t/no-communities)
|
||||||
:description [:<>
|
:description [:<>
|
||||||
|
@ -45,18 +47,21 @@
|
||||||
(i18n/label :t/no-communities-description-strikethrough)]
|
(i18n/label :t/no-communities-description-strikethrough)]
|
||||||
" "
|
" "
|
||||||
(i18n/label :t/no-communities-description)]
|
(i18n/label :t/no-communities-description)]
|
||||||
:image (resources/get-image (theme/theme-value :no-communities-light
|
:image (resources/get-image (quo.theme/theme-value :no-communities-light
|
||||||
:no-communities-dark))}
|
:no-communities-dark
|
||||||
|
theme))}
|
||||||
:pending
|
:pending
|
||||||
{:title (i18n/label :t/no-pending-communities)
|
{:title (i18n/label :t/no-pending-communities)
|
||||||
:description (i18n/label :t/no-pending-communities-description)
|
:description (i18n/label :t/no-pending-communities-description)
|
||||||
:image (resources/get-image (theme/theme-value :no-pending-communities-light
|
:image (resources/get-image (quo.theme/theme-value :no-pending-communities-light
|
||||||
:no-pending-communities-dark))}
|
:no-pending-communities-dark
|
||||||
|
theme))}
|
||||||
:opened
|
:opened
|
||||||
{:title (i18n/label :t/no-opened-communities)
|
{:title (i18n/label :t/no-opened-communities)
|
||||||
:description (i18n/label :t/no-opened-communities-description)
|
:description (i18n/label :t/no-opened-communities-description)
|
||||||
:image (resources/get-image (theme/theme-value :no-opened-communities-light
|
:image (resources/get-image (quo.theme/theme-value :no-opened-communities-light
|
||||||
:no-opened-communities-dark))}})
|
:no-opened-communities-dark
|
||||||
|
theme))}})
|
||||||
|
|
||||||
(def ^:private banner-data
|
(def ^:private banner-data
|
||||||
{:title-props
|
{:title-props
|
||||||
|
@ -70,8 +75,8 @@
|
||||||
:banner (resources/get-image :discover)
|
:banner (resources/get-image :discover)
|
||||||
:accessibility-label :communities-home-discover-card}})
|
:accessibility-label :communities-home-discover-card}})
|
||||||
|
|
||||||
(defn home
|
(defn- f-view-internal
|
||||||
[]
|
[{:keys [theme]}]
|
||||||
(let [flat-list-ref (atom nil)
|
(let [flat-list-ref (atom nil)
|
||||||
set-flat-list-ref #(reset! flat-list-ref %)]
|
set-flat-list-ref #(reset! flat-list-ref %)]
|
||||||
(fn []
|
(fn []
|
||||||
|
@ -87,7 +92,7 @@
|
||||||
(if (empty? selected-items)
|
(if (empty? selected-items)
|
||||||
[common.home/empty-state-image
|
[common.home/empty-state-image
|
||||||
{:selected-tab selected-tab
|
{:selected-tab selected-tab
|
||||||
:tab->content empty-state-content}]
|
:tab->content (empty-state-content theme)}]
|
||||||
[reanimated/flat-list
|
[reanimated/flat-list
|
||||||
{:ref set-flat-list-ref
|
{:ref set-flat-list-ref
|
||||||
:key-fn :id
|
:key-fn :id
|
||||||
|
@ -109,3 +114,9 @@
|
||||||
:selected-tab selected-tab
|
:selected-tab selected-tab
|
||||||
:on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab]))
|
:on-tab-change (fn [tab] (rf/dispatch [:communities/select-tab tab]))
|
||||||
:scroll-shared-value scroll-shared-value}]]))))
|
:scroll-shared-value scroll-shared-value}]]))))
|
||||||
|
|
||||||
|
(defn- internal-communities-home-view
|
||||||
|
[params]
|
||||||
|
[:f> f-view-internal params])
|
||||||
|
|
||||||
|
(def view (quo.theme/with-theme internal-communities-home-view))
|
||||||
|
|
|
@ -28,8 +28,8 @@
|
||||||
:z-index (get shared-values
|
:z-index (get shared-values
|
||||||
(get shell.constants/stacks-z-index-keywords stack-id))})}
|
(get shell.constants/stacks-z-index-keywords stack-id))})}
|
||||||
(case stack-id
|
(case stack-id
|
||||||
:communities-stack [:f> communities/home]
|
:communities-stack [:f> communities/view]
|
||||||
:chats-stack [:f> chat/home]
|
:chats-stack [:f> chat/view]
|
||||||
;NOTE temporary while we support old wallet
|
;NOTE temporary while we support old wallet
|
||||||
:wallet-stack (if @state/load-new-wallet?
|
:wallet-stack (if @state/load-new-wallet?
|
||||||
[wallet-new/view]
|
[wallet-new/view]
|
||||||
|
|
Loading…
Reference in New Issue