jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

notification widget

pull/3/head
alex 2015-12-15 16:45:46 +03:00
parent 56d94116cd
commit 7fb008ae84
9 changed files with 308 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/app.js
View File

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

1
src/app/components/contentTop/contentTop.js
View File

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

4
src/app/components/sidebar/sidebar.js
View File

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

4
src/app/pages/alerts/alerts.js
View File

@ -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'
}
]

25
src/app/pages/notifications/_notifications.scss Normal file
View File

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

151
src/app/pages/notifications/notifications.html Normal file
View File

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

121
src/app/pages/notifications/notifications.js Normal file
View File

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

0
src/app/pages/progressBars/_progressBars.scss
View File

2
src/assets/css/main.scss
View File

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