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

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 2023-06-26 17:57:59 +08:00 committed by GitHub
parent 9826898b00
commit 6f0d375e8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 227 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/find-sync-code-desktop@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
resources/images/ui2/find-sync-code-desktop@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

BIN
resources/images/ui2/find-sync-code-mobile@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 KiB

BIN
resources/images/ui2/find-sync-code-mobile@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

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

@ -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")

31
src/status_im2/contexts/syncing/find_sync_code/view.cljs Normal file
View File

@ -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]]]}]}])

143
src/status_im2/contexts/syncing/how_to_pair/view.cljs
View File

@ -1,93 +1,11 @@
(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
(defn view
[]
[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]]
@ -96,9 +14,8 @@
[[: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
[[: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]
@ -108,26 +25,23 @@
[:text :t/and]
[:button-grey-placeholder :t/syncing]]
[[:text :t/press]
[:button-grey :t/scan-or-enter-sync-code]]
[: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
[gesture/scroll-view
(render-list {:title :t/signing-in-from-another-device
[[: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 :t/settings]
[:button-grey-placeholder :t/settings]
[:text :t/and-go-to]
[:button-grey :t/syncing]]
[: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]]]})
[rn/view {:style style/hr}]
(render-list {:title :t/already-logged-in-on-the-other-device
[[: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]]
@ -136,29 +50,4 @@
[[: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
[]
(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)])))
[[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]}]}])

3
src/status_im2/contexts/syncing/scan_sync_code/view.cljs
View File

@ -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

2
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -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

8
src/status_im2/contexts/syncing/how_to_pair/style.cljs → src/status_im2/contexts/syncing/syncing_instructions/style.cljs
View File

@ -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})
@ -69,4 +70,5 @@
(def numbered-list-item
{:flex-direction :row
:align-items :center})
:align-items :center
:margin-vertical 6})

124
src/status_im2/contexts/syncing/syncing_instructions/view.cljs Normal file
View File

@ -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))]]))))

8
src/status_im2/navigation/screens.cljs
View File

@ -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}

1
src/status_im2/navigation/view.cljs
View File

@ -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

4
translations/en.json
View File

@ -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",