mirror of
https://github.com/status-im/status-react.git
synced 2025-01-11 03:26:31 +00:00
chore: remove mock data from syncing (#16132)
This commit is contained in:
parent
1594ff47f5
commit
51ccd9fdcb
@ -0,0 +1,58 @@
|
||||
(ns quo2.components.settings.settings-list.component-spec
|
||||
(:require [quo2.components.settings.settings-list.view :as settings-list]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Settings list tests"
|
||||
(h/test "Default render of Setting list component"
|
||||
(h/render [settings-list/settings-list {:accessibility-label "test"}])
|
||||
(h/is-truthy (h/get-by-label-text :test)))
|
||||
|
||||
(h/test "It renders a title"
|
||||
(h/render [settings-list/settings-list {:title "test"}])
|
||||
(h/is-truthy (h/get-by-text "test")))
|
||||
|
||||
(h/test "its gets passed an on press event"
|
||||
(let [event (h/mock-fn)]
|
||||
(h/render [settings-list/settings-list
|
||||
{:title "test"
|
||||
:on-press event}])
|
||||
(h/fire-event :press (h/get-by-text "test"))
|
||||
(h/was-called event)))
|
||||
|
||||
(h/test "on change event gets fired for toggle"
|
||||
(let [on-change (h/mock-fn)]
|
||||
(h/render [settings-list/settings-list
|
||||
{:title "test"
|
||||
:toggle-props {:on-change on-change}}])
|
||||
(h/fire-event :press (h/get-by-label-text :toggle-off))
|
||||
(h/was-called on-change)))
|
||||
|
||||
(h/test "It renders a badge"
|
||||
(h/render [settings-list/settings-list {:badge? true}])
|
||||
(h/is-truthy (h/get-by-label-text :setting-list-badge)))
|
||||
|
||||
(h/test "It renders a status tag component"
|
||||
(h/render [settings-list/settings-list
|
||||
{:status-tag-props
|
||||
{:size :small
|
||||
:status {:type :positive}
|
||||
:label "test tag"}}])
|
||||
(h/is-truthy (h/get-by-text "test tag")))
|
||||
|
||||
(h/test "on press event gets fired for button"
|
||||
(let [event (h/mock-fn)]
|
||||
(h/render [settings-list/settings-list
|
||||
{:button-props {:title "test button"
|
||||
:on-press event}}])
|
||||
(h/fire-event :press (h/get-by-text "test button"))
|
||||
(h/was-called event)))
|
||||
|
||||
(h/test "It renders a list of community icons"
|
||||
(h/render [settings-list/settings-list
|
||||
{:communities-props {:data
|
||||
[{:source "1"
|
||||
:accessibility-label :community-1}
|
||||
{:source "2"
|
||||
:accessibility-label :community-2}]}}])
|
||||
(h/is-truthy (h/get-by-label-text :community-1))
|
||||
(h/is-truthy (h/get-by-label-text :community-2))))
|
@ -5,42 +5,51 @@
|
||||
{:flex 1})
|
||||
|
||||
(defn title
|
||||
[]
|
||||
[override-theme]
|
||||
{:color (colors/theme-colors
|
||||
colors/neutral-100
|
||||
colors/white)})
|
||||
colors/white
|
||||
override-theme)})
|
||||
|
||||
(def icon
|
||||
{:margin-right 12})
|
||||
{:margin-right 12
|
||||
:align-self :flex-start})
|
||||
|
||||
(def item-container
|
||||
{:justify-content :space-between
|
||||
:height 48
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 13})
|
||||
|
||||
(def inner-container
|
||||
{:flex-direction :row
|
||||
:align-items :center})
|
||||
|
||||
(defn dot
|
||||
[]
|
||||
[override-theme]
|
||||
{:width 15
|
||||
:height 15
|
||||
:border-radius 8
|
||||
:margin-right 14.5
|
||||
:background-color (colors/theme-colors (colors/custom-color :blue 50)
|
||||
(colors/custom-color :blue 60))})
|
||||
(colors/custom-color :blue 60)
|
||||
override-theme)})
|
||||
|
||||
(defn community-icon
|
||||
[index]
|
||||
[index override-theme]
|
||||
{:width 24
|
||||
:height 24
|
||||
:border-width 1
|
||||
:border-color (colors/theme-colors colors/white colors/black)
|
||||
:border-color (colors/theme-colors colors/white colors/black override-theme)
|
||||
:border-radius 12
|
||||
:position :absolute
|
||||
:top "-50%"
|
||||
:right (* 20 index)})
|
||||
|
||||
(def communities-container
|
||||
{:flex 1
|
||||
:margin-right 12})
|
||||
{:flex 1
|
||||
:justify-content :center
|
||||
:align-content :center
|
||||
:margin-right 12})
|
||||
|
||||
(def tag-container
|
||||
{:margin-top 8})
|
||||
|
@ -4,30 +4,36 @@
|
||||
[quo2.components.selectors.selectors.view :as selectors]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tags.status-tags :as status-tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn settings-title
|
||||
[title]
|
||||
[title status-tag-props override-theme]
|
||||
[rn/view
|
||||
{:style style/title-container}
|
||||
[text/text
|
||||
{:accessibility-label :setting-item-name-text
|
||||
:ellipsize-mode :tail
|
||||
:style (style/title)
|
||||
:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-1}
|
||||
title]])
|
||||
(when title
|
||||
[text/text
|
||||
{:accessibility-label :setting-item-name-text
|
||||
:ellipsize-mode :tail
|
||||
:style (style/title override-theme)
|
||||
:override-theme override-theme
|
||||
:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-1}
|
||||
title])
|
||||
(when status-tag-props
|
||||
[rn/view {:style style/tag-container}
|
||||
[status-tag/status-tag
|
||||
status-tag-props]])])
|
||||
|
||||
(defn browser-context-icon
|
||||
[]
|
||||
[rn/view
|
||||
[icons/icon :browser-context
|
||||
{:container-style style/icon
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}]])
|
||||
(defn left-icon-comp
|
||||
[icon]
|
||||
[rn/view {:style style/icon}
|
||||
[icons/icon icon
|
||||
{:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}]])
|
||||
|
||||
(def chevron-icon
|
||||
[rn/view
|
||||
@ -43,22 +49,28 @@
|
||||
{:checked? checked?
|
||||
:on-change (fn [new-value] (on-change new-value))}])
|
||||
|
||||
(def badge-icon
|
||||
(defn badge-icon
|
||||
[override-theme]
|
||||
[rn/view
|
||||
{:style (style/dot)}])
|
||||
{:accessible :true
|
||||
:accessibility-label :setting-list-badge
|
||||
:style (style/dot override-theme)}])
|
||||
|
||||
(defn right-button
|
||||
[{:keys [title
|
||||
on-press]}]
|
||||
on-press]}
|
||||
override-theme]
|
||||
[button/button
|
||||
{:type :outline
|
||||
:on-press on-press
|
||||
:size 24}
|
||||
{:type :outline
|
||||
:override-theme override-theme
|
||||
:on-press on-press
|
||||
:size 24}
|
||||
title])
|
||||
|
||||
(defn communities-icons
|
||||
[{:keys [data
|
||||
icon-style]}]
|
||||
icon-style]}
|
||||
override-theme]
|
||||
(let [communities-count (dec (count data))]
|
||||
[rn/view
|
||||
{:style style/communities-container}
|
||||
@ -70,7 +82,8 @@
|
||||
{:uri source}
|
||||
source)
|
||||
:accessibility-label accessibility-label
|
||||
:style (merge (style/community-icon (- communities-count index)) icon-style)}])
|
||||
:style (merge (style/community-icon (- communities-count index) override-theme)
|
||||
icon-style)}])
|
||||
data)]))
|
||||
|
||||
(defn settings-list
|
||||
@ -78,7 +91,7 @@
|
||||
- `title` String to show in the center of the component, right to the icon and left to optional gadgets.
|
||||
- `on-press` Callback called when the component is pressed.
|
||||
- `accessibility-label` String to use as accessibility-label for VoiceOver.
|
||||
- `left-icon` Symbol to indicate icon type on the left side of the component.
|
||||
- `left-icon` icon keyword for icon on left.
|
||||
- `chevron?` Boolean to show/hide chevron at the right border of the component.
|
||||
- `toggle-prop` Map with the following keys:
|
||||
`checked?` Boolean value to set check or unchecked toggle.
|
||||
@ -89,7 +102,11 @@
|
||||
`on-press` Callback called when button is pressed.
|
||||
- `communities-props` Map with the following keys:
|
||||
`data` Array of maps containg source of the community asset.
|
||||
- `style` Styles map to be merge with default container styles."
|
||||
- `style` Styles map to be merge with default container styles.
|
||||
- `overide-theme` :dark or :light
|
||||
- `status-tag-props see the spec for status-tag component
|
||||
"
|
||||
|
||||
[{:keys [title
|
||||
on-press
|
||||
accessibility-label
|
||||
@ -99,21 +116,22 @@
|
||||
badge?
|
||||
button-props
|
||||
communities-props
|
||||
container-style]}]
|
||||
container-style
|
||||
override-theme
|
||||
status-tag-props]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:accessibility-label accessibility-label}
|
||||
[rn/view
|
||||
{:style (merge style/item-container container-style)}
|
||||
(case left-icon
|
||||
;; TODO: Add Icon Avatar on next variants development
|
||||
:browser-context (browser-context-icon)
|
||||
nil)
|
||||
[settings-title title]
|
||||
(when toggle-props
|
||||
(toggle-button toggle-props))
|
||||
(when badge? badge-icon)
|
||||
(when button-props
|
||||
(right-button button-props))
|
||||
(when communities-props (communities-icons communities-props))
|
||||
(when chevron? chevron-icon)]])
|
||||
[rn/view {:style style/inner-container}
|
||||
(when left-icon
|
||||
[left-icon-comp left-icon])
|
||||
[settings-title title status-tag-props override-theme]
|
||||
(when toggle-props
|
||||
[toggle-button toggle-props])
|
||||
(when badge? [badge-icon override-theme])
|
||||
(when button-props
|
||||
[right-button button-props override-theme])
|
||||
(when communities-props (communities-icons communities-props override-theme))
|
||||
(when chevron? chevron-icon)]]])
|
||||
|
@ -2,14 +2,16 @@
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def title-container
|
||||
{:justify-content :center
|
||||
:margin-top 12
|
||||
:padding-horizontal 20})
|
||||
(defn title-container
|
||||
[container-style]
|
||||
(merge
|
||||
{:justify-content :center
|
||||
:padding-horizontal 20}
|
||||
container-style))
|
||||
|
||||
(def title-text
|
||||
{:color colors/white})
|
||||
|
||||
(def subtitle-text
|
||||
{:color colors/white
|
||||
:margin-bottom 8})
|
||||
{:color colors/white
|
||||
:margin-top 8})
|
||||
|
@ -5,11 +5,12 @@
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn title
|
||||
[{:keys [title
|
||||
[{:keys [container-style
|
||||
title
|
||||
title-accessibility-label
|
||||
subtitle
|
||||
subtitle-accessibility-label]}]
|
||||
[rn/view {:style style/title-container}
|
||||
[rn/view {:style (style/title-container container-style)}
|
||||
[text/text
|
||||
{:accessibility-label title-accessibility-label
|
||||
:weight :semi-bold
|
||||
|
@ -32,5 +32,6 @@
|
||||
[quo2.components.selectors.filter.component-spec]
|
||||
[quo2.components.selectors.reactions.component-spec]
|
||||
[quo2.components.selectors.selectors.component-spec]
|
||||
[quo2.components.settings.settings-list.component-spec]
|
||||
[quo2.components.share.share-qr-code.component-spec]
|
||||
[quo2.components.tags.--tests--.status-tags-component-spec]))
|
||||
|
@ -1,29 +0,0 @@
|
||||
(ns status-im2.common.syncing.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def device-container
|
||||
{:padding-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 16
|
||||
:border-color colors/white-opa-5
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:margin-bottom 24})
|
||||
|
||||
(def device-container-orientation
|
||||
{:flex-direction :row})
|
||||
|
||||
(def icon-container
|
||||
{:height 20
|
||||
:margin-right 12})
|
||||
|
||||
(def tag-container
|
||||
{:margin-top 8})
|
||||
|
||||
(def render-device-status
|
||||
{:background-color colors/success-60
|
||||
:align-self :center
|
||||
:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:margin-right 6})
|
@ -1,51 +0,0 @@
|
||||
(ns status-im2.common.syncing.view
|
||||
[:require
|
||||
[quo2.core :as quo]
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.common.not-implemented :as not-implemented]
|
||||
[status-im2.common.syncing.style :as style]])
|
||||
|
||||
;; TODO replace with section list component
|
||||
;; https://github.com/status-im/status-mobile/issues/15665
|
||||
(defn view
|
||||
[{:keys [name
|
||||
this-device?
|
||||
device-type]}]
|
||||
[rn/view {:style style/device-container}
|
||||
[rn/view {:style style/device-container-orientation}
|
||||
[rn/view {:style style/icon-container}
|
||||
[quo/icon
|
||||
(if (= device-type :mobile) :i/mobile :i/desktop)
|
||||
{:color colors/white}]]
|
||||
[rn/view
|
||||
[quo/text
|
||||
{:accessibility-label :device-name
|
||||
:weight :medium
|
||||
:size :paragraph-1
|
||||
:style {:color colors/white}}
|
||||
name]
|
||||
(when this-device?
|
||||
[not-implemented/not-implemented
|
||||
[quo/text
|
||||
{:accessibility-label :next-back-up
|
||||
:size :paragraph-2
|
||||
:style {:color colors/white-opa-40}}
|
||||
"Next backup in 04:36:12"]])
|
||||
(when this-device?
|
||||
[rn/view {:style style/tag-container}
|
||||
[quo/status-tag
|
||||
{:size :small
|
||||
:status {:type :positive}
|
||||
:no-icon? true
|
||||
:label (i18n/label :t/this-device)
|
||||
:override-theme :dark}]])
|
||||
(when-not this-device?
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
[rn/view style/render-device-status]
|
||||
[quo/text
|
||||
{:accessibility-label :next-back-up
|
||||
:size :paragraph-2
|
||||
:style {:color colors/white-opa-40}}
|
||||
(i18n/label :t/online-now)]])]]])
|
@ -21,4 +21,4 @@
|
||||
(defn buttons
|
||||
[insets]
|
||||
{:margin default-margin
|
||||
:margin-bottom (+ default-margin (:bottom insets))})
|
||||
:margin-bottom (+ 14 (:bottom insets))})
|
||||
|
@ -12,7 +12,8 @@
|
||||
(defn page-title
|
||||
[]
|
||||
[quo/title
|
||||
{:title (i18n/label :t/enable-biometrics)
|
||||
{:container-style {:margin-top 12}
|
||||
:title (i18n/label :t/enable-biometrics)
|
||||
:title-accessibility-label :enable-biometrics-title
|
||||
:subtitle (i18n/label :t/use-biometrics)
|
||||
:subtitle-accessibility-label :enable-biometrics-sub-title}])
|
||||
|
@ -22,4 +22,4 @@
|
||||
(defn buttons
|
||||
[insets]
|
||||
{:margin default-margin
|
||||
:margin-bottom (+ default-margin (:bottom insets))})
|
||||
:margin-bottom (+ 14 (:bottom insets))})
|
||||
|
@ -16,7 +16,8 @@
|
||||
(defn page-title
|
||||
[]
|
||||
[quo/title
|
||||
{:title (i18n/label :t/intro-wizard-title6)
|
||||
{:container-style {:margin-top 12}
|
||||
:title (i18n/label :t/intro-wizard-title6)
|
||||
:title-accessibility-label :notifications-title
|
||||
:subtitle (i18n/label :t/enable-notifications-sub-title)
|
||||
:subtitle-accessibility-label :notifications-sub-title}])
|
||||
|
@ -19,7 +19,8 @@
|
||||
(defn page-title
|
||||
[pairing-progress?]
|
||||
[quo/title
|
||||
{:title (i18n/label (if pairing-progress?
|
||||
{:container-style {:margin-top 56}
|
||||
:title (i18n/label (if pairing-progress?
|
||||
:t/sync-devices-title
|
||||
:t/sync-devices-error-title))
|
||||
:subtitle (i18n/label (if pairing-progress?
|
||||
|
@ -1,22 +1,24 @@
|
||||
(ns status-im2.contexts.onboarding.syncing.results.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def page-container
|
||||
(defn page-container
|
||||
[top]
|
||||
{:flex 1
|
||||
:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0
|
||||
:padding-top top
|
||||
:padding-bottom 20
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(def current-device
|
||||
{:flex 1})
|
||||
{:margin-bottom 19})
|
||||
|
||||
(def device-list
|
||||
{:flex 1
|
||||
:margin-top 24
|
||||
:margin-top 12
|
||||
:padding-horizontal 20})
|
||||
|
||||
(def continue-button
|
||||
|
@ -3,9 +3,10 @@
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.onboarding.syncing.results.style :as style]
|
||||
[status-im2.common.syncing.view :as device]
|
||||
[status-im2.contexts.syncing.device.view :as device]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
(defn page-title
|
||||
@ -21,23 +22,25 @@
|
||||
[rn/view {:style style/current-device}
|
||||
[device/view
|
||||
(merge installation
|
||||
{:this-device? true})]
|
||||
[quo/text
|
||||
{:accessibility-label :sync-with-sub-title
|
||||
:weight :regular
|
||||
:size :paragraph-1
|
||||
:style {:color colors/white}}
|
||||
(i18n/label :t/sync-with)]])
|
||||
{:this-device? true})]])
|
||||
|
||||
(defn devices-list
|
||||
[]
|
||||
(let [installations (rf/sub [:pairing/enabled-installations])]
|
||||
(let [installations (rf/sub [:pairing/enabled-installations])
|
||||
this-device (first installations)
|
||||
other-devices (rest installations)]
|
||||
[rn/view {:style style/device-list}
|
||||
[current-device this-device]
|
||||
[quo/text
|
||||
{:accessibility-label :synced-with-sub-title
|
||||
:weight :regular
|
||||
:size :paragraph-2
|
||||
:style {:color colors/white-opa-40}}
|
||||
(i18n/label :t/synced-with)]
|
||||
[rn/flat-list
|
||||
{:data (rest installations)
|
||||
{:data other-devices
|
||||
:shows-vertical-scroll-indicator false
|
||||
:key-fn :installation-id
|
||||
:header [current-device (first installations)]
|
||||
:render-fn device/view}]]))
|
||||
|
||||
(defn continue-button
|
||||
@ -52,9 +55,13 @@
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[rn/view {:style style/page-container}
|
||||
[background/view true]
|
||||
[quo/page-nav]
|
||||
[page-title]
|
||||
[devices-list]
|
||||
[continue-button]])
|
||||
(let [top (safe-area/get-top)]
|
||||
[rn/view {:style (style/page-container top)}
|
||||
[background/view true]
|
||||
[rn/view
|
||||
{:style {:margin-top 56
|
||||
:margin-bottom 26
|
||||
:flex 1}}
|
||||
[page-title]
|
||||
[devices-list]
|
||||
[continue-button]]]))
|
||||
|
@ -22,4 +22,4 @@
|
||||
(defn buttons
|
||||
[insets]
|
||||
{:margin default-margin
|
||||
:margin-bottom (+ default-margin (:bottom insets))})
|
||||
:margin-bottom (+ 14 (:bottom insets))})
|
||||
|
@ -15,7 +15,8 @@
|
||||
[]
|
||||
(let [new-account? (rf/sub [:onboarding-2/new-account?])]
|
||||
[quo/title
|
||||
{:title (i18n/label (if new-account?
|
||||
{:container-style {:margin-top 12}
|
||||
:title (i18n/label (if new-account?
|
||||
:t/welcome-to-web3
|
||||
:t/welcome-back))
|
||||
:title-accessibility-label :welcome-title
|
||||
|
@ -23,10 +23,12 @@
|
||||
:type :boolean}
|
||||
{:label "Button"
|
||||
:key :button-props
|
||||
:type :boolean
|
||||
}])
|
||||
:type :boolean}
|
||||
{:label "Status Tag"
|
||||
:key :status-tag-props
|
||||
:type :boolean}])
|
||||
|
||||
(defn get-mock-data
|
||||
(defn get-props
|
||||
[data]
|
||||
(when (:toggle-props data) (js/console.warn data))
|
||||
(merge
|
||||
@ -41,7 +43,13 @@
|
||||
{:data
|
||||
[{:source (resources/mock-images :rarible)}
|
||||
{:source (resources/mock-images :decentraland)}
|
||||
{:source (resources/mock-images :coinbase)}]})}))
|
||||
{:source (resources/mock-images :coinbase)}]})
|
||||
:status-tag-props (when (:status-tag-props data)
|
||||
{:size :small
|
||||
:status {:type :positive}
|
||||
:no-icon? true
|
||||
:label "example"
|
||||
:override-theme :dark})}))
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
@ -56,9 +64,9 @@
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view
|
||||
{:padding-vertical 100
|
||||
:padding-horizontal 40
|
||||
:padding-horizontal 20
|
||||
:align-items :center}
|
||||
[quo/settings-list (get-mock-data @state)]]])))
|
||||
[quo/settings-list (get-props @state)]]])))
|
||||
|
||||
(defn preview-settings-list
|
||||
[]
|
||||
|
11
src/status_im2/contexts/syncing/device/style.cljs
Normal file
11
src/status_im2/contexts/syncing/device/style.cljs
Normal file
@ -0,0 +1,11 @@
|
||||
(ns status-im2.contexts.syncing.device.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def device-container
|
||||
{:padding-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 16
|
||||
:border-color colors/white-opa-5
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:margin-top 12})
|
34
src/status_im2/contexts/syncing/device/view.cljs
Normal file
34
src/status_im2/contexts/syncing/device/view.cljs
Normal file
@ -0,0 +1,34 @@
|
||||
(ns status-im2.contexts.syncing.device.view
|
||||
[:require
|
||||
[quo2.core :as quo]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.contexts.syncing.device.style :as style]])
|
||||
|
||||
(defn view
|
||||
[{:keys [name
|
||||
this-device?
|
||||
device-type
|
||||
enabled?
|
||||
show-button?]}]
|
||||
(let [paired? (and (not this-device?) enabled?)
|
||||
unpaired? (not enabled?)]
|
||||
[quo/settings-list
|
||||
(cond->
|
||||
{:container-style style/device-container
|
||||
:title name
|
||||
:override-theme :dark
|
||||
:left-icon (if (= device-type :mobile) :i/mobile :i/desktop)}
|
||||
(and show-button? unpaired?) (assoc :button-props
|
||||
{:title (i18n/label :t/pair)
|
||||
:on-press #(js/alert "feature not added yet")})
|
||||
(and show-button? paired?) (assoc
|
||||
:button-props
|
||||
{:title (i18n/label :t/unpair)
|
||||
:on-press #(js/alert "feature not added yet")})
|
||||
this-device? (assoc
|
||||
:status-tag-props
|
||||
{:size :small
|
||||
:status {:type :positive}
|
||||
:no-icon? true
|
||||
:label (i18n/label :t/this-device)
|
||||
:override-theme :dark}))]))
|
@ -7,39 +7,19 @@
|
||||
|
||||
(def page-container
|
||||
{:flex 1
|
||||
:justify-content :flex-start
|
||||
:margin-horizontal 20})
|
||||
|
||||
(def title-container
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :space-between
|
||||
:margin-bottom 24})
|
||||
|
||||
(def devices-container
|
||||
{:flex 1})
|
||||
|
||||
(def device-container
|
||||
{:display :flex
|
||||
:padding-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 16
|
||||
|
||||
:flex-direction :row
|
||||
:border-color colors/white-opa-5
|
||||
:border-radius 16
|
||||
:border-width 1
|
||||
:height 100
|
||||
:margin-top 24})
|
||||
|
||||
(def device-details
|
||||
{:height 200})
|
||||
:margin-top 12
|
||||
:margin-bottom 12})
|
||||
|
||||
(def navigation-bar
|
||||
{:height 56})
|
||||
|
||||
(def icon-container
|
||||
{:height 20
|
||||
:margin-right 12})
|
||||
|
||||
(def tag-container
|
||||
{:margin-top 8})
|
||||
(def subtitle
|
||||
{:margin-top 20
|
||||
:color colors/white-opa-40})
|
||||
|
@ -4,10 +4,9 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.syncing.syncing-devices-list.style :as style]
|
||||
[status-im2.common.syncing.view :as device]
|
||||
[status-im2.contexts.syncing.device.view :as device]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
;;TODO remove mock data (#https://github.com/status-im/status-mobile/issues/15142)
|
||||
(defn navigation-bar
|
||||
[]
|
||||
[rn/view {:style style/navigation-bar}
|
||||
@ -21,21 +20,48 @@
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[rn/view {:style style/container-main}
|
||||
[navigation-bar]
|
||||
[rn/view {:style style/page-container}
|
||||
[rn/view {:style style/title-container}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style {:color colors/white}} (i18n/label :t/syncing)]
|
||||
[quo/button
|
||||
{:size 32
|
||||
:icon true
|
||||
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
|
||||
:i/add]]
|
||||
[rn/view {:style style/devices-container}
|
||||
[device/view
|
||||
{:name "iPhone 11"
|
||||
:this-device? true
|
||||
:device-type :mobile}]]]])
|
||||
(let [devices (rf/sub [:pairing/installations])
|
||||
devices-with-button (map #(assoc % :show-button? true) devices)
|
||||
user-device (first devices-with-button)
|
||||
other-devices (rest devices-with-button)
|
||||
|
||||
{:keys [paired-devices unpaired-devices]} (group-by
|
||||
#(if (:enabled? %) :paired-devices :unpaired-devices)
|
||||
other-devices)]
|
||||
[rn/view {:style style/container-main}
|
||||
[navigation-bar]
|
||||
[rn/view {:style style/page-container}
|
||||
[rn/view {:style style/title-container}
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style {:color colors/white}}
|
||||
(i18n/label :t/syncing)]
|
||||
[quo/button
|
||||
{:size 32
|
||||
:icon true
|
||||
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
|
||||
:i/add]]
|
||||
[device/view (merge user-device {:this-device? true})]
|
||||
(when (seq paired-devices)
|
||||
[rn/view
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style style/subtitle}
|
||||
(i18n/label :t/paired-with-this-device)]
|
||||
[rn/flat-list
|
||||
{:key-fn str
|
||||
:render-fn device/view
|
||||
:data paired-devices}]])
|
||||
(when (seq unpaired-devices)
|
||||
[rn/view
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style style/subtitle}
|
||||
(i18n/label :t/not-paired-with-this-device)]
|
||||
[rn/flat-list
|
||||
{:key-fn str
|
||||
:render-fn device/view
|
||||
:data unpaired-devices}]])]]))
|
||||
|
@ -1033,6 +1033,7 @@
|
||||
"not-applicable": "Not applicable for unsigned transactions",
|
||||
"not-keycard-text": "The card you used is not a Keycard. You need to purchase a Keycard to use it",
|
||||
"not-keycard-title": "Not a Keycard",
|
||||
"not-paired-with-this-device": "Not paired with this device",
|
||||
"notifications": "Notifications",
|
||||
"local-notifications": "Local notifications",
|
||||
"local-notifications-subtitle": "Enable background service",
|
||||
@ -1083,7 +1084,8 @@
|
||||
"outgoing": "Outgoing",
|
||||
"outgoing-transaction": "Outgoing transaction",
|
||||
"own-your-crypto": "Own your crypto",
|
||||
"pair": "Pair devices",
|
||||
"pair": "Pair",
|
||||
"pair-devices": "Pair devices",
|
||||
"pair-card": "Pair to this device",
|
||||
"pair-code": "Pair code",
|
||||
"pair-code-explanation": "Pairs card to a different device (up to 5) to unlock keys and sign transactions with the same Keycard",
|
||||
@ -1091,6 +1093,7 @@
|
||||
"pair-this-device": "Advertise device",
|
||||
"pair-this-device-description": "Pair your devices to sync contacts and chats between them",
|
||||
"paired-devices": "Paired devices",
|
||||
"paired-with-this-device": "Paired with this device",
|
||||
"pairing": "Pairing",
|
||||
"pairing-card": "Pairing card",
|
||||
"pairing-code-placeholder": "Pairing code...",
|
||||
@ -1419,6 +1422,7 @@
|
||||
"unique-identifiers": "Unique profile identifiers",
|
||||
"unknown-status-go-error": "Unknown status-go error",
|
||||
"unlock": "Unlock",
|
||||
"unpair": "Unpair",
|
||||
"unpair-card": "Unpair card",
|
||||
"unpair-card-confirmation": "This operation will unpair card from current device. Requires 6-digit passcode authorization. Do you want to proceed?",
|
||||
"unpaired-keycard-text": "The Keycard you tapped is not associated with this phone",
|
||||
@ -2175,16 +2179,16 @@
|
||||
"user-deleted-a-message": "{{user}} deleted a message",
|
||||
"link-to-profile": "Link to profile",
|
||||
"emoji-hash": "Emoji Hash",
|
||||
"emoji-hash-copied":"Emojihash copied to clipboard",
|
||||
"link-to-profile-copied":"Link to Profile copied to clipboard",
|
||||
"emoji-hash-copied": "Emojihash copied to clipboard",
|
||||
"link-to-profile-copied": "Link to Profile copied to clipboard",
|
||||
"sync-devices-result-sub-title": "Your devices are now in sync",
|
||||
"sync-devices-title": "Syncing devices...",
|
||||
"sync-devices-sub-title": "Please keep both devices switched on and connected to the internet until sync is complete",
|
||||
"sync-devices-error-title": "Oops, something’s wrong",
|
||||
"sync-devices-error-sub-title":"Make sure both devices are powered on and connected to the internet.",
|
||||
"sync-devices-error-sub-title": "Make sure both devices are powered on and connected to the internet.",
|
||||
"sync-devices-complete-title": "Device sync complete!",
|
||||
"sync-devices-complete-sub-title": "Your devices are now in sync",
|
||||
"sync-with": "Synced with",
|
||||
"synced-with": "Synced with",
|
||||
"you-eligible-to-join": "You’re eligible to join",
|
||||
"you-not-eligible-to-join": "You’re not eligible to join",
|
||||
"you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
|
||||
|
Loading…
x
Reference in New Issue
Block a user