Skip to content

Commit afd436b

Browse files
DerekRiesDerekRies
committed
first draft of the api, service and directive both working
0 parents  commit afd436b

File tree

5 files changed

+651
-0
lines changed

5 files changed

+651
-0
lines changed

‎README.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
## Angular-Notifications
2+
3+
### v0.1
4+
5+
This particular component provides a service for creating notifications, and an
6+
easy to use directive for displaying those notifications. Also provides the ability
7+
to use Chrome Notifications instead.
8+
9+
This is an early release, and I'm going to be changing a lot of stuff soon.
10+
11+
### Dependencies
12+
This component is an angularjs component so it should be obvious it depends on angular.
13+
Also for the default notifications **font-awesome 3.1.1** is required to display the icons.
14+
15+
### Installation
16+
After you've downloaded this repository, include both the css and javascript file
17+
and then declare the notifications module as a dependency of your app module.
18+
19+
e.g `angular.module('ngcomponentsApp', ['notifications'])`
20+
21+
Once you've finished that business you should be able to use the notifications service.
22+
If you want those notifications to show up on the screen however (optional), you
23+
will need to add a div to your body tag somewhere and give it a notifications directive
24+
specifying its position like so:
25+
26+
`<div notifications="bottom right"></div>`
27+
28+
You should now magically get notifications
29+
30+
### Usage
31+
32+
In order to use the API you need to inject the `$notification` service into
33+
your controllers. From there you can use one of the many different notifications
34+
like:
35+
36+
* info
37+
* warning
38+
* error
39+
* success
40+
41+
You can use these methods with the following line of code
42+
43+
`$notification.info(title, content, userData);`
44+
`$notification.warning(title, content, userData);`
45+
`$notification.error(title, content, userData);`
46+
`$notification.success(title, content, userData);`
47+
48+
**Title** is of course the title displayed in a large, bold text on the notification.
49+
**Content** is the additional detail text for that notification. The **userData** parameter
50+
is optional but allows you to store some data with a particular notification.
51+
52+
You can also use a generic notify method more inline with the standard chrome desktop
53+
notifications by specifying an image to display in the notification.
54+
`$notification.notify('image.jpg', 'My Title', 'My notification description text');`
55+
56+
### HTML5 Notifications
57+
If you want to use HTML5 notifications with the same API then you can call
58+
`$notification.enableHtml5Mode()`. **Note:** You will need permissions in
59+
order to use HTML5 notifications so for this reason you should call enableHtml5Mode
60+
in a click event listener or something.
61+
62+
63+
### Coming Soon
64+
65+
* Animations - Using ng-animate, will require a minimum of angular 1.1.4 for these
66+
* Better Looking, More Easily Styleable Notifications

‎notification.css

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.dr-notification-container {
2+
position: absolute;
3+
z-index: 10000;
4+
}
5+
6+
.dr-notification-container.bottom {
7+
bottom: 20px;
8+
}
9+
10+
.dr-notification-container.right {
11+
right: 20px;
12+
}
13+
14+
.dr-notification-container.left {
15+
left: 20px;
16+
}
17+
18+
.dr-notification-container.top {
19+
top: 20px;
20+
}
21+
22+
.dr-notification-container.center {
23+
left: 50%;
24+
margin-left: -190px;
25+
}
26+
27+
.dr-notification-wrapper {
28+
width: 380px;
29+
position: relative;
30+
margin: 10px 0;
31+
}
32+
33+
.dr-notification {
34+
width: 380px;
35+
background-color: rgba(2, 45, 59, 0.85);
36+
clear: both;
37+
min-height: 80px;
38+
max-height: 90px;
39+
-webkit-border-radius: 5px;
40+
-moz-border-radius: 5px;
41+
-ms-border-radius: 5px;
42+
border-radius: 5px;
43+
color: #bfe2de;
44+
border: 1px solid rgba(4, 94, 123, 0.85);
45+
overflow: hidden;
46+
}
47+
48+
.dr-notification-close-btn {
49+
-webkit-border-radius: 20px;
50+
-moz-border-radius: 20px;
51+
-ms-border-radius: 20px;
52+
border-radius: 20px;
53+
display: inline-block;
54+
padding: 3px;
55+
background-color: rgba(1, 26, 34, 0.85);
56+
font-size: 14px;
57+
color: #adfaff;
58+
border: 1px solid rgba(4, 94, 123, 0.85);
59+
position: absolute;
60+
right: -11px;
61+
top: 5px;
62+
-webkit-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
63+
-moz-transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
64+
transition: all 0.35s cubic-bezier(0.31, 0.39, 0.21, 1.65);
65+
cursor: pointer;
66+
}
67+
.dr-notification-close-btn i {
68+
padding-left: 3px;
69+
}
70+
.dr-notification-close-btn:hover {
71+
-webkit-transform: scale3d(1.25, 1.25, 1);
72+
-moz-transform: scale3d(1.25, 1.25, 1);
73+
-ms-transform: scale3d(1.25, 1.25, 1);
74+
transform: scale3d(1.25, 1.25, 1);
75+
}
76+
77+
.dr-notification-image {
78+
width: 80px;
79+
height: 80px;
80+
border-right: 1px solid rgba(4, 94, 123, 0.85);
81+
float: left;
82+
display: block;
83+
font-size: 40px;
84+
color: white;
85+
text-align: center;
86+
}
87+
.dr-notification-image i {
88+
display: block;
89+
width: 100%;
90+
padding-top: 25px;
91+
}
92+
.dr-notification-image img {
93+
margin: 15px;
94+
max-width: 70px;
95+
min-width: 48px;
96+
}
97+
98+
.dr-notification-image.dr-notification-type-info {
99+
color: #FFF;
100+
}
101+
102+
.dr-notification-image.dr-notification-type-warning {
103+
color: #FFA226;
104+
}
105+
106+
.dr-notification-image.dr-notification-type-error {
107+
color: #FF4B4F;
108+
}
109+
110+
.dr-notification-image.dr-notification-type-success {
111+
color: #B4D455;
112+
}
113+
114+
.dr-notification-image.success {
115+
color: #B4D455;
116+
}
117+
118+
.dr-notification-content {
119+
padding-left: 100px;
120+
padding-right: 15px;
121+
padding-top: 10px;
122+
}
123+
124+
.dr-notification-title {
125+
color: white;
126+
margin: 0px;
127+
padding: 0px;
128+
font-size: 20px;
129+
}
130+
131+
p.dr-notification-text {
132+
margin-top: -5px;
133+
font-size: 12px;
134+
}

0 commit comments

Comments
 (0)