alexbeletsky / ng-notifications-bar Goto Github PK
View Code? Open in Web Editor NEWAngular.js component for stylish and flexible top bar notifications.
Home Page: http://beletsky.net/ng-notifications-bar
Angular.js component for stylish and flexible top bar notifications.
Home Page: http://beletsky.net/ng-notifications-bar
When I uglify my bower dependencies, I'm getting this error from the notificationsBar.
Hello, thank you for this library.
Is it possible to 'cycle' messages instead of stacking them? In other words, I want to supply it an array of, say, 3 elements and have it cycle through them inside the same display bar.
thank you.
I have a small fix to make a pull request, but I suspect there are some steps to "compile" the library or something.
Could you post a small guide on how to do this?
thanks.
I'm doing:
notificationsConfigProvider.setAutoHideAnimation('fadeOutNotifications');
notificationsConfigProvider.setAutoHideAnimationDelay(15 * 1000);
But I don;t see any animations at hide time when I'm running the example.
Also is there a way to specify own HTML for message? When notificationsConfigProvider.setAcceptHTML(true), can I put in any HTML or it has limited capabilities.
glyphicons-halflings-regular.woof - glyphicons-halflings-regular.woff
The close icon font-size is 12px and the notification text is 18px. By default, it looks very disproportionate side-by-side (as seen when using font awesome icons). If you simply change the .notifications .close-click
style in ngNotificationsBar.css
to font-size: inherit;
, the icon would look more uniform and proportional to the notification text. I tried to submit a pull request for this but didn't have permissions apparently.
Hi!
I think you have a typo in Services section in README file.
The name of component's factory is notificationS
, but in your example the name is notification
app.controllers('app', function ($scope, api, notification) {
And getting an error:
Error: [$injector:unpr] Unknown provider: notificationProvider <- notification
Hi, i have problem with adding directive in message content. We may add compile to directive notificationsBar.
Thanks alot.
Use all dependencies from npm
.
As an enhancement, it would be nice to see the notification fade out before being removed from the notification array. Maybe we want to apply a notification-exit animation. And once it finishes, remove it from the notification list.
At the moment we have to pass hide
option to message functions. Instead, it will be great to have setAutoHide
through the directive config.
Can you modify the angular dependency version to support version 1.3.x? Thanks
Before continuing before I want to say this was far and away the best notification module I found during my research. Given that I needed to modify it quite substantially I wanted to also praise the code quality because it took barely any time to grasp everything.
Unfortunately, I did run into issues and I would like to share my cases for possible enhancements to the main code base.
getSaveResponse
, setSaveResponse
)saveResponse
also has a id
parameter. This was needed to find correspond correct notifications for dismissal.notification
class to each notification div in the template along with the note.type
.
.notification
to target each entire notification. I could have used a child selector, but it just seemed like overkill for a html element that was a notification.Let me know what your thoughts are. The template things are fairly opinionated for myself, but I do believe they are all good features.
Decouple glyphicons. Fairly straight forward. I was using font awesome and needed to change the template because of this. The close icon doesn't need to be library specific. Maybe add a way to customize it?
Sub-task of #15.
Could you please use some versions in the file description or maybe tags for repository? It would be much easier to track when it needs some updates :)
Hi and congratulations for this nice directive. Great job.
I would like to show a notification bar whitout any animation. Is there an easy way to do it? I was reading the docs and as far as I know there isn't, but parhaps I'm wrong.
Thanks.
Add a notification class to each notification div in the template along with the note.type.
This is a minor one because I just wanted to use a selector like .notification to target each entire notification. I could have used a child selector, but it just seemed like overkill for a html element that was a notification.
Sub-task of #15
I am trying to get ng-notifications-bar to work with browserify-shim, but am unable to. I am requiring it in my app:
require('angular').module('admin', [
require('angular-loading-bar'),
require('angular-ui-router'),
require('angular-ui-bootstrap'),
require('bootstrap-ui-datetime-picker'),
require('angular-bootstrap-show-errors'),
require('angular-cookies'),
require('angular-breadcrumb'),
require('angular-resource'),
require('angular-sanitize'),
require('ui-select'),
require('ngmap'),
require('ng-notifications-bar'),
require('textAngular')
])
And it is also included in my package.json file as a dependency and within browser, browserify-shim.
"browser": {
"angular": "./node_modules/angular/angular.js",
"ng-notifications-bar": "./node_modules/ng-notifications-bar/src/ngNotificationsBar.js"
},
"browserify-shim": {
"angular": {
"exports": "angular"
},
"ng-notifications-bar": {
"depends": [
"./node_modules/angular/angular.js:angular"
],
"exports": "angular.module('ngNotificationsBar').name"
}
Any thoughts on getting this working?
Hi,
I love this notifications so much.
I've a little idea for your next improvement.
Make a config for show the notification at the bottom. Sometimes bottom is look better than top :p.
Thanks!
As follow for #16
Give the ability to modify the template or provide a custom one through either transclude or template-url attribute.
Sub-task of #15
Bower downloads a version from last may (300eaa1). Tag not updated - that's the newest tag -> depends on an old angular version.
Hey man, great project! Tried installing using the command in the README no luck, also tried to look it up on Bower and could not find it!
Use $cookieStore to save prevent notifications a user has already dismissed / closed
I have installed ng-notifications-bar
and successfully created a notification, and was able to style the notifications, but now the message is separated from the notification. Two bars appear. One is white and one is the color of the notification. The white bar contains the message and the colored bar is beneath it. Here is my installation.
Package.json
"browser": {
"angular": "./node_modules/angular/angular.js",
"angular-breadcrumb": "./node_modules/angular-breadcrumb/release/angular-breadcrumb.js",
"bootstrap-ui-datetime-picker": "./node_modules/bootstrap-ui-datetime-picker/dist/datetime-picker.js",
"angular-bootstrap-show-errors": "./node_modules/angular-bootstrap-show-errors/src/showErrors.js",
"ng-notifications-bar": "./node_modules/ng-notifications-bar/src/ngNotificationsBar.js"
},
"browserify-shim": {
"angular": {
"exports": "angular"
},
"angular-breadcrumb": {
"depends": [
"./node_modules/angular/angular.js:angular"
],
"exports": "angular.module('ncy-angular-breadcrumb').name"
},
"bootstrap-ui-datetime-picker": {
"depends": [
"./node_modules/angular/angular.js:angular"
],
"exports": "angular.module('ui.bootstrap.datetimepicker').name"
},
"angular-bootstrap-show-errors": {
"depends": [
"./node_modules/angular/angular.js:angular"
],
"exports": "angular.module('ui.bootstrap.showErrors').name"
},
"ng-notifications-bar": {
"depends": [
"./node_modules/angular/angular.js:angular"
],
"exports": "angular.module('ngNotificationsBar').name"
}
},
I have required ng-notifications-bar in my app:
require('angular').module('admin', [
require('angular-loading-bar'),
require('angular-ui-router'),
require('angular-ui-bootstrap'),
require('bootstrap-ui-datetime-picker'),
require('angular-bootstrap-show-errors'),
require('angular-cookies'),
require('angular-breadcrumb'),
require('angular-resource'),
require('angular-sanitize'),
require('ui-select'),
require('ngmap'),
require('ng-notifications-bar'),
require('textAngular')
])
I imported the styling using:
@import (less) "/node_modules/ng-notifications-bar/css/ngNotificationsBar.css";
Do you know why this would happen? Here is an image of what it looks like:
Hi
Any plan on tagging a new release to make autoHideAnimation & autoHideAnimationDelay available over bower?
Thank you
--jonas
Got an error when using this with requireJS
Fixed it as follows, not sure if this is the best way to go about it however:
angular = angular | window.angular
When I show more than one notification, sometimes some of them stay forever even if hide : true
. I know it might be little information but please try to reproduce. Thanks.
Hi, I've ben trying to setup the notification var for a couple of hours, i get a
๐ Error: $injector:modulerr Module Error whenever i refresh the page.
imports:
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script scr="bower_components/ng-notifications-bar/dist/ngNotificationsBar.min.js"></script>
var module = angular.module('app', ['onsen', 'ngResource', 'ngCordova', 'lbServices', 'vxWamp', 'LocalForageModule', 'angucomplete-alt', 'ngSanitize','ngNotificationsBar']);
How to limit the number of occurrence of the notifications? There is a feature already to implement this or should I treat this in my Controller for example?
Note that the closing square bracket ]
appears twice below (first appearance should be removed):
app.config(['notificationsConfigProvider'], function (notificationsConfigProvider) {
// auto hide
notificationsConfigProvider.setAutoHide(true)
// delay before hide
notificationsConfigProvider.setHideDelay(3000)
}])
Hi,
Is there a way to add custom color/ class to the various notification options?
notifications.showError({
message: 'Oops! Something bad just happened! (hides faster)',
hideDelay: 1500, //ms
hide: true //bool
class: "custom-class" // With this, i could give different color schemes.
});
p.s: I love the color scheme, but this would standout way too much in my current application and hence i would love to have a feature where the class could be altered so that it can be tonned down a bit.
Cheers.
Roy
Hey there, first of all, great component ! thanks for the hard work.
I'd like to propose one enhancement: the ability to remove existing notifications before adding a new one.
Basically the component would only allow one notification at the time. Right now I can add several notifications and they stack on top of each other.
The way we could do it is restrict the number of notifications visible in the same time. If the number goes over the limit, the oldest notification would be removed, until reaching the limit again.
I'm thinking about adding one setting option: maxVisibleNotifications
This could be a parameter in the provider:
app.config(['notificationsConfigProvider', function (notificationsConfigProvider) {
// max visible notifications
notificationsConfigProvider.setMaxVisibleNotifications(1);
}]);
I'm currently too busy to take care of it & pull a request, but I will once I can. I just wanted to throw the idea out there.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.