Refactor "How to pair" screen and add "Find sync code" screen (#16364)
This commit refactors the "How to pair" bottom screen (introduced in #15710) on Syncing page, to be reused in "Sign In" and "Sync new device" screens by moving the UI rendering functions to the common place. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
Mohamed Javid
GitHub
parent
9826898b00
commit
6f0d375e8a
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
|
|
@ -8,6 +8,8 @@
|
|||
"../resources/images/ui2/desktop-how-to-pair-logged-in.png")
|
||||
:mobile-how-to-pair-sign-in (js/require "../resources/images/ui2/mobile-how-to-pair-sign-in.png")
|
||||
:mobile-how-to-pair-logged-in (js/require "../resources/images/ui2/mobile-how-to-pair-logged-in.png")
|
||||
:find-sync-code-desktop (js/require "../resources/images/ui2/find-sync-code-desktop.png")
|
||||
:find-sync-code-mobile (js/require "../resources/images/ui2/find-sync-code-mobile.png")
|
||||
:lifestyle (js/require "../resources/images/ui2/lifestyle.png")
|
||||
:music (js/require "../resources/images/ui2/music.png")
|
||||
:podcasts (js/require "../resources/images/ui2/podcasts.png")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
(ns status-im2.contexts.syncing.find-sync-code.view
|
||||
(:require [status-im2.contexts.syncing.syncing-instructions.view :as syncing-instructions]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[syncing-instructions/instructions
|
||||
{:title-label-key :t/find-sync-code
|
||||
:mobile [{:image {:source :find-sync-code-mobile
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/open-your]
|
||||
[:context-tag
|
||||
{:label :t/profile
|
||||
:source :user-picture-male5}]]
|
||||
[[:text :t/go-to]
|
||||
[:button-grey-placeholder :t/syncing]]
|
||||
[[:text :t/tap]
|
||||
[:button-grey :t/sync-new-device]
|
||||
[:text :t/and]
|
||||
[:button-primary :t/set-up-sync]]
|
||||
[[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}]
|
||||
:desktop [{:image {:source :find-sync-code-desktop
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/open]
|
||||
[:button-grey-placeholder :t/settings]
|
||||
[:text :t/and-go-to]
|
||||
[:button-grey-placeholder :t/syncing]]
|
||||
[[:text :t/tap]
|
||||
[:button-primary :t/set-up-sync]]
|
||||
[[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}]}])
|
||||
|
|
@ -1,164 +1,53 @@
|
|||
(ns status-im2.contexts.syncing.how-to-pair.view
|
||||
(:require
|
||||
[react-native.gesture :as gesture]
|
||||
[status-im2.contexts.syncing.how-to-pair.style :as style]
|
||||
[status-im2.common.resources :as resources]
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
(:require [status-im2.contexts.syncing.syncing-instructions.view :as syncing-instructions]))
|
||||
|
||||
(defn render-element
|
||||
[[type value]]
|
||||
(case type
|
||||
:text
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:style style/list-text} (i18n/label value)]
|
||||
|
||||
:button-primary
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:size 24
|
||||
:style style/button-primary} (i18n/label value)]
|
||||
|
||||
:button-grey
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:style style/button-grey}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-grey-placeholder
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:style style/button-grey-placeholder}
|
||||
(i18n/label value)]
|
||||
|
||||
:context-tag
|
||||
[quo/context-tag
|
||||
{:override-theme :dark
|
||||
:text-style {:color colors/white}}
|
||||
(resources/get-mock-image (:source value))
|
||||
(i18n/label (:label value))]))
|
||||
|
||||
(defn render-item
|
||||
[i list-item]
|
||||
^{:key i}
|
||||
[rn/view
|
||||
{:margin-vertical 6
|
||||
:style style/numbered-list-item}
|
||||
[rn/view
|
||||
{:margin-right 6
|
||||
:style style/list-icon}
|
||||
[quo/text
|
||||
{:size :label
|
||||
:weight :medium
|
||||
:style style/list-icon-text} i]]
|
||||
(map-indexed (fn [idx item]
|
||||
^{:key idx}
|
||||
[render-element item])
|
||||
list-item)])
|
||||
|
||||
(defn render-list
|
||||
[{:keys [title image list]}]
|
||||
[rn/view
|
||||
[quo/text
|
||||
{:size :paragraph-1
|
||||
:weight :semi-bold
|
||||
:style style/paragraph} (i18n/label title)]
|
||||
(case (:type image)
|
||||
:container-image [rn/view {:style style/container-image}
|
||||
[rn/image
|
||||
{:source (resources/get-image
|
||||
(:source image))}]]
|
||||
:image [rn/image
|
||||
{:source (resources/get-image (:source image))
|
||||
:style style/image}])
|
||||
[rn/view {:style style/numbered-list}
|
||||
(map-indexed (fn [i item] (render-item (inc i) item)) list)]])
|
||||
|
||||
(def platforms
|
||||
{:mobile
|
||||
[gesture/scroll-view
|
||||
(render-list {:title :t/signing-in-from-another-device
|
||||
:image {:source :mobile-how-to-pair-sign-in
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/tap-on]
|
||||
[:button-grey :t/im-new]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})
|
||||
[rn/view {:style style/hr}]
|
||||
(render-list {:title :t/already-logged-in-on-the-other-device
|
||||
:image {:source :mobile-how-to-pair-logged-in
|
||||
:type :image}
|
||||
:list [[[:text :t/tap-on]
|
||||
[:context-tag
|
||||
{:label :t/profile
|
||||
:source :user-picture-male5}]
|
||||
[:text :t/and]
|
||||
[:button-grey-placeholder :t/syncing]]
|
||||
[[:text :t/press]
|
||||
[:button-grey :t/scan-or-enter-sync-code]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]
|
||||
:desktop
|
||||
[gesture/scroll-view
|
||||
(render-list {:title :t/signing-in-from-another-device
|
||||
:image {:source :desktop-how-to-pair-sign-in
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/open]
|
||||
[:button-grey :t/settings]
|
||||
[:text :t/and-go-to]
|
||||
[:button-grey :t/syncing]]
|
||||
[[:text :t/tap]
|
||||
[:button-grey :t/scan-or-enter-a-sync-code]]
|
||||
[[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]})
|
||||
[rn/view {:style style/hr}]
|
||||
(render-list {:title :t/already-logged-in-on-the-other-device
|
||||
:image {:source :desktop-how-to-pair-logged-in
|
||||
:type :container-image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/tap-on]
|
||||
[:button-grey :t/im-new]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]})
|
||||
|
||||
(defn instructions
|
||||
(defn view
|
||||
[]
|
||||
(let [platform (reagent/atom :mobile)
|
||||
platform-data (map (fn [platform]
|
||||
{:id platform
|
||||
:label (i18n/label
|
||||
(keyword (str "t/" (name platform))))})
|
||||
(keys platforms))]
|
||||
(fn []
|
||||
[rn/view {:style style/container-outer}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style style/heading} (i18n/label :t/how-to-pair)]
|
||||
[rn/view {:style style/tabs-container}
|
||||
[quo/segmented-control
|
||||
{:size 28
|
||||
:override-theme :dark
|
||||
:blur? true
|
||||
:default-active :mobile
|
||||
:data platform-data
|
||||
:on-change #(reset! platform %)}]]
|
||||
(@platform platforms)])))
|
||||
|
||||
[syncing-instructions/instructions
|
||||
{:title-label-key :t/how-to-pair
|
||||
:mobile [{:title :t/signing-in-from-another-device
|
||||
:image {:source :mobile-how-to-pair-sign-in
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/tap-on]
|
||||
[:button-grey :t/im-new]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}
|
||||
{:title :t/already-logged-in-on-the-other-device
|
||||
:image {:source :mobile-how-to-pair-logged-in
|
||||
:type :image}
|
||||
:list [[[:text :t/tap-on]
|
||||
[:context-tag
|
||||
{:label :t/profile
|
||||
:source :user-picture-male5}]
|
||||
[:text :t/and]
|
||||
[:button-grey-placeholder :t/syncing]]
|
||||
[[:text :t/press]
|
||||
[:button-grey-placeholder :t/scan-or-enter-sync-code]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}]
|
||||
:desktop [{:title :t/signing-in-from-another-device
|
||||
:image {:source :desktop-how-to-pair-sign-in
|
||||
:type :image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/open]
|
||||
[:button-grey-placeholder :t/settings]
|
||||
[:text :t/and-go-to]
|
||||
[:button-grey-placeholder :t/syncing]]
|
||||
[[:text :t/tap]
|
||||
[:button-grey :t/scan-or-enter-a-sync-code]]
|
||||
[[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]}
|
||||
{:title :t/already-logged-in-on-the-other-device
|
||||
:image {:source :desktop-how-to-pair-logged-in
|
||||
:type :container-image}
|
||||
:list [[[:text :t/open-status-on-your-other-device]]
|
||||
[[:text :t/tap-on]
|
||||
[:button-grey :t/im-new]]
|
||||
[[:button-primary :t/enable-camera]
|
||||
[:text :t/or-tap]
|
||||
[:button-grey :t/enter-sync-code]]
|
||||
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}]}])
|
||||
|
|
|
|||
|
|
@ -60,7 +60,8 @@
|
|||
:size 32
|
||||
:accessibility-label :find-sync-code
|
||||
:override-theme :dark
|
||||
:on-press #(js/alert "Yet to be implemented")}
|
||||
:on-press #(rf/dispatch [:open-modal :find-sync-code
|
||||
{:override-theme :dark}])}
|
||||
(i18n/label :t/find-sync-code)]]
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
:right-section-buttons [{:type :grey
|
||||
:label (i18n/label :t/how-to-scan)
|
||||
:label (i18n/label :t/how-to-pair)
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch [:open-modal :how-to-pair
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(ns status-im2.contexts.syncing.how-to-pair.style
|
||||
(ns status-im2.contexts.syncing.syncing-instructions.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]))
|
||||
|
||||
|
|
@ -50,7 +50,8 @@
|
|||
:border-width 1
|
||||
:border-color colors/white-opa-10
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
:justify-content :center
|
||||
:margin-right 6})
|
||||
|
||||
(def list-icon-text
|
||||
{:color colors/white})
|
||||
|
|
@ -68,5 +69,6 @@
|
|||
{:margin-top 12})
|
||||
|
||||
(def numbered-list-item
|
||||
{:flex-direction :row
|
||||
:align-items :center})
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:margin-vertical 6})
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
(ns status-im2.contexts.syncing.syncing-instructions.view
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.gesture :as gesture]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.syncing.syncing-instructions.style :as style]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
(defn- render-element
|
||||
[[type value]]
|
||||
(case type
|
||||
:text
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:style style/list-text} (i18n/label value)]
|
||||
|
||||
:button-primary
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:customization-color :blue
|
||||
:size 24
|
||||
:style style/button-primary} (i18n/label value)]
|
||||
|
||||
:button-grey
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:style style/button-grey}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-grey-placeholder
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:override-theme :dark
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:style style/button-grey-placeholder}
|
||||
(i18n/label value)]
|
||||
|
||||
:context-tag
|
||||
[quo/context-tag
|
||||
{:override-theme :dark
|
||||
:text-style {:color colors/white}}
|
||||
(resources/get-mock-image (:source value))
|
||||
(i18n/label (:label value))]))
|
||||
|
||||
(defn- render-item
|
||||
[i list-item]
|
||||
[rn/view
|
||||
{:style style/numbered-list-item}
|
||||
[rn/view
|
||||
{:style style/list-icon}
|
||||
[quo/text
|
||||
{:size :label
|
||||
:weight :medium
|
||||
:style style/list-icon-text} i]]
|
||||
(map-indexed (fn [idx item]
|
||||
^{:key idx}
|
||||
[render-element item])
|
||||
list-item)])
|
||||
|
||||
(defn- render-instruction
|
||||
[{:keys [title image list]}]
|
||||
[rn/view
|
||||
(when title
|
||||
[quo/text
|
||||
{:size :paragraph-1
|
||||
:weight :semi-bold
|
||||
:style style/paragraph} (i18n/label title)])
|
||||
(case (:type image)
|
||||
:container-image [rn/view {:style style/container-image}
|
||||
[rn/image
|
||||
{:source (resources/get-image
|
||||
(:source image))}]]
|
||||
:image [rn/image
|
||||
{:source (resources/get-image (:source image))
|
||||
:style style/image}]
|
||||
nil)
|
||||
[rn/view {:style style/numbered-list}
|
||||
(map-indexed (fn [i item]
|
||||
^{:key i}
|
||||
[render-item (inc i) item])
|
||||
list)]])
|
||||
|
||||
(defn- map-instructions
|
||||
[idx instructions instructions-count]
|
||||
[:<>
|
||||
[render-instruction instructions]
|
||||
(when-not (= (inc idx) instructions-count)
|
||||
[rn/view {:style style/hr}])])
|
||||
|
||||
(defn instructions
|
||||
[{:keys [title-label-key] :as props}]
|
||||
(let [platform (reagent/atom :mobile)
|
||||
platform-data [{:id :mobile
|
||||
:label (i18n/label :t/mobile)}
|
||||
{:id :desktop
|
||||
:label (i18n/label :t/desktop)}]]
|
||||
(fn []
|
||||
(let [instructions (get props @platform)
|
||||
instructions-count (count instructions)]
|
||||
[rn/view {:style style/container-outer}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style style/heading} (i18n/label title-label-key)]
|
||||
[rn/view {:style style/tabs-container}
|
||||
[quo/segmented-control
|
||||
{:size 28
|
||||
:override-theme :dark
|
||||
:blur? true
|
||||
:default-active :mobile
|
||||
:data platform-data
|
||||
:on-change #(reset! platform %)}]]
|
||||
[gesture/scroll-view
|
||||
(doall
|
||||
(map-indexed (fn [idx item]
|
||||
^{:key idx}
|
||||
[map-instructions idx item instructions-count])
|
||||
instructions))]]))))
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
[status-im2.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
|
||||
[status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
|
||||
[status-im2.contexts.syncing.how-to-pair.view :as how-to-pair]
|
||||
[status-im2.contexts.syncing.find-sync-code.view :as find-sync-code]
|
||||
[status-im2.navigation.options :as options]
|
||||
[status-im2.contexts.chat.group-details.view :as group-details]
|
||||
[status-im.ui.screens.screens :as old-screens]
|
||||
|
|
@ -83,7 +84,12 @@
|
|||
{:name :how-to-pair
|
||||
:options {:theme :dark
|
||||
:sheet? true}
|
||||
:component how-to-pair/instructions}
|
||||
:component how-to-pair/view}
|
||||
|
||||
{:name :find-sync-code
|
||||
:options {:theme :dark
|
||||
:sheet? true}
|
||||
:component find-sync-code/view}
|
||||
|
||||
{:name :discover-communities
|
||||
:component communities.discover/discover}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@
|
|||
insets (safe-area/get-insets)
|
||||
user-theme (theme/get-theme)]
|
||||
^{:key (str "sheet" @reloader/cnt)}
|
||||
(js/console.log "HEHREHRE")
|
||||
[theme/provider {:theme (or theme user-theme)}
|
||||
[inactive]
|
||||
[rn/keyboard-avoiding-view
|
||||
|
|
|
|||
|
|
@ -2153,6 +2153,10 @@
|
|||
"scan-or-enter-a-sync-code": "Scan or enter a sync code",
|
||||
"scan-the-qr-code-or-copy-the-sync-code": "Scan the QR code or copy the sync code",
|
||||
"already-logged-in-on-the-other-device": "Already logged in on the other device",
|
||||
"open-your": "Open your",
|
||||
"go-to": "Go to",
|
||||
"sync-new-device": "Sync new device",
|
||||
"set-up-sync": "Set up sync",
|
||||
"how-to-pair": "How to pair",
|
||||
"mobile": "Mobile",
|
||||
"desktop": "Desktop",
|
||||
|
|
|
|||
Loading…
Reference in New Issue