Button Refactors Final Final (#16772)
* chore: remove use of override-background-color prop in button * chore: update uses of quo2 button to align with figma * chore: fix button preview screen * fix: onboarding customization colors
This commit is contained in:
Jamie Caprani
GitHub
parent
ba859b163a
commit
d26db932e8
|
|
@ -3,101 +3,87 @@
|
|||
|
||||
(defn custom-color-type
|
||||
[customization-color icon-only?]
|
||||
{:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color (colors/custom-color customization-color 50)
|
||||
:border-radius (when icon-only? 24)})
|
||||
{:icon-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color (colors/custom-color customization-color 50)
|
||||
:border-radius (when icon-only? 24)})
|
||||
|
||||
(defn grey-photo
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:blur-overlay-color (if pressed?
|
||||
(colors/theme-colors colors/white-opa-50
|
||||
colors/neutral-80-opa-50
|
||||
theme)
|
||||
(colors/theme-colors colors/white-opa-40
|
||||
colors/neutral-80-opa-40
|
||||
theme))
|
||||
:blur-type (if (= theme :light) :light :dark)})
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:blur-overlay-color (if pressed?
|
||||
(colors/theme-colors colors/white-opa-50
|
||||
colors/neutral-80-opa-50
|
||||
theme)
|
||||
(colors/theme-colors colors/white-opa-40
|
||||
colors/neutral-80-opa-40
|
||||
theme))
|
||||
:blur-type (if (= theme :light) :light :dark)})
|
||||
|
||||
(defn grey-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
|
||||
|
||||
(defn outline-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
|
||||
|
||||
(defn grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
|
||||
(defn dark-grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
|
||||
|
||||
(defn outline
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
|
||||
|
||||
(defn ghost
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (when pressed?
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (when pressed?
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
|
||||
(defn black
|
||||
[pressed?]
|
||||
{:icon-color colors/white
|
||||
:label-color colors/white
|
||||
{:label-color colors/white
|
||||
:background-color (if pressed? colors/neutral-80 colors/neutral-95)})
|
||||
|
||||
(defn get-values
|
||||
[{:keys [customization-color theme type background pressed? icon-only?]}]
|
||||
(cond
|
||||
(= type :primary) (custom-color-type customization-color icon-only?)
|
||||
(= type :positive) (custom-color-type customization-color icon-only?)
|
||||
(= type :danger) (custom-color-type customization-color icon-only?)
|
||||
;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
|
||||
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
|
||||
;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
|
||||
(or (= type :blur-bg)
|
||||
(and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
|
||||
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
|
||||
(= type :grey) (grey theme pressed?)
|
||||
(= type :dark-grey) (dark-grey theme pressed?)
|
||||
(= type :outline) (outline theme pressed?)
|
||||
(= type :ghost) (ghost theme pressed?)
|
||||
;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
|
||||
(or (= type :shell) (= type :black)) (black pressed?)))
|
||||
(= type :primary) (custom-color-type customization-color icon-only?)
|
||||
(= type :positive) (custom-color-type customization-color icon-only?)
|
||||
(= type :danger) (custom-color-type customization-color icon-only?)
|
||||
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
|
||||
(and (= :blur background) (= type :grey)) (grey-blur theme pressed?)
|
||||
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
|
||||
(= type :grey) (grey theme pressed?)
|
||||
(= type :dark-grey) (dark-grey theme pressed?)
|
||||
(= type :outline) (outline theme pressed?)
|
||||
(= type :ghost) (ghost theme pressed?)
|
||||
(= type :black) (black pressed?)))
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:bottom 0})
|
||||
|
||||
(defn icon-style
|
||||
[{:keys [icon-container-size icon-background-color icon-container-rounded?
|
||||
[{:keys [icon-container-size icon-container-rounded?
|
||||
icon-size margin-left margin-right]}]
|
||||
(cond-> (merge {:margin-left margin-left
|
||||
:margin-right margin-right
|
||||
|
|
@ -16,31 +16,27 @@
|
|||
:justify-content :center})
|
||||
icon-container-size
|
||||
(assoc :width icon-container-size :height icon-container-size)
|
||||
icon-background-color
|
||||
(assoc :background-color icon-background-color)
|
||||
icon-container-rounded?
|
||||
(assoc :border-radius (/ (or icon-container-size icon-size) 2))))
|
||||
|
||||
(defn icon-left-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
[{:keys [override-margins size icon-container-size icon-container-rounded?
|
||||
icon-size]}]
|
||||
(icon-style
|
||||
{:margin-left (or (get override-margins :left)
|
||||
(if (= size 40) 12 8))
|
||||
:margin-right (or (get override-margins :right) 4)
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size}))
|
||||
|
||||
(defn icon-right-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
[{:keys [override-margins size icon-container-size icon-container-rounded?
|
||||
icon-size]}]
|
||||
(icon-style {:margin-left (or (get override-margins :left) 4)
|
||||
:margin-right (or (get override-margins :right)
|
||||
(if (= size 40) 12 8))
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size}))
|
||||
|
||||
|
|
@ -53,54 +49,67 @@
|
|||
56 12
|
||||
40 12
|
||||
32 10
|
||||
8))})
|
||||
24 8
|
||||
12))})
|
||||
|
||||
(defn style-container
|
||||
[{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
|
||||
[{:keys [size disabled? border-radius background-color border-color icon-only? icon-top
|
||||
icon-left icon-right]}]
|
||||
(merge {:height size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:flex-direction (if icon-above :column :row)
|
||||
:flex-direction (if icon-top :column :row)
|
||||
:padding-horizontal (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 16
|
||||
56 (if border-color 10 11)
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
24 7
|
||||
16))
|
||||
:padding-left (when-not (or icon-only? icon-left)
|
||||
(case size
|
||||
56 16
|
||||
56 nil
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
24 8
|
||||
16))
|
||||
:padding-right (when-not (or icon-only? icon-right)
|
||||
(case size
|
||||
56 16
|
||||
56 nil
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
24 8
|
||||
16))
|
||||
:padding-top (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
3))
|
||||
40 (if border-color 8 9)
|
||||
32 (if border-color 4 5)
|
||||
24 (if border-color 0 1)
|
||||
(if border-color 8 9)))
|
||||
:padding-bottom (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
4))
|
||||
24 4
|
||||
9))
|
||||
:overflow :hidden
|
||||
:background-color background-color}
|
||||
(shape-style-container size border-radius)
|
||||
(when width
|
||||
{:width width})
|
||||
:background-color background-color
|
||||
:border-radius (if border-radius
|
||||
border-radius
|
||||
(case size
|
||||
56 12
|
||||
40 12
|
||||
32 10
|
||||
24 8
|
||||
12))
|
||||
:border-color border-color
|
||||
:border-width (when border-color 1)}
|
||||
(when icon-only?
|
||||
{:width size})
|
||||
(when border-color
|
||||
{:border-color border-color
|
||||
:border-width 1})
|
||||
(when disabled
|
||||
(when disabled?
|
||||
{:opacity 0.3})))
|
||||
|
|
|
|||
|
|
@ -15,25 +15,24 @@
|
|||
opts
|
||||
{on-press callback
|
||||
on-long-press callback
|
||||
disabled boolean
|
||||
:type :primary/:positive:grey/:dark-grey/:outline/:ghost/
|
||||
:danger/:black (TODO remove :photo-bg/:blur-bg/:blur-bg-outline/:shell/:community)
|
||||
disabled? boolean
|
||||
:type :primary/:positive/:grey/:dark-grey/:outline/:ghost/
|
||||
:danger/:black
|
||||
background :photo/:blur or nil
|
||||
:size 40 [default] /32/24/56
|
||||
:icon true/false
|
||||
:above :icon-keyword
|
||||
:before :icon-keyword
|
||||
:after :icon-keyword}
|
||||
:icon-only? true/false
|
||||
:icon-top :icon-keyword
|
||||
:icon-left :icon-keyword
|
||||
:icon-right :icon-keyword}
|
||||
:customization-color keyword or hexstring
|
||||
:theme :light/:dark
|
||||
only icon
|
||||
[button {:icon true} :i/close-circle]"
|
||||
[button {:icon-only? true} :i/close-circle]"
|
||||
[_ _]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press on-long-press disabled type background size before after above
|
||||
width customization-color theme override-background-color
|
||||
accessibility-label icon style inner-style]
|
||||
[{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
|
||||
customization-color theme accessibility-label icon-only? container-style inner-style]
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color (cond (= type :primary) :blue
|
||||
|
|
@ -41,24 +40,17 @@
|
|||
(= type :danger) :danger
|
||||
:else nil)}}
|
||||
children]
|
||||
(let [icon-only? icon ;; TODO Update external api to icon-only? -
|
||||
;; https://github.com/status-im/status-mobile/issues/16535
|
||||
container-style style ;; TODO Update external api to container-style and remove prop width
|
||||
icon-left before ;; TODO Update external api to icon-left
|
||||
icon-right after ;; TODO Update external api to icon-right
|
||||
icon-above above ;; TODO Update external api to icon-above
|
||||
{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
|
||||
blur-overlay-color icon-background-color border-radius]}
|
||||
(let [{:keys [icon-color background-color label-color border-color blur-type
|
||||
blur-overlay-color border-radius]}
|
||||
(button-properties/get-values {:customization-color customization-color
|
||||
:background background
|
||||
:type type
|
||||
:theme theme
|
||||
:pressed? @pressed?
|
||||
:icon-only? icon-only?})
|
||||
icon-size (when (= 24 size) 12)
|
||||
icon-secondary-color (or icon-secondary-color icon-color)]
|
||||
icon-size (when (= 24 size) 12)]
|
||||
[rn/touchable-without-feedback
|
||||
{:disabled disabled
|
||||
{:disabled disabled?
|
||||
:accessibility-label accessibility-label
|
||||
:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? nil)
|
||||
|
|
@ -67,21 +59,18 @@
|
|||
[rn/view
|
||||
{:style (merge
|
||||
(style/shape-style-container size border-radius)
|
||||
{:width width}
|
||||
container-style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/style-container {:size size
|
||||
:disabled disabled
|
||||
:border-radius border-radius
|
||||
:background-color
|
||||
(or override-background-color background-color)
|
||||
:border-color border-color
|
||||
:icon-only? icon-only?
|
||||
:icon-above icon-above
|
||||
:width width
|
||||
:icon-left icon-left
|
||||
:icon-right icon-right})
|
||||
(style/style-container {:size size
|
||||
:disabled? disabled?
|
||||
:border-radius border-radius
|
||||
:background-color background-color
|
||||
:border-color border-color
|
||||
:icon-only? icon-only?
|
||||
:icon-top icon-top
|
||||
:icon-left icon-left
|
||||
:icon-right icon-right})
|
||||
inner-style)}
|
||||
(when customization-color
|
||||
[customization-colors/overlay
|
||||
|
|
@ -94,26 +83,25 @@
|
|||
:blur-type blur-type
|
||||
:overlay-color blur-overlay-color
|
||||
:style style/blur-view}])
|
||||
(when icon-above
|
||||
(when icon-top
|
||||
[rn/view
|
||||
[quo2.icons/icon icon-above
|
||||
[quo2.icons/icon icon-top
|
||||
{:container-style {:margin-bottom 2}
|
||||
:color icon-secondary-color
|
||||
:color icon-color
|
||||
:size icon-size}]])
|
||||
(when icon-left
|
||||
[rn/view
|
||||
{:style (style/icon-left-icon-style
|
||||
{:size size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-size icon-size})}
|
||||
{:size size
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon icon-left
|
||||
{:color icon-secondary-color
|
||||
{:color icon-color
|
||||
:size icon-size}]])
|
||||
[rn/view
|
||||
(cond
|
||||
icon-only?
|
||||
[quo2.icons/icon children
|
||||
{:color icon-color
|
||||
{:color label-color
|
||||
:size icon-size}]
|
||||
|
||||
(string? children)
|
||||
|
|
@ -129,11 +117,10 @@
|
|||
(when icon-right
|
||||
[rn/view
|
||||
{:style (style/icon-right-icon-style
|
||||
{:size size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-size icon-size})}
|
||||
{:size size
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon icon-right
|
||||
{:color icon-secondary-color
|
||||
{:color icon-color
|
||||
:size icon-size}]])]]]))))
|
||||
|
||||
(def button (theme/with-theme button-internal))
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
(defn- word-component
|
||||
[word _ _ {:keys [on-press]}]
|
||||
[button/button
|
||||
{:type :blur-bg
|
||||
:size 32
|
||||
:on-press #(on-press word)}
|
||||
|
||||
{:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:on-press #(on-press word)}
|
||||
word])
|
||||
|
||||
(defn- separator
|
||||
|
|
|
|||
|
|
@ -87,11 +87,11 @@
|
|||
:line-number-width line-number-width}]]
|
||||
[rn/view {:style style/copy-button}
|
||||
[button/button
|
||||
{:icon true
|
||||
:type :grey
|
||||
:size 24
|
||||
:on-press on-copy-press
|
||||
:override-background-color (style/button-background-color)}
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 24
|
||||
:on-press on-copy-press}
|
||||
:main-icons/copy]]]))
|
||||
|
||||
(defn snippet
|
||||
|
|
|
|||
|
|
@ -33,10 +33,11 @@
|
|||
(when show-button?
|
||||
[button/button
|
||||
{:size 24
|
||||
:type (if shell? :blur-bg-outline :outline)
|
||||
:type :outline
|
||||
:background (when shell? :blur)
|
||||
:on-press on-press-button
|
||||
:accessibility-label :documentation-drawer-button
|
||||
:after button-icon}
|
||||
:icon-right button-icon}
|
||||
button-label])]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -41,10 +41,11 @@
|
|||
(when-let [{lower-button-text :text
|
||||
lower-button-on-press :on-press} lower-button]
|
||||
[button/button
|
||||
{:style {:margin-top 12}
|
||||
:size 32
|
||||
:type :blur-bg
|
||||
:on-press lower-button-on-press}
|
||||
{:container-style {:margin-top 12}
|
||||
:size 32
|
||||
:type :grey
|
||||
:background :blur
|
||||
:on-press lower-button-on-press}
|
||||
lower-button-text])])])
|
||||
|
||||
(def empty-state (theme/with-theme empty-state-internal))
|
||||
|
|
|
|||
|
|
@ -83,14 +83,10 @@
|
|||
(defn header-action
|
||||
[{:keys [icon label on-press disabled accessibility-label]}]
|
||||
[button/button
|
||||
(merge {:on-press on-press
|
||||
:disabled disabled}
|
||||
(cond
|
||||
icon {:type :icon
|
||||
:theme :icon}
|
||||
label {:type :secondary})
|
||||
(when accessibility-label
|
||||
{:accessibility-label accessibility-label}))
|
||||
{:on-press on-press
|
||||
:disabled? disabled
|
||||
:icon-only? (boolean icon)
|
||||
:accessibility-label accessibility-label}
|
||||
(cond
|
||||
icon icon
|
||||
label label)])
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
:accessibility-label :information-box-action-button
|
||||
:size 24
|
||||
:on-press on-button-press
|
||||
:style style/content-button}
|
||||
:container-style style/content-button}
|
||||
button-label])])
|
||||
|
||||
(defn view
|
||||
|
|
|
|||
|
|
@ -38,11 +38,9 @@
|
|||
:type :grey
|
||||
:background :blur
|
||||
:on-press on-press
|
||||
:icon-size 20
|
||||
:width 24
|
||||
:size 24
|
||||
:icon :i/camera
|
||||
:style style/button
|
||||
:icon-only? true
|
||||
:container-style style/button
|
||||
:inner-style style/button-inner} :i/camera]]
|
||||
[rn/view {:style style/input-container}
|
||||
[title-input/title-input
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
(defn- button-disabled
|
||||
[disabled-text on-enable]
|
||||
[button/button
|
||||
{:before :i/reveal
|
||||
{:icon-left :i/reveal
|
||||
:size 32
|
||||
:type :grey
|
||||
:on-press on-enable
|
||||
|
|
|
|||
|
|
@ -31,17 +31,17 @@
|
|||
{:no-color true})))
|
||||
|
||||
(defn left-section-view
|
||||
[{:keys [on-press icon accessibility-label type icon-background-color]
|
||||
[{: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 true
|
||||
:type type
|
||||
:size 32
|
||||
:accessibility-label accessibility-label
|
||||
:override-background-color icon-background-color}
|
||||
{:on-press on-press
|
||||
:icon-only? true
|
||||
:type type
|
||||
:size 32
|
||||
:accessibility-label accessibility-label
|
||||
:background icon-background}
|
||||
icon]])
|
||||
|
||||
(defn- mid-section-comp
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
: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-color
|
||||
{:keys [icon on-press type style icon-background
|
||||
accessibility-label label]
|
||||
:or {type :grey}}]
|
||||
^{:key index}
|
||||
|
|
@ -163,12 +163,12 @@
|
|||
accessibility-label (assoc :accessibility-label accessibility-label
|
||||
:accessible true))
|
||||
[button/button
|
||||
{:on-press on-press
|
||||
:icon (not label)
|
||||
:type type
|
||||
:before (when label icon)
|
||||
:size 32
|
||||
:override-background-color icon-background-color}
|
||||
{: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))])
|
||||
|
||||
|
|
|
|||
|
|
@ -129,8 +129,8 @@
|
|||
(-> button
|
||||
(assoc :size size)
|
||||
(assoc :type subtype)
|
||||
(assoc :disabled (and replying? disable-when (disable-when @reply-input)))
|
||||
(update :style merge common-style {:margin-right 8}))
|
||||
(assoc :disabled? (and replying? disable-when (disable-when @reply-input)))
|
||||
(update :container-style merge common-style {:margin-right 8}))
|
||||
label]))
|
||||
|
||||
(defmethod footer-item-view :status
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@
|
|||
{:size 32
|
||||
:type :grey
|
||||
:background :blur
|
||||
:icon true
|
||||
:style style/option-button
|
||||
:icon-only? true
|
||||
:container-style style/option-button
|
||||
:on-press on-options-press
|
||||
:accessibility-label :profile-card-options}
|
||||
:i/options])]]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
(ns quo2.components.record-audio.record-audio.buttons.record-button
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.record-audio.record-audio.style :as style]
|
||||
[quo2.foundations.colors :as colors]
|
||||
(:require [quo2.components.record-audio.record-audio.style :as style]
|
||||
[react-native.core :as rn :refer [use-effect]]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
|
|
@ -21,6 +19,6 @@
|
|||
[button/button
|
||||
{:type :outline
|
||||
:size 32
|
||||
:width 32
|
||||
:accessibility-label :mic-button}
|
||||
[icons/icon :i/audio {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]]))
|
||||
:accessibility-label :mic-button
|
||||
:icon-only? true}
|
||||
:i/audio]]))
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
[{:keys [on-press]}]
|
||||
[rn/view {:style style/menu-button-container}
|
||||
[button/button
|
||||
{:style (style/menu-button-color)
|
||||
:type :gray
|
||||
:icon true
|
||||
:size 24
|
||||
:on-press on-press}
|
||||
{:container-style (style/menu-button-color)
|
||||
:type :grey
|
||||
:icon-only? true
|
||||
:size 24
|
||||
:on-press on-press}
|
||||
:i/more]])
|
||||
|
||||
(defn account
|
||||
|
|
|
|||
|
|
@ -58,13 +58,11 @@
|
|||
|
||||
(defn right-button
|
||||
[{:keys [title
|
||||
on-press]}
|
||||
override-theme]
|
||||
on-press]}]
|
||||
[button/button
|
||||
{:type :outline
|
||||
:override-theme override-theme
|
||||
:on-press on-press
|
||||
:size 24}
|
||||
{:type :outline
|
||||
:on-press on-press
|
||||
:size 24}
|
||||
title])
|
||||
|
||||
(defn communities-icons
|
||||
|
|
@ -132,6 +130,6 @@
|
|||
[toggle-button toggle-props])
|
||||
(when badge? [badge-icon override-theme])
|
||||
(when button-props
|
||||
[right-button button-props override-theme])
|
||||
[right-button button-props])
|
||||
(when communities-props (communities-icons communities-props override-theme))
|
||||
(when chevron? chevron-icon)]]])
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@
|
|||
qr-url]]]
|
||||
[rn/view {:style style/share-button-container}
|
||||
[button/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :share-profile
|
||||
:override-theme :dark
|
||||
:on-press share-on-press}
|
||||
:i/share]]]])
|
||||
|
|
|
|||
|
|
@ -63,14 +63,14 @@
|
|||
[extra-action-view extra-action extra-text extra-action-selected?]
|
||||
[rn/view {:style style/buttons-container}
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:style {:flex 0.48} ;;WUT? 0.48 , whats that ?
|
||||
:on-press #(rf/dispatch [:hide-bottom-sheet])}
|
||||
{:type :grey
|
||||
:container-style {:flex 0.48} ;;WUT? 0.48 , whats that ?
|
||||
:on-press #(rf/dispatch [:hide-bottom-sheet])}
|
||||
(or close-button-text (i18n/label :t/close))]
|
||||
[quo/button
|
||||
{:type :danger
|
||||
:style {:flex 0.48}
|
||||
:on-press #(do
|
||||
(when @extra-action-selected? (extra-action))
|
||||
(on-press))}
|
||||
{:type :danger
|
||||
:container-style {:flex 0.48}
|
||||
:on-press #(do
|
||||
(when @extra-action-selected? (extra-action))
|
||||
(on-press))}
|
||||
button-text]]]))))
|
||||
|
|
|
|||
|
|
@ -22,17 +22,16 @@
|
|||
:customization-color customization-color}]])
|
||||
|
||||
(defn- get-button-common-props
|
||||
[type]
|
||||
[type background]
|
||||
(let [default? (= type :default)
|
||||
dark? (colors/dark?)]
|
||||
{:icon true
|
||||
:size 32
|
||||
:style {:margin-left 12}
|
||||
:type (if default?
|
||||
(if dark? :grey :dark-grey)
|
||||
type)
|
||||
:override-background-color (when (and dark? default?)
|
||||
colors/neutral-90)}))
|
||||
{:icon-only? true
|
||||
:size 32
|
||||
:container-style {:margin-left 12}
|
||||
:type (if default?
|
||||
(if dark? :grey :dark-grey)
|
||||
type)
|
||||
:background background}))
|
||||
|
||||
(defn- unread-indicator
|
||||
[]
|
||||
|
|
@ -73,23 +72,21 @@
|
|||
[quo/text {:accessibility-label :peers-count-text} (str "PEERS COUNT: " peers-count)]]))
|
||||
|
||||
(defn- right-section
|
||||
[{:keys [button-type search?]}]
|
||||
(let [button-common-props (get-button-common-props button-type)
|
||||
[{:keys [button-type search? button-background]}]
|
||||
(let [button-common-props (get-button-common-props button-type button-background)
|
||||
network-type (rf/sub [:network/type])]
|
||||
[rn/view {:style style/right-section}
|
||||
(when (= network-type "cellular")
|
||||
[quo/button
|
||||
(merge button-common-props
|
||||
{:icon false
|
||||
:accessibility-label :on-cellular-network
|
||||
{:accessibility-label :on-cellular-network
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content connectivity-sheet}])})
|
||||
"🦄"])
|
||||
(when (= network-type "none")
|
||||
[quo/button
|
||||
(merge button-common-props
|
||||
{:icon false
|
||||
:accessibility-label :no-network-connection
|
||||
{:accessibility-label :no-network-connection
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content connectivity-sheet}])})
|
||||
"💀"])
|
||||
|
|
@ -117,10 +114,11 @@
|
|||
"[top-nav props]
|
||||
props
|
||||
{:type quo/button types
|
||||
:background quo/button background
|
||||
:style override-style
|
||||
:search? When non-nil, show search button}
|
||||
"
|
||||
[{:keys [type style search?]
|
||||
[{:keys [type style search? background]
|
||||
:or {type :default}}]
|
||||
(let [account (rf/sub [:profile/multiaccount])
|
||||
customization-color (rf/sub [:profile/customization-color])
|
||||
|
|
@ -129,4 +127,4 @@
|
|||
:profile-picture (multiaccounts/displayed-photo account)}]
|
||||
[rn/view {:style (merge style/top-nav-container style)}
|
||||
[left-section {:avatar avatar}]
|
||||
[right-section {:button-type type :search? search?}]]))
|
||||
[right-section {:button-type type :button-background background :search? search?}]]))
|
||||
|
|
|
|||
|
|
@ -36,6 +36,6 @@
|
|||
:style {:margin-top 8}}
|
||||
(i18n/label :t/oops-wrong-password)])
|
||||
[quo/button
|
||||
{:style {:margin-bottom 12 :margin-top 40}
|
||||
:on-press #((:on-press button) (ethereum/sha3 @entered-password))}
|
||||
{:container-style {:margin-bottom 12 :margin-top 40}
|
||||
:on-press #((:on-press button) (ethereum/sha3 @entered-password))}
|
||||
(:label button)]]))))
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
[quo/button
|
||||
{:type :primary
|
||||
:size 32
|
||||
:icon true
|
||||
:icon-only? true
|
||||
:accessibility-label (or accessibility-label :plus-button)
|
||||
:on-press on-press
|
||||
:customization-color customization-color}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
(ns status-im2.common.scroll-page.view
|
||||
(:require [oops.core :as oops]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -9,10 +8,6 @@
|
|||
[utils.re-frame :as rf]
|
||||
[react-native.reanimated :as reanimated]))
|
||||
|
||||
(defn icon-color
|
||||
[]
|
||||
(colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
|
||||
|
||||
(def negative-scroll-position-0 (if platform/ios? -44 0))
|
||||
(def scroll-position-0 (if platform/ios? 44 0))
|
||||
|
||||
|
|
@ -71,18 +66,24 @@
|
|||
top-nav]
|
||||
[rn/view {:style {:margin-top 44}}
|
||||
[quo/page-nav
|
||||
(merge {:horizontal-description? true
|
||||
:one-icon-align-left? true
|
||||
:align-mid? false
|
||||
:page-nav-color :transparent
|
||||
:mid-section {:type :text-with-description
|
||||
:main-text nil
|
||||
:description-img nil}
|
||||
:right-section-buttons page-nav}
|
||||
(when navigate-back?
|
||||
{:left-section {:icon :i/close
|
||||
:icon-background-color (icon-color)
|
||||
:on-press #(rf/dispatch [:navigate-back])}}))]])
|
||||
(merge
|
||||
{:horizontal-description? true
|
||||
:one-icon-align-left? true
|
||||
:align-mid? false
|
||||
:page-nav-color :transparent
|
||||
:mid-section {:type :text-with-description
|
||||
:main-text nil
|
||||
: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
|
||||
title-colum)
|
||||
sticky-header]]))
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@
|
|||
|
||||
(defn container-outer
|
||||
[]
|
||||
{:style {:flex 1
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:justify-content :space-between
|
||||
:align-items :center
|
||||
:padding 16
|
||||
:border-radius 20}})
|
||||
{:style {:flex 1
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:justify-content :space-between
|
||||
:align-items :center
|
||||
:padding-vertical 16
|
||||
:padding-horizontal 20
|
||||
|
||||
:border-radius 20}})
|
||||
|
||||
(def container-inner
|
||||
{:style {:flex-direction :column
|
||||
|
|
@ -105,26 +107,6 @@
|
|||
colors/black
|
||||
colors/white)})})
|
||||
|
||||
(def button-paste
|
||||
{:type :outline
|
||||
:size 24
|
||||
:style {:margin-top 6}})
|
||||
|
||||
(defn button-close
|
||||
[]
|
||||
{:type :grey
|
||||
:icon true
|
||||
:accessibility-label :new-contact-close-button
|
||||
:size 32
|
||||
:override-background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-90)})
|
||||
|
||||
(def button-qr
|
||||
{:type :outline
|
||||
:icon true
|
||||
:size 40})
|
||||
|
||||
(def found-user
|
||||
{:padding-top 16
|
||||
:flex-direction :column
|
||||
|
|
@ -166,14 +148,7 @@
|
|||
colors/neutral-50
|
||||
colors/neutral-40)})
|
||||
|
||||
(defn button-view-profile
|
||||
[state customization-color]
|
||||
{:type :primary
|
||||
:customization-color customization-color
|
||||
:size 40
|
||||
:width 335
|
||||
:style {:margin-top 24
|
||||
:margin-bottom (+ (safe-area/get-bottom) 12)}
|
||||
:accessibility-label :new-contact-button
|
||||
:before :i/profile
|
||||
:disabled (not= state :valid)})
|
||||
(def button-view-profile
|
||||
{:margin-top 24
|
||||
:width "100%"
|
||||
:margin-bottom (+ (safe-area/get-bottom) 12)})
|
||||
|
|
|
|||
|
|
@ -59,13 +59,16 @@
|
|||
[rn/view (style/container-outer)
|
||||
[rn/view style/container-inner
|
||||
[quo/button
|
||||
(merge (style/button-close)
|
||||
{:on-press
|
||||
(fn []
|
||||
(reset! clipboard nil)
|
||||
(reset! default-value nil)
|
||||
(rf/dispatch [:contacts/clear-new-identity])
|
||||
(rf/dispatch [:navigate-back]))}) :i/close]
|
||||
{:type :grey
|
||||
:icon-only? true
|
||||
:accessibility-label :new-contact-close-button
|
||||
:size 32
|
||||
:on-press
|
||||
(fn []
|
||||
(reset! clipboard nil)
|
||||
(reset! default-value nil)
|
||||
(rf/dispatch [:contacts/clear-new-identity])
|
||||
(rf/dispatch [:navigate-back]))} :i/close]
|
||||
[quo/text (style/text-title)
|
||||
(i18n/label :t/add-a-contact)]
|
||||
[quo/text (style/text-subtitle)
|
||||
|
|
@ -87,18 +90,22 @@
|
|||
:return-key-type :done})]
|
||||
(when show-paste-button?
|
||||
[quo/button
|
||||
(merge style/button-paste
|
||||
{:on-press
|
||||
(fn []
|
||||
(reset! default-value @clipboard)
|
||||
(rf/dispatch
|
||||
[:contacts/set-new-identity @clipboard nil]))})
|
||||
{:type :outline
|
||||
:size 24
|
||||
:container-style {:margin-top 6}
|
||||
:on-press
|
||||
(fn []
|
||||
(reset! default-value @clipboard)
|
||||
(rf/dispatch
|
||||
[:contacts/set-new-identity @clipboard nil]))}
|
||||
(i18n/label :t/paste)])]
|
||||
[quo/button
|
||||
(merge style/button-qr
|
||||
{:on-press #(rf/dispatch
|
||||
[::qr-scanner/scan-code
|
||||
{:handler :contacts/qr-code-scanned}])})
|
||||
{:type :outline
|
||||
:icon-only? true
|
||||
:size 40
|
||||
:on-press #(rf/dispatch
|
||||
[::qr-scanner/scan-code
|
||||
{:handler :contacts/qr-code-scanned}])}
|
||||
:i/scan]]
|
||||
(when invalid?
|
||||
[rn/view style/container-invalid
|
||||
|
|
@ -108,12 +115,18 @@
|
|||
(when (= state :valid)
|
||||
[found-contact public-key])]
|
||||
[quo/button
|
||||
(merge (style/button-view-profile state customization-color)
|
||||
{:on-press
|
||||
(fn []
|
||||
(reset! clipboard nil)
|
||||
(reset! default-value nil)
|
||||
(rf/dispatch [:contacts/clear-new-identity])
|
||||
(rf/dispatch [:navigate-back])
|
||||
(rf/dispatch [:chat.ui/show-profile public-key ens]))})
|
||||
{:type :primary
|
||||
:customization-color customization-color
|
||||
:size 40
|
||||
:container-style style/button-view-profile
|
||||
:accessibility-label :new-contact-button
|
||||
:icon-left :i/profile
|
||||
:disabled? (not= state :valid)
|
||||
:on-press
|
||||
(fn []
|
||||
(reset! clipboard nil)
|
||||
(reset! default-value nil)
|
||||
(rf/dispatch [:contacts/clear-new-identity])
|
||||
(rf/dispatch [:navigate-back])
|
||||
(rf/dispatch [:chat.ui/show-profile public-key ens]))}
|
||||
(i18n/label :t/view-profile)]]]]))))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im2.contexts.chat.composer.actions.style
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.contexts.chat.composer.constants :as constants]))
|
||||
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
{:position :absolute
|
||||
:right 0
|
||||
:z-index z-index
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:padding-vertical 3
|
||||
:padding-left 2}))
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
[reanimated/view
|
||||
{:style (style/send-button btn-opacity @z-index)}
|
||||
[quo/button
|
||||
{:icon true
|
||||
{:icon-only? true
|
||||
:size 32
|
||||
:accessibility-label :send-message-button
|
||||
:on-press #(send-message props state animations window-height edit)}
|
||||
|
|
@ -73,10 +73,10 @@
|
|||
(defn disabled-audio-button
|
||||
[]
|
||||
[quo/button
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32}
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon-only? true
|
||||
:type :outline
|
||||
:size 32}
|
||||
:i/audio])
|
||||
|
||||
(defn audio-button
|
||||
|
|
@ -170,11 +170,11 @@
|
|||
[]
|
||||
(let [images-count (count (vals (rf/sub [:chats/sending-image])))]
|
||||
[quo/button
|
||||
{:on-press #(go-to-camera images-count)
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}}
|
||||
{:on-press #(go-to-camera images-count)
|
||||
:icon-only? true
|
||||
:type :outline
|
||||
:size 32
|
||||
:container-style {:margin-right 12}}
|
||||
:i/camera]))
|
||||
|
||||
(defn open-photo-selector
|
||||
|
|
@ -199,29 +199,29 @@
|
|||
[quo/button
|
||||
{:on-press #(open-photo-selector props animations insets)
|
||||
:accessibility-label :open-images-button
|
||||
:icon true
|
||||
:icon-only? true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}}
|
||||
:container-style {:margin-right 12}}
|
||||
:i/image])
|
||||
|
||||
(defn reaction-button
|
||||
[]
|
||||
[quo/button
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}}
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon-only? true
|
||||
:type :outline
|
||||
:size 32
|
||||
:container-style {:margin-right 12}}
|
||||
:i/reaction])
|
||||
|
||||
(defn format-button
|
||||
[]
|
||||
[quo/button
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32}
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon-only? true
|
||||
:type :outline
|
||||
:size 32}
|
||||
:i/format])
|
||||
|
||||
(defn view
|
||||
|
|
|
|||
|
|
@ -27,16 +27,14 @@
|
|||
:size :paragraph-2}
|
||||
(i18n/label :t/editing-message)]]]
|
||||
[quo/button
|
||||
{:width 24
|
||||
:size 24
|
||||
{:size 24
|
||||
:icon-only? true
|
||||
:accessibility-label :edit-cancel-button
|
||||
:on-press (fn []
|
||||
(utils/cancel-edit-message state)
|
||||
(rf/dispatch [:chat.ui/cancel-message-edit]))
|
||||
:type :outline}
|
||||
[quo/icon :i/close
|
||||
{:size 16
|
||||
:color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]]])
|
||||
:i/close]])
|
||||
|
||||
(defn- f-view
|
||||
[state]
|
||||
|
|
|
|||
|
|
@ -125,18 +125,15 @@
|
|||
(i18n/label :t/photo))
|
||||
constant/content-type-sticker (i18n/label :t/sticker)
|
||||
constant/content-type-audio (i18n/label :t/audio)
|
||||
""))]
|
||||
])]
|
||||
""))]])]
|
||||
(when (and in-chat-input? (not recording-audio?))
|
||||
[quo/button
|
||||
{:width 24
|
||||
{:icon-only? true
|
||||
:size 24
|
||||
:accessibility-label :reply-cancel-button
|
||||
:on-press #(rf/dispatch [:chat.ui/cancel-message-reply])
|
||||
:type :outline}
|
||||
[quo/icon :i/close
|
||||
{:size 16
|
||||
:color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]])
|
||||
:i/close])
|
||||
(when (and in-chat-input? recording-audio?)
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors [(colors/theme-colors colors/white-opa-0 colors/neutral-90-opa-0)
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
[quo/button
|
||||
{:type :grey
|
||||
:size 32
|
||||
:width 32
|
||||
:style {:margin-left 20}
|
||||
:icon-only? true
|
||||
:container-style {:margin-left 20}
|
||||
:accessibility-label :back-button
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
[quo/icon :i/arrow-left {:color (colors/theme-colors colors/neutral-100 colors/white)}]])
|
||||
:i/arrow-left])
|
||||
|
||||
(defn options-button
|
||||
[]
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
[quo/button
|
||||
{:type :grey
|
||||
:size 32
|
||||
:width 32
|
||||
:style {:margin-right 20}
|
||||
:icon-only? true
|
||||
:container-style {:margin-right 20}
|
||||
:accessibility-label :options-button
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [actions/group-details-actions group])}])}
|
||||
[quo/icon :i/options {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))
|
||||
:i/options]))
|
||||
|
||||
(defn top-buttons
|
||||
[]
|
||||
|
|
@ -120,7 +120,8 @@
|
|||
:render-fn add-member-contact-item-render}]
|
||||
[rn/view {:style (style/bottom-container 30)}
|
||||
[quo/button
|
||||
{:style {:flex 1}
|
||||
{:container-style {:flex 1}
|
||||
:type :primary
|
||||
:accessibility-label :save
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:navigate-back])
|
||||
|
|
@ -129,7 +130,7 @@
|
|||
[:group-chats.ui/remove-members-pressed]))
|
||||
500)
|
||||
(rf/dispatch [:group-chats.ui/add-members-pressed]))
|
||||
:disabled (and (zero? (count selected-participants))
|
||||
:disabled? (and (zero? (count selected-participants))
|
||||
(zero? (count deselected-members)))}
|
||||
(i18n/label :t/save)]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
(let [names (rf/sub [:contacts/contact-two-names-by-identity contact-id])]
|
||||
[permission-context/view
|
||||
[quo/button
|
||||
{:type :ghost
|
||||
:on-press #(rf/dispatch [:chat.ui/show-profile contact-id])
|
||||
:before :i/communities}
|
||||
{:type :ghost
|
||||
:on-press #(rf/dispatch [:chat.ui/show-profile contact-id])
|
||||
:icon-left :i/communities}
|
||||
(cond
|
||||
group-chat
|
||||
(i18n/label :t/group-chat-not-member)
|
||||
|
|
|
|||
|
|
@ -28,11 +28,11 @@
|
|||
:size :label}
|
||||
(i18n/label :t/dont-yell-at-me)]
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:size 32
|
||||
:style {:margin-top 20
|
||||
:margin-bottom 12}
|
||||
:on-press #(rf/dispatch [:invite.events/share-link])}
|
||||
{:type :primary
|
||||
:size 32
|
||||
:container-style {:margin-top 20
|
||||
:margin-bottom 12}
|
||||
:on-press #(rf/dispatch [:invite.events/share-link])}
|
||||
(i18n/label :t/invite-friends)]
|
||||
[quo/button
|
||||
{:type :grey
|
||||
|
|
@ -68,7 +68,11 @@
|
|||
(first selected-contacts)]))]
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:padding-horizontal 20}
|
||||
[quo/button {:type :grey :size 32 :icon true :on-press close} :i/close]
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:size 32
|
||||
:icon-only? true
|
||||
:on-press close} :i/close]
|
||||
[rn/view {:style style/contact-selection-heading}
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
|
|
@ -99,7 +103,7 @@
|
|||
[quo/button
|
||||
{:type :primary
|
||||
:accessibility-label :next-button
|
||||
:style style/chat-button
|
||||
:container-style style/chat-button
|
||||
:on-press (fn []
|
||||
(if one-contact-selected?
|
||||
(rf/dispatch [:chat.ui/start-chat public-key])
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
:end {:x 0 :y 0}
|
||||
:style (style/gradient-container (safe-area/get-bottom))}
|
||||
[quo/button
|
||||
{:style {:align-self :stretch
|
||||
{:container-style {:align-self :stretch
|
||||
:margin-horizontal 20
|
||||
:margin-top 12}
|
||||
:on-press #(on-press-confirm-selection selected-images close)
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@
|
|||
[rn/view
|
||||
{:style style/button-container}
|
||||
[quo/button
|
||||
{:on-press #(rf/dispatch [:hide-bottom-sheet])
|
||||
:type :grey
|
||||
:style style/cancel-button}
|
||||
{:on-press #(rf/dispatch [:hide-bottom-sheet])
|
||||
:type :grey
|
||||
:container-style style/cancel-button}
|
||||
(i18n/label :t/cancel)]
|
||||
[quo/button
|
||||
{:on-press #(hide-sheet-and-dispatch [:communities/leave id])
|
||||
:style style/action-button}
|
||||
{:on-press #(hide-sheet-and-dispatch [:communities/leave id])
|
||||
:container-style style/action-button}
|
||||
(i18n/label :t/leave-community)]]]])
|
||||
|
||||
(defn cancel-request-sheet
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
{:accessibility-label :cancel-button
|
||||
:on-press #(rf/dispatch [:hide-bottom-sheet])
|
||||
:type :grey
|
||||
:style style/cancel-button}
|
||||
:container-style style/cancel-button}
|
||||
(i18n/label :t/close)]
|
||||
[quo/button
|
||||
{:accessibility-label :confirm-button
|
||||
:on-press #(hide-sheet-and-dispatch [:communities/cancel-request-to-join request-id])
|
||||
:style style/action-button}
|
||||
:container-style style/action-button}
|
||||
(i18n/label :t/confirm)]]]])
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
{:accessibility-label :cancel
|
||||
:on-press #(rf/dispatch [:navigate-back])
|
||||
:type :grey
|
||||
:style style/cancel-button}
|
||||
:container-style style/cancel-button}
|
||||
(i18n/label :t/cancel)]
|
||||
[quo/button
|
||||
{:accessibility-label :join-community-button
|
||||
|
|
@ -75,8 +75,8 @@
|
|||
requested-to-join-at))
|
||||
(rf/dispatch [:communities/request-to-join id])
|
||||
(rf/dispatch [:navigate-back]))))
|
||||
:disabled (not @agreed-to-rules?)
|
||||
:style {:flex 1}}
|
||||
:disabled? (not @agreed-to-rules?)
|
||||
:container-style {:flex 1}}
|
||||
(request-to-join-text open?)]]
|
||||
[rn/view {:style style/final-disclaimer-container}
|
||||
[quo/text
|
||||
|
|
|
|||
|
|
@ -165,9 +165,9 @@
|
|||
{:on-press #(join-gated-community id)
|
||||
:accessibility-label :join-community-button
|
||||
:customization-color color
|
||||
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
|
||||
:disabled (not can-request-access?)
|
||||
:before (if can-request-access? :i/unlocked :i/locked)}
|
||||
:container-style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
|
||||
:disabled? (not can-request-access?)
|
||||
:icon-left (if can-request-access? :i/unlocked :i/locked)}
|
||||
(i18n/label :t/join-open-community)]])))
|
||||
|
||||
(defn join-community
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
|
||||
:accessibility-label :show-request-to-join-screen-button
|
||||
:customization-color color
|
||||
:before :i/communities}
|
||||
:icon-left :i/communities}
|
||||
(request-to-join-text is-open?)]))
|
||||
|
||||
(when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?)))
|
||||
|
|
@ -302,13 +302,14 @@
|
|||
|
||||
(defn page-nav-right-section-buttons
|
||||
[id]
|
||||
[{:icon :i/options
|
||||
:icon-background-color (scroll-page/icon-color)
|
||||
:accessibility-label :community-options-for-community
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
{:content (fn []
|
||||
[options/community-options-bottom-sheet id])}])}])
|
||||
[{:icon :i/options
|
||||
:type :grey
|
||||
:icon-background :photo
|
||||
:accessibility-label :community-options-for-community
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
{:content (fn []
|
||||
[options/community-options-bottom-sheet id])}])}])
|
||||
|
||||
(defn pick-first-category-by-height
|
||||
[scroll-height first-channel-height categories-heights]
|
||||
|
|
|
|||
|
|
@ -70,14 +70,14 @@
|
|||
description]]
|
||||
[rn/view {:style style/buttons-container}
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:style {:flex 0.48}
|
||||
:on-press #(rf/dispatch [:hide-bottom-sheet])}
|
||||
{:type :grey
|
||||
:container-style {:flex 0.48}
|
||||
:on-press #(rf/dispatch [:hide-bottom-sheet])}
|
||||
(or close-button-text (i18n/label :t/cancel))]
|
||||
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:disabled (string/blank? @entered-nickname)
|
||||
:style {:flex 0.48}
|
||||
:on-press #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
|
||||
{:type :primary
|
||||
:disabled? (string/blank? @entered-nickname)
|
||||
:container-style {:flex 0.48}
|
||||
:on-press #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
|
||||
title]]])))
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press (fn []
|
||||
(when-not disable-back-button?
|
||||
(rf/dispatch back-event)))}
|
||||
: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}]]))
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@
|
|||
|
||||
[rn/view {:style style/button-container}
|
||||
[quo/button
|
||||
{:disabled (not meet-requirements?)
|
||||
{:disabled? (not meet-requirements?)
|
||||
:customization-color user-color
|
||||
:on-press #(rf/dispatch
|
||||
[:onboarding-2/password-set
|
||||
|
|
@ -217,10 +217,10 @@
|
|||
[navigation-bar/navigation-bar
|
||||
{:stack-id :new-to-status
|
||||
:top top
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
:on-press on-press-info}]}]
|
||||
:right-section-buttons [{:type :grey
|
||||
:icon-background :blur
|
||||
:icon :i/info
|
||||
:on-press on-press-info}]}]
|
||||
[password-form]
|
||||
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]]]
|
||||
(finally
|
||||
|
|
|
|||
|
|
@ -170,8 +170,8 @@
|
|||
{:image-path @profile-pic
|
||||
:display-name @full-name
|
||||
:color @custom-color}]))
|
||||
:style style/continue-button
|
||||
:disabled (or (not valid-name?) (not (seq @full-name)))}
|
||||
:container-style style/continue-button
|
||||
:disabled? (or (not valid-name?) (not (seq @full-name)))}
|
||||
(i18n/label :t/continue)]]]])
|
||||
(finally
|
||||
(oops/ocall show-listener "remove")
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
[quo/button
|
||||
{:accessibility-label :enable-biometrics-button
|
||||
:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
|
||||
:before :i/face-id
|
||||
:icon-left :i/face-id
|
||||
:customization-color profile-color}
|
||||
(i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
|
||||
[quo/button
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
:background :blur
|
||||
:type :grey
|
||||
:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
|
||||
:style {:margin-top 12}}
|
||||
:container-style {:margin-top 12}}
|
||||
(i18n/label :t/maybe-later)]]))
|
||||
|
||||
(defn enable-biometrics-parallax
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
(defn enable-notification-buttons
|
||||
[{:keys [insets]}]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||
(let [profile-color (rf/sub [:onboarding-2/customization-color])]
|
||||
[rn/view {:style (style/buttons insets)}
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
:accessibility-label :enable-notifications-later-button
|
||||
:type :grey
|
||||
:background :blur
|
||||
:style {:margin-top 12}}
|
||||
:container-style {:margin-top 12}}
|
||||
(i18n/label :t/maybe-later)]]))
|
||||
|
||||
(defn enable-notifications
|
||||
|
|
|
|||
|
|
@ -73,10 +73,10 @@
|
|||
:on-change-text on-change-seed-phrase}
|
||||
seed-phrase]]
|
||||
[quo/button
|
||||
{:style (style/continue-button keyboard-shown?)
|
||||
:type :primary
|
||||
:disabled button-disabled?
|
||||
:on-press on-submit}
|
||||
{:container-style (style/continue-button keyboard-shown?)
|
||||
:type :primary
|
||||
:disabled? button-disabled?
|
||||
:on-press on-submit}
|
||||
(i18n/label :t/continue)]]))
|
||||
|
||||
(defn keyboard-suggestions
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
:background :blur
|
||||
:on-press #(rf/dispatch [:navigate-to-within-stack
|
||||
[:enable-notifications :new-to-status]])
|
||||
:style style/button}
|
||||
:container-style style/button}
|
||||
(i18n/label :t/skip)]]]]))
|
||||
|
||||
(defn view [props] [:f> f-view props])
|
||||
|
|
|
|||
|
|
@ -105,12 +105,13 @@
|
|||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press navigate-back}
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:left-section {:type :grey
|
||||
:icon-background :blur
|
||||
:icon :i/arrow-left
|
||||
:on-press navigate-back}
|
||||
:right-section-buttons [{:type :grey
|
||||
:icon :i/info
|
||||
:icon-background :blur
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
(if in-onboarding? :sign-in-intro :sign-in)]))
|
||||
:accessibility-label :try-again-later-button
|
||||
:customization-color profile-color
|
||||
:style style/try-again-button}
|
||||
:container-style style/try-again-button}
|
||||
(i18n/label :t/try-again)])
|
||||
|
||||
(defn view
|
||||
|
|
|
|||
|
|
@ -47,15 +47,15 @@
|
|||
|
||||
(defn continue-button
|
||||
[on-press]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||
(let [profile-color (rf/sub [:profile/customization-color])]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(when on-press
|
||||
(on-press))
|
||||
(rf/dispatch [:open-modal :enable-notifications]))
|
||||
:accessibility-label :continue-button
|
||||
:customization0color profile-color
|
||||
:style style/continue-button}
|
||||
:customization-color profile-color
|
||||
:container-style style/continue-button}
|
||||
(i18n/label :t/continue)]))
|
||||
|
||||
(defn- f-view
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
(defn view
|
||||
[]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||
(let [profile-color (rf/sub [:onboarding-2/customization-color])
|
||||
{:keys [status-type]} (rf/sub [:multiaccount/current-user-visibility-status])
|
||||
insets (safe-area/get-insets)]
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@
|
|||
{:type :primary
|
||||
:customization-color :blue
|
||||
:size 32
|
||||
:icon true
|
||||
:icon-only? true
|
||||
:on-press show-new-account-options
|
||||
:accessibility-label :show-new-account-options}
|
||||
:main-icons/add]]
|
||||
|
|
@ -232,11 +232,11 @@
|
|||
{:size 32
|
||||
:type :grey
|
||||
:background :blur
|
||||
:icon true
|
||||
:icon-only? true
|
||||
:on-press set-show-profiles
|
||||
:disabled processing
|
||||
:disabled? processing
|
||||
:accessibility-label :show-profiles
|
||||
:style style/multi-profile-button}
|
||||
:container-style style/multi-profile-button}
|
||||
:i/multi-profile]
|
||||
[rn/scroll-view
|
||||
{:keyboard-should-persist-taps :always
|
||||
|
|
@ -286,10 +286,10 @@
|
|||
:type :primary
|
||||
:customization-color (or customization-color :primary)
|
||||
:accessibility-label :login-button
|
||||
:before :i/unlocked
|
||||
:disabled (or (not sign-in-enabled?) processing)
|
||||
:icon-left :i/unlocked
|
||||
:disabled? (or (not sign-in-enabled?) processing)
|
||||
:on-press login-multiaccount
|
||||
:style {:margin-bottom (+ (safe-area/get-bottom) 12)}}
|
||||
:container-style {:margin-bottom (+ (safe-area/get-bottom) 12)}}
|
||||
(i18n/label :t/log-in)]]))
|
||||
|
||||
(defn view
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[status-im2.common.resources :as resources]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Type:"
|
||||
|
|
@ -43,20 +44,20 @@
|
|||
:value "Blur"}
|
||||
{:key :photo
|
||||
:value "Photo"}]}
|
||||
{:label "Icon:"
|
||||
:key :icon
|
||||
{:label "Icon Only?:"
|
||||
:key :icon-only?
|
||||
:type :boolean}
|
||||
{:label "Above icon:"
|
||||
:key :above
|
||||
{:label "show icon-top "
|
||||
:key :icon-top
|
||||
:type :boolean}
|
||||
{:label "After icon:"
|
||||
:key :after
|
||||
{:label "show icon-right"
|
||||
:key :icon-right
|
||||
:type :boolean}
|
||||
{:label "Before icon:"
|
||||
:key :before
|
||||
{:label "show icon-left"
|
||||
:key :icon-left
|
||||
:type :boolean}
|
||||
{:label "Disabled:"
|
||||
:key :disabled
|
||||
{:label "Disabled?:"
|
||||
:key :disabled?
|
||||
:type :boolean}
|
||||
{:label "Label"
|
||||
:key :label
|
||||
|
|
@ -71,15 +72,15 @@
|
|||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:label "Press Me"
|
||||
:size 40})
|
||||
label (reagent/cursor state [:label])
|
||||
before (reagent/cursor state [:before])
|
||||
after (reagent/cursor state [:after])
|
||||
above (reagent/cursor state [:above])
|
||||
icon (reagent/cursor state [:icon])
|
||||
type (reagent/cursor state [:type])
|
||||
customization-color (reagent/cursor state [:customization-color])]
|
||||
(let [state (reagent/atom {:label "Press Me"
|
||||
:size 40
|
||||
:type :primary
|
||||
:customization-color :blue})
|
||||
label (reagent/cursor state [:label])
|
||||
icon-left (reagent/cursor state [:icon-left])
|
||||
icon-right (reagent/cursor state [:icon-right])
|
||||
icon-top (reagent/cursor state [:icon-top])
|
||||
icon-only? (reagent/cursor state [:icon-only?])]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
|
|
@ -89,23 +90,30 @@
|
|||
{:padding-vertical 60
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
(when (= :photo (:background @state))
|
||||
[rn/image
|
||||
{:source (resources/get-mock-image :community-cover)
|
||||
:style {:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0}}])
|
||||
[quo/button
|
||||
(merge (dissoc @state
|
||||
:customization-color
|
||||
:theme
|
||||
:before
|
||||
:after)
|
||||
:customization-color
|
||||
:icon-left
|
||||
:icon-right)
|
||||
{:background (:background @state)
|
||||
:on-press #(println "Hello world!")}
|
||||
(when (and (= type :primary) customization-color)
|
||||
(:customization-color customization-color))
|
||||
(when @above
|
||||
{:above :i/placeholder})
|
||||
(when @before
|
||||
{:before :i/placeholder})
|
||||
(when @after
|
||||
{:after :i/placeholder}))
|
||||
(if @icon :i/placeholder @label)]]]])))
|
||||
(when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
|
||||
(when @icon-top
|
||||
{:icon-top :i/placeholder})
|
||||
(when @icon-left
|
||||
{:icon-left :i/placeholder})
|
||||
(when @icon-right
|
||||
{:icon-right :i/placeholder}))
|
||||
(if @icon-only? :i/placeholder @label)]]]])))
|
||||
|
||||
(defn preview-button
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -67,10 +67,10 @@
|
|||
[rn/view {:padding-bottom 400}
|
||||
[preview/customizer state descriptor]
|
||||
[quo/button
|
||||
{:style {:margin-horizontal 40}
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [render-action-sheet state])
|
||||
:theme (:theme @state)}])}
|
||||
{:container-style {:margin-horizontal 40}
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [render-action-sheet state])
|
||||
:theme (:theme @state)}])}
|
||||
"See in bottom sheet"]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[render-action-sheet state]]]])))
|
||||
|
|
|
|||
|
|
@ -106,15 +106,15 @@
|
|||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60}
|
||||
[quo/button
|
||||
{:style {:margin-horizontal 40
|
||||
:margin-bottom 20}
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (constantly [render-documenation-drawer @title
|
||||
@show-button?
|
||||
@button-label expanded? @shell?])
|
||||
:expandable? @show-button?
|
||||
:shell? @shell?
|
||||
:expanded? @expanded?}])}
|
||||
{:container-style {:margin-horizontal 40
|
||||
:margin-bottom 20}
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (constantly [render-documenation-drawer @title
|
||||
@show-button?
|
||||
@button-label expanded? @shell?])
|
||||
:expandable? @show-button?
|
||||
:shell? @shell?
|
||||
:expanded? @expanded?}])}
|
||||
"Open drawer"]
|
||||
[render-documenation-drawer @title @show-button? @button-label expanded?]]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -444,9 +444,8 @@
|
|||
(for [{:keys [name]} (val category)]
|
||||
^{:key name}
|
||||
[quo/button
|
||||
{:test-ID (str "quo2-" name)
|
||||
:style {:margin-vertical 8}
|
||||
:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
{:container-style {:margin-vertical 8}
|
||||
:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
(clojure.core/name name)])])
|
||||
(sort screens-categories))]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
:value "Default"}
|
||||
{:key :blur-bg
|
||||
:value "Blurred BG"}
|
||||
{:key :shell
|
||||
:value "Shell"}]}
|
||||
{:key :black
|
||||
:value "Black"}]}
|
||||
{:label "New Notifications?"
|
||||
:key :new-notifications?
|
||||
:type :boolean}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
:checked? checked?
|
||||
:on-change #(swap! state update :checked? not)}
|
||||
text]]
|
||||
[quo/button {:disabled (not checked?)}
|
||||
[quo/button {:disabled? (not checked?)}
|
||||
"submit"]]]))))
|
||||
|
||||
(defn preview-disclaimer
|
||||
|
|
|
|||
|
|
@ -23,15 +23,17 @@
|
|||
[rn/view
|
||||
[rn/view {:style style/header-container}
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :close-activity-center
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
:i/close]
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :activity-center-open-more
|
||||
:on-press #(rf/dispatch [:show-bottom-sheet
|
||||
|
|
|
|||
|
|
@ -110,6 +110,6 @@
|
|||
[jump-to-list switcher-cards shell-margin]
|
||||
[top-nav-blur-overlay top]
|
||||
[common.home/top-nav
|
||||
{:type :shell
|
||||
{:type :black
|
||||
:style {:margin-top top
|
||||
:z-index 2}}]]]))
|
||||
|
|
|
|||
|
|
@ -260,11 +260,11 @@
|
|||
[rn/view {:style style/avatar-container}
|
||||
[avatar avatar-params type customization-color]])
|
||||
[quo/button
|
||||
{:size 24
|
||||
:type :grey
|
||||
:icon true
|
||||
:on-press #(rf/dispatch [:shell/close-switcher-card id])
|
||||
:style style/close-button}
|
||||
{:size 24
|
||||
:type :grey
|
||||
:icon-only? true
|
||||
:on-press #(rf/dispatch [:shell/close-switcher-card id])
|
||||
:container-style style/close-button}
|
||||
:i/close]]]))))
|
||||
|
||||
;; browser Card
|
||||
|
|
|
|||
|
|
@ -17,11 +17,12 @@
|
|||
[]
|
||||
[:<>
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :close-shell-share-tab
|
||||
:style style/header-button
|
||||
:container-style style/header-button
|
||||
:on-press #(rf/dispatch [:navigate-back])}
|
||||
:i/close]
|
||||
[quo/text
|
||||
|
|
@ -79,8 +80,9 @@
|
|||
abbreviated-url]]]
|
||||
[rn/view {:style style/share-button-container}
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :link-to-profile
|
||||
:on-press #(list-selection/open-share {:message profile-url})}
|
||||
|
|
@ -107,11 +109,12 @@
|
|||
[rn/text {:style style/emoji-hash-content} emoji-hash-string]]]]
|
||||
[rn/view {:style style/emoji-share-button-container}
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :link-to-profile
|
||||
:style {:margin-right 12}
|
||||
:container-style {:margin-right 12}
|
||||
:on-press #(rf/dispatch [:share/copy-text-and-show-toast
|
||||
{:text-to-copy emoji-hash-string
|
||||
:post-copy-message (i18n/label :t/emoji-hash-copied)}])
|
||||
|
|
|
|||
|
|
@ -50,8 +50,9 @@
|
|||
:transform [{:translate-y controls-translate-y}]}
|
||||
{})}
|
||||
[quo/button
|
||||
{:icon true
|
||||
:type :blur-bg
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :close-sign-in-by-syncing
|
||||
:on-press (fn []
|
||||
|
|
@ -65,8 +66,9 @@
|
|||
:transform [{:translate-y controls-translate-y}]}
|
||||
{})}
|
||||
[quo/button
|
||||
{:before :i/info
|
||||
:type :blur-bg
|
||||
{:icon-left :i/info
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size 32
|
||||
:accessibility-label :find-sync-code
|
||||
:on-press #(rf/dispatch [:open-modal :find-sync-code])}
|
||||
|
|
@ -144,7 +146,7 @@
|
|||
:style style/enable-camera-access-sub-text}
|
||||
(i18n/label description-label-key)]
|
||||
[quo/button
|
||||
{:before button-icon
|
||||
{:icon-left button-icon
|
||||
:type :primary
|
||||
:size 32
|
||||
:accessibility-label accessibility-label
|
||||
|
|
@ -391,12 +393,12 @@
|
|||
(when show-bottom-view? [bottom-view insets bottom-view-translate-y])
|
||||
(when (and (or (not animated?) @render-camera?) show-camera?)
|
||||
[quo/button
|
||||
{:icon true
|
||||
{:icon-only? true
|
||||
:type :grey
|
||||
:background :blur
|
||||
:size style/flash-button-size
|
||||
:accessibility-label :camera-flash
|
||||
:style (style/camera-flash-button @qr-view-finder)
|
||||
:container-style (style/camera-flash-button @qr-view-finder)
|
||||
:on-press #(swap! torch? not)}
|
||||
flashlight-icon])]]))))
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
(defn view
|
||||
[]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||
(let [profile-color (rf/sub [:profile/customization-color])
|
||||
valid-for-ms (reagent/atom code-valid-for-ms)
|
||||
code (reagent/atom nil)
|
||||
delay (reagent/atom nil)
|
||||
|
|
@ -95,8 +95,9 @@
|
|||
:type :primary
|
||||
:customization-color profile-color
|
||||
:size 40
|
||||
:style style/generate-button
|
||||
:before :i/reveal} (i18n/label :t/reveal-sync-code)])
|
||||
:container-style style/generate-button
|
||||
:icon-left :i/reveal}
|
||||
(i18n/label :t/reveal-sync-code)])
|
||||
(when (sync-utils/valid-connection-string? @code)
|
||||
[rn/view
|
||||
{:style style/valid-cs-container}
|
||||
|
|
@ -118,16 +119,16 @@
|
|||
:default-shown? true
|
||||
:editable false}]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(clipboard/set-string @code)
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:icon :i/correct
|
||||
:icon-color colors/success-50
|
||||
:text (i18n/label
|
||||
:t/sharing-copied-to-clipboard)}]))
|
||||
:type :grey
|
||||
:style {:margin-top 12}
|
||||
:before :i/copy}
|
||||
{:on-press (fn []
|
||||
(clipboard/set-string @code)
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:icon :correct
|
||||
:icon-color colors/success-50
|
||||
:text (i18n/label
|
||||
:t/sharing-copied-to-clipboard)}]))
|
||||
:type :grey
|
||||
:container-style {:margin-top 12}
|
||||
:icon-left :i/copy}
|
||||
(i18n/label :t/copy-qr)]])]]
|
||||
[rn/view {:style style/sync-code}
|
||||
[quo/divider-label
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
|
||||
:icon :i/arrow-left
|
||||
:on-press #(rf/dispatch [:navigate-back])}}]])
|
||||
:left-section {:type :photo
|
||||
:icon-background :blur
|
||||
:icon :i/arrow-left
|
||||
:on-press #(rf/dispatch [:navigate-back])}}]])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
devices-with-button (map #(assoc % :show-button? true) devices)
|
||||
user-device (first devices-with-button)
|
||||
other-devices (rest devices-with-button)
|
||||
profile-color (:color (rf/sub [:onboarding-2/profile]))
|
||||
profile-color (rf/sub [:profile/customization-color])
|
||||
{:keys [paired-devices unpaired-devices]} (group-by
|
||||
#(if (:enabled? %) :paired-devices :unpaired-devices)
|
||||
other-devices)]
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
{:size 32
|
||||
:type :primary
|
||||
:customization-color profile-color
|
||||
:icon true
|
||||
:icon-only? true
|
||||
:on-press #(rf/dispatch [:navigate-to :settings-setup-syncing])}
|
||||
:i/add]]
|
||||
[device/view (merge user-device {:this-device? true})]
|
||||
|
|
|
|||
|
|
@ -13,30 +13,31 @@
|
|||
(case type
|
||||
:text
|
||||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:style style/list-text} (i18n/label value)]
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:container-style style/list-text} (i18n/label value)]
|
||||
|
||||
:button-primary
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:customization-color :blue
|
||||
:size 24
|
||||
:style style/button-primary} (i18n/label value)]
|
||||
:container-style style/button-primary}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-grey
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:size 24
|
||||
:style style/button-grey}
|
||||
{:type :grey
|
||||
:size 24
|
||||
:container-style style/button-grey}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-grey-placeholder
|
||||
[quo/button
|
||||
{:type :grey
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:style style/button-grey-placeholder}
|
||||
{:type :grey
|
||||
:size 24
|
||||
:before :i/placeholder
|
||||
:container-style style/button-grey-placeholder}
|
||||
(i18n/label value)]
|
||||
|
||||
:context-tag
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
(ns status-im2.subs.onboarding
|
||||
(:require [re-frame.core :as re-frame]))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:onboarding-2/customization-color
|
||||
:<- [:onboarding-2/profile]
|
||||
:<- [:profile/customization-color]
|
||||
:<- [:onboarding-2/new-account?]
|
||||
(fn [[{:keys [color]} customization-color new-account?]]
|
||||
(if new-account?
|
||||
color
|
||||
customization-color)))
|
||||
|
|
@ -13,9 +13,10 @@
|
|||
status-im2.subs.home
|
||||
status-im2.subs.keycard
|
||||
status-im2.subs.mailservers
|
||||
status-im2.subs.profile
|
||||
status-im2.subs.networks
|
||||
status-im2.subs.onboarding
|
||||
status-im2.subs.pairing
|
||||
status-im2.subs.profile
|
||||
status-im2.subs.search
|
||||
status-im2.subs.shell
|
||||
status-im2.subs.stickers
|
||||
|
|
|
|||
Loading…
Reference in New Issue