Fix bug in toast

This commit is contained in:
the1812 2018-09-23 19:40:18 +08:00
parent 9d3e8f1f2d
commit 35fd23db95
5 changed files with 7 additions and 7 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:9999;}.toast-card{background:#444;min-width:240px;border-radius:8px;box-shadow:0 1px 20px rgba(0,0,0,.1);height:0;transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;}.toast-card.visible{height:96px;transform:scale(1) translateY(0);opacity:0.95;margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#fff6;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}svg.toast-card-dismiss path{fill:#fff6;}.toast-card-message{color:#eeed;font-size:14px;margin:16px;margin-top:0;}.toast-card.toast-default{background:#444;}.toast-card.toast-error{background:#652020;}.toast-card.toast-info{background:#303d61;}.toast-card.toast-success{background:#274227;}
.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:99999;}.toast-card{background:#444;min-width:240px;border-radius:8px;box-shadow:0 1px 20px rgba(0,0,0,.1);height:0;transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;}.toast-card.visible{height:96px;transform:scale(1) translateY(0);opacity:0.95;margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#fff6;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}svg.toast-card-dismiss path{fill:#fff6;}.toast-card-message{color:#eeed;font-size:14px;margin:16px;margin-top:0;}.toast-card.toast-default{background:#444;}.toast-card.toast-error{background:#652020;}.toast-card.toast-info{background:#303d61;}.toast-card.toast-success{background:#274227;}

View File

@ -6,7 +6,7 @@
display: flex;
flex-direction: column;
align-items: start;
z-index: 9999;
z-index: 99999;
}
.toast-card
{

2
utils/toast.min.js vendored
View File

@ -1 +1 @@
(()=>{return(t,s)=>{class e{constructor(t="",s="",e="default"){this.type=e;this.message=t;this.title=s;this.duration=3e3;this.element=$(this.cardHtml)[0];this.$element=$(this.element);$(".toast-card-container").append(this.$element)}show(){this.element.classList.add("visible");this.$element.find(".toast-card-dismiss").on("click",()=>this.dismiss());if(this.duration){setTimeout(()=>this.dismiss(),this.duration)}}dismiss(){if(this.element.classList.contains("visible")){this.$element.on("transitionend",()=>this.$element.remove());this.element.classList.remove("visible")}}get cardHtml(){return`\n <div class="toast-card toast-${this.type}">\n <div class="toast-card-header">\n <h1 class="toast-card-title">${this.title}</h1>\n <svg class="toast-card-dismiss" viewbox="0 0 24 24">\n <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">\n </path>\n </svg>\n </div>\n <p class="toast-card-message">${this.message}</p>\n </div>\n `}static get container(){return $(".toast-card-container")}static createToastContainer(){if($(".toast-card-container").length===0){$("body").append(`<div class="toast-card-container"></div>`)}}static _show(t,s,i,a){const n=new e(t,s,a);n.duration=i;n.show()}static show(t,s,e=3e3){this._show(t,s,e,"default")}static info(t,s,e){this._show(t,s,e,"info")}static success(t,s,e){this._show(t,s,e,"success")}static error(t,s,e){this._show(t,s,e,"error")}}s.applyStyleFromText(`.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:9999;}.toast-card{background:#444;min-width:240px;border-radius:8px;box-shadow:0 1px 20px rgba(0,0,0,.1);height:0;transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;}.toast-card.visible{height:96px;transform:scale(1) translateY(0);opacity:0.95;margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#fff6;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}svg.toast-card-dismiss path{fill:#fff6;}.toast-card-message{color:#eeed;font-size:14px;margin:16px;margin-top:0;}.toast-card.toast-default{background:#444;}.toast-card.toast-error{background:#652020;}.toast-card.toast-info{background:#303d61;}.toast-card.toast-success{background:#274227;}`);e.createToastContainer();return{ajaxReload:false,export:e}}})();
(()=>{return(t,s)=>{class e{constructor(t="",s="",e="default"){this.type=e;this.message=t;this.title=s;this.duration=3e3;this.element=$(this.cardHtml)[0];this.$element=$(this.element);$(".toast-card-container").append(this.$element)}show(){this.element.classList.add("visible");this.$element.find(".toast-card-dismiss").on("click",()=>this.dismiss());if(this.duration){setTimeout(()=>this.dismiss(),this.duration)}}dismiss(){if(this.element.classList.contains("visible")){this.$element.on("transitionend",()=>this.$element.remove());this.element.classList.remove("visible")}}get cardHtml(){return`\n <div class="toast-card toast-${this.type}">\n <div class="toast-card-header">\n <h1 class="toast-card-title">${this.title}</h1>\n <svg class="toast-card-dismiss" viewbox="0 0 24 24">\n <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z">\n </path>\n </svg>\n </div>\n <p class="toast-card-message">${this.message}</p>\n </div>\n `}static get container(){return $(".toast-card-container")}static createToastContainer(){if($(".toast-card-container").length===0){$("body").append(`<div class="toast-card-container"></div>`)}}static _show(t,s,i,a){const n=new e(t,s,a);n.duration=i;n.show()}static show(t,s,e=3e3){this._show(t,s,e,"default")}static info(t,s,e){this._show(t,s,e,"info")}static success(t,s,e){this._show(t,s,e,"success")}static error(t,s,e){this._show(t,s,e,"error")}}s.applyStyleFromText(`<style id="toast-style">.toast-card-container{position:fixed;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:start;z-index:99999;}.toast-card{background:#444;min-width:240px;border-radius:8px;box-shadow:0 1px 20px rgba(0,0,0,.1);height:0;transition:all 0.3s cubic-bezier(0.18,0.89,0.32,1.28);transform:translateY(16px);transform-origin:bottom;opacity:0;overflow:hidden;display:flex;flex-direction:column;}.toast-card.visible{height:96px;transform:scale(1) translateY(0);opacity:0.95;margin-top:16px;}.toast-card-header{display:flex;align-items:center;}.toast-card-title{font-size:18px;color:#fff6;margin:16px;font-weight:bold;flex:1 1 auto;}svg.toast-card-dismiss{height:24px;width:24px;flex:0 0 auto;padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}svg.toast-card-dismiss path{fill:#fff6;}.toast-card-message{color:#eeed;font-size:14px;margin:16px;margin-top:0;}.toast-card.toast-default{background:#444;}.toast-card.toast-error{background:#652020;}.toast-card.toast-info{background:#303d61;}.toast-card.toast-success{background:#274227;}</style>`);e.createToastContainer();return{ajaxReload:false,export:e}}})();