Added alerts functionality + modal UI
This commit is contained in:
NGPixel committed
1 parent
aa740dea7a
commit
52c9821189
13 files changed
+206
-14
No files matched your search
@@ -9,4 +9,11 @@ jQuery( document ).ready(function( $ ) {
|
||||
|
||||
var sticky = new Sticky('.stickyscroll');
|
||||
|
||||
var alerts = new Alerts();
|
||||
if(alertsData) {
|
||||
_.forEach(alertsData, (alertRow) => {
|
||||
alerts.push(alertRow);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Alerts
|
||||
*/
|
||||
class Alerts {
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @class
|
||||
*/
|
||||
constructor() {
|
||||
|
||||
let self = this;
|
||||
|
||||
self.mdl = new Vue({
|
||||
el: '#alerts',
|
||||
data: {
|
||||
children: []
|
||||
},
|
||||
methods: {
|
||||
acknowledge: (uid) => {
|
||||
self.close(uid);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
self.uidNext = 1;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Show a new Alert
|
||||
*
|
||||
* @param {Object} options Alert properties
|
||||
* @return {null} Void
|
||||
*/
|
||||
push(options) {
|
||||
|
||||
let self = this;
|
||||
|
||||
let nAlert = _.defaults(options, {
|
||||
_uid: self.uidNext,
|
||||
class: 'is-info',
|
||||
message: '---',
|
||||
sticky: false,
|
||||
title: '---'
|
||||
});
|
||||
|
||||
self.mdl.children.push(nAlert);
|
||||
|
||||
if(!nAlert.sticky) {
|
||||
_.delay(() => {
|
||||
self.close(nAlert._uid);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
self.uidNext++;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Shorthand method for pushing errors
|
||||
*
|
||||
* @param {String} title The title
|
||||
* @param {String} message The message
|
||||
*/
|
||||
pushError(title, message) {
|
||||
this.push({
|
||||
class: 'is-danger',
|
||||
message,
|
||||
sticky: false,
|
||||
title
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Shorthand method for pushing success messages
|
||||
*
|
||||
* @param {String} title The title
|
||||
* @param {String} message The message
|
||||
*/
|
||||
pushSuccess(title, message) {
|
||||
this.push({
|
||||
class: 'is-success',
|
||||
message,
|
||||
sticky: false,
|
||||
title
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close an alert
|
||||
*
|
||||
* @param {Integer} uid The unique ID of the alert
|
||||
*/
|
||||
close(uid) {
|
||||
|
||||
let self = this;
|
||||
|
||||
let nAlertIdx = _.findIndex(self.mdl.children, ['_uid', uid]);
|
||||
let nAlert = _.nth(self.mdl.children, nAlertIdx);
|
||||
|
||||
if(nAlertIdx >= 0 && nAlert) {
|
||||
nAlert.class += ' exit';
|
||||
self.mdl.children.$set(nAlertIdx, nAlert);
|
||||
_.delay(() => {
|
||||
self.mdl.children.$remove(nAlert);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -5,6 +5,9 @@
|
||||
|
||||
@import 'bulma';
|
||||
@import './libs/twemoji-awesome';
|
||||
@import './libs/animate.min.css';
|
||||
|
||||
@import './components/_alerts';
|
||||
|
||||
@import './layout/_header';
|
||||
@import './layout/_footer';
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
#alerts {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 10px;
|
||||
width: 350px;
|
||||
z-index: 2;
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
|
||||
|
||||
.notification {
|
||||
animation: 0.5s ease slideInRight;
|
||||
margin-top: 5px;
|
||||
|
||||
&.exit {
|
||||
animation: 0.5s ease fadeOutRight;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-size: 500;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -71,6 +71,16 @@ p code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.modal-background {
|
||||
animation: 0.4s ease fadeIn;
|
||||
}
|
||||
.modal-content {
|
||||
animation: 0.4s ease slideInDown;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: $turquoise;
|
||||
}
|
||||
@@ -80,4 +90,8 @@ .card-header-title {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.modal-content .card-footer-item {
|
||||
font-weight: 500;
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*!
|
||||
* animate.css -http://daneden.me/animate
|
||||
* Version - 3.5.1
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Copyright (c) 2016 Daniel Eden
|
||||
*/
|
||||
|
||||
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}70%{-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deLine truncated
|
||||
Reference in new issue
Block a user