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

Update drawer/bottom-actions component with top & top error variants (#18513)

This commit is contained in:
Ajay Sivan 2024-02-08 16:01:50 +05:30 committed by GitHub
parent 52a82fffab
commit ac32de89f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 310 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/12x12/token-master@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 695 B

BIN
resources/images/icons2/12x12/token-master@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

37
src/quo/components/buttons/button/properties.cljs
View File

@ -4,14 +4,15 @@
(def backgrounds #{:photo :blur})
(defn custom-color-type
[customization-color icon-only?]
(defn- custom-color-type
[customization-color icon-only? theme]
{:icon-color colors/white-opa-70
:label-color colors/white
:background-color (colors/custom-color customization-color 50)
:border-radius (when icon-only? 24)})
:background-color (colors/resolve-color customization-color theme)
:border-radius (when icon-only? 24)
:overlay-customization-color customization-color})
(defn grey-photo
(defn- grey-photo
[theme pressed?]
{: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)
@ -24,7 +25,7 @@
theme))
:blur-type (if (= theme :light) :light :dark)})
(defn grey-blur
(defn- grey-blur
[theme pressed?]
{: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)
@ -32,7 +33,7 @@
(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
(defn- outline-blur
[theme pressed?]
{: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)
@ -40,7 +41,7 @@
(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
(defn- grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
@ -50,7 +51,7 @@
colors/neutral-90
theme))})
(defn dark-grey
(defn- dark-grey
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
@ -58,7 +59,7 @@
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
(defn outline
(defn- outline
[theme pressed?]
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
@ -66,24 +67,28 @@
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
(defn ghost
(defn- ghost
[theme pressed?]
{: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
(defn- black
[pressed?]
{: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?]}]
(let [customization-color (get {:primary customization-color
:positive :success
:danger :danger}
type)]
(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?)
(contains? #{:primary :positive :danger} type) (custom-color-type customization-color
icon-only?
theme)
(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?)
@ -91,4 +96,4 @@
(= type :dark-grey) (dark-grey theme pressed?)
(= type :outline) (outline theme pressed?)
(= type :ghost) (ghost theme pressed?)
(= type :black) (black pressed?)))
(= type :black) (black pressed?))))

11
src/quo/components/buttons/button/view.cljs
View File

@ -37,13 +37,10 @@
pressed? on-press-in on-press-out allow-multiple-presses?]
:or {type :primary
size 40
customization-color (cond (= type :primary) :blue
(= type :positive) :success
(= type :danger) :danger
:else nil)}}
customization-color (if (= type :primary) :blue nil)}}
children]
(let [{:keys [icon-color background-color label-color border-color blur-type
blur-overlay-color border-radius]}
blur-overlay-color border-radius overlay-customization-color]}
(button-properties/get-values {:customization-color customization-color
:background background
:type type
@ -79,9 +76,9 @@
:icon-left icon-left
:icon-right icon-right})
inner-style)}
(when customization-color
(when overlay-customization-color
[customization-colors/overlay
{:customization-color customization-color
{:customization-color overlay-customization-color
:theme theme
:pressed? (if pressed? pressed? @pressed-state?)}])
(when (= background :photo)

48
src/quo/components/drawers/bottom_actions/component_spec.cljs
View File

@ -3,20 +3,29 @@
[quo.components.drawers.bottom-actions.view :as bottom-actions]
[test-helpers.component :as h]))
(defn- render
[component]
(h/render-with-theme-provider component :light))
(h/describe "bottom actions tests"
(h/test "default render with no description and single action button"
(h/render [bottom-actions/view {:button-one-label "Request to join"}])
(render [bottom-actions/view {:actions :one-action :button-one-label "Request to join"}])
(h/is-truthy (h/get-by-text "Request to join")))
(h/test "render with description"
(h/render [bottom-actions/view {:description "Sample description"}])
(h/is-truthy (h/get-by-text "Sample description")))
(h/test "render with description & 1 action"
(render [bottom-actions/view
{:description :bottom
:description-text "Sample description"
:actions :one-action
:button-one-label "Request to join"}])
(h/is-truthy (h/get-by-text "Sample description"))
(h/is-truthy (h/get-by-text "Request to join")))
(h/test "render with 2 actions"
(let [button-one "Button One"
button-two "Button Two"]
(h/render [bottom-actions/view
{:actions :2-actions
(render [bottom-actions/view
{:actions :two-actions
:button-one-label button-one
:button-one-props {:icon-left :i/arrow-left}
:button-two-label button-two}])
@ -25,12 +34,29 @@
(h/is-truthy (h/get-by-text button-two))))
(h/test "render disabled button"
(h/render [bottom-actions/view
{:description "Sample description"
(render [bottom-actions/view
{:description :bottom
:actions :one-action
:description-text "Sample description"
:button-one-props {:disabled? true}
:button-one-label "button"}])
(h/is-disabled (h/get-by-label-text :button-one)))
(h/test "sane defaults"
(h/render [bottom-actions/view {}])
(h/is-truthy (h/get-by-label-text :button-one))))
(h/test "render with error & 1 action"
(render [bottom-actions/view
{:description :top-error
:error-message "Sample error"
:actions :one-action
:button-one-label "Request to join"}])
(h/is-truthy (h/get-by-text "Sample error"))
(h/is-truthy (h/get-by-text "Request to join")))
(h/test "render with top description & 1 action"
(render [bottom-actions/view
{:description :top
:role :admin
:actions :one-action
:button-one-label "Request to join"}])
(h/is-truthy (h/get-by-text "Eligible to join as"))
(h/is-truthy (h/get-by-text "Admin"))
(h/is-truthy (h/get-by-text "Request to join"))))

60
src/quo/components/drawers/bottom_actions/style.cljs
View File

@ -2,34 +2,58 @@
(:require
[quo.foundations.colors :as colors]))
(defn- text-color
[scroll? blur? theme]
(cond
scroll? (if blur?
colors/white-70-blur
(colors/theme-colors colors/neutral-80-opa-70
colors/white-opa-70
theme))
blur? colors/white-opa-40
:else (colors/theme-colors colors/neutral-50
colors/neutral-40
theme)))
(defn container
[scroll? blur? theme]
{:background-color (when-not (or scroll? blur?)
(colors/theme-colors colors/white colors/neutral-95 theme))})
(def buttons-container
{:flex-direction :row
:justify-content :space-around
:padding-vertical 12
:gap 12
:padding-horizontal 20})
(def button-container
{:flex 1})
(def button-container-2-actions
(assoc button-container :margin-right 12))
(def description-top
{:flex-direction :row
:align-items :center
:gap 5
:padding-top 12
:padding-bottom 4
:justify-content :center})
(defn description
[theme scroll?]
{:color (colors/theme-colors
(if scroll?
(colors/custom-color colors/neutral-80 70)
colors/neutral-50)
(if scroll?
colors/white-opa-70
colors/neutral-40)
theme)
(defn description-top-text
[scroll? blur? theme]
{:color (text-color scroll? blur? theme)})
(defn description-bottom
[scroll? blur? theme]
{:color (text-color scroll? blur? theme)
:text-align :center
:padding-bottom 12
:padding-horizontal 40})
(def scroll
{:margin-top 21
:margin-horizontal 120
:margin-bottom 8
:width 134
:height 5})
(def error-message
{:flex-direction :row
:gap 4
:justify-content :center
:align-items :center
:padding-top 15
:padding-horizontal 20
:padding-bottom 7})

106
src/quo/components/drawers/bottom_actions/view.cljs
View File

@ -2,38 +2,87 @@
(:require
[quo.components.buttons.button.view :as button]
[quo.components.drawers.bottom-actions.style :as style]
[quo.components.icon :as icon]
[quo.components.markdown.text :as text]
[quo.components.tags.context-tag.view :as context-tag]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
[react-native.blur :as blur]
[react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n]))
(def default-props
{:button-one-type :primary
:button-two-type :grey
:customization-color :blue})
(def ?schema
[:=>
[:catn
[:props
[:map {:closed true}
[:actions [:maybe [:enum :one-action :two-actions]]]
[:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
[:description-text {:optional true} [:maybe :string]]
[:error-message {:optional true} [:maybe :string]]
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
[:button-one-label {:optional true} [:maybe :string]]
[:button-two-label {:optional true} [:maybe :string]]
[:button-one-props {:optional true} [:maybe :map]]
[:button-two-props {:optional true} [:maybe :map]]
[:theme :schema.common/theme]
[:scroll? {:optional true} [:maybe :boolean]]
[:blur? {:optional true} [:maybe :boolean]]
[:container-style {:optional true} [:maybe :map]]]]]
:any])
(def ^:private role-icon
{:admin :i/gavel
:member :i/members
:token-master :i/token-master
:owner :i/crown})
(defn- view-internal
"Options:
[{:keys [actions description description-text error-message role button-one-label button-two-label
blur? button-one-props button-two-props theme scroll? container-style]}]
[blur/view
{:blur-amount 20
:blur-type :transparent
:overlay-color (if blur?
colors/neutral-80-opa-1-blur
(colors/theme-colors colors/white-70-blur
colors/neutral-95-opa-70-blur
theme))}
[rn/view
{:style (merge (style/container scroll? blur? theme) container-style)}
(when (= description :top-error)
[rn/view {:style style/error-message}
[icon/icon
:i/alert
{:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
:size 16}]
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
error-message]])
(when (= description :top)
[rn/view
{:style style/description-top}
[text/text
{:size :paragraph-2
:style (style/description-top-text scroll? blur? theme)}
(i18n/label :t/eligible-to-join-as)]
[context-tag/view
{:type :icon
:size 24
:icon (role role-icon)
:blur? blur?
:context (i18n/label (keyword "t" role))}]])
:actions - keyword (default nil) - :1-action/:2-actions
:description - string (default nil) - Description to display below the title
:button-one-label - string (default nil) - Label for the first button
:button-two-label - string (default nil) - Label for the second button
:button-one-props - map with props for button one
:button-two-props - map with props for button two
:theme - :light/:dark
:scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
[props]
(let [{:keys [actions description button-one-label button-two-label
button-one-props button-two-props theme scroll? customization-color container-style]}
(merge default-props props)]
[rn/view {:style container-style}
[rn/view {:style style/buttons-container}
(when (= actions :2-actions)
(when (= actions :two-actions)
[button/button
(merge
{:size 40
:background (when scroll? :blur)
:container-style style/button-container-2-actions
:background (when (or blur? scroll?) :blur)
:container-style style/button-container
:theme theme
:accessibility-label :button-two}
button-two-props)
@ -42,15 +91,16 @@
(merge
{:size 40
:container-style style/button-container
:background (when scroll? :blur)
:background (when (or blur? scroll?) :blur)
:theme theme
:accessibility-label :button-one
:customization-color customization-color}
:accessibility-label :button-one}
button-one-props)
button-one-label]]
(when description
(when (= description :bottom)
[text/text
{:size :paragraph-2
:style (style/description theme scroll?)} description])]))
:style (style/description-bottom scroll? blur? theme)} description-text])]])
(def view (quo.theme/with-theme view-internal))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))

2
src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs
View File

@ -55,7 +55,7 @@
[quo/text
{:size :paragraph-2
:style {:color colors/neutral-50}}
(i18n/label :t/eligible-to-join-as {:role ""})]
(i18n/label :t/eligible-to-join-as)]
[quo/context-tag
{:type :icon
:icon :i/members

61
src/status_im/contexts/preview/quo/drawers/bottom_actions.cljs
View File

@ -19,8 +19,10 @@
(def descriptor
[{:type :select
:key :actions
:options [{:key :1-action}
{:key :2-actions}]}
:options [{:key :one-action}
{:key :two-actions}]}
{:key :button-one-label
:type :text}
{:label "Button 1 type"
:type :select
:key :type
@ -30,6 +32,8 @@
:type :boolean
:key :disabled?
:path [:button-one-props]}
{:key :button-two-label
:type :text}
{:label "Button 2 type"
:type :select
:key :type
@ -39,32 +43,59 @@
:type :boolean
:key :disabled?
:path [:button-two-props]}
{:key :description
:type :text}
{:key :button-one-label
:type :text}
{:key :button-two-label
:type :text}
{:key :blur?
:type :boolean}
{:key :scroll?
:type :boolean}])
:type :boolean}
{:key :description
:type :select
:options [{:key nil
:value :none}
{:key :top}
{:key :bottom}
{:key :top-error}]}])
(def role-descriptor
{:key :role
:type :select
:options [{:key :owner}
{:key :token-master}
{:key :admin}
{:key :member}]})
(def description-descriptor
{:key :description-text
:type :text})
(def error-descriptor
{:key :error-message
:type :text})
(defn view
[]
(let [state (reagent/atom {:actions :2-actions
:description description
(let [state (reagent/atom {:actions :two-actions
:description :bottom
:description-text description
:error-message "Error message"
:button-one-label button-one
:button-two-label button-two
:button-one-props {:on-press (button-press 1)
:type :primary
:icon-left :i/arrow-up}
:type :primary}
:button-two-props {:on-press (button-press 2)
:type :grey}
:blur? false
:role :owner
:scroll? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:scroll? @state)
:descriptor (merge descriptor
(case (:description @state)
:top role-descriptor
:bottom description-descriptor
:top-error error-descriptor
nil))
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true
:component-container-style {:margin-top 40

3
src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs
View File

@ -110,7 +110,8 @@
network))}))
layer-2-networks)}]
[quo/bottom-actions
{:button-one-label (i18n/label :t/update)
{:actions :one-action
:button-one-label (i18n/label :t/update)
:button-one-props {:disabled? (= @state :default)
:on-press (fn []
(let [chain-ids (map :chain-id current-networks)]

10
src/status_im/contexts/wallet/create_account/edit_derivation_path/component_spec.cljs
View File

@ -3,9 +3,13 @@
[status-im.contexts.wallet.create-account.edit-derivation-path.view :as edit-derivation-path]
[test-helpers.component :as h]))
(defn- render
[component]
(h/render-with-theme-provider component :light))
(h/describe "Edit derivation path page"
(h/test "Default render"
(h/render [edit-derivation-path/view {}])
(render [edit-derivation-path/view {}])
(h/is-truthy (h/get-by-translation-text :t/edit-derivation-path))
(h/is-truthy (h/get-by-translation-text :t/path-format))
(h/is-truthy (h/get-by-translation-text :t/derivation-path))
@ -15,14 +19,14 @@
(h/test "Reveal address pressed"
(let [on-reveal (h/mock-fn)]
(h/render [edit-derivation-path/view {:on-reveal on-reveal}])
(render [edit-derivation-path/view {:on-reveal on-reveal}])
(h/fire-event :press (h/get-by-translation-text :t/reveal-address))
(h/was-called on-reveal)
(h/wait-for #(h/is-truthy (h/get-by-translation-text :t/address-activity)))))
(h/test "Reset button pressed"
(let [on-reset (h/mock-fn)]
(h/render [edit-derivation-path/view {:on-reset on-reset}])
(render [edit-derivation-path/view {:on-reset on-reset}])
(h/fire-event :press (h/get-by-translation-text :t/reset))
(h/was-called on-reset)
(h/wait-for #(h/is-truthy (h/get-by-translation-text :t/derive-addresses))))))

6
src/status_im/contexts/wallet/create_account/edit_derivation_path/view.cljs
View File

@ -72,7 +72,7 @@
:default
[quo/bottom-actions
{:theme theme
:actions :1-action
:actions :one-action
:button-one-label (i18n/label :t/reveal-address)
:button-one-props {:type :outline
:icon-left :i/keycard-card
@ -81,7 +81,7 @@
:empty
[quo/bottom-actions
{:theme theme
:actions :1-action
:actions :one-action
:button-one-label (i18n/label :t/derive-addresses)
:button-one-props {:type :outline
:icon-left :i/keycard-card
@ -111,7 +111,7 @@
[rn/view {:style (style/save-button-container bottom)}
[quo/bottom-actions
{:theme theme
:actions :1-action
:actions :one-action
:button-one-label (i18n/label :t/save)
:button-one-props {:type :primary
:on-press #(js/alert "Save!")

6
src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs
View File

@ -77,7 +77,8 @@
(if @revealed?
[rn/view {:style style/slide-button}
[quo/bottom-actions
{:button-one-label (i18n/label :t/i-have-written)
{:actions :one-action
:button-one-label (i18n/label :t/i-have-written)
:button-one-props {:disabled? (some false? (vals @checked?))
:customization-color customization-color
:on-press #(rf/dispatch [:navigate-to
@ -87,7 +88,8 @@
:style (style/description-text theme)}
(i18n/label :t/next-you-will)]]
[quo/bottom-actions
{:button-one-label (i18n/label :t/reveal-phrase)
{:actions :one-action
:button-one-label (i18n/label :t/reveal-phrase)
:button-one-props {:disabled? (some false? (vals @checked?))
:customization-color customization-color
:on-press #(reset! revealed? true)}

3
src/status_im/contexts/wallet/create_account/select_keypair/view.cljs
View File

@ -75,7 +75,8 @@
:container-style {:margin-horizontal 20
:margin-vertical 8}})]
[quo/bottom-actions
{:button-one-label (i18n/label :t/confirm-account-origin)
{:actions :one-action
:button-one-label (i18n/label :t/confirm-account-origin)
:button-one-props {:disabled? true
:customization-color customization-color}
:container-style style/bottom-action-container}]]))

14
src/status_im/contexts/wallet/send/input_amount/component_spec.cljs
View File

@ -47,12 +47,16 @@
:wallet/wallet-send-suggested-routes {:candidates []}
:wallet/wallet-send-selected-networks []})
(defn- render
[component]
(h/render-with-theme-provider component :light))
(h/describe "Send > input amount screen"
(h/setup-restorable-re-frame)
(h/test "Default render"
(h/setup-subs sub-mocks)
(h/render [input-amount/view
(render [input-amount/view
{:crypto-decimals 2
:limit-crypto 250
:initial-crypto-currency? false}])
@ -65,7 +69,7 @@
(h/test "Fill token input and confirm"
(h/setup-subs sub-mocks)
(let [on-confirm (h/mock-fn)]
(h/render [input-amount/view
(render [input-amount/view
{:on-confirm on-confirm
:crypto-decimals 10
:limit-crypto 1000
@ -89,7 +93,7 @@
(h/setup-subs sub-mocks)
(let [on-confirm (h/mock-fn)]
(h/render [input-amount/view
(render [input-amount/view
{:crypto-decimals 10
:limit-crypto 1000
:on-confirm on-confirm
@ -111,7 +115,7 @@
(h/test "Try to fill more than limit"
(h/setup-subs sub-mocks)
(h/render [input-amount/view
(render [input-amount/view
{:crypto-decimals 1
:limit-crypto 1}])
@ -123,7 +127,7 @@
(h/test "Switch from crypto to fiat and check limit"
(h/setup-subs sub-mocks)
(h/render [input-amount/view
(render [input-amount/view
{:crypto-decimals 1
:limit-crypto 1
:on-confirm #()}])

6
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -222,11 +222,11 @@
:input-value @input-value
:fetch-routes #(fetch-routes % current-limit)}]
[quo/bottom-actions
{:actions :1-action
:customization-color color
{:actions :one-action
:button-one-label (i18n/label :t/confirm)
:button-one-props {:disabled? confirm-disabled?
:on-press on-confirm}}]
:on-press on-confirm
:customization-color color}}]
[quo/numbered-keyboard
{:container-style (style/keyboard-container bottom)
:left-action :dot

2
translations/en.json
View File

@ -2260,9 +2260,9 @@
"sync-devices-complete-title": "Device sync complete!",
"sync-devices-complete-sub-title": "Your devices are now in sync",
"synced-with": "Synced with",
"eligible-to-join-as": "Eligible to join as {{role}}",
"you-eligible-to-join": "You’re eligible to join",
"you-eligible-to-join-as": "You’re eligible to join as {{role}}",
"eligible-to-join-as": "Eligible to join as",
"you-not-eligible-to-join": "You’re not eligible to join",
"you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
"token-gated-communities": "Token gated communities",