notification system updates

This commit is contained in:
Henrique Dias 2015-09-16 19:34:53 +01:00
parent 52a57d1f79
commit 5ffe125d67
9 changed files with 294 additions and 45 deletions

View File

@ -37,6 +37,7 @@ module.exports = function(grunt) {
css: {
src: ['node_modules/normalize.css/normalize.css',
'node_modules/font-awesome/css/font-awesome.css',
'node_modules/animate.css/animate.min.css',
'assets/css/src/main.css'
],
dest: 'assets/css/src/main.css',

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,67 @@
#noty_topRight_layout_container {
font-family : sans-serif;
top : 3.5em !important;
right : .5em !important;
position : fixed !important;
width : 310px;
height : auto;
margin : 0;
padding : 0;
list-style-type: none;
z-index : 10000000;
}
#noty_topRight_layout_container li {
overflow: hidden;
margin : 0 0 .25em;
}
.noty_bar {
color : #fff;
background-color: #cfd8dc;
border-radius : .3em;
}
.noty_message {
font-size : .75em;
font-weight: bold;
line-height: 1.2em;
text-align : left;
padding : 1em;
width : auto;
position : relative;
}
.noty_icon {
padding : 1em;
margin-left : -1em;
margin-right : .9em;
background-color : rgba(0,0,0,0.1);
border-top-left-radius : .3em;
border-bottom-left-radius: .3em;
text-align : center;
}
.noty_icon .fa {
width: 1em !important;
}
.noty_type_alert {
}
.noty_type_success {
background-color: #00c853;
}
.noty_type_error {
background-color: #ff5252;
}
.noty_type_warning {
background-color: #ffd600;
}
.noty_type_information {
background-color: #448aff;
}

View File

@ -51,7 +51,7 @@ header nav img {
}
header nav ul li a {
padding: 0.5em 0.5em;
padding: .5em;
line-height: 2em;
display: block;
text-decoration: none;
@ -82,9 +82,7 @@ main {
display: none;
}
/* EDITOR STYLE */
.editor .sidebar {
position: fixed;
left: 0;
@ -93,7 +91,7 @@ main {
overflow-x: hidden;
height: calc(100% - 3em);
width: 25%;
background-color: #37474F;
background-color: #37474f;
color: #ddd;
box-sizing: border-box;
padding: 1.5em 1em;
@ -113,7 +111,8 @@ main {
margin-top: 0;
}
.editor #preview-area, .editor textarea {
.editor #preview-area,
.editor textarea {
position: relative;
box-sizing: border-box;
height: 100%;
@ -162,10 +161,10 @@ main {
bottom: 0;
right: 0;
width: 75%;
background-color: #455A64;
background-color: #455a64;
height: 3em;
display: flex;
padding: 0.5em 1em;
padding: .5em 1em;
box-sizing: border-box;
}
@ -177,9 +176,7 @@ main {
margin-left: 1em;
}
/* FORMS ELEMENTS */
form input {
color: rgba(0, 0, 0, 0.41);
width: 15em;
@ -193,7 +190,7 @@ form input {
form input:focus {
color: inherit;
outline: 0;
border-bottom: 1px solid #2196F3;
border-bottom: 1px solid #2196f3;
}
form label {
@ -213,7 +210,8 @@ form legend {
font-size: 1.5em;
}
button, input[type="submit"] {
button,
input[type="submit"] {
border: 0;
color: #fff;
margin: 0;
@ -222,24 +220,38 @@ button, input[type="submit"] {
font-size: .9em;
width: auto;
line-height: 1em;
background-color: #BBB;
background-color: #bbb;
transition: .3s ease all;
}
button, input[type="submit"], button:active, input[type="submit"]:active, button:hover, input[type="submit"]:hover, button:focus, input[type="submit"]:focus {
button,
input[type="submit"],
button:active,
input[type="submit"]:active,
button:hover,
input[type="submit"]:hover,
button:focus,
input[type="submit"]:focus {
outline: 0;
}
button:hover, input[type="submit"]:hover, button:active, input[type="submit"]:active {
button:hover,
input[type="submit"]:hover,
button:active,
input[type="submit"]:active {
background-color: #999;
}
button.default, input[type="submit"].default {
background-color: #2196F3;
button.default,
input[type="submit"].default {
background-color: #2196f3;
}
button.default:hover, input[type="submit"].default:hover, button.default:active, input[type="submit"].default:active {
background-color: #1E88E5;
button.default:hover,
input[type="submit"].default:hover,
button.default:active,
input[type="submit"].default:active {
background-color: #1e88e5;
}
button.add {
@ -255,5 +267,5 @@ button.add {
h3:hover > button.add {
opacity: 1;
}
@import "scrollbar";
@import "notifications";

File diff suppressed because one or more lines are too long

View File

@ -1,12 +1,6 @@
$(document).ready(function() {
$('.scroll').perfectScrollbar();
var n = noty({
layout: 'topRight',
type: 'success',
text: 'noty - a jquery notification library!'
});
$("#preview").click(function(e) {
e.preventDefault();
@ -47,9 +41,21 @@ $(document).ready(function() {
dataType: 'json',
encode: true,
}).done(function(data) {
alert("It was saved and/or published");
if (action == "Save") {
var word = "saved";
} else {
var word = "published";
}
notification({
text: 'The post was ' + word + '.',
type: 'success'
});
}).fail(function(data) {
alert("Something went wrong");
notification({
text: 'Something went wrong.',
type: 'error'
});
});
event.preventDefault();

View File

@ -0,0 +1,71 @@
$.noty.themes.admin = {
name: 'admin',
helpers: {},
modal: {
css: {
position: 'fixed',
width: '100%',
height: '100%',
backgroundColor: '#000',
zIndex: 10000,
opacity: 0.6,
display: 'none',
left: 0,
top: 0
}
}
};
$.noty.defaults = {
layout: 'topRight',
theme: 'admin',
dismissQueue: true,
animation: {
open: 'animated bounceInRight',
close: 'animated fadeOut',
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 5, // you can set max visible notification for dismissQueue true option,
killer: false, // for close all notifications before show
closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {},
afterClose: function() {},
onCloseClick: function() {},
},
buttons: false // an array of buttons
};
notification = function(options) {
var icon;
switch (options.type) {
case "success":
icon = '<i class="fa fa-check"></i>';
break;
case "error":
icon = '<i class="fa fa-times"></i>';
break;
case "warning":
icon = '<i class="fa fa-exclamation"></i>';
break;
case "information":
icon = '<i class="fa fa-info"></i>';
break;
default:
icon = '<i class="fa fa-bell"></i>';
}
var defaults = {
template: '<div class="noty_message"><span class="noty_icon">' + icon + '</span><span class="noty_text"></span>...<div class="noty_close"></div></div>'
}
options = $.extend({}, defaults, options);
noty(options);
}

View File

@ -14,6 +14,7 @@
},
"homepage": "https://github.com/hacdias/caddy-hugo#readme",
"dependencies": {
"animate.css": "^3.4.0",
"font-awesome": "^4.4.0",
"jquery": "^2.1.4",
"normalize.css": "^3.0.3",
@ -30,4 +31,4 @@
"grunt-contrib-uglify": "^0.9.2",
"grunt-contrib-watch": "^0.6.1"
}
}
}