Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Differentiate clickable vs static toasts

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-06 16:01:33 +08:00
parent f0442b20e8
commit af7c9bc1b1
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/app.css
View file

@ -1219,35 +1219,45 @@ meter.donut:is(.danger, .explode):after {
/* SHINY PILL */ /* SHINY PILL */
.shiny-pill { :is(.shiny-pill, :root .toastify.shiny-pill) {
pointer-events: auto;
color: var(--button-text-color); color: var(--button-text-color);
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
background-color: var(--button-bg-color); background-color: var(--button-bg-color);
background-image: linear-gradient( background-image: linear-gradient(
160deg, 160deg,
rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0) 50% rgba(0, 0, 0, 0.1)
); );
box-shadow: 0 3px 8px -1px var(--drop-shadow-color), box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
0 10px 36px -4px var(--button-bg-blur-color), 0 10px 36px -4px var(--button-bg-blur-color),
inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5); inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5);
transition: filter 0.3s;
}
:is(.shiny-pill, :root .toastify.shiny-pill):hover {
filter: brightness(1.2);
}
:is(.shiny-pill, :root .toastify.shiny-pill):active {
transition: none;
filter: brightness(0.9);
} }
/* TOAST */ /* TOAST */
:root .toastify { :root .toastify {
user-select: none;
padding: 8px 16px; padding: 8px 16px;
border-radius: 999px; border-radius: 999px;
pointer-events: none;
color: var(--button-text-color);
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
background-color: var(--button-bg-blur-color);
background-image: none;
backdrop-filter: blur(16px);
} }
.toastify-bottom { .toastify-bottom {
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
} }
:root .toastify:hover {
filter: brightness(1.2);
}
:root .toastify:active {
filter: brightness(0.8);
}
/* AVATARS STACK */ /* AVATARS STACK */

6
src/utils/show-toast.js
View file

@ -4,14 +4,14 @@ function showToast(props) {
if (typeof props === 'string') { if (typeof props === 'string') {
props = { text: props }; props = { text: props };
} }
const { onClick = () => {}, delay, ...rest } = props; const { onClick, delay, ...rest } = props;
const toast = Toastify({ const toast = Toastify({
className: 'shiny-pill', className: `${onClick || props.destination ? 'shiny-pill' : ''}`,
gravity: 'bottom', gravity: 'bottom',
position: 'center', position: 'center',
...rest, ...rest,
onClick: () => { onClick: () => {
onClick(toast); // Pass in the object itself! onClick?.(toast); // Pass in the object itself!
}, },
}); });
if (delay) { if (delay) {