diff --git a/resources/images/ui2/no-messages-dark@2x.png b/resources/images/ui2/no-messages-dark@2x.png new file mode 100644 index 0000000000..fb71746c4c Binary files /dev/null and b/resources/images/ui2/no-messages-dark@2x.png differ diff --git a/resources/images/ui2/no-messages-dark@3x.png b/resources/images/ui2/no-messages-dark@3x.png new file mode 100644 index 0000000000..025a8db961 Binary files /dev/null and b/resources/images/ui2/no-messages-dark@3x.png differ diff --git a/resources/images/ui2/no-messages-light@2x.png b/resources/images/ui2/no-messages-light@2x.png new file mode 100644 index 0000000000..7ada7eff2b Binary files /dev/null and b/resources/images/ui2/no-messages-light@2x.png differ diff --git a/resources/images/ui2/no-messages-light@3x.png b/resources/images/ui2/no-messages-light@3x.png new file mode 100644 index 0000000000..060b2cbf6a Binary files /dev/null and b/resources/images/ui2/no-messages-light@3x.png differ diff --git a/src/quo2/components/empty_state/empty_state/styles.cljs b/src/quo2/components/empty_state/empty_state/styles.cljs new file mode 100644 index 0000000000..e3e4e6a7a4 --- /dev/null +++ b/src/quo2/components/empty_state/empty_state/styles.cljs @@ -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)) diff --git a/src/quo2/components/empty_state/empty_state/view.cljs b/src/quo2/components/empty_state/empty_state/view.cljs new file mode 100644 index 0000000000..8d77d701ad --- /dev/null +++ b/src/quo2/components/empty_state/empty_state/view.cljs @@ -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])])]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index c6971c58e0..8028fd9f6e 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index d207f16359..bb0e2c1ade 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -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") diff --git a/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs b/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs new file mode 100644 index 0000000000..09e37c96c2 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/empty_state/empty_state.cljs @@ -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}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 5c64d608b8..2ee98f6ff5 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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}