cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 19:38:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3347 from dmitrylyzo/toast-stack

Browse Source 
Stack toasts
This commit is contained in:
Bill Thornton 2022-02-13 00:53:24 -05:00 committed by GitHub
commit 910a41e296
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/toast/toast.js
View File

@ -1,5 +1,17 @@
import './toast.scss'; import './toast.scss';
let toastContainer;
function getToastContainer() {
if (!toastContainer) {
toastContainer = document.createElement('div');
toastContainer.classList.add('toastContainer');
document.body.appendChild(toastContainer);
}
return toastContainer;
}
function remove(elem) { function remove(elem) {
setTimeout(function () { setTimeout(function () {
elem.parentNode.removeChild(elem); elem.parentNode.removeChild(elem);
@ -8,7 +20,7 @@ function remove(elem) {
function animateRemove(elem) { function animateRemove(elem) {
setTimeout(function () { setTimeout(function () {
elem.classList.remove('toastVisible'); elem.classList.add('toastHide');
remove(elem); remove(elem);
}, 3300); }, 3300);
} }
@ -24,7 +36,7 @@ export default function (options) {
elem.classList.add('toast'); elem.classList.add('toast');
elem.textContent = options.text; elem.textContent = options.text;
document.body.appendChild(elem); getToastContainer().appendChild(elem);
setTimeout(function () { setTimeout(function () {
elem.classList.add('toastVisible'); elem.classList.add('toastVisible');

33
src/components/toast/toast.scss
View File

@ -1,5 +1,15 @@
.toast { .toastContainer {
position: fixed; position: fixed;
left: 0;
bottom: 0;
pointer-events: none;
z-index: 9999999;
padding: 1em;
display: flex;
flex-direction: column;
}
.toast {
min-width: 20em; min-width: 20em;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
@ -8,13 +18,26 @@
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
min-height: initial; min-height: initial;
padding: 1em 1.5em; padding: 1em 1.5em;
bottom: 1em;
left: 1em;
font-size: 110%; font-size: 110%;
z-index: 9999999; margin: 0.25em 0;
margin-right: auto;
pointer-events: initial;
}
.toast:first-child {
margin-top: 0;
}
.toast:last-child {
margin-bottom: 0;
transform: translateY(16em); transform: translateY(16em);
} }
.toastVisible { .toast.toastVisible {
transform: none; transform: none;
} }
.toast.toastHide {
opacity: 0;
transition: opacity 0.3s ease-out;
}