notification system updates

Gruntfile.js

@@ -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',

assets/css/src/sass/_notifications.scss

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

assets/css/src/sass/main.scss

@@ -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 {
+button.default,
-  background-color: #2196F3;
+input[type="submit"].default {
+  background-color: #2196f3;
 }
 
-button.default:hover, input[type="submit"].default:hover, button.default:active, input[type="submit"].default:active {
+button.default:hover,
-  background-color: #1E88E5;
+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";

assets/js/src/app.js

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

assets/js/src/notifications.js

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

package.json

@@ -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"
   }
-}
+}