fix: Collectible screen design issues (#19721)
fix: Collectible screen design issues (#19721)
This commit is contained in:
parent
f50ca4606f
commit
12515a4904
|
@ -9,10 +9,17 @@
|
|||
:size-20 20
|
||||
nil))
|
||||
|
||||
(defn collection-avatar
|
||||
(defn collection-avatar-container
|
||||
[theme size]
|
||||
{:width (get-dimensions size)
|
||||
:height (get-dimensions size)
|
||||
:border-width 1
|
||||
:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:border-radius 6})
|
||||
{:width (get-dimensions size)
|
||||
:height (get-dimensions size)
|
||||
:border-width 1
|
||||
:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:border-radius 6
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(defn collection-avatar
|
||||
[size]
|
||||
{:width (get-dimensions size)
|
||||
:height (get-dimensions size)})
|
||||
|
|
|
@ -2,18 +2,20 @@
|
|||
(:require
|
||||
[quo.components.avatars.collection-avatar.style :as style]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]))
|
||||
|
||||
(defn view
|
||||
"Opts:
|
||||
|
||||
|
||||
:image - collection image
|
||||
:theme - keyword -> :light/:dark"
|
||||
[{:keys [image size on-load-end on-error] :or {size :size-24}}]
|
||||
(let [theme (quo.theme/use-theme)]
|
||||
[fast-image/fast-image
|
||||
{:accessibility-label :collection-avatar
|
||||
:source image
|
||||
:on-load-end on-load-end
|
||||
:on-error on-error
|
||||
:style (style/collection-avatar theme size)}]))
|
||||
[rn/view {:style (style/collection-avatar-container theme size)}
|
||||
[fast-image/fast-image
|
||||
{:accessibility-label :collection-avatar
|
||||
:source image
|
||||
:on-load-end on-load-end
|
||||
:on-error on-error
|
||||
:style (style/collection-avatar size)}]]))
|
||||
|
|
|
@ -67,27 +67,26 @@
|
|||
|
||||
(defn toast
|
||||
"Options:
|
||||
|
||||
|
||||
:type => :neutral/:negative/:positive
|
||||
"
|
||||
[{:keys [type icon title text action undo-duration undo-on-press container-style theme user]
|
||||
[{:keys [type icon title text action undo-duration undo-on-press container-style user]
|
||||
:or {type :neutral icon :i/placeholder}}]
|
||||
(let [context-theme (quo.theme/use-theme)
|
||||
context-theme (or theme context-theme)
|
||||
icon-name (case type
|
||||
:positive (if (= theme :light)
|
||||
:i/correct
|
||||
:i/correct-dark)
|
||||
:negative (if (= theme :light)
|
||||
:i/incorrect
|
||||
:i/incorrect-dark)
|
||||
:neutral icon)]
|
||||
[quo.theme/provider context-theme
|
||||
(let [theme (quo.theme/use-theme)
|
||||
icon-name (case type
|
||||
:positive (if (= theme :light)
|
||||
:i/correct
|
||||
:i/correct-dark)
|
||||
:negative (if (= theme :light)
|
||||
:i/incorrect
|
||||
:i/incorrect-dark)
|
||||
:neutral icon)]
|
||||
[quo.theme/provider theme
|
||||
[toast-container
|
||||
{:left (cond user
|
||||
[user-avatar/user-avatar user]
|
||||
icon-name
|
||||
[icon/icon icon-name (style/icon type context-theme)])
|
||||
[icon/icon icon-name (style/icon type theme)])
|
||||
:title title
|
||||
:text text
|
||||
:right (if undo-duration
|
||||
|
@ -96,3 +95,4 @@
|
|||
:undo-on-press undo-on-press}]
|
||||
action)
|
||||
:container-style container-style}]]))
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
[quo.foundations.colors :as colors]))
|
||||
|
||||
(defn container
|
||||
[size card? blur? theme]
|
||||
[{:keys [size card? blur? actionable? theme]}]
|
||||
{:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:padding-vertical (when (= size :default) 8)
|
||||
|
@ -11,8 +11,11 @@
|
|||
:border-radius 16
|
||||
:border-width (when (and card? (not= size :small)) 1)
|
||||
:background-color (if blur?
|
||||
colors/white-opa-5
|
||||
(colors/theme-colors colors/white colors/neutral-95 theme))
|
||||
(if actionable? :transparent colors/white-opa-5)
|
||||
(colors/theme-colors
|
||||
(if actionable? colors/white colors/neutral-2_5)
|
||||
(if actionable? colors/neutral-95 colors/neutral-90)
|
||||
theme))
|
||||
:border-color (if blur?
|
||||
colors/white-opa-10
|
||||
(colors/theme-colors colors/neutral-10
|
||||
|
|
|
@ -125,7 +125,12 @@
|
|||
{:accessibility-label :data-item
|
||||
:disabled (not icon-right?)
|
||||
:on-press on-press
|
||||
:style (merge (style/container size card? blur? theme) container-style)}
|
||||
:style (merge (style/container {:size size
|
||||
:card? card?
|
||||
:blur? blur?
|
||||
:actionable? on-press
|
||||
:theme theme})
|
||||
container-style)}
|
||||
[left-side props]
|
||||
(when (and (= :default status) (not= :small size))
|
||||
[right-side
|
||||
|
|
|
@ -16,4 +16,4 @@
|
|||
|
||||
(def ^:const default-dimension 1000)
|
||||
|
||||
(def ^:const margin 8)
|
||||
(def ^:const margin 16)
|
||||
|
|
|
@ -64,7 +64,8 @@
|
|||
[quo/page-nav
|
||||
(cond-> {:margin-top (safe-area/get-top)
|
||||
:type :no-title
|
||||
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
||||
:background (if (or (:blur? page-nav-props)
|
||||
(= 1 (reanimated/get-shared-value opacity-animation)))
|
||||
:blur
|
||||
:photo)
|
||||
:right-side page-nav-right-section-buttons
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
(:require
|
||||
[oops.core :as oops]
|
||||
[quo.core :as quo]
|
||||
[react-native.platform :as platform]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.lightbox.constants :as constants]
|
||||
[status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
|
||||
|
@ -36,7 +35,6 @@
|
|||
[:lightbox/save-image-to-gallery
|
||||
uri
|
||||
#(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:type :positive
|
||||
:container-style {:bottom (when platform/android? 20)}
|
||||
:text (i18n/label :t/photo-saved)}])]))}]]]))
|
||||
{:id :random-id
|
||||
:type :positive
|
||||
:text (i18n/label :t/photo-saved)}])]))}]]]))
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
(ns status-im.contexts.wallet.collectible.options.view
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[react-native.platform :as platform]
|
||||
[status-im.contexts.wallet.common.utils.external-links :as external-links]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
|
@ -28,10 +27,9 @@
|
|||
[:lightbox/save-image-to-gallery
|
||||
uri
|
||||
#(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:type :positive
|
||||
:container-style {:bottom (when platform/android? 20)}
|
||||
:text (i18n/label :t/photo-saved)}])]))}]
|
||||
{:id :random-id
|
||||
:type :positive
|
||||
:text (i18n/label :t/photo-saved)}])]))}]
|
||||
[{:icon :i/share
|
||||
:accessibility-label :share-collectible
|
||||
:label (i18n/label :t/share-collectible)
|
||||
|
|
|
@ -106,7 +106,8 @@
|
|||
{:name collectible-name
|
||||
:image preview-uri}])
|
||||
:theme theme}])}]
|
||||
:picture preview-uri}}
|
||||
:picture preview-uri
|
||||
:blur? true}}
|
||||
[rn/view {:style style/container}
|
||||
[quo/expanded-collectible
|
||||
{:image-src preview-uri
|
||||
|
|
Loading…
Reference in New Issue