* Refactor page-nav and fix API * Update and fix page-nav in scroll-page component * Update page-nav uses in quo-preview * Update page-nav uses in syncing * Update page-nav uses in communities * Update page-nav uses in wallet * Update page-nav uses in onboarding
This commit is contained in:
Ulises Manuel
GitHub
parent
6870000490
commit
6156bfc472
|
|
@ -1,262 +0,0 @@
|
||||||
(ns quo2.components.navigation.page-nav
|
|
||||||
(:require [clojure.string :as string]
|
|
||||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
|
||||||
[quo2.components.buttons.button.view :as button]
|
|
||||||
[quo2.components.icon :as icons]
|
|
||||||
[quo2.components.markdown.text :as text]
|
|
||||||
[quo2.foundations.colors :as colors]
|
|
||||||
[react-native.core :as rn]
|
|
||||||
[quo2.theme :as theme]))
|
|
||||||
|
|
||||||
(def ^:private centrify-style
|
|
||||||
{:display :flex
|
|
||||||
:justify-content :center
|
|
||||||
:align-items :center})
|
|
||||||
|
|
||||||
(def ^:private align-left (assoc centrify-style :align-items :flex-start))
|
|
||||||
|
|
||||||
(defn- big? [size] (= size :big))
|
|
||||||
|
|
||||||
(defn- icon-props
|
|
||||||
[color size]
|
|
||||||
(merge {:size 20
|
|
||||||
:container-style {:width (if (big? size)
|
|
||||||
20
|
|
||||||
16)
|
|
||||||
:height (if (big? size)
|
|
||||||
20
|
|
||||||
16)}}
|
|
||||||
(if-not (string/blank? color)
|
|
||||||
{:color color}
|
|
||||||
{:no-color true})))
|
|
||||||
|
|
||||||
(defn left-section-view
|
|
||||||
[{:keys [on-press icon accessibility-label type icon-background]
|
|
||||||
:or {type :grey}}
|
|
||||||
put-middle-section-on-left?]
|
|
||||||
[rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
|
|
||||||
[button/button
|
|
||||||
{:on-press on-press
|
|
||||||
:icon-only? true
|
|
||||||
:type type
|
|
||||||
:size 32
|
|
||||||
:accessibility-label accessibility-label
|
|
||||||
:background icon-background}
|
|
||||||
icon]])
|
|
||||||
|
|
||||||
(defn- mid-section-comp
|
|
||||||
[{:keys [description-img description-user-icon horizontal-description?
|
|
||||||
text-secondary-color align-mid? text-color icon main-text type description]}]
|
|
||||||
[rn/view
|
|
||||||
{:style (assoc centrify-style
|
|
||||||
:flex-direction :row
|
|
||||||
:margin-horizontal 2)}
|
|
||||||
(when (or (and (not horizontal-description?)
|
|
||||||
align-mid?
|
|
||||||
(not= :text-with-description type))
|
|
||||||
(and (or description-img description-user-icon)
|
|
||||||
(not icon)))
|
|
||||||
(if description-img
|
|
||||||
[rn/view {:margin-right 8}
|
|
||||||
[description-img]]
|
|
||||||
[rn/image
|
|
||||||
{:source {:uri description-user-icon}
|
|
||||||
:style {:width 32
|
|
||||||
:height 32
|
|
||||||
:border-radius 32
|
|
||||||
:margin-right 8}}]))
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex-direction (if horizontal-description?
|
|
||||||
:row
|
|
||||||
:column)}}
|
|
||||||
[text/text
|
|
||||||
{:size :paragraph-1
|
|
||||||
:weight :semi-bold
|
|
||||||
:style {:color text-color
|
|
||||||
:line-height 21}}
|
|
||||||
main-text]
|
|
||||||
(when description
|
|
||||||
[text/text
|
|
||||||
{:size :paragraph-2
|
|
||||||
:weight :medium
|
|
||||||
:style (cond-> {:padding-right 4
|
|
||||||
:color text-secondary-color
|
|
||||||
:line-height 18}
|
|
||||||
horizontal-description? (assoc :margin-left 4 :margin-top 2))}
|
|
||||||
description])]])
|
|
||||||
|
|
||||||
(defn- mid-section-view
|
|
||||||
[{:keys [horizontal-description? one-icon-align-left? type left-align?
|
|
||||||
main-text right-icon main-text-icon-color left-icon on-press avatar theme]
|
|
||||||
:as props}]
|
|
||||||
(let [text-color (colors/theme-colors colors/neutral-95 colors/neutral-5 theme)
|
|
||||||
text-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
|
||||||
component-instance [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
|
|
||||||
[rn/touchable-opacity {:on-press on-press}
|
|
||||||
[rn/view
|
|
||||||
{:style (merge
|
|
||||||
(if left-align?
|
|
||||||
align-left
|
|
||||||
centrify-style)
|
|
||||||
{:flex 1
|
|
||||||
:margin-left 4
|
|
||||||
:text-align-vertical :center})}
|
|
||||||
(case type
|
|
||||||
:text-only [text/text
|
|
||||||
{:size :paragraph-1
|
|
||||||
:weight :semi-bold
|
|
||||||
:style {:color text-color}}
|
|
||||||
main-text]
|
|
||||||
:user-avatar [rn/view {:style (assoc centrify-style :flex-direction :row)}
|
|
||||||
[user-avatar/user-avatar avatar]
|
|
||||||
[text/text
|
|
||||||
{:size :paragraph-1
|
|
||||||
:weight :semi-bold
|
|
||||||
:style {:padding-horizontal 4
|
|
||||||
:color text-color}}
|
|
||||||
main-text]]
|
|
||||||
:text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)}
|
|
||||||
[icons/icon left-icon
|
|
||||||
(icon-props main-text-icon-color :big)]
|
|
||||||
[text/text
|
|
||||||
{:size :paragraph-1
|
|
||||||
:weight :semi-bold
|
|
||||||
:style {:padding-horizontal 4
|
|
||||||
:color text-color}}
|
|
||||||
main-text]
|
|
||||||
[icons/icon right-icon
|
|
||||||
(icon-props main-text-icon-color :big)]]
|
|
||||||
:text-with-one-icon [rn/view {:style {:flex-direction :row}}
|
|
||||||
(if one-icon-align-left?
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex-direction :row
|
|
||||||
:align-items :center}}
|
|
||||||
(when horizontal-description?
|
|
||||||
[icons/icon left-icon
|
|
||||||
(icon-props main-text-icon-color :big)])
|
|
||||||
component-instance]
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex-direction :row
|
|
||||||
:align-items :center}}
|
|
||||||
component-instance
|
|
||||||
(when horizontal-description?
|
|
||||||
[icons/icon left-icon
|
|
||||||
(icon-props main-text-icon-color :big)])])]
|
|
||||||
:text-with-description component-instance)]]))
|
|
||||||
|
|
||||||
(defn- right-section-view
|
|
||||||
[right-section-buttons]
|
|
||||||
[rn/view
|
|
||||||
{:style (assoc centrify-style
|
|
||||||
:flex-direction :row
|
|
||||||
:justify-content :flex-end)}
|
|
||||||
(let [last-icon-index (-> right-section-buttons count dec)]
|
|
||||||
(map-indexed (fn [index
|
|
||||||
{:keys [icon on-press type style icon-background
|
|
||||||
accessibility-label label]
|
|
||||||
:or {type :grey}}]
|
|
||||||
^{:key index}
|
|
||||||
[rn/view
|
|
||||||
(cond-> {:style (assoc style
|
|
||||||
:margin-right
|
|
||||||
(if (= index last-icon-index) 0 8))}
|
|
||||||
accessibility-label (assoc :accessibility-label accessibility-label
|
|
||||||
:accessible true))
|
|
||||||
[button/button
|
|
||||||
{:on-press on-press
|
|
||||||
:icon-only? (not label)
|
|
||||||
:type type
|
|
||||||
:icon-left (when label icon)
|
|
||||||
:size 32
|
|
||||||
:background icon-background}
|
|
||||||
(if label label icon)]])
|
|
||||||
right-section-buttons))])
|
|
||||||
|
|
||||||
(defn- page-nav-internal
|
|
||||||
"[page-nav opts]
|
|
||||||
opts
|
|
||||||
{ :one-icon-align-left? true/false
|
|
||||||
:horizontal-description? true/false
|
|
||||||
:align-mid? true/false
|
|
||||||
:page-nav-color color
|
|
||||||
:page-nav-background-uri image-uri
|
|
||||||
:mid-section
|
|
||||||
{:type one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description :user-avatar
|
|
||||||
:icon icon
|
|
||||||
:main-text string
|
|
||||||
:left-icon icon
|
|
||||||
:right-icon icon
|
|
||||||
:description string
|
|
||||||
:description-color color
|
|
||||||
:description-icon icon
|
|
||||||
:description-user-icon icon
|
|
||||||
:description-img a render prop which will be used in place of :description-user-icon
|
|
||||||
:main-text-icon-color color
|
|
||||||
}
|
|
||||||
:left-section
|
|
||||||
{:type button-type
|
|
||||||
:on-press event
|
|
||||||
:icon icon
|
|
||||||
}
|
|
||||||
:right-section-buttons vector of
|
|
||||||
{:type button-type
|
|
||||||
:on-press event
|
|
||||||
:icon icon
|
|
||||||
}
|
|
||||||
:theme :light or :dark
|
|
||||||
}
|
|
||||||
"
|
|
||||||
[{:keys [container-style one-icon-align-left? horizontal-description?
|
|
||||||
align-mid? page-nav-color page-nav-background-uri
|
|
||||||
mid-section
|
|
||||||
left-section
|
|
||||||
right-section-buttons
|
|
||||||
theme]}]
|
|
||||||
(let [put-middle-section-on-left? (or align-mid?
|
|
||||||
(> (count right-section-buttons) 1))
|
|
||||||
mid-section-props
|
|
||||||
{:type (:type mid-section)
|
|
||||||
:theme theme
|
|
||||||
:horizontal-description? horizontal-description?
|
|
||||||
:description-img (:description-img mid-section)
|
|
||||||
:main-text (:main-text mid-section)
|
|
||||||
:main-text-icon-color (:main-text-icon-color mid-section)
|
|
||||||
:one-icon-align-left? one-icon-align-left?
|
|
||||||
:right-icon (:right-icon mid-section)
|
|
||||||
:icon (:icon mid-section)
|
|
||||||
:left-icon (:left-icon mid-section)
|
|
||||||
:avatar (:avatar mid-section)}]
|
|
||||||
[rn/view
|
|
||||||
{:style (cond-> (merge {:display :flex
|
|
||||||
:flex-direction :row
|
|
||||||
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
|
|
||||||
:align-items :center
|
|
||||||
:padding-horizontal 20
|
|
||||||
:height 56
|
|
||||||
:justify-content :space-between}
|
|
||||||
container-style)
|
|
||||||
page-nav-background-uri (assoc :background-color page-nav-color)
|
|
||||||
page-nav-color (assoc :background page-nav-background-uri))}
|
|
||||||
[rn/view
|
|
||||||
{:style {:flex 1
|
|
||||||
:flex-direction :row
|
|
||||||
:align-items :center}}
|
|
||||||
(when left-section
|
|
||||||
[left-section-view left-section put-middle-section-on-left?])
|
|
||||||
(when mid-section
|
|
||||||
(cond
|
|
||||||
put-middle-section-on-left?
|
|
||||||
[mid-section-view
|
|
||||||
(assoc mid-section-props
|
|
||||||
:left-align? true
|
|
||||||
:description (:description mid-section)
|
|
||||||
:description-color (:description-color mid-section)
|
|
||||||
:description-icon (:description-icon mid-section)
|
|
||||||
:align-mid? align-mid?
|
|
||||||
:description-user-icon (:description-user-icon mid-section))]
|
|
||||||
|
|
||||||
(not put-middle-section-on-left?)
|
|
||||||
[mid-section-view mid-section-props]))]
|
|
||||||
[right-section-view right-section-buttons]]))
|
|
||||||
|
|
||||||
(def page-nav (theme/with-theme page-nav-internal))
|
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
(ns quo2.components.navigation.page-nav.style
|
||||||
|
(:require [quo2.foundations.colors :as colors]))
|
||||||
|
|
||||||
|
(defn container
|
||||||
|
[margin-top]
|
||||||
|
{:margin-top margin-top
|
||||||
|
:padding-horizontal 20
|
||||||
|
:padding-vertical 12
|
||||||
|
:height 56
|
||||||
|
:flex-direction :row
|
||||||
|
:justify-content :space-between
|
||||||
|
:align-items :center})
|
||||||
|
|
||||||
|
(defn center-content-container
|
||||||
|
[centered?]
|
||||||
|
{:flex 1
|
||||||
|
:margin-horizontal 12
|
||||||
|
:flex-direction :row
|
||||||
|
:align-items :center
|
||||||
|
:justify-content (if centered? :center :flex-start)})
|
||||||
|
|
||||||
|
(def account-switcher-placeholder
|
||||||
|
{:width 32
|
||||||
|
:height 32
|
||||||
|
:border-radius 10
|
||||||
|
:background-color (colors/custom-color :purple 50)})
|
||||||
|
|
||||||
|
(def right-actions-container
|
||||||
|
{:flex-direction :row})
|
||||||
|
|
||||||
|
(def right-actions-spacing
|
||||||
|
{:width 12})
|
||||||
|
|
||||||
|
(def right-content-min-size
|
||||||
|
{:min-width 32 :min-height 32})
|
||||||
|
|
||||||
|
(def token-logo
|
||||||
|
{:width 16 :height 16})
|
||||||
|
|
||||||
|
(def token-name
|
||||||
|
{:margin-left 4
|
||||||
|
:text-align-vertical :center})
|
||||||
|
|
||||||
|
(defn token-abbreviation
|
||||||
|
[theme background]
|
||||||
|
(let [color (case background
|
||||||
|
:photo nil
|
||||||
|
:blur (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-40 theme)
|
||||||
|
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
|
||||||
|
{:margin-left 4
|
||||||
|
:color color
|
||||||
|
:text-align-vertical :center}))
|
||||||
|
|
||||||
|
(def channel-emoji
|
||||||
|
{:width 20 :height 20})
|
||||||
|
|
||||||
|
(defn channel-icon-color
|
||||||
|
[theme background]
|
||||||
|
(case background
|
||||||
|
:photo nil
|
||||||
|
:blur (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||||
|
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||||
|
|
||||||
|
(def channel-name
|
||||||
|
{:margin-horizontal 4
|
||||||
|
:text-align-vertical :center})
|
||||||
|
|
||||||
|
(def group-avatar-picture
|
||||||
|
{:margin-right 8})
|
||||||
|
|
||||||
|
(def title-description-container
|
||||||
|
{:height 32
|
||||||
|
:justify-content :center})
|
||||||
|
|
||||||
|
(def title-description-title
|
||||||
|
{:text-align-vertical :center})
|
||||||
|
|
||||||
|
(defn title-description-description
|
||||||
|
[theme background]
|
||||||
|
(let [color (case background
|
||||||
|
:photo (colors/theme-colors colors/neutral-80-opa-80-blur colors/white-opa-70 theme)
|
||||||
|
:blur (colors/theme-colors colors/neutral-80-opa-50 colors/white-opa-40 theme)
|
||||||
|
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
|
||||||
|
{:color color
|
||||||
|
:text-align-vertical :center}))
|
||||||
|
|
||||||
|
(def community-network-logo
|
||||||
|
{:width 24
|
||||||
|
:height 24
|
||||||
|
:margin-right 6})
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
(ns quo2.components.navigation.page-nav.view
|
||||||
|
(:require [quo2.components.avatars.group-avatar.view :as group-avatar]
|
||||||
|
[quo2.components.buttons.button.view :as button]
|
||||||
|
[quo2.components.dropdowns.dropdown :as dropdown]
|
||||||
|
[quo2.components.icon :as icons]
|
||||||
|
[quo2.components.markdown.text :as text]
|
||||||
|
[quo2.components.navigation.page-nav.style :as style]
|
||||||
|
[quo2.theme :as theme]
|
||||||
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
|
(def ^:private button-type
|
||||||
|
{:white :grey
|
||||||
|
:neutral-5 :dark-grey
|
||||||
|
:neutral-90 :grey
|
||||||
|
:neutral-95 :dark-grey
|
||||||
|
:neutral-100 :black
|
||||||
|
:photo :grey
|
||||||
|
:blur :grey})
|
||||||
|
|
||||||
|
(defn- page-nav-base
|
||||||
|
[{:keys [margin-top background on-press accessibility-label icon-name]
|
||||||
|
:or {background :white}}
|
||||||
|
& children]
|
||||||
|
(into [rn/view {:style (style/container margin-top)}
|
||||||
|
(when icon-name
|
||||||
|
[button/button
|
||||||
|
{:type (button-type background)
|
||||||
|
:icon-only? true
|
||||||
|
:size 32
|
||||||
|
:on-press on-press
|
||||||
|
:accessibility-label accessibility-label
|
||||||
|
:background (when (#{:photo :blur} background) background)}
|
||||||
|
icon-name])]
|
||||||
|
children))
|
||||||
|
|
||||||
|
(defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}])
|
||||||
|
|
||||||
|
(defn- add-right-buttons-xf
|
||||||
|
[max-actions background]
|
||||||
|
(comp (filter map?)
|
||||||
|
(take max-actions)
|
||||||
|
(map (fn [{:keys [icon-name label] :as button-props}]
|
||||||
|
[button/button
|
||||||
|
(assoc button-props
|
||||||
|
:type (button-type background)
|
||||||
|
:icon-only? icon-name
|
||||||
|
:size 32
|
||||||
|
:accessible true
|
||||||
|
:background (when (#{:photo :blur} background) background))
|
||||||
|
(or label icon-name)]))
|
||||||
|
(interpose [right-section-spacing])))
|
||||||
|
|
||||||
|
(defn- right-content
|
||||||
|
[{:keys [background content max-actions min-size? support-account-switcher?]
|
||||||
|
:or {support-account-switcher? true}}]
|
||||||
|
[rn/view (when min-size? {:style style/right-content-min-size})
|
||||||
|
(cond
|
||||||
|
;; TODO: use account-switcher when available (issue #16456)
|
||||||
|
(and support-account-switcher? (= content :account-switcher))
|
||||||
|
[rn/view {:style style/account-switcher-placeholder}]
|
||||||
|
|
||||||
|
(coll? content)
|
||||||
|
(into [rn/view {:style style/right-actions-container}]
|
||||||
|
(add-right-buttons-xf max-actions background)
|
||||||
|
content)
|
||||||
|
|
||||||
|
:else
|
||||||
|
nil)])
|
||||||
|
|
||||||
|
(defn- title-center
|
||||||
|
[{:keys [centered? title]}]
|
||||||
|
[rn/view {:style (style/center-content-container centered?)}
|
||||||
|
[text/text
|
||||||
|
{:weight :medium
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
title]])
|
||||||
|
|
||||||
|
(defn- dropdown-center
|
||||||
|
[{:keys [theme background dropdown-on-change dropdown-selected? dropdown-text]}]
|
||||||
|
(let [dropdown-type (cond
|
||||||
|
(= background :photo) :grey
|
||||||
|
(and (= theme :dark) (= background :blur)) :grey
|
||||||
|
:else :ghost)]
|
||||||
|
[rn/view {:style (style/center-content-container true)}
|
||||||
|
[dropdown/dropdown
|
||||||
|
{:type dropdown-type
|
||||||
|
:size 32
|
||||||
|
:on-change dropdown-on-change
|
||||||
|
:selected dropdown-selected?}
|
||||||
|
dropdown-text]]))
|
||||||
|
|
||||||
|
(defn- token-center
|
||||||
|
[{:keys [theme background token-logo token-name token-abbreviation]}]
|
||||||
|
[rn/view {:style (style/center-content-container false)}
|
||||||
|
[rn/image {:style style/token-logo :source token-logo}]
|
||||||
|
[text/text
|
||||||
|
{:style style/token-name
|
||||||
|
:weight :semi-bold
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
token-name]
|
||||||
|
[text/text
|
||||||
|
{:style (style/token-abbreviation theme background)
|
||||||
|
:weight :medium
|
||||||
|
:size :paragraph-2
|
||||||
|
:number-of-lines 1}
|
||||||
|
token-abbreviation]])
|
||||||
|
|
||||||
|
(defn- channel-center
|
||||||
|
[{:keys [theme background channel-emoji channel-name channel-icon]}]
|
||||||
|
[rn/view {:style (style/center-content-container false)}
|
||||||
|
[rn/text {:style style/channel-emoji}
|
||||||
|
channel-emoji]
|
||||||
|
[text/text
|
||||||
|
{:style style/channel-name
|
||||||
|
:weight :semi-bold
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
(str "# " channel-name)]
|
||||||
|
[icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])
|
||||||
|
|
||||||
|
(defn- title-description-center
|
||||||
|
[{:keys [background theme picture title description]}]
|
||||||
|
[rn/view {:style (style/center-content-container false)}
|
||||||
|
(when picture
|
||||||
|
[rn/view {:style style/group-avatar-picture}
|
||||||
|
[group-avatar/view {:picture picture :size 28}]])
|
||||||
|
[rn/view {:style style/title-description-container}
|
||||||
|
[text/text
|
||||||
|
{:style style/title-description-title
|
||||||
|
:weight :semi-bold
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
title]
|
||||||
|
[text/text
|
||||||
|
{:style (style/title-description-description theme background)
|
||||||
|
:weight :medium
|
||||||
|
:size :paragraph-2
|
||||||
|
:number-of-lines 1}
|
||||||
|
description]]])
|
||||||
|
|
||||||
|
(defn- community-network-center
|
||||||
|
[{:keys [type community-logo network-logo community-name network-name]}]
|
||||||
|
(let [community? (= type :community)
|
||||||
|
shown-logo (if community? community-logo network-logo)
|
||||||
|
shown-name (if community? community-name network-name)]
|
||||||
|
[rn/view {:style (style/center-content-container false)}
|
||||||
|
[rn/image
|
||||||
|
{:style style/community-network-logo
|
||||||
|
:source shown-logo}]
|
||||||
|
[text/text
|
||||||
|
{:weight :semi-bold
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
shown-name]]))
|
||||||
|
|
||||||
|
(defn- view-internal
|
||||||
|
[{:keys [type right-side background text-align]
|
||||||
|
:or {type :no-title
|
||||||
|
text-align :center
|
||||||
|
right-side :none
|
||||||
|
background :white}
|
||||||
|
:as props}]
|
||||||
|
(case type
|
||||||
|
:no-title
|
||||||
|
[page-nav-base props
|
||||||
|
[right-content {:background background :content right-side :max-actions 3}]]
|
||||||
|
|
||||||
|
:title
|
||||||
|
(let [centered? (= text-align :center)]
|
||||||
|
[page-nav-base props
|
||||||
|
[title-center (assoc props :centered? centered?)]
|
||||||
|
[right-content
|
||||||
|
{:background background
|
||||||
|
:content right-side
|
||||||
|
:max-actions (if centered? 1 3)
|
||||||
|
:min-size? centered?}]])
|
||||||
|
|
||||||
|
:dropdown
|
||||||
|
[page-nav-base props
|
||||||
|
[dropdown-center props]
|
||||||
|
[rn/view {:style style/right-actions-container}
|
||||||
|
(let [{button-icon :icon-name :as button-props} (first right-side)]
|
||||||
|
[button/button
|
||||||
|
(assoc button-props
|
||||||
|
:type (button-type background)
|
||||||
|
:icon-only? true
|
||||||
|
:size 32
|
||||||
|
:accessible true)
|
||||||
|
button-icon])]]
|
||||||
|
|
||||||
|
:token
|
||||||
|
[page-nav-base props
|
||||||
|
[token-center props]
|
||||||
|
[right-content {:background background :content right-side :max-actions 3}]]
|
||||||
|
|
||||||
|
:channel
|
||||||
|
[page-nav-base props
|
||||||
|
[channel-center props]
|
||||||
|
[right-content
|
||||||
|
{:background background
|
||||||
|
:content right-side
|
||||||
|
:max-actions 3
|
||||||
|
:support-account-switcher? false}]]
|
||||||
|
|
||||||
|
:title-description
|
||||||
|
[page-nav-base props
|
||||||
|
[title-description-center props]
|
||||||
|
[right-content
|
||||||
|
{:background background
|
||||||
|
:content right-side
|
||||||
|
:max-actions 2
|
||||||
|
:support-account-switcher? false}]]
|
||||||
|
|
||||||
|
:wallet-networks
|
||||||
|
[page-nav-base props
|
||||||
|
;; TODO: use wallet-networks when available (issue #16946)
|
||||||
|
[rn/view {:style (style/center-content-container true)}
|
||||||
|
[text/text
|
||||||
|
{:weight :regular
|
||||||
|
:size :paragraph-1
|
||||||
|
:number-of-lines 1}
|
||||||
|
"NETWORK DROPDOWN"]]
|
||||||
|
[right-content
|
||||||
|
{:background background
|
||||||
|
:content right-side
|
||||||
|
:max-actions 1
|
||||||
|
:min-size? true}]]
|
||||||
|
|
||||||
|
(:community :network)
|
||||||
|
[page-nav-base props
|
||||||
|
[community-network-center props]
|
||||||
|
[right-content
|
||||||
|
{:background background
|
||||||
|
:content right-side
|
||||||
|
:max-actions 3
|
||||||
|
:support-account-switcher? false}]]
|
||||||
|
|
||||||
|
nil))
|
||||||
|
|
||||||
|
(def page-nav
|
||||||
|
"Props:
|
||||||
|
- type: defaults to `:no-title`.
|
||||||
|
- background:
|
||||||
|
`:white`, `:neutral-5`, `:neutral-90`, `:neutral-95`, `:neutral-100`, `:photo` or `:blur`
|
||||||
|
- accessibility-label
|
||||||
|
- on-press: callback for left button
|
||||||
|
- icon-name: icon for left button
|
||||||
|
- right-side (optional):
|
||||||
|
- The `:account-switcher` keyword
|
||||||
|
- vector of maps to render buttons, e.g.:
|
||||||
|
{:icon-name :i/my-icon
|
||||||
|
:on-press (fn callback [] nil)
|
||||||
|
:accessibility-label \"an optional label\"}
|
||||||
|
|
||||||
|
Depending on the `type` selected, different properties are accepted:
|
||||||
|
`:title`
|
||||||
|
- title
|
||||||
|
- text-align: `:center` or `:left`
|
||||||
|
`:dropdown`
|
||||||
|
- dropdown-on-change: a callback
|
||||||
|
- dropdown-selected?: a boolean
|
||||||
|
- dropdown-text
|
||||||
|
`:token`
|
||||||
|
- token-logo: a valid rn/image `:source` value
|
||||||
|
- token-name: string
|
||||||
|
- token-abbreviation: string
|
||||||
|
`:channel`
|
||||||
|
- channel-emoji: an emoji in a string
|
||||||
|
- channel-name
|
||||||
|
- channel-icon: an icon keyword (:i/members, :i/lock, etc.)
|
||||||
|
`:title-description`
|
||||||
|
- title
|
||||||
|
- description
|
||||||
|
- picture: a valid rn/image `:source` value
|
||||||
|
`:wallet-network`
|
||||||
|
(Not implemented yet)
|
||||||
|
`:community`
|
||||||
|
- community-name
|
||||||
|
- community-logo: a valid rn/image `:source` value
|
||||||
|
`:network`
|
||||||
|
- network-name
|
||||||
|
- network-logo a valid rn/image `:source` value"
|
||||||
|
(theme/with-theme view-internal))
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
quo2.components.messages.gap
|
quo2.components.messages.gap
|
||||||
quo2.components.messages.system-message
|
quo2.components.messages.system-message
|
||||||
quo2.components.navigation.floating-shell-button.view
|
quo2.components.navigation.floating-shell-button.view
|
||||||
quo2.components.navigation.page-nav
|
quo2.components.navigation.page-nav.view
|
||||||
quo2.components.notifications.activity-log.view
|
quo2.components.notifications.activity-log.view
|
||||||
quo2.components.notifications.activity-logs-photos.view
|
quo2.components.notifications.activity-logs-photos.view
|
||||||
quo2.components.notifications.count-down-circle
|
quo2.components.notifications.count-down-circle
|
||||||
|
|
@ -251,7 +251,7 @@
|
||||||
|
|
||||||
;;;; Navigation
|
;;;; Navigation
|
||||||
(def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
|
(def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
|
||||||
(def page-nav quo2.components.navigation.page-nav/page-nav)
|
(def page-nav quo2.components.navigation.page-nav.view/page-nav)
|
||||||
|
|
||||||
;;;; Markdown
|
;;;; Markdown
|
||||||
(def markdown-list quo2.components.markdown.list.view/view)
|
(def markdown-list quo2.components.markdown.list.view/view)
|
||||||
|
|
|
||||||
|
|
@ -236,16 +236,14 @@
|
||||||
[kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
|
[kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
|
||||||
[:<>
|
[:<>
|
||||||
[quo2/page-nav
|
[quo2/page-nav
|
||||||
{:align-mid? true
|
{:type :title
|
||||||
:mid-section {:type :text-only
|
:text-align :left
|
||||||
:main-text (i18n/label :t/send-transaction)}
|
:title (i18n/label :t/send-transaction)
|
||||||
|
:icon-name :i/arrow-left
|
||||||
:left-section {:on-press #(do
|
:on-press (fn []
|
||||||
(re-frame/dispatch [:navigate-back])
|
(re-frame/dispatch [:navigate-back])
|
||||||
(re-frame/dispatch
|
(re-frame/dispatch [:wallet/cancel-transaction-command]))
|
||||||
[:wallet/cancel-transaction-command]))
|
:accessibility-label :back-button}]
|
||||||
:icon :i/arrow-left
|
|
||||||
:accessibility-label :back-button}}]
|
|
||||||
[react/scroll-view
|
[react/scroll-view
|
||||||
{:style {:flex 1}
|
{:style {:flex 1}
|
||||||
:keyboard-should-persist-taps :handled}
|
:keyboard-should-persist-taps :handled}
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
(min maximum)))
|
(min maximum)))
|
||||||
|
|
||||||
(defn f-scroll-page-header
|
(defn f-scroll-page-header
|
||||||
[scroll-height height name page-nav logo sticky-header top-nav title-colum navigate-back?]
|
[scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back?]
|
||||||
(let [input-range (if platform/ios? [-47 10] [0 10])
|
(let [input-range (if platform/ios? [-47 10] [0 10])
|
||||||
output-range (if platform/ios? [-208 0] [-208 -45])
|
output-range (if platform/ios? [-208 0] [-208 -45])
|
||||||
y (reanimated/use-shared-value scroll-height)
|
y (reanimated/use-shared-value scroll-height)
|
||||||
|
|
@ -64,26 +64,15 @@
|
||||||
(if top-nav
|
(if top-nav
|
||||||
[rn/view {:style {:margin-top (if platform/ios? 44 0)}}
|
[rn/view {:style {:margin-top (if platform/ios? 44 0)}}
|
||||||
top-nav]
|
top-nav]
|
||||||
[rn/view {:style {:margin-top 44}}
|
[quo/page-nav
|
||||||
[quo/page-nav
|
(cond-> {:margin-top 44
|
||||||
(merge
|
:type :no-title
|
||||||
{:horizontal-description? true
|
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
||||||
:one-icon-align-left? true
|
:blur
|
||||||
:align-mid? false
|
:photo)
|
||||||
:page-nav-color :transparent
|
:right-side page-nav-right-side}
|
||||||
:mid-section {:type :text-with-description
|
navigate-back? (assoc :icon-name :i/close
|
||||||
:main-text nil
|
:on-press #(rf/dispatch [:navigate-back])))])
|
||||||
:description-img nil}
|
|
||||||
:right-section-buttons (if (= 1 reanimated/get-shared-value opacity-animation)
|
|
||||||
(assoc page-nav :icon-background :blur)
|
|
||||||
page-nav)}
|
|
||||||
(when navigate-back?
|
|
||||||
{:left-section {:icon :i/close
|
|
||||||
:type :grey
|
|
||||||
:icon-background (if (= 1 reanimated/get-shared-value opacity-animation)
|
|
||||||
:blur
|
|
||||||
:photo)
|
|
||||||
:on-press #(rf/dispatch [:navigate-back])}}))]])
|
|
||||||
(when title-colum
|
(when title-colum
|
||||||
title-colum)
|
title-colum)
|
||||||
sticky-header]]))
|
sticky-header]]))
|
||||||
|
|
|
||||||
|
|
@ -297,14 +297,11 @@
|
||||||
|
|
||||||
(defn page-nav-right-section-buttons
|
(defn page-nav-right-section-buttons
|
||||||
[id]
|
[id]
|
||||||
[{:icon :i/options
|
[{:icon-name :i/options
|
||||||
:type :grey
|
|
||||||
:icon-background :photo
|
|
||||||
:accessibility-label :community-options-for-community
|
:accessibility-label :community-options-for-community
|
||||||
:on-press #(rf/dispatch
|
:on-press #(rf/dispatch
|
||||||
[:show-bottom-sheet
|
[:show-bottom-sheet
|
||||||
{:content (fn []
|
{:content (fn [] [options/community-options-bottom-sheet id])}])}])
|
||||||
[options/community-options-bottom-sheet id])}])}])
|
|
||||||
|
|
||||||
(defn pick-first-category-by-height
|
(defn pick-first-category-by-height
|
||||||
[scroll-height first-channel-height categories-heights]
|
[scroll-height first-channel-height categories-heights]
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
(ns status-im2.contexts.onboarding.common.navigation-bar.view
|
|
||||||
(:require [quo2.core :as quo]
|
|
||||||
[react-native.core :as rn]
|
|
||||||
[utils.re-frame :as rf]))
|
|
||||||
|
|
||||||
(defn navigation-bar
|
|
||||||
[{:keys [top right-section-buttons disable-back-button? stack-id]}]
|
|
||||||
(let [back-event (if stack-id [:navigate-back-within-stack stack-id] [:navigate-back])]
|
|
||||||
[rn/view
|
|
||||||
{:style {:height 56
|
|
||||||
:margin-top top}}
|
|
||||||
[quo/page-nav
|
|
||||||
{:align-mid? true
|
|
||||||
:mid-section {:type :text-only :main-text ""}
|
|
||||||
:left-section {:type :grey
|
|
||||||
:icon-background :blur
|
|
||||||
:icon :i/arrow-left
|
|
||||||
:on-press (fn []
|
|
||||||
(when-not disable-back-button?
|
|
||||||
(rf/dispatch back-event)))}
|
|
||||||
:right-section-buttons right-section-buttons}]]))
|
|
||||||
|
|
@ -1,16 +1,14 @@
|
||||||
(ns status-im2.contexts.onboarding.create-password.view
|
(ns status-im2.contexts.onboarding.create-password.view
|
||||||
(:require
|
(:require [oops.core :refer [ocall]]
|
||||||
[oops.core :refer [ocall]]
|
[quo2.core :as quo]
|
||||||
[quo2.core :as quo]
|
[react-native.core :as rn]
|
||||||
[react-native.core :as rn]
|
[react-native.safe-area :as safe-area]
|
||||||
[react-native.safe-area :as safe-area]
|
[reagent.core :as reagent]
|
||||||
[reagent.core :as reagent]
|
[status-im2.contexts.onboarding.create-password.style :as style]
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
[utils.i18n :as i18n]
|
||||||
[status-im2.contexts.onboarding.create-password.style :as style]
|
[utils.re-frame :as rf]
|
||||||
[utils.i18n :as i18n]
|
[utils.security.core :as security]
|
||||||
[utils.re-frame :as rf]
|
[utils.string :as utils.string]))
|
||||||
[utils.security.core :as security]
|
|
||||||
[utils.string :as utils.string]))
|
|
||||||
|
|
||||||
(defn header
|
(defn header
|
||||||
[]
|
[]
|
||||||
|
|
@ -214,13 +212,13 @@
|
||||||
:accessible false}
|
:accessible false}
|
||||||
[rn/view {:style style/flex-fill}
|
[rn/view {:style style/flex-fill}
|
||||||
[rn/keyboard-avoiding-view {:style style/flex-fill}
|
[rn/keyboard-avoiding-view {:style style/flex-fill}
|
||||||
[navigation-bar/navigation-bar
|
[quo/page-nav
|
||||||
{:stack-id :new-to-status
|
{:margin-top top
|
||||||
:top top
|
:background :blur
|
||||||
:right-section-buttons [{:type :grey
|
:icon-name :i/arrow-left
|
||||||
:icon-background :blur
|
:on-press #(rf/dispatch [:navigate-back-within-stack :new-to-status])
|
||||||
:icon :i/info
|
:right-side [{:icon-name :i/info
|
||||||
:on-press on-press-info}]}]
|
:on-press on-press-info}]}]
|
||||||
[password-form]
|
[password-form]
|
||||||
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
|
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
|
||||||
(finally
|
(finally
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,11 @@
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.blur :as blur]
|
[react-native.blur :as blur]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.hooks :as hooks]
|
||||||
[react-native.platform :as platform]
|
[react-native.platform :as platform]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[react-native.hooks :as hooks]
|
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im2.constants :as c]
|
[status-im2.constants :as c]
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
|
||||||
[status-im2.contexts.onboarding.create-profile.style :as style]
|
[status-im2.contexts.onboarding.create-profile.style :as style]
|
||||||
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
|
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
|
|
@ -133,9 +132,11 @@
|
||||||
keyboard-shown
|
keyboard-shown
|
||||||
@content-scroll-y)]
|
@content-scroll-y)]
|
||||||
[rn/view {:style style/page-container}
|
[rn/view {:style style/page-container}
|
||||||
[navigation-bar/navigation-bar
|
[quo/page-nav
|
||||||
{:stack-id :new-to-status
|
{:margin-top navigation-bar-top
|
||||||
:top navigation-bar-top}]
|
:background :blur
|
||||||
|
:icon-name :i/arrow-left
|
||||||
|
:on-press #(rf/dispatch [:navigate-back])}]
|
||||||
[rn/scroll-view
|
[rn/scroll-view
|
||||||
{:on-layout (fn [event]
|
{:on-layout (fn [event]
|
||||||
(let [height (oops/oget event "nativeEvent.layout.height")]
|
(let [height (oops/oget event "nativeEvent.layout.height")]
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,13 @@
|
||||||
(:require [quo2.core :as quo]
|
(:require [quo2.core :as quo]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[status-im2.contexts.onboarding.enable-biometrics.style :as style]
|
[status-im2.common.biometric.events :as biometric]
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[utils.re-frame :as rf]
|
|
||||||
[status-im2.common.resources :as resources]
|
|
||||||
[status-im2.common.parallax.view :as parallax]
|
[status-im2.common.parallax.view :as parallax]
|
||||||
[status-im2.common.parallax.whitelist :as whitelist]
|
[status-im2.common.parallax.whitelist :as whitelist]
|
||||||
[status-im2.common.biometric.events :as biometric]))
|
[status-im2.common.resources :as resources]
|
||||||
|
[status-im2.contexts.onboarding.enable-biometrics.style :as style]
|
||||||
|
[utils.i18n :as i18n]
|
||||||
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(defn page-title
|
(defn page-title
|
||||||
[]
|
[]
|
||||||
|
|
@ -48,7 +47,7 @@
|
||||||
{:layers (:biometrics resources/parallax-video)
|
{:layers (:biometrics resources/parallax-video)
|
||||||
:stretch stretch}]
|
:stretch stretch}]
|
||||||
[rn/view
|
[rn/view
|
||||||
[navigation-bar/navigation-bar {:disable-back-button? true}]
|
[quo/page-nav {:background :blur}]
|
||||||
[page-title]]]))
|
[page-title]]]))
|
||||||
|
|
||||||
(defn enable-biometrics-simple
|
(defn enable-biometrics-simple
|
||||||
|
|
@ -56,7 +55,7 @@
|
||||||
(let [width (:width (rn/get-window))]
|
(let [width (:width (rn/get-window))]
|
||||||
[:<>
|
[:<>
|
||||||
[rn/view {:flex 1}
|
[rn/view {:flex 1}
|
||||||
[navigation-bar/navigation-bar {:disable-back-button? true}]
|
[quo/page-nav {:background :blur}]
|
||||||
[page-title]
|
[page-title]
|
||||||
[rn/view {:style {:flex 1}}
|
[rn/view {:style {:flex 1}}
|
||||||
[rn/image
|
[rn/image
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
(ns status-im2.contexts.onboarding.enable-notifications.view
|
(ns status-im2.contexts.onboarding.enable-notifications.view
|
||||||
(:require
|
(:require [quo2.core :as quo]
|
||||||
[quo2.core :as quo]
|
[react-native.core :as rn]
|
||||||
[utils.i18n :as i18n]
|
[react-native.platform :as platform]
|
||||||
[utils.re-frame :as rf]
|
[react-native.safe-area :as safe-area]
|
||||||
[react-native.core :as rn]
|
[status-im.notifications.core :as notifications]
|
||||||
[react-native.platform :as platform]
|
[status-im2.contexts.onboarding.enable-notifications.style :as style]
|
||||||
[react-native.safe-area :as safe-area]
|
[status-im2.contexts.shell.jump-to.utils :as shell.utils]
|
||||||
[status-im.notifications.core :as notifications]
|
[utils.i18n :as i18n]
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
[utils.re-frame :as rf]))
|
||||||
[status-im2.contexts.onboarding.enable-notifications.style :as style]
|
|
||||||
[status-im2.contexts.shell.jump-to.utils :as shell.utils]))
|
|
||||||
|
|
||||||
(defn page-title
|
(defn page-title
|
||||||
[]
|
[]
|
||||||
|
|
@ -50,9 +48,10 @@
|
||||||
[]
|
[]
|
||||||
(let [insets (safe-area/get-insets)]
|
(let [insets (safe-area/get-insets)]
|
||||||
[rn/view {:style (style/page-container insets)}
|
[rn/view {:style (style/page-container insets)}
|
||||||
[navigation-bar/navigation-bar
|
[quo/page-nav
|
||||||
{:stack-id :enable-notifications
|
{:background :blur
|
||||||
:disable-back-button? true}]
|
:icon-name :i/arrow-left
|
||||||
|
:on-press #(rf/dispatch [:navigate-back-within-stack :identifiers])}]
|
||||||
[page-title]
|
[page-title]
|
||||||
[rn/view {:style style/page-illustration}
|
[rn/view {:style style/page-illustration}
|
||||||
[quo/text
|
[quo/text
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.ethereum.mnemonic :as mnemonic]
|
[status-im.ethereum.mnemonic :as mnemonic]
|
||||||
[status-im2.constants :as constants]
|
[status-im2.constants :as constants]
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
|
||||||
[status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
|
[status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
|
|
@ -160,7 +159,9 @@
|
||||||
(let [{navigation-bar-top :top} (safe-area/get-insets)]
|
(let [{navigation-bar-top :top} (safe-area/get-insets)]
|
||||||
[rn/view {:style style/full-layout}
|
[rn/view {:style style/full-layout}
|
||||||
[rn/keyboard-avoiding-view {:style style/page-container}
|
[rn/keyboard-avoiding-view {:style style/page-container}
|
||||||
[navigation-bar/navigation-bar
|
[quo/page-nav
|
||||||
{:stack-id :new-to-status
|
{:margin-top navigation-bar-top
|
||||||
:top navigation-bar-top}]
|
:background :blur
|
||||||
|
:icon-name :i/arrow-left
|
||||||
|
:on-press #(rf/dispatch [:navigate-back-within-stack :new-to-status])}]
|
||||||
[screen]]]))
|
[screen]]]))
|
||||||
|
|
|
||||||
|
|
@ -98,37 +98,21 @@
|
||||||
:style style/doc-content}
|
:style style/doc-content}
|
||||||
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
|
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
|
||||||
|
|
||||||
(defn navigation-bar
|
|
||||||
[top]
|
|
||||||
[rn/view
|
|
||||||
{:style {:height 56
|
|
||||||
:margin-top top}}
|
|
||||||
[quo/page-nav
|
|
||||||
{:align-mid? true
|
|
||||||
:mid-section {:type :text-only :main-text ""}
|
|
||||||
:left-section {:type :grey
|
|
||||||
:icon-background :blur
|
|
||||||
:icon :i/arrow-left
|
|
||||||
:on-press navigate-back}
|
|
||||||
:right-section-buttons (cond-> [{:type :grey
|
|
||||||
:icon :i/info
|
|
||||||
:icon-background :blur
|
|
||||||
:on-press #(rf/dispatch
|
|
||||||
[:show-bottom-sheet
|
|
||||||
{:content getting-started-doc
|
|
||||||
:shell? true}])}]
|
|
||||||
|
|
||||||
config/quo-preview-enabled?
|
|
||||||
(conj {:type :grey
|
|
||||||
:icon :i/reveal-whitelist
|
|
||||||
:icon-background :blur
|
|
||||||
:on-press #(rf/dispatch [:navigate-to
|
|
||||||
:quo2-preview])}))}]])
|
|
||||||
|
|
||||||
(defn new-to-status
|
(defn new-to-status
|
||||||
[]
|
[]
|
||||||
(let [{:keys [top]} (safe-area/get-insets)]
|
(let [{:keys [top]} (safe-area/get-insets)]
|
||||||
[:<>
|
[rn/view {:style style/content-container}
|
||||||
[rn/view {:style style/content-container}
|
[quo/page-nav
|
||||||
[navigation-bar top]
|
{:margin-top top
|
||||||
[sign-in-options]]]))
|
:type :no-title
|
||||||
|
:background :blur
|
||||||
|
:icon-name :i/arrow-left
|
||||||
|
:on-press navigate-back
|
||||||
|
:right-side [{:icon-name :i/info
|
||||||
|
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||||
|
{:content getting-started-doc
|
||||||
|
:shell? true}])}
|
||||||
|
(when config/quo-preview-enabled?
|
||||||
|
{:icon-name :i/reveal-whitelist
|
||||||
|
:on-press #(rf/dispatch [:navigate-to :quo2-preview])})]}]
|
||||||
|
[sign-in-options]]))
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||||
[rn/view {:style (style/page-container in-onboarding?)}
|
[rn/view {:style (style/page-container in-onboarding?)}
|
||||||
(when-not in-onboarding? [background/view true])
|
(when-not in-onboarding? [background/view true])
|
||||||
[quo/page-nav]
|
[quo/page-nav {:type :no-title :background :blur}]
|
||||||
[page-title (pairing-progress pairing-status)]
|
[page-title (pairing-progress pairing-status)]
|
||||||
(if (pairing-progress pairing-status)
|
(if (pairing-progress pairing-status)
|
||||||
[rn/view {:style style/page-illustration}
|
[rn/view {:style style/page-illustration}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
(ns status-im2.contexts.onboarding.welcome.view
|
(ns status-im2.contexts.onboarding.welcome.view
|
||||||
(:require
|
(:require [quo2.core :as quo]
|
||||||
[quo2.core :as quo]
|
[re-frame.core :as re-frame]
|
||||||
[quo2.foundations.colors :as colors]
|
[react-native.core :as rn]
|
||||||
[utils.i18n :as i18n]
|
[react-native.safe-area :as safe-area]
|
||||||
[utils.re-frame :as rf]
|
[status-im2.constants :as constants]
|
||||||
[re-frame.core :as re-frame]
|
[status-im2.contexts.onboarding.welcome.style :as style]
|
||||||
[react-native.core :as rn]
|
[utils.i18n :as i18n]
|
||||||
[react-native.safe-area :as safe-area]
|
[utils.re-frame :as rf]))
|
||||||
[status-im2.constants :as constants]
|
|
||||||
[status-im2.contexts.onboarding.welcome.style :as style]))
|
|
||||||
|
|
||||||
(defn page-title
|
(defn page-title
|
||||||
[]
|
[]
|
||||||
|
|
@ -22,22 +20,6 @@
|
||||||
:subtitle (i18n/label :t/welcome-to-web3-sub-title)
|
:subtitle (i18n/label :t/welcome-to-web3-sub-title)
|
||||||
:subtitle-accessibility-label :welcome-sub-title}]))
|
:subtitle-accessibility-label :welcome-sub-title}]))
|
||||||
|
|
||||||
(defn navigation-bar
|
|
||||||
[root]
|
|
||||||
[quo/page-nav
|
|
||||||
{:horizontal-description? false
|
|
||||||
:one-icon-align-left? true
|
|
||||||
:align-mid? false
|
|
||||||
:page-nav-color :transparent
|
|
||||||
:left-section {:icon :i/arrow-left
|
|
||||||
;TODO this is wrong - page nav needs updating
|
|
||||||
;https://github.com/status-im/status-mobile/issues/16535
|
|
||||||
; should be type:grey, and page nav can use background instead.
|
|
||||||
:icon-background-color colors/white-opa-5
|
|
||||||
:type :grey
|
|
||||||
:on-press #(rf/dispatch [:navigate-back-within-stack
|
|
||||||
root])}}])
|
|
||||||
|
|
||||||
(defn dispatch-visibility-status-update
|
(defn dispatch-visibility-status-update
|
||||||
[status-type]
|
[status-type]
|
||||||
(re-frame/dispatch
|
(re-frame/dispatch
|
||||||
|
|
@ -51,7 +33,11 @@
|
||||||
[rn/view {:style (style/page-container insets)}
|
[rn/view {:style (style/page-container insets)}
|
||||||
(when (nil? status-type)
|
(when (nil? status-type)
|
||||||
(dispatch-visibility-status-update constants/visibility-status-automatic))
|
(dispatch-visibility-status-update constants/visibility-status-automatic))
|
||||||
[navigation-bar :enable-notifications]
|
[quo/page-nav
|
||||||
|
{:type :no-title
|
||||||
|
:background :blur
|
||||||
|
:icon-name :i/arrow-left
|
||||||
|
:on-press #(rf/dispatch [:navigate-back-within-stack :enable-notifications])}]
|
||||||
[page-title]
|
[page-title]
|
||||||
[rn/view {:style style/page-illustration}
|
[rn/view {:style style/page-illustration}
|
||||||
[quo/text
|
[quo/text
|
||||||
|
|
|
||||||
|
|
@ -33,14 +33,12 @@
|
||||||
:favicon? false
|
:favicon? false
|
||||||
:placeholder "Search or enter dapp domain"
|
:placeholder "Search or enter dapp domain"
|
||||||
:locked? false})]
|
:locked? false})]
|
||||||
[rn/keyboard-avoiding-view
|
[rn/keyboard-avoiding-view {:style {:flex 1 :padding-top top}}
|
||||||
{:style {:flex 1 :padding-top top}}
|
|
||||||
[quo/page-nav
|
[quo/page-nav
|
||||||
{:align-mid? true
|
{:type :no-title
|
||||||
:mid-section {:type :text-only :main-text ""}
|
:icon-name :i/arrow-left
|
||||||
:left-section {:icon :i/arrow-left
|
:on-press #(rf/dispatch [:navigate-back])}]
|
||||||
:on-press
|
|
||||||
#(rf/dispatch [:navigate-back])}}]
|
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:header [preview/customizer state descriptor]
|
{:header [preview/customizer state descriptor]
|
||||||
:key-fn str
|
:key-fn str
|
||||||
|
|
|
||||||
|
|
@ -378,19 +378,15 @@
|
||||||
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
|
has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
|
||||||
root (if has-profiles? :profiles :intro)]
|
root (if has-profiles? :profiles :intro)]
|
||||||
[quo/page-nav
|
[quo/page-nav
|
||||||
{:align-mid? true
|
{:type :title
|
||||||
:mid-section {:type :text-only
|
:title "Quo2 components preview"
|
||||||
:main-text "Quo2 components preview"}
|
:text-align :left
|
||||||
:left-section {:icon :i/close
|
:icon-name :i/close
|
||||||
:on-press (fn []
|
:on-press #(if logged-in?
|
||||||
(cond
|
(rf/dispatch [:navigate-back])
|
||||||
logged-in?
|
(do
|
||||||
(rf/dispatch [:navigate-back])
|
(theme/set-theme :dark)
|
||||||
|
(rf/dispatch [:init-root root])))}]))
|
||||||
:else
|
|
||||||
(do
|
|
||||||
(theme/set-theme :dark)
|
|
||||||
(rf/dispatch [:init-root root]))))}}]))
|
|
||||||
|
|
||||||
(defn- theme-switcher
|
(defn- theme-switcher
|
||||||
[]
|
[]
|
||||||
|
|
|
||||||
|
|
@ -1,132 +1,299 @@
|
||||||
(ns status-im2.contexts.quo-preview.navigation.page-nav
|
(ns status-im2.contexts.quo-preview.navigation.page-nav
|
||||||
(:require [quo2.components.navigation.page-nav :as quo2]
|
(:require [clojure.string :as string]
|
||||||
|
[quo2.core :as quo]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
|
[quo2.theme :as quo.theme]
|
||||||
|
[react-native.blur :as blur]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
|
[status-im2.common.resources :as resources]
|
||||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||||
|
|
||||||
(def ^:private descriptor
|
(def ^:private main-descriptor
|
||||||
[{:label "Page nav variation"
|
[{:label "Type"
|
||||||
:key :selected-variation
|
:key :type
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key :text-only?
|
:options [{:key :no-title
|
||||||
:value "Text only"}
|
:value "No Title"}
|
||||||
{:key :align-left?
|
{:key :title
|
||||||
:value "Align Left"}
|
:value "Title"}
|
||||||
{:key :align-left-top-down-text?
|
{:key :dropdown
|
||||||
:value "Align left top down text?"}
|
:value "Dropdown"}
|
||||||
{:key :align-left-with-icon?
|
{:key :token
|
||||||
:value "Align Left with icon ?"}
|
:value "Token"}
|
||||||
{:key :one-icon-align-left?
|
{:key :channel
|
||||||
:value "One icon on the left ?"}
|
:value "Channel"}
|
||||||
{:key :one-icon-align-right?
|
{:key :title-description
|
||||||
:value "One icon on the right ?"}
|
:value "Title + Description"}
|
||||||
{:key :two-icons?
|
{:key :wallet-networks
|
||||||
:value "Two icons ?"}
|
:value "Wallet Networks"}
|
||||||
{:key :user-icon?
|
{:key :community
|
||||||
:value "User icon ?"}
|
:value "Community"}
|
||||||
{:key :empty?
|
{:key :network
|
||||||
:value "Empty ?"}]}
|
:value "Network"}]}
|
||||||
{:label "Number of right icons"
|
{:label "Background"
|
||||||
:key :number-of-right-icons
|
:key :background
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key 1
|
:options (map (fn [bg-type]
|
||||||
:value 1}
|
{:key bg-type
|
||||||
{:key 2
|
:value (string/capitalize (name bg-type))})
|
||||||
:value 2}
|
[:white :neutral-5 :neutral-90 :neutral-95 :neutral-100 :photo :blur])}
|
||||||
{:key 3
|
{:label "Icon"
|
||||||
:value 3}]}])
|
:key :icon-name
|
||||||
|
:type :select
|
||||||
|
:options [{:key :i/placeholder
|
||||||
|
:value "Placeholder"}
|
||||||
|
{:key :i/arrow-left
|
||||||
|
:value "Arrow left"}]}])
|
||||||
|
|
||||||
(def ^:private selected-variation
|
|
||||||
(reagent/atom {:selected-variation :text-only?
|
(def right-side-options
|
||||||
:number-of-right-icons 1}))
|
(let [options [{:icon-name :i/save :on-press #(js/alert "SAVE")}
|
||||||
|
{:icon-name :i/mark-as-read :on-press #(js/alert "MARK AS READ")}
|
||||||
|
{:icon-name :i/mention :on-press #(js/alert "A MENTION!")}]]
|
||||||
|
[{:key []
|
||||||
|
:value "No actions"}
|
||||||
|
{:key (take 1 options)
|
||||||
|
:value "1 action"}
|
||||||
|
{:key (take 2 options)
|
||||||
|
:value "2 actions"}
|
||||||
|
{:key (take 3 options)
|
||||||
|
:value "3 actions"}]))
|
||||||
|
|
||||||
|
(def account-switcher
|
||||||
|
{:key :account-switcher
|
||||||
|
:value "Account-switcher"})
|
||||||
|
|
||||||
|
(def no-title-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options (conj right-side-options account-switcher)}])
|
||||||
|
|
||||||
|
(def title-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options (conj right-side-options account-switcher)}
|
||||||
|
{:label "Title"
|
||||||
|
:key :title
|
||||||
|
:type :text}
|
||||||
|
{:label "Text Align"
|
||||||
|
:key :text-align
|
||||||
|
:type :select
|
||||||
|
:options [{:key :left
|
||||||
|
:value "Left"}
|
||||||
|
{:key :center
|
||||||
|
:value "Center"}]}])
|
||||||
|
|
||||||
|
(def dropdown-descriptor
|
||||||
|
[{:label "Dropdown Selected?"
|
||||||
|
:key :dropdown-selected?
|
||||||
|
:type :boolean}
|
||||||
|
{:label "Dropdown Text"
|
||||||
|
:key :dropdown-text
|
||||||
|
:type :text}])
|
||||||
|
|
||||||
|
(def token-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options (conj right-side-options account-switcher)}
|
||||||
|
|
||||||
|
{:label "Token Logo"
|
||||||
|
:key :token-logo
|
||||||
|
:type :select
|
||||||
|
:options [{:key (resources/get-mock-image :status-logo)
|
||||||
|
:value "Status logo"}
|
||||||
|
{:key (resources/get-mock-image :rarible)
|
||||||
|
:value "Rarible"}]}
|
||||||
|
|
||||||
|
{:label "Token Name"
|
||||||
|
:key :token-name
|
||||||
|
:type :text}
|
||||||
|
{:label "Token Abbreviation"
|
||||||
|
:key :token-abbreviation
|
||||||
|
:type :text}])
|
||||||
|
|
||||||
|
(def channel-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options right-side-options}
|
||||||
|
|
||||||
|
{:label "Channel Emoji"
|
||||||
|
:key :channel-emoji
|
||||||
|
:type :select
|
||||||
|
:options [{:key "🍇"
|
||||||
|
:value "🍇"}
|
||||||
|
{:key "🍑"
|
||||||
|
:value "🍑"}]}
|
||||||
|
|
||||||
|
{:label "Channel Name"
|
||||||
|
:key :channel-name
|
||||||
|
:type :text}
|
||||||
|
{:label "Channel Icon"
|
||||||
|
:key :channel-icon
|
||||||
|
:type :select
|
||||||
|
:options [{:key :i/locked
|
||||||
|
:value "Locked"}
|
||||||
|
{:key :i/unlocked
|
||||||
|
:value "Unlocked"}]}])
|
||||||
|
|
||||||
|
(def title-description-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options (butlast right-side-options)}
|
||||||
|
{:label "title"
|
||||||
|
:key :title
|
||||||
|
:type :text}
|
||||||
|
{:label "description"
|
||||||
|
:key :description
|
||||||
|
:type :text}
|
||||||
|
{:label "Picture"
|
||||||
|
:key :picture
|
||||||
|
:type :select
|
||||||
|
:options [{:key nil
|
||||||
|
:value "No picture"}
|
||||||
|
{:key (resources/get-mock-image :photo1)
|
||||||
|
:value "Photo 1"}
|
||||||
|
{:key (resources/get-mock-image :photo2)
|
||||||
|
:value "Photo 2"}]}])
|
||||||
|
|
||||||
|
(def wallet-networks-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options (conj (take 2 right-side-options) account-switcher)}])
|
||||||
|
|
||||||
|
(def community-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options right-side-options}
|
||||||
|
{:label "Community Logo"
|
||||||
|
:key :community-logo
|
||||||
|
:type :select
|
||||||
|
:options [{:key (resources/get-mock-image :diamond)
|
||||||
|
:value "Diamond"}
|
||||||
|
{:key (resources/get-mock-image :coinbase)
|
||||||
|
:value "Coinbase"}]}
|
||||||
|
{:label "Community name"
|
||||||
|
:key :community-name
|
||||||
|
:type :text}])
|
||||||
|
|
||||||
|
(def network-descriptor
|
||||||
|
[{:label "Right Side"
|
||||||
|
:key :right-side
|
||||||
|
:type :select
|
||||||
|
:options right-side-options}
|
||||||
|
{:label "Network Logo"
|
||||||
|
:key :network-logo
|
||||||
|
:type :select
|
||||||
|
:options [{:key (resources/get-mock-image :diamond)
|
||||||
|
:value "Diamond"}
|
||||||
|
{:key (resources/get-mock-image :coinbase)
|
||||||
|
:value "Coinbase"}]}
|
||||||
|
{:label "Network name"
|
||||||
|
:key :network-name
|
||||||
|
:type :text}])
|
||||||
|
|
||||||
|
(defn- photo-bg
|
||||||
|
[background]
|
||||||
|
(when (#{:photo :blur} background)
|
||||||
|
[rn/image
|
||||||
|
{:style {:position :absolute
|
||||||
|
:top 0
|
||||||
|
:bottom 0
|
||||||
|
:left 0
|
||||||
|
:right 0
|
||||||
|
:width "100%"
|
||||||
|
:height 200}
|
||||||
|
:source (resources/get-mock-image :photo2)}]))
|
||||||
|
|
||||||
|
(defn- blur-bg
|
||||||
|
[background]
|
||||||
|
(when (= :blur background)
|
||||||
|
[rn/view
|
||||||
|
{:style {:position :absolute
|
||||||
|
:top 0
|
||||||
|
:bottom 0
|
||||||
|
:left 0
|
||||||
|
:right 0
|
||||||
|
:width "100%"
|
||||||
|
:height 200}}
|
||||||
|
[blur/view
|
||||||
|
{:style {:width "100%"
|
||||||
|
:height 20}
|
||||||
|
:blur-type :light
|
||||||
|
:blur-amount 20}]]))
|
||||||
|
|
||||||
(defn- cool-preview
|
(defn- cool-preview
|
||||||
[]
|
[{:keys [theme]}]
|
||||||
(let
|
(let [state (reagent/atom
|
||||||
[right-icon {:background-color (if (colors/dark?)
|
{:type :title-description
|
||||||
colors/neutral-80
|
:background (if (= theme :light) :white :neutral-90)
|
||||||
colors/neutral-20)
|
:icon-name :i/placeholder
|
||||||
:icon :i/placeholder
|
:on-press #(js/alert "Left icon pressed!")
|
||||||
:icon-color nil}
|
:right-side [{:icon-name :i/save :on-press #(js/alert "SAVE")}
|
||||||
base-props
|
{:icon-name :i/mark-as-read :on-press #(js/alert "MARK AS READ")}
|
||||||
{:horizontal-description? true
|
{:icon-name :i/mention :on-press #(js/alert "A MENTION!")}]
|
||||||
:one-icon-align-left? true
|
:title "Page title"
|
||||||
:align-mid? false
|
:text-align :center
|
||||||
:page-nav-color :transparent
|
:dropdown-on-change #(js/alert "Dropdown pressed!")
|
||||||
:page-nav-background-uri ""
|
:dropdown-selected? false
|
||||||
:mid-section
|
:dropdown-text "Recent"
|
||||||
{:type :text-with-description
|
:token-logo (resources/get-mock-image :status-logo)
|
||||||
:icon :i/placeholder
|
:token-name "Status"
|
||||||
:main-text "Status"
|
:token-abbreviation "SNT"
|
||||||
:left-icon :i/placeholder
|
:channel-emoji "🍇"
|
||||||
:right-icon :i/placeholder
|
:channel-name "general"
|
||||||
:description "SNT"
|
:channel-icon :i/locked
|
||||||
:description-color "black"
|
:description "Description"
|
||||||
:description-icon :i/placeholder
|
:picture (resources/get-mock-image :photo1)
|
||||||
:description-user-icon
|
:community-name "Rarible"
|
||||||
"https://i.picsum.photos/id/810/200/300.jpg?hmac=HgwlXd-OaLOAqhGyCiZDUb_75EgUI4u0GtS7nfgxd8s"}
|
:community-logo (resources/get-mock-image :coinbase)
|
||||||
:left-section
|
:network-name "Mainnet"
|
||||||
{:icon :i/unlocked
|
:network-logo (resources/get-mock-image :diamond)})]
|
||||||
:icon-background-color (if (colors/dark?)
|
|
||||||
colors/neutral-80
|
|
||||||
colors/neutral-20)}}
|
|
||||||
create-variation #(merge %1 %2 {:mid-section (merge (:mid-section %1) (:mid-section %2))})
|
|
||||||
variations
|
|
||||||
{:text-only? base-props
|
|
||||||
:align-left? (create-variation base-props {:align-mid? true})
|
|
||||||
:one-icon-align-left? (create-variation base-props
|
|
||||||
{:one-icon-align-left? true
|
|
||||||
:mid-section {:type
|
|
||||||
:text-with-one-icon}})
|
|
||||||
:one-icon-align-right? (create-variation base-props
|
|
||||||
{:one-icon-align-left? false
|
|
||||||
:mid-section {:type
|
|
||||||
:text-with-one-icon}})
|
|
||||||
:two-icons? (create-variation base-props
|
|
||||||
{:mid-section {:type :text-with-two-icons}})
|
|
||||||
:user-icon? (create-variation base-props
|
|
||||||
{:align-mid? true
|
|
||||||
:horizontal-description? false
|
|
||||||
:mid-section {:type
|
|
||||||
:text-with-one-icon}})
|
|
||||||
:empty? (create-variation base-props
|
|
||||||
{:mid-section-main-text ""
|
|
||||||
:mid-section-description ""})
|
|
||||||
:align-left-with-icon? (create-variation base-props
|
|
||||||
{:align-mid? true
|
|
||||||
:mid-section {:type :text-with-one-icon}})
|
|
||||||
:align-left-top-down-text? (create-variation base-props
|
|
||||||
{:align-mid? true
|
|
||||||
:horizontal-description? false
|
|
||||||
:mid-section {:type
|
|
||||||
:text-with-description}})}
|
|
||||||
state (reagent/atom
|
|
||||||
(-> (get variations (:selected-variation @selected-variation))
|
|
||||||
(assoc :right-section-buttons
|
|
||||||
(repeat (:number-of-right-icons @selected-variation) right-icon))))]
|
|
||||||
(fn []
|
(fn []
|
||||||
[rn/view
|
[rn/view {:style {:margin-bottom 50 :padding-vertical 16}}
|
||||||
{:margin-bottom 50
|
[rn/view {:style {:flex 1}}
|
||||||
:padding 16}
|
[preview/customizer state
|
||||||
[rn/view {:flex 1}
|
(concat main-descriptor
|
||||||
[preview/customizer selected-variation descriptor]]
|
(case (:type @state)
|
||||||
|
:no-title no-title-descriptor
|
||||||
|
:title title-descriptor
|
||||||
|
:dropdown dropdown-descriptor
|
||||||
|
:token token-descriptor
|
||||||
|
:channel channel-descriptor
|
||||||
|
:title-description title-description-descriptor
|
||||||
|
:wallet-networks wallet-networks-descriptor
|
||||||
|
:community community-descriptor
|
||||||
|
:network network-descriptor
|
||||||
|
nil))]]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:padding-vertical 30
|
{:style {:background-color (case (:background @state)
|
||||||
:flex-direction :row
|
:white colors/white
|
||||||
:justify-content :center}
|
:neutral-5 colors/neutral-5
|
||||||
[quo2/page-nav @state]]])))
|
:neutral-90 colors/neutral-90
|
||||||
|
:neutral-95 colors/neutral-95
|
||||||
(def ^:private trackable-cool-preview (reagent/track cool-preview selected-variation))
|
:neutral-100 colors/neutral-100
|
||||||
|
nil)
|
||||||
|
:padding-vertical 40
|
||||||
|
:height 200
|
||||||
|
:width "100%"}}
|
||||||
|
[photo-bg (:background @state)]
|
||||||
|
[blur-bg (:background @state)]
|
||||||
|
[quo/page-nav @state]]])))
|
||||||
|
|
||||||
(defn preview-page-nav
|
(defn preview-page-nav
|
||||||
[]
|
[]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:background-color (colors/theme-colors colors/white
|
{:style {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||||
colors/neutral-90)
|
:flex 1}}
|
||||||
:flex 1}
|
|
||||||
[rn/flat-list
|
[rn/flat-list
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:keyboard-should-persist-taps :always
|
:keyboard-should-persist-taps :always
|
||||||
:header [@trackable-cool-preview]
|
:header [(quo.theme/with-theme cool-preview)]
|
||||||
:key-fn str}]])
|
:key-fn str}]])
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,22 @@
|
||||||
(ns status-im2.contexts.syncing.setup-syncing.view
|
(ns status-im2.contexts.syncing.setup-syncing.view
|
||||||
(:require [utils.i18n :as i18n]
|
(:require [quo2.core :as quo]
|
||||||
[quo2.core :as quo]
|
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]
|
|
||||||
[utils.datetime :as datetime]
|
|
||||||
[status-im2.contexts.syncing.setup-syncing.style :as style]
|
|
||||||
[utils.re-frame :as rf]
|
|
||||||
[react-native.clipboard :as clipboard]
|
[react-native.clipboard :as clipboard]
|
||||||
[status-im2.contexts.syncing.sheets.enter-password.view :as enter-password]
|
[react-native.core :as rn]
|
||||||
[status-im2.common.qr-code-viewer.view :as qr-code-viewer]
|
|
||||||
[reagent.core :as reagent]
|
|
||||||
[status-im2.common.resources :as resources]
|
|
||||||
[react-native.hooks :as hooks]
|
[react-native.hooks :as hooks]
|
||||||
[status-im2.contexts.syncing.utils :as sync-utils]))
|
[reagent.core :as reagent]
|
||||||
|
[status-im2.common.qr-code-viewer.view :as qr-code-viewer]
|
||||||
|
[status-im2.common.resources :as resources]
|
||||||
|
[status-im2.contexts.syncing.setup-syncing.style :as style]
|
||||||
|
[status-im2.contexts.syncing.sheets.enter-password.view :as enter-password]
|
||||||
|
[status-im2.contexts.syncing.utils :as sync-utils]
|
||||||
|
[utils.datetime :as datetime]
|
||||||
|
[utils.i18n :as i18n]
|
||||||
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(def code-valid-for-ms 120000)
|
(def code-valid-for-ms 120000)
|
||||||
(def one-min-ms 60000)
|
(def one-min-ms 60000)
|
||||||
|
|
||||||
(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 :grey
|
|
||||||
:icon :i/close
|
|
||||||
:on-press #(rf/dispatch [:navigate-back])}
|
|
||||||
:right-section-buttons [{:type :grey
|
|
||||||
:label (i18n/label :t/how-to-pair)
|
|
||||||
:icon :i/info
|
|
||||||
:on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]])
|
|
||||||
|
|
||||||
(defn f-use-interval
|
(defn f-use-interval
|
||||||
[clock cleanup-clock delay]
|
[clock cleanup-clock delay]
|
||||||
(hooks/use-interval clock cleanup-clock delay)
|
(hooks/use-interval clock cleanup-clock delay)
|
||||||
|
|
@ -67,7 +53,14 @@
|
||||||
[rn/view {:style style/container-main}
|
[rn/view {:style style/container-main}
|
||||||
[:f> f-use-interval clock cleanup-clock @delay]
|
[:f> f-use-interval clock cleanup-clock @delay]
|
||||||
[rn/scroll-view {}
|
[rn/scroll-view {}
|
||||||
[navigation-bar]
|
[quo/page-nav
|
||||||
|
{:type :no-title
|
||||||
|
:icon-name :i/close
|
||||||
|
:background :blur
|
||||||
|
:on-press #(rf/dispatch [:navigate-back])
|
||||||
|
:right-side [{:icon-left :i/info
|
||||||
|
:label (i18n/label :t/how-to-pair)
|
||||||
|
:on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]
|
||||||
[rn/view {:style style/page-container}
|
[rn/view {:style style/page-container}
|
||||||
[rn/view {:style style/title-container}
|
[rn/view {:style style/title-container}
|
||||||
[quo/text
|
[quo/text
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,12 @@
|
||||||
(ns status-im2.contexts.syncing.syncing-devices-list.view
|
(ns status-im2.contexts.syncing.syncing-devices-list.view
|
||||||
(:require [utils.i18n :as i18n]
|
(:require [quo2.core :as quo]
|
||||||
[quo2.core :as quo]
|
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[status-im2.contexts.syncing.syncing-devices-list.style :as style]
|
|
||||||
[status-im2.contexts.syncing.device.view :as device]
|
[status-im2.contexts.syncing.device.view :as device]
|
||||||
|
[status-im2.contexts.syncing.syncing-devices-list.style :as style]
|
||||||
|
[utils.i18n :as i18n]
|
||||||
[utils.re-frame :as rf]))
|
[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 :photo
|
|
||||||
:icon-background :blur
|
|
||||||
:icon :i/arrow-left
|
|
||||||
:on-press #(rf/dispatch [:navigate-back])}}]])
|
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [devices (rf/sub [:pairing/installations])
|
(let [devices (rf/sub [:pairing/installations])
|
||||||
|
|
@ -29,7 +18,11 @@
|
||||||
#(if (:enabled? %) :paired-devices :unpaired-devices)
|
#(if (:enabled? %) :paired-devices :unpaired-devices)
|
||||||
other-devices)]
|
other-devices)]
|
||||||
[rn/view {:style style/container-main}
|
[rn/view {:style style/container-main}
|
||||||
[navigation-bar]
|
[quo/page-nav
|
||||||
|
{:type :no-title
|
||||||
|
:background :blur
|
||||||
|
:icon-name :i/arrow-left
|
||||||
|
:on-press #(rf/dispatch [:navigate-back])}]
|
||||||
[rn/view {:style style/page-container}
|
[rn/view {:style style/page-container}
|
||||||
[rn/view {:style style/title-container}
|
[rn/view {:style style/title-container}
|
||||||
[quo/text
|
[quo/text
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue