Added alerts functionality + modal UI

This commit is contained in:
NGPixel
2016-08-23 21:09:09 -04:00
parent aa740dea7a
commit 52c9821189
13 changed files with 206 additions and 14 deletions

View File

@@ -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);
});
}
});

View File

@@ -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);
}
}
}

View File

@@ -5,6 +5,9 @@ $warning: #f68b39;
@import 'bulma';
@import './libs/twemoji-awesome';
@import './libs/animate.min.css';
@import './components/_alerts';
@import './layout/_header';
@import './layout/_footer';

View File

@@ -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;
}
}

View File

@@ -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 @@ p code {
font-weight: 400;
font-size: 16px;
padding: 10px 20px;
}
.modal-content .card-footer-item {
font-weight: 500;
}

11
client/scss/libs/animate.min.css vendored Normal file

File diff suppressed because one or more lines are too long