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

[#16077] Empty state component

This commit is contained in:
Ulises Manuel Cárdenas 2023-06-02 04:16:55 -06:00 committed by GitHub
parent 396ee208bf
commit b29d248a9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 175 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/no-messages-dark@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
resources/images/ui2/no-messages-dark@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
resources/images/ui2/no-messages-light@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
resources/images/ui2/no-messages-light@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

30
src/quo2/components/empty_state/empty_state/styles.cljs Normal file
View File

@ -0,0 +1,30 @@
(ns quo2.components.empty-state.empty-state.styles
(:require [quo2.foundations.colors :as colors]))
(def container
{:padding 12
:align-items :center})
(def image
{:width 80
:height 80})
(def text-container
{:margin-top 12
:align-items :center})
(defn title
[blur?]
(cond-> {:margin-bottom 2}
blur? (assoc :color colors/white)))
(defn description
[blur?]
(when blur?
{:color colors/white}))
(def button-container {:margin-top 20})
(defn upper-button-color
[customization-color]
(colors/custom-color-by-theme customization-color 50 60))

50
src/quo2/components/empty_state/empty_state/view.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns quo2.components.empty-state.empty-state.view
(:require [quo2.components.buttons.button :as button]
[quo2.components.empty-state.empty-state.styles :as styles]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]))
(defn empty-state
[{:keys [customization-color image title description blur?]
upper-button :upper-button
lower-button :lower-button
:or {customization-color :blue}}]
[rn/view {:style styles/container}
[fast-image/fast-image
{:style styles/image
:source image}]
[rn/view {:style styles/text-container}
[text/text
{:style (styles/title blur?)
:number-of-lines 1
:weight :semi-bold
:size :paragraph-1}
title]
[text/text
{:style (styles/description blur?)
:number-of-lines 1
:text-align :center
:weight :regular
:size :paragraph-2}
description]]
(when-let [{upper-button-text :text
upper-button-on-press :on-press} upper-button]
[rn/view {:style styles/button-container}
[button/button
(cond-> {:type :primary
:size 32
:override-background-color (styles/upper-button-color customization-color)
:on-press upper-button-on-press}
blur? (assoc :override-theme :dark))
upper-button-text]
(when-let [{lower-button-text :text
lower-button-on-press :on-press} lower-button]
[button/button
(cond-> {:style {:margin-top 12}
:size 32
:type :blur-bg
:on-press lower-button-on-press}
blur? (assoc :override-theme :dark))
lower-button-text])])])

4
src/quo2/core.cljs
View File

@ -30,6 +30,7 @@
quo2.components.drawers.permission-context.view
quo2.components.dropdowns.dropdown
quo2.components.header
quo2.components.empty-state.empty-state.view
quo2.components.icon
quo2.components.info.info-message
quo2.components.info.information-box
@ -168,6 +169,9 @@
(def drawer-buttons quo2.components.drawers.drawer-buttons.view/view)
(def permission-context quo2.components.drawers.permission-context.view/view)
;;;; EMPTY STATE
(def empty-state quo2.components.empty-state.empty-state.view/empty-state)
;;;; INPUTS
(def input quo2.components.inputs.input.view/input)
(def profile-input quo2.components.inputs.profile-input.view/profile-input)

4
src/status_im2/common/resources.cljs
View File

@ -23,7 +23,9 @@
:discover (js/require "../resources/images/ui2/discover.png")
:invite-friends (js/require "../resources/images/ui2/invite-friends.png")
:no-contacts-light (js/require "../resources/images/ui2/no-contacts-light.png")
:no-contacts-dark (js/require "../resources/images/ui2/no-contacts-dark.png")})
:no-contacts-dark (js/require "../resources/images/ui2/no-contacts-dark.png")
:no-messages-light (js/require "../resources/images/ui2/no-messages-light.png")
:no-messages-dark (js/require "../resources/images/ui2/no-messages-dark.png")})
(def mock-images
{:coinbase (js/require "../resources/images/mock2/coinbase.png")

84
src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs Normal file
View File

@ -0,0 +1,84 @@
(ns status-im2.contexts.quo-preview.empty-state.empty-state
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.common.resources :as resources]))
(def descriptor
[{:label "Title:"
:key :title
:type :text}
{:label "Description:"
:key :description
:type :text}
{:label "Image:"
:key :image
:type :select
:options [{:key :no-contacts-light
:value "No contacts light"}
{:key :no-contacts-dark
:value "No contacts dark"}
{:key :no-messages-light
:value "No messages light"}
{:key :no-messages-dark
:value "No messages dark"}]}
{:label "Upper button text"
:key :upper-button-text
:type :text}
{:label "Lower button text"
:key :lower-button-text
:type :text}
{:label "Blur:"
:key :blur?
:type :boolean}])
(defn cool-preview
[]
(let [state (reagent/atom {:image :no-messages-light
:title "A big friendly title"
:description "Some cool description will be here"
:blur? false
:upper-button-text "Send community link"
:lower-button-text "Invite friends to Status"})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[preview/customizer state descriptor]
[rn/view
{:style {:margin-vertical 24
:background-color (when (:blur? @state) colors/neutral-95)}}
[preview/blur-view
{:style {:width "100%"
:align-items :center
:top (if (:blur? @state) 32 16)
:position (if (:blur? @state)
:absolute
:relative)}
:height 300
:show-blur-background? (:blur? @state)
:blur-view-props (when (:blur? @state)
{:overlay-color colors/neutral-80-opa-80})}
[rn/view {:style {:flex 1 :width "100%"}}
[quo/empty-state
(-> @state
(assoc :upper-button
{:text (:upper-button-text @state)
:on-press #(js/alert "Upper button")})
(assoc :lower-button
{:text (:lower-button-text @state)
:on-press #(js/alert "Lower button")})
(update :image resources/get-image))]]]]]])))
(defn preview-empty-state
[]
[rn/view
{:style {:flex 1
:background-color (colors/theme-colors colors/white colors/neutral-95)}}
[rn/flat-list
{:style {:flex 1}
:keyboard-should-persist-taps :always
:header [cool-preview]
:key-fn str}]])

4
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -83,6 +83,7 @@
[status-im2.contexts.quo-preview.tabs.account-selector :as account-selector]
[status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented]
[status-im2.contexts.quo-preview.tabs.tabs :as tabs]
[status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
[status-im2.contexts.quo-preview.tags.context-tags :as context-tags]
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
@ -187,6 +188,9 @@
:dropdowns [{:name :dropdown
:options {:topBar {:visible true}}
:component dropdown/preview-dropdown}]
:empty-state [{:name :empty-state
:options {:topBar {:visible true}}
:component empty-state/preview-empty-state}]
:info [{:name :info-message
:options {:topBar {:visible true}}
:component info-message/preview-info-message}