Skip to content

Commit

Permalink
Merge branch 'develop' into qr-scanner
Browse files Browse the repository at this point in the history
  • Loading branch information
@alwx
alwx authored Feb 8, 2024
2 parents 01bdd86 + ac32de8 commit 662027d
Show file tree
Hide file tree
Showing 45 changed files with 1,057 additions and 514 deletions.
Binary file added resources/images/icons2/12x12/token-master@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons2/12x12/token-master@3x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 31 additions & 26 deletions src/quo/components/buttons/button/properties.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@

(def backgrounds #{:photo :blur})

(defn custom-color-type
[customization-color icon-only?]
{: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- custom-color-type
[customization-color icon-only? theme]
{:icon-color colors/white-opa-70
:label-color colors/white
: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)
Expand All @@ -24,23 +25,23 @@
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)
: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
(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)
: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
(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)
Expand All @@ -50,45 +51,49 @@
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)
: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
(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)
: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
(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?]}]
(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?)
(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?)))
(let [customization-color (get {:primary customization-color
:positive :success
:danger :danger}
type)]
(cond
(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?)
(= 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?))))
11 changes: 4 additions & 7 deletions src/quo/components/buttons/button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion src/quo/components/colors/color_picker/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
(when (and @ref (>= index 0))
(some-> ^js @ref
(.scrollToIndex #js
{:animated true
{:animated false
:index index
:viewPosition 0.5})))))
50)))
Expand Down
58 changes: 42 additions & 16 deletions src/quo/components/drawers/bottom_actions/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,60 @@
[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
:button-one-label button-one
:button-one-props {:icon-left :i/arrow-left}
:button-two-label button-two}])
(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}])
(h/is-truthy (h/get-by-text button-one))
(h/is-truthy (h/get-by-label-text :icon))
(h/is-truthy (h/get-by-text button-two))))

(h/test "render disabled button"
(h/render [bottom-actions/view
{:description "Sample description"
:button-one-props {:disabled? true}
:button-one-label "button"}])
(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"))))
62 changes: 43 additions & 19 deletions src/quo/components/drawers/bottom_actions/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))

(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)
(def description-top
{:flex-direction :row
:align-items :center
:gap 5
:padding-top 12
:padding-bottom 4
:justify-content :center})

(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})
Loading

0 comments on commit 662027d

Please sign in to comment.