mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

It's time to toast 🥂

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-26 14:02:05 +08:00
parent 6da4834b71
commit 6b41666efe
4 changed files with 57 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -20,6 +20,7 @@
"preact-router": "~4.1.0",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"toastify-js": "~1.12.0",
"use-resize-observer": "~9.1.0",
"valtio": "~1.7.6"
},
@ -5104,6 +5105,11 @@
"node": ">=8.0"
}
},
"node_modules/toastify-js": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
"integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
},
"node_modules/tr46": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@ -9408,6 +9414,11 @@
"is-number": "^7.0.0"
}
},
"toastify-js": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
"integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
},
"tr46": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",

1
package.json
View file

@ -22,6 +22,7 @@
"preact-router": "~4.1.0",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"toastify-js": "~1.12.0",
"use-resize-observer": "~9.1.0",
"valtio": "~1.7.6"
},

30
src/app.css
View file

@ -424,6 +424,14 @@ a.mention span {
left: 50%;
transform: translate(-50%, 0);
font-size: 90%;
background: linear-gradient(
to bottom,
var(--button-bg-blur-color),
var(--button-bg-color)
);
backdrop-filter: blur(16px);
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
0 10px 36px -4px var(--button-bg-blur-color);
}
.updates-button .icon {
vertical-align: top;
@ -739,6 +747,28 @@ meter.donut:is(.danger, .explode):after {
color: var(--red-color);
}
/* TOAST */
:root .toastify {
background-image: linear-gradient(
to bottom,
var(--button-bg-blur-color),
var(--button-bg-color)
);
backdrop-filter: blur(16px);
color: var(--button-text-color);
border-radius: 10em;
padding: 8px 16px;
box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
0 10px 36px -4px var(--button-bg-blur-color);
}
:root .toastify:hover {
filter: brightness(1.2);
}
:root .toastify:active {
filter: brightness(0.8);
}
@media (min-width: 40em) {
html,
body {

16
src/app.jsx
View file

@ -1,9 +1,11 @@
import './app.css';
import 'toastify-js/src/toastify.css';
import { createHashHistory } from 'history';
import { login } from 'masto';
import Router from 'preact-router';
import Router, { route } from 'preact-router';
import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
import Toastify from 'toastify-js';
import { useSnapshot } from 'valtio';
import Account from './components/account';
@ -382,6 +384,18 @@ export function App() {
states.showCompose = false;
if (newStatus) {
states.reloadStatusPage++;
const toast = Toastify({
text: 'Status posted. Check it out.',
duration: 10_000, // 10 seconds
gravity: 'bottom',
position: 'center',
// destination: `/#/s/${newStatus.id}`,
onClick: () => {
toast.hideToast();
route(`/s/${newStatus.id}`);
},
});
toast.showToast();
}
}}
/>