mirror of
https://github.com/standardnotes/web.git
synced 2024-10-27 16:31:40 +03:00
fix: optimize toasts for mobile (#1392)
This commit is contained in:
parent
a7dfeae650
commit
40d9392599
@ -12,20 +12,20 @@ const prefersReducedMotion = () => {
|
||||
const colorForToastType = (type: ToastType) => {
|
||||
switch (type) {
|
||||
case ToastType.Success:
|
||||
return 'text-success'
|
||||
return 'bg-success text-info-contrast md:text-success'
|
||||
case ToastType.Error:
|
||||
return 'text-danger'
|
||||
return 'bg-danger text-info-contrast md:text-danger'
|
||||
default:
|
||||
return 'text-info'
|
||||
return 'bg-info text-info-contrast md:text-info'
|
||||
}
|
||||
}
|
||||
|
||||
const iconForToastType = (type: ToastType) => {
|
||||
switch (type) {
|
||||
case ToastType.Success:
|
||||
return <CheckCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
|
||||
return <CheckCircleFilledIcon className="text-success h-5 w-5" />
|
||||
case ToastType.Error:
|
||||
return <ClearCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
|
||||
return <ClearCircleFilledIcon className="text-danger h-5 w-5" />
|
||||
case ToastType.Progress:
|
||||
case ToastType.Loading:
|
||||
return <div className="border-info h-4 w-4 animate-spin rounded-full border border-solid border-r-transparent" />
|
||||
@ -77,7 +77,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
|
||||
<div
|
||||
data-index={index}
|
||||
role="status"
|
||||
className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-max select-none flex-col rounded opacity-0 ${currentAnimation}`}
|
||||
className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-full select-none flex-col rounded opacity-0 md:min-w-max ${currentAnimation}`}
|
||||
style={{
|
||||
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)',
|
||||
transition: shouldReduceMotion ? undefined : 'all 0.2s ease',
|
||||
@ -90,18 +90,18 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<div className={`flex w-full items-center ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
|
||||
{icon ? <div className="sn-icon mr-2 flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
|
||||
<div className="text-text text-sm">{toast.message}</div>
|
||||
<div
|
||||
className={`flex w-full flex-wrap items-center gap-2 ${
|
||||
hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'
|
||||
}`}
|
||||
>
|
||||
{icon ? <div className="sn-icon flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
|
||||
<div className="text-text text-sm [word-wrap:anywhere]">{toast.message}</div>
|
||||
{hasActions && (
|
||||
<div className="ml-4">
|
||||
<>
|
||||
{toast.actions?.map((action, index) => (
|
||||
<button
|
||||
style={{
|
||||
paddingLeft: '0.45rem',
|
||||
paddingRight: '0.45rem',
|
||||
}}
|
||||
className={`hover:bg-passive-3 cursor-pointer rounded border-0 bg-transparent py-1 text-sm font-semibold ${colorForToastType(
|
||||
className={`hover:bg-passive-3 cursor-pointer rounded border-0 py-1 px-[0.45rem] text-sm font-semibold md:bg-transparent ${colorForToastType(
|
||||
toast.type,
|
||||
)} ${index !== 0 ? 'ml-2' : ''}`}
|
||||
onClick={() => {
|
||||
@ -112,7 +112,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
|
||||
{action.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{hasProgress && (
|
||||
|
@ -11,7 +11,7 @@ export const ToastContainer: FunctionComponent = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="z-toast fixed bottom-6 right-6 flex flex-col items-end">
|
||||
<div className="z-toast fixed bottom-6 right-6 flex w-[calc(100%-3rem)] flex-col items-end md:w-auto">
|
||||
{toasts.map((toast, index) => (
|
||||
<ToastTimer toast={toast} index={index} key={toast.id} />
|
||||
))}
|
||||
|
@ -55,14 +55,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
|
||||
resumeTimer()
|
||||
}, [resumeTimer])
|
||||
|
||||
const handlePageVisibility = useCallback(() => {
|
||||
if (document.visibilityState === 'hidden') {
|
||||
pauseTimer()
|
||||
} else {
|
||||
resumeTimer()
|
||||
}
|
||||
}, [pauseTimer, resumeTimer])
|
||||
|
||||
const handlePageFocus = useCallback(() => {
|
||||
resumeTimer()
|
||||
}, [resumeTimer])
|
||||
@ -83,7 +75,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
|
||||
toastElement.addEventListener('mouseenter', handleMouseEnter)
|
||||
toastElement.addEventListener('mouseleave', handleMouseLeave)
|
||||
}
|
||||
document.addEventListener('visibilitychange', handlePageVisibility)
|
||||
window.addEventListener('focus', handlePageFocus)
|
||||
window.addEventListener('blur', handlePageBlur)
|
||||
|
||||
@ -93,7 +84,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
|
||||
toastElement.removeEventListener('mouseenter', handleMouseEnter)
|
||||
toastElement.removeEventListener('mouseleave', handleMouseLeave)
|
||||
}
|
||||
document.removeEventListener('visibilitychange', handlePageVisibility)
|
||||
window.removeEventListener('focus', handlePageFocus)
|
||||
window.removeEventListener('blur', handlePageBlur)
|
||||
}
|
||||
@ -105,7 +95,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
|
||||
handleMouseLeave,
|
||||
handlePageBlur,
|
||||
handlePageFocus,
|
||||
handlePageVisibility,
|
||||
resumeTimer,
|
||||
shouldAutoClose,
|
||||
toast.id,
|
||||
|
@ -134,7 +134,7 @@
|
||||
|
||||
.transparent-info-color-background {
|
||||
&::after {
|
||||
@include DimmedBackground(var(--sn-stylekit-info-color), .12);
|
||||
@include DimmedBackground(var(--sn-stylekit-info-color), 0.12);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
@ -142,7 +142,7 @@
|
||||
.transparent-info-color-background-hover {
|
||||
&:hover {
|
||||
&::after {
|
||||
@extend .transparent-info-color-background
|
||||
@extend .transparent-info-color-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user