Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-01-23 00:56:23 +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 {
:is(.shiny-pill, :root .toastify.shiny-pill) {
pointer-events: auto;
color: var(--button-text-color);
text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color);
background-color: var(--button-bg-color);
background-image: linear-gradient(
160deg,
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),
0 10px 36px -4px var(--button-bg-blur-color),
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 */
:root .toastify {
user-select: none;
padding: 8px 16px;
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 {
margin-bottom: env(safe-area-inset-bottom);
}
:root .toastify:hover {
filter: brightness(1.2);
}
:root .toastify:active {
filter: brightness(0.8);
}
/* AVATARS STACK */

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

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