Toast notification design fixes (#18468)
* Toast notification design fixes * Code style fix * Smaller fix * Style fix * Fixes * Style fixes * Fixes * Fixes
This commit is contained in:
Alexander
GitHub
parent
025c38ae88
commit
e381998b19
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -24,9 +24,7 @@
|
|||
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:padding-vertical 8
|
||||
:padding-left 10
|
||||
:padding-right 8
|
||||
:padding 8
|
||||
:border-radius 12})
|
||||
|
||||
(defn title
|
||||
|
|
@ -47,8 +45,13 @@
|
|||
theme))
|
||||
:container-style {:width 20 :height 20}})
|
||||
|
||||
(def left-side-container {:padding 2})
|
||||
(def right-side-container {:padding 4 :flex 1})
|
||||
(def left-side-container
|
||||
{:padding 2
|
||||
:padding-top 3})
|
||||
|
||||
(def right-side-container
|
||||
{:padding 4
|
||||
:flex 1})
|
||||
|
||||
(defn action-container
|
||||
[theme]
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@
|
|||
:blur-radius 10
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent}]
|
||||
|
||||
[rn/view {:style (style/content-container theme)}
|
||||
[rn/view {:style style/left-side-container}
|
||||
left]
|
||||
|
|
@ -77,16 +76,19 @@
|
|||
:or {type :neutral icon :i/placeholder}}]
|
||||
(let [context-theme (or theme (quo.theme/get-theme))
|
||||
icon-name (case type
|
||||
:positive :i/correct
|
||||
:negative :i/incorrect
|
||||
:positive (if (= theme :light)
|
||||
:i/correct
|
||||
:i/correct-dark)
|
||||
:negative (if (= theme :light)
|
||||
:i/incorrect
|
||||
:i/incorrect-dark)
|
||||
:neutral icon)]
|
||||
[quo.theme/provider {:theme context-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 context-theme)])
|
||||
:title title
|
||||
:text text
|
||||
:right (if undo-duration
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
(ns status-im.common.toasts.style)
|
||||
(ns status-im.common.toasts.style
|
||||
(:require [react-native.safe-area :as safe-area]))
|
||||
|
||||
(def outmost-transparent-container
|
||||
(defn outmost-transparent-container
|
||||
[]
|
||||
{:elevation 2
|
||||
:pointer-events :box-none
|
||||
:padding-top 52
|
||||
:padding-top (+ (safe-area/get-top) 6)
|
||||
:flex-direction :column
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
|
|
|||
|
|
@ -60,5 +60,5 @@
|
|||
[]
|
||||
(->> (rf/sub [:toasts])
|
||||
:ordered
|
||||
(into [rn/view {:style style/outmost-transparent-container}]
|
||||
(into [rn/view {:style (style/outmost-transparent-container)}]
|
||||
(map #(with-meta [:f> f-container %] {:key %})))))
|
||||
|
|
|
|||
|
|
@ -153,19 +153,19 @@
|
|||
50)}]))
|
||||
:max-duration-ms constants/audio-max-duration-ms}]]))
|
||||
|
||||
(defn images-limit-toast
|
||||
(defn photo-limit-toast
|
||||
[]
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:type :negative
|
||||
:container-style {:top (when platform/ios? 20)}
|
||||
:text (i18n/label :t/only-6-images)}]))
|
||||
:text (i18n/label :t/hit-photos-limit
|
||||
{:max-photos constants/max-album-photos})}]))
|
||||
|
||||
|
||||
(defn go-to-camera
|
||||
[images-count]
|
||||
(device-permissions/camera #(if (>= images-count constants/max-album-photos)
|
||||
(images-limit-toast)
|
||||
(photo-limit-toast)
|
||||
(rf/dispatch [:navigate-to :camera-screen]))))
|
||||
|
||||
(defn camera-button
|
||||
|
|
|
|||
|
|
@ -75,3 +75,6 @@
|
|||
{:position :absolute
|
||||
:top 8
|
||||
:right 8})
|
||||
|
||||
(def photo-limit-toast-container
|
||||
{:top (if platform/ios? 6 16)})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
[react-native.core :as rn]
|
||||
[react-native.gesture :as gesture]
|
||||
[react-native.linear-gradient :as linear-gradient]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -17,13 +16,14 @@
|
|||
|
||||
(def min-scroll-to-blur 5)
|
||||
|
||||
(defn show-toast
|
||||
(defn show-photo-limit-toast
|
||||
[]
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:type :negative
|
||||
:container-style {:top (when platform/ios? 20)}
|
||||
:text (i18n/label :t/only-6-images)}]))
|
||||
:container-style style/photo-limit-toast-container
|
||||
:text (i18n/label :t/hit-photos-limit
|
||||
{:max-photos constants/max-album-photos})}]))
|
||||
|
||||
(defn on-press-confirm-selection
|
||||
[selected close]
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
(if item-selected?
|
||||
(swap! selected remove-selected item)
|
||||
(if (>= (count @selected) constants/max-album-photos)
|
||||
(show-toast)
|
||||
(show-photo-limit-toast)
|
||||
(swap! selected conj item))))
|
||||
:accessibility-label (str "image-" index)}
|
||||
[rn/image
|
||||
|
|
|
|||
|
|
@ -2119,7 +2119,7 @@
|
|||
"my-albums": "My albums",
|
||||
"images": "images",
|
||||
"album-images-count": "{{album-images-count}} photos",
|
||||
"only-6-images": "You can only add 6 images to your message",
|
||||
"hit-photos-limit": "You can only add {{max-photos}} photos to your message",
|
||||
"delivered": "Delivered",
|
||||
"mark-all-notifications-as-read": "Mark all notifications as read",
|
||||
"notifications-marked-as-read": "{{count}} notifications marked as read",
|
||||
|
|
|
|||
Loading…
Reference in New Issue