chore: add skeleton for sign in with syncing flow

This commit is contained in:
Jamie Caprani 2023-03-15 11:46:05 +00:00 committed by Andrea Maria Piana
parent 3f3cbe98a4
commit ada7a02c21
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
6 changed files with 163 additions and 25 deletions

View File

@ -61,7 +61,7 @@
:source (get-in carousels [@carousel-index :image])}] :source (get-in carousels [@carousel-index :image])}]
[quo/drawer-buttons [quo/drawer-buttons
{:top-card {:on-press (fn [] {:top-card {:on-press (fn []
(rf/dispatch [:navigate-to :new-to-status]) (rf/dispatch [:navigate-to :sign-in])
(rf/dispatch [:hide-terms-of-services-opt-in-screen])) (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
:heading (i18n/label :t/sign-in) :heading (i18n/label :t/sign-in)
:accessibility-label :already-use-status-button} :accessibility-label :already-use-status-button}

View File

@ -0,0 +1,14 @@
(ns status-im2.contexts.onboarding.sign-in.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def navigation-bar {:height 56})
(def page-container
{:padding-top (if platform/ios? 44 0)
:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:background-color colors/neutral-80-opa-80-blur})

View File

@ -0,0 +1,42 @@
(ns status-im2.contexts.onboarding.sign-in.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.sign-in.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(js/alert "Pending")}]}]])
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Sign in by syncing"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :syncing-devices])
:style {}} (i18n/label :t/continue)]]])
(defn sign-in
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

View File

@ -0,0 +1,14 @@
(ns status-im2.contexts.onboarding.syncing.syncing-devices.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def navigation-bar {:height 56})
(def page-container
{:padding-top (if platform/ios? 44 0)
:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:background-color colors/neutral-80-opa-80-blur})

View File

@ -0,0 +1,51 @@
(ns status-im2.contexts.onboarding.syncing.syncing-devices.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.syncing.syncing-devices.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press #(rf/dispatch [:navigate-back])}
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(js/alert "Pending")}]}]])
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Syncing devices..."]
[quo/text
{:size :heading-2
:weight :semi-bold
:style {:color colors/white}} "will show sync complete if successful"]
[quo/text
{:size :heading-2
:weight :semi-bold
:style {:color colors/white}} "will show sync failed if unsuccessful"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :enable-notifications])
:style {}} (i18n/label :t/continue)]]])
(defn syncing-devices
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

View File

@ -1,27 +1,30 @@
(ns status-im2.navigation.screens (ns status-im2.navigation.screens
(:require [utils.i18n :as i18n] ;; TODO remove when not used anymore (:require
[quo2.foundations.colors :as colors] [utils.i18n :as i18n] ;; TODO remove when not used anymore
[react-native.platform :as platform] [quo2.foundations.colors :as colors]
[status-im.ui.screens.screens :as old-screens] [react-native.platform :as platform]
[status-im2.config :as config] [status-im.ui.screens.screens :as old-screens]
[status-im2.contexts.activity-center.view :as activity-center] [status-im2.config :as config]
[status-im2.contexts.add-new-contact.views :as add-new-contact] [status-im2.contexts.activity-center.view :as activity-center]
[status-im2.contexts.chat.lightbox.view :as lightbox] [status-im2.contexts.add-new-contact.views :as add-new-contact]
[status-im2.contexts.chat.messages.view :as chat] [status-im2.contexts.chat.lightbox.view :as lightbox]
[status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] [status-im2.contexts.chat.messages.view :as chat]
[status-im2.contexts.chat.photo-selector.view :as photo-selector] [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
[status-im2.contexts.communities.discover.view :as communities.discover] [status-im2.contexts.chat.photo-selector.view :as photo-selector]
[status-im2.contexts.communities.overview.view :as communities.overview] [status-im2.contexts.communities.discover.view :as communities.discover]
[status-im2.contexts.onboarding.common.intro.view :as intro] [status-im2.contexts.communities.overview.view :as communities.overview]
[status-im2.contexts.onboarding.create-password.view :as create-password] [status-im2.contexts.onboarding.common.intro.view :as intro]
[status-im2.contexts.onboarding.create-profile.view :as create-profile] [status-im2.contexts.onboarding.create-password.view :as create-password]
[status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics] [status-im2.contexts.onboarding.create-profile.view :as create-profile]
[status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications] [status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
[status-im2.contexts.onboarding.new-to-status.view :as new-to-status] [status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications]
[status-im2.contexts.onboarding.profiles.view :as profiles] [status-im2.contexts.onboarding.new-to-status.view :as new-to-status]
[status-im2.contexts.quo-preview.main :as quo.preview] [status-im2.contexts.onboarding.sign-in.view :as sign-in]
[status-im2.contexts.shell.view :as shell] [status-im2.contexts.onboarding.syncing.syncing-devices.view :as syncing-devices]
[status-im2.contexts.syncing.view :as settings-syncing])) [status-im2.contexts.onboarding.profiles.view :as profiles]
[status-im2.contexts.quo-preview.main :as quo.preview]
[status-im2.contexts.shell.view :as shell]
[status-im2.contexts.syncing.view :as settings-syncing]))
(def components (def components
[]) [])
@ -148,7 +151,21 @@
:topBar {:visible false} :topBar {:visible false}
:navigationBar {:backgroundColor colors/black}} :navigationBar {:backgroundColor colors/black}}
:insets {:top false} :insets {:top false}
:component enable-notifications/enable-notifications}] :component enable-notifications/enable-notifications}
{:name :sign-in
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component sign-in/sign-in}
{:name :syncing-devices
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component syncing-devices/syncing-devices}]
(when config/quo-preview-enabled? (when config/quo-preview-enabled?
quo.preview/screens) quo.preview/screens)