From f6ce63734c87cc2bb151da926558925a49fa920a Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Fri, 4 Aug 2023 02:19:01 +0800 Subject: [PATCH] Update entry points for Quo2 Preview (#16843) This commit adds two new entry points (button on the top right corner in the navigation bar) for the Quo2 preview screen without having to log in to the app: - "New to Status" - "login" Additionally, this commit updates the theme switcher to be sticky at the top of the Quo2 preview screen to quickly change the theme without having to scroll all the way top. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- .../onboarding/new_to_status/view.cljs | 24 +++++--- .../contexts/profile/profiles/style.cljs | 7 ++- .../contexts/profile/profiles/view.cljs | 47 ++++++++++------ src/status_im2/contexts/quo_preview/main.cljs | 56 +++++++++++++------ 4 files changed, 87 insertions(+), 47 deletions(-) diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs index 84af75b363..01808bb4de 100644 --- a/src/status_im2/contexts/onboarding/new_to_status/view.cljs +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -9,7 +9,8 @@ [utils.i18n :as i18n] [utils.re-frame :as rf] [status-im2.contexts.onboarding.common.overlay.view :as overlay] - [status-im2.contexts.profile.profiles.view :as profiles])) + [status-im2.contexts.profile.profiles.view :as profiles] + [status-im2.config :as config])) (defn navigate-back [] @@ -109,14 +110,19 @@ :icon-background :blur :icon :i/arrow-left :on-press navigate-back} - :right-section-buttons [{:type :grey - :icon :i/info - :icon-background :blur - :icon-override-theme :dark - :on-press #(rf/dispatch - [:show-bottom-sheet - {:content getting-started-doc - :shell? true}])}]}]]) + :right-section-buttons [(when config/quo-preview-enabled? + {:type :grey + :icon :i/reveal-whitelist + :icon-background :blur + :on-press #(rf/dispatch [:navigate-to + :quo2-preview])}) + {:type :grey + :icon :i/info + :icon-background :blur + :on-press #(rf/dispatch + [:show-bottom-sheet + {:content getting-started-doc + :shell? true}])}]}]]) (defn new-to-status [] diff --git a/src/status_im2/contexts/profile/profiles/style.cljs b/src/status_im2/contexts/profile/profiles/style.cljs index 7753eb3976..458cadcfc0 100644 --- a/src/status_im2/contexts/profile/profiles/style.cljs +++ b/src/status_im2/contexts/profile/profiles/style.cljs @@ -45,9 +45,10 @@ :padding-top 56 :padding-horizontal 20}) -(def multi-profile-button - {:align-self :flex-end - :margin-bottom 20}) +(def multi-profile-button-container + {:flex-direction :row + :justify-content :flex-end + :margin-bottom 20}) (def login-profile-card {:margin-bottom 20}) diff --git a/src/status_im2/contexts/profile/profiles/view.cljs b/src/status_im2/contexts/profile/profiles/view.cljs index e37f6a20f3..d7e0ff9fa2 100644 --- a/src/status_im2/contexts/profile/profiles/view.cljs +++ b/src/status_im2/contexts/profile/profiles/view.cljs @@ -1,21 +1,22 @@ (ns status-im2.contexts.profile.profiles.view - (:require [native-module.core :as native-module] + (:require [clojure.string :as string] + [native-module.core :as native-module] [quo2.core :as quo] + [quo2.foundations.colors :as colors] [react-native.core :as rn] + [react-native.reanimated :as reanimated] + [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im2.common.confirmation-drawer.view :as confirmation-drawer] + [status-im2.config :as config] + [status-im2.constants :as constants] [status-im2.contexts.onboarding.common.background.view :as background] [status-im2.contexts.profile.profiles.style :as style] [taoensso.timbre :as log] [utils.i18n :as i18n] [utils.re-frame :as rf] [utils.security.core :as security] - [utils.transforms :as types] - [quo2.foundations.colors :as colors] - [react-native.safe-area :as safe-area] - [clojure.string :as string] - [react-native.reanimated :as reanimated] - [status-im2.constants :as constants])) + [utils.transforms :as types])) (defonce push-animation-fn-atom (atom nil)) (defonce pop-animation-fn-atom (atom nil)) @@ -228,16 +229,28 @@ [rn/keyboard-avoiding-view {:style style/login-container :keyboardVerticalOffset (- (safe-area/get-bottom))} - [quo/button - {:size 32 - :type :grey - :background :blur - :icon-only? true - :on-press set-show-profiles - :disabled? processing - :accessibility-label :show-profiles - :container-style style/multi-profile-button} - :i/multi-profile] + [rn/view + {:style style/multi-profile-button-container} + (when config/quo-preview-enabled? + [quo/button + {:size 32 + :type :grey + :background :blur + :icon-only? true + :on-press #(rf/dispatch [:navigate-to :quo2-preview]) + :disabled? processing + :accessibility-label :quo2-preview + :container-style {:margin-right 12}} + :i/reveal-whitelist]) + [quo/button + {:size 32 + :type :grey + :background :blur + :icon-only? true + :on-press set-show-profiles + :disabled? processing + :accessibility-label :show-profiles} + :i/multi-profile]] [rn/scroll-view {:keyboard-should-persist-taps :always :style {:flex 1}} diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 0817c24b41..1ebc0dfc91 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -3,7 +3,7 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] - [re-frame.core :as re-frame] + [reagent.core :as reagent] [react-native.core :as rn] [status-im2.common.theme.core :as theme] [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list] @@ -107,7 +107,7 @@ [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge] [status-im2.contexts.quo-preview.wallet.account-card :as account-card] [status-im2.contexts.quo-preview.wallet.token-input :as token-input] - [reagent.core :as reagent])) + [utils.re-frame :as rf])) (def screens-categories {:foundations [{:name :shadows @@ -206,7 +206,7 @@ :options {:topBar {:visible true}} :component action-drawers/preview-action-drawers} {:name :documentation-drawer - :insets {:top false} + :options {:topBar {:visible true}} :component documenation-drawers/preview-documenation-drawers} {:name :drawer-buttons :options {:topBar {:visible true}} @@ -420,11 +420,29 @@ (def screens (flatten (map val screens-categories))) +(defn navigation-bar + [] + (let [logged-in? (rf/sub [:multiaccount/logged-in?]) + has-profiles? (boolean (rf/sub [:profile/profiles-overview]))] + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only + :main-text "Quo2 components preview"} + :left-section {:icon :i/close + :on-press (fn [] + (when-not logged-in? + (theme/set-theme :dark)) + (rf/dispatch [:navigate-back]) + (when-not has-profiles? + (rf/dispatch [:open-modal :new-to-status])))}}])) + (defn theme-switcher [] [rn/view - {:style {:flex-direction :row - :margin-vertical 8}} + {:style {:flex-direction :row + :justify-content :space-between + :padding-horizontal 24 + :padding-vertical 12}} [quo/button {:on-press #(theme/set-theme :light)} "Set light theme"] [quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]]) @@ -441,26 +459,28 @@ [quo/button {:type :outline :container-style {:margin-vertical 8} - :on-press #(re-frame/dispatch [:navigate-to name])} + :on-press #(rf/dispatch [:navigate-to name])} (clojure.core/name name)]))]))) (defn main-screen [] (fn [] - [rn/scroll-view - {:flex 1 - :padding-bottom 8 - :padding-horizontal 16 - :background-color (colors/theme-colors colors/white colors/neutral-90)} + [:<> + [navigation-bar] [theme-switcher] - [quo/text {:size :heading-1} "Preview Quo2 Components"] - [rn/view - (map (fn [category] - ^{:key (get category 0)} - [category-view category]) - (sort screens-categories))]])) + [rn/scroll-view + {:flex 1 + :padding-bottom 8 + :padding-horizontal 16 + :background-color (colors/theme-colors colors/white colors/neutral-90)} + [rn/view + (map (fn [category] + ^{:key (get category 0)} + [category-view category]) + (sort screens-categories))]]])) (def main-screens [{:name :quo2-preview - :options {:topBar {:visible true}} + :options {:topBar {:visible false} + :insets {:top? true}} :component main-screen}])