From 7fb008ae843e129708c90e7dd77f7a7c18ab11fd Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 15 Dec 2015 16:45:46 +0300 Subject: [PATCH] notification widget --- src/app/app.js | 1 + src/app/components/contentTop/contentTop.js | 1 + src/app/components/sidebar/sidebar.js | 4 + src/app/pages/alerts/alerts.js | 4 + .../pages/notifications/_notifications.scss | 25 +++ .../pages/notifications/notifications.html | 151 ++++++++++++++++++ src/app/pages/notifications/notifications.js | 121 ++++++++++++++ src/app/pages/progressBars/_progressBars.scss | 0 src/assets/css/main.scss | 2 +- 9 files changed, 308 insertions(+), 1 deletion(-) create mode 100644 src/app/pages/notifications/_notifications.scss create mode 100644 src/app/pages/notifications/notifications.html create mode 100644 src/app/pages/notifications/notifications.js delete mode 100644 src/app/pages/progressBars/_progressBars.scss diff --git a/src/app/app.js b/src/app/app.js index cd72e99..2da1ceb 100644 --- a/src/app/app.js +++ b/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', diff --git a/src/app/components/contentTop/contentTop.js b/src/app/components/contentTop/contentTop.js index 04f93b9..2d9e0c4 100644 --- a/src/app/components/contentTop/contentTop.js +++ b/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', diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js index 1f1aa2b..d192c74 100644 --- a/src/app/components/sidebar/sidebar.js +++ b/src/app/components/sidebar/sidebar.js @@ -69,6 +69,10 @@ blurAdminApp.directive('sidebar', function () { { title: 'Progress Bars', root: '#/progressBars' + }, + { + title: 'Notifications', + root: '#/notifications' } ] }, diff --git a/src/app/pages/alerts/alerts.js b/src/app/pages/alerts/alerts.js index 6118021..31fc397 100644 --- a/src/app/pages/alerts/alerts.js +++ b/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' } ] diff --git a/src/app/pages/notifications/_notifications.scss b/src/app/pages/notifications/_notifications.scss new file mode 100644 index 0000000..87298b3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/pages/notifications/notifications.html b/src/app/pages/notifications/notifications.html new file mode 100644 index 0000000..de533ca --- /dev/null +++ b/src/app/pages/notifications/notifications.html @@ -0,0 +1,151 @@ + +
+
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + +
+
+
+
+ + + + + + + + + +
+
+
+
+
+ + + +
+
+ + +
+
+ + + +
+
+ +
+
+
+ 
{{optionsStr}}
+
+
+ +
+
+ + + + +
+
+ + diff --git a/src/app/pages/notifications/notifications.js b/src/app/pages/notifications/notifications.js new file mode 100644 index 0000000..251601f --- /dev/null +++ b/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 #angularjs', + 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: 'Sure you can!', + options: { + allowHtml: true + } + }, + { + title: 'Ionic is cool', + 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) + ")"; + }; + + }]); \ No newline at end of file diff --git a/src/app/pages/progressBars/_progressBars.scss b/src/app/pages/progressBars/_progressBars.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 78873f3..34b9c7c 100644 --- a/src/assets/css/main.scss +++ b/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",