notification widget

src/app/app.js

@@ -15,6 +15,7 @@ var blurAdminApp = angular.module('BlurAdmin', [
   'BlurAdmin.iconsPage',
   'BlurAdmin.mapsPage',
   'BlurAdmin.progressBarsPage',
+  'BlurAdmin.notificationsPage',
   'BlurAdmin.modalsPage',
   'BlurAdmin.profilePage',
   'BlurAdmin.tablesPage',

src/app/components/contentTop/contentTop.js

@@ -17,6 +17,7 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) {
         '/grid': 'Grid',
         '/alerts': 'Alerts',
         '/progressBars': 'Progress Bars',
+        '/notifications': 'Notifications',
         '/icons': 'Icons',
         '/login': 'Authentication',
         '/maps': 'Maps',

src/app/components/sidebar/sidebar.js

@@ -69,6 +69,10 @@ blurAdminApp.directive('sidebar', function () {
             {
               title: 'Progress Bars',
               root: '#/progressBars'
+            },
+            {
+              title: 'Notifications',
+              root: '#/notifications'
             }
           ]
         },

src/app/pages/alerts/alerts.js

@@ -14,17 +14,21 @@ angular.module('BlurAdmin.alertsPage', ['ngRoute'])
         widgets: [
           [
             {
+              title: 'Basic',
               url: 'app/pages/alerts/widgets/default.html'
             },
             {
+              title: 'Dismissible alerts',
               url: 'app/pages/alerts/widgets/closeable.html'
             }
           ],
           [
             {
+              title: 'Links in alerts',
               url: 'app/pages/alerts/widgets/link.html'
             },
             {
+              title: 'Composite alerts',
               url: 'app/pages/alerts/widgets/composite.html'
             }
           ]

src/app/pages/notifications/_notifications.scss

@@ -0,0 +1,25 @@
+.control{
+  margin-bottom: 10px;
+  .form-control{
+    width: 75%;
+  }
+  span{
+    white-space: pre-line;
+  }
+}
+
+.toastr-radio-setup{
+  margin-left: 22px;
+}
+.radio-header{
+
+  margin-bottom: 0;
+  &.position-header{
+    margin-top: 15px;
+  }
+}
+
+.result-toastr{
+  margin-top: 15px;
+  border-radius: 0;
+}

src/app/pages/notifications/notifications.html

@@ -0,0 +1,151 @@
+<blur-panel class-container="with-scroll">
+  <div class="row">
+    <div class="col-md-3">
+      <div class="control">
+        <label for="title">Title</label>
+        <input ng-model="options.title" type="text" class="form-control" id="title" placeholder="Enter a title ...">
+      </div>
+      <div class="control">
+        <label for="message">Message</label>
+        <textarea ng-model="options.msg" class="form-control" id="message" rows="3"
+                  placeholder="Enter a message ..."></textarea>
+      </div>
+      <div class="control-group">
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.closeButton" type="checkbox" id="closeButton">
+            <span>Close Button</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.html" type="checkbox" id="html">
+            <span>Allow html</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.progressBar" type="checkbox" id="progressBar">
+            <span>Progress bar</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.position" type="checkbox" id="preventDuplicates">
+            <span>Prevent duplicates</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.preventOpenDuplicates" type="checkbox" id="preventOpenDuplicates">
+            <span>Prevent open duplicates</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.tapToDismiss" type="checkbox" id="tapToDismiss">
+            <span>Tap to dismiss</span>
+          </label>
+        </div>
+        <div class="control">
+          <label class="checkbox-inline custom-checkbox nowrap">
+            <input ng-model="options.newestOnTop" type="checkbox" id="newestOnTop">
+            <span>Newest on top</span>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-2 toastr-radio-setup">
+      <div id="toastTypeGroup">
+        <div class="controls">
+          <label class="radio-header">Toast Type</label>
+          <label class="radio">
+            <input type="radio" ng-model="options.type" name="toasts" value="success"/>Success
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.type" name="toasts" value="info"/>Info
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.type" name="toasts" value="warning"/>Warning
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.type" name="toasts" value="error"/>Error
+          </label>
+        </div>
+      </div>
+      <div id="positionGroup">
+        <div class="controls">
+          <label class="radio-header position-header">Position</label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-top-right"/>
+            Top Right
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-bottom-right"/>
+            Bottom Right
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-bottom-left"/>
+            Bottom Left
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-top-left"/>
+            Top Left
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-top-full-width"/>
+            Top Full Width
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-bottom-full-width"/>
+            Bottom Full Width
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-top-center"/>
+            Top Center
+          </label>
+          <label class="radio">
+            <input type="radio" ng-model="options.position" name="positions" value="toast-bottom-center"/>
+            Bottom Center
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-2">
+      <div class="control">
+        <label for="timeOut">Time out</label>
+        <input type="text" class="form-control" id="timeOut" ng-model="options.timeout" placeholder="ms">
+        <label for="timeOut">If you set it to 0, it will stick</label>
+      </div>
+      <div class="control">
+        <label for="extendedTimeOut">Extended time out</label>
+        <input type="text" class="form-control" id="extendedTimeOut" ng-model="options.extendedTimeout"
+               placeholder="ms">
+      </div>
+      <div class="control">
+        <label for="maxOpened">Maximum number of toasts</label>
+        <input type="text" class="form-control" id="maxOpened" ng-model="options.maxOpened" value="0">
+        <label for="timeOut">0 means no limit</label>
+      </div>
+      <div class="control">
+        <label class="checkbox-inline custom-checkbox nowrap">
+          <input ng-model="options.autoDismiss" type="checkbox" id="autoDismiss">
+          <span>Auto dismiss</span>
+        </label>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <pre class="result-toastr" id='toastrOptions'>{{optionsStr}}</pre>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <button ng-click="openToast()" class="btn btn-primary">Open Toast</button>
+      <button ng-click="openRandomToast()" class="btn btn-primary">Open Random Toast</button>
+      <button ng-click="clearToasts()" class="btn btn-danger">Clear Toasts</button>
+      <button ng-click="clearLastToast()" class="btn btn-danger">Clear Last Toast</button>
+    </div>
+  </div>
+
+</blur-panel>

src/app/pages/notifications/notifications.js

@@ -0,0 +1,121 @@
+'use strict';
+
+angular.module('BlurAdmin.notificationsPage', ['ngRoute'])
+
+  .config(['$routeProvider', function ($routeProvider) {
+    $routeProvider.when('/notifications', {
+      templateUrl: 'app/pages/notifications/notifications.html',
+      controller: 'notificationsPageCtrl'
+    });
+  }])
+  .controller('notificationsPageCtrl', ['$scope', 'toastr', 'toastrConfig',
+    function ($scope, toastr, toastrConfig) {
+
+
+      $scope.types = ['success', 'error', 'info', 'warning'];
+
+      $scope.quotes = [
+        {
+          title: 'Come to Freenode',
+          message: 'We rock at <em>#angularjs</em>',
+          options: {
+            allowHtml: true
+          }
+        },
+        {
+          title: 'Looking for bootstrap?',
+          message: 'Try ui-bootstrap out!'
+        },
+        {
+          title: 'Wants a better router?',
+          message: 'We have you covered with ui-router'
+        },
+        {
+          title: 'Angular 2',
+          message: 'Is gonna rock the world'
+        },
+        {
+          title: null,
+          message: 'Titles are not always needed'
+        },
+        {
+          title: null,
+          message: 'Toastr rock!'
+        },
+        {
+          title: 'What about nice html?',
+          message: '<strong>Sure you <em>can!</em></strong>',
+          options: {
+            allowHtml: true
+          }
+        },
+        {
+          title: 'Ionic is <em>cool</em>',
+          message: 'Best mobile framework ever',
+          options: {
+            allowHtml: true
+          }
+        }
+      ];
+
+      var openedToasts = [];
+      $scope.options = {
+        autoDismiss: false,
+        position: 'toast-top-right',
+        type: 'success',
+        timeout: '5000',
+        extendedTimeout: '1000',
+        html: false,
+        closeButton: false,
+        tapToDismiss: true,
+        progressBar: false,
+        newestOnTop: true,
+        maxOpened: 0,
+        preventDuplicates: false,
+        preventOpenDuplicates: false,
+        title: "Some title here",
+        msg: "Type your message here"
+      };
+
+      $scope.$watchCollection('options', function (newValue) {
+        toastrConfig.autoDismiss = newValue.autoDismiss;
+        toastrConfig.allowHtml = newValue.html;
+        toastrConfig.extendedTimeOut = parseInt(newValue.extendedTimeout, 10);
+        toastrConfig.positionClass = newValue.position;
+        toastrConfig.timeOut = parseInt(newValue.timeout, 10);
+        toastrConfig.closeButton = newValue.closeButton;
+        toastrConfig.tapToDismiss = newValue.tapToDismiss;
+        toastrConfig.progressBar = newValue.progressBar;
+        toastrConfig.newestOnTop = newValue.newestOnTop;
+        toastrConfig.maxOpened = newValue.maxOpened;
+        toastrConfig.preventDuplicates = newValue.preventDuplicates;
+        toastrConfig.preventOpenDuplicates = newValue.preventOpenDuplicates;
+      });
+
+
+      $scope.clearLastToast = function () {
+        var toast = openedToasts.pop();
+        toastr.clear(toast);
+      };
+
+      $scope.clearToasts = function () {
+        toastr.clear();
+      };
+
+      $scope.openRandomToast = function () {
+        var type = Math.floor(Math.random() * 4);
+        var quote = Math.floor(Math.random() * 7);
+        var toastType = $scope.types[type];
+        var toastQuote = $scope.quotes[quote];
+        openedToasts.push(toastr[toastType](toastQuote.message, toastQuote.title, toastQuote.options));
+        $scope.optionsStr = "toastr." + toastType + "(\'" + toastQuote.message + "\', \'" + toastQuote.title + "', " + JSON.stringify(toastQuote.options || {}, null, 2) + ")";
+      };
+
+      $scope.openToast = function () {
+        openedToasts.push(toastr[$scope.options.type]($scope.options.msg, $scope.options.title));
+        var strOptions = {};
+        for (var o in  $scope.options) if (o != 'msg' && o != 'title')strOptions[o] = $scope.options[o];
+        $scope.optionsStr = "toastr." + $scope.options.type + "(\'" + $scope.options.msg + "\', \'" + $scope.options.title + "\', " + JSON.stringify(strOptions, null, 2) + ")";
+      };
+
+    }]);

src/assets/css/main.scss

@@ -35,7 +35,7 @@
 "../../app/pages/grid/grid.scss",
 "../../app/pages/alerts/alerts.scss",
 "../../app/pages/mail/mail.scss",
-"../../app/pages/progressBars/progressBars.scss",
+"../../app/pages/notifications/notifications.scss",
 "../../app/pages/mail/widgets/email-widget/email.scss",
 "../../app/pages/maps/widgets/leaflet/leaflet.scss",
 "../../app/pages/maps/widgets/google-maps/google-maps.scss",