Skip to content

Commit d88196b

Browse files
budiadionobudiadiono
committed
toastr - closes #12 
1 parent 7750365 commit d88196b

File tree

13 files changed

+356
-69
lines changed

13 files changed

+356
-69
lines changed

‎demo/dist/assets/toastr.css‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
.toast-title {
2+
font-weight: bold;
3+
}
4+
.toast-message {
5+
-ms-word-wrap: break-word;
6+
word-wrap: break-word;
7+
}
8+
.toast-message a,
9+
.toast-message label {
10+
color: #ffffff;
11+
}
12+
.toast-message a:hover {
13+
color: #cccccc;
14+
text-decoration: none;
15+
}
16+
.toast-close-button {
17+
position: relative;
18+
right: -0.3em;
19+
top: -0.3em;
20+
float: right;
21+
font-size: 20px;
22+
font-weight: bold;
23+
color: #ffffff;
24+
-webkit-text-shadow: 0 1px 0 #ffffff;
25+
text-shadow: 0 1px 0 #ffffff;
26+
opacity: 0.8;
27+
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
28+
filter: alpha(opacity=80);
29+
}
30+
.toast-close-button:hover,
31+
.toast-close-button:focus {
32+
color: #000000;
33+
text-decoration: none;
34+
cursor: pointer;
35+
opacity: 0.4;
36+
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
37+
filter: alpha(opacity=40);
38+
}
39+
/*Additional properties for button version
40+
iOS requires the button element instead of an anchor tag.
41+
If you want the anchor version, it requires `href="#"`.*/
42+
button.toast-close-button {
43+
padding: 0;
44+
cursor: pointer;
45+
background: transparent;
46+
border: 0;
47+
-webkit-appearance: none;
48+
}
49+
.toast-top-center {
50+
top: 0;
51+
right: 0;
52+
width: 100%;
53+
}
54+
.toast-bottom-center {
55+
bottom: 0;
56+
right: 0;
57+
width: 100%;
58+
}
59+
.toast-top-full-width {
60+
top: 0;
61+
right: 0;
62+
width: 100%;
63+
}
64+
.toast-bottom-full-width {
65+
bottom: 0;
66+
right: 0;
67+
width: 100%;
68+
}
69+
.toast-top-left {
70+
top: 12px;
71+
left: 12px;
72+
}
73+
.toast-top-right {
74+
top: 12px;
75+
right: 12px;
76+
}
77+
.toast-bottom-right {
78+
right: 12px;
79+
bottom: 12px;
80+
}
81+
.toast-bottom-left {
82+
bottom: 12px;
83+
left: 12px;
84+
}
85+
#toast-container {
86+
position: fixed;
87+
z-index: 999999;
88+
pointer-events: none;
89+
/*overrides*/
90+
}
91+
#toast-container * {
92+
-moz-box-sizing: border-box;
93+
-webkit-box-sizing: border-box;
94+
box-sizing: border-box;
95+
}
96+
#toast-container > div {
97+
position: relative;
98+
pointer-events: auto;
99+
overflow: hidden;
100+
margin: 0 0 6px;
101+
padding: 15px 15px 15px 50px;
102+
width: 300px;
103+
-moz-border-radius: 3px 3px 3px 3px;
104+
-webkit-border-radius: 3px 3px 3px 3px;
105+
border-radius: 3px 3px 3px 3px;
106+
background-position: 15px center;
107+
background-repeat: no-repeat;
108+
-moz-box-shadow: 0 0 12px #999999;
109+
-webkit-box-shadow: 0 0 12px #999999;
110+
box-shadow: 0 0 12px #999999;
111+
color: #ffffff;
112+
opacity: 0.8;
113+
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
114+
filter: alpha(opacity=80);
115+
}
116+
#toast-container > :hover {
117+
-moz-box-shadow: 0 0 12px #000000;
118+
-webkit-box-shadow: 0 0 12px #000000;
119+
box-shadow: 0 0 12px #000000;
120+
opacity: 1;
121+
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
122+
filter: alpha(opacity=100);
123+
cursor: pointer;
124+
}
125+
#toast-container > .toast-info {
126+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
127+
}
128+
#toast-container > .toast-error {
129+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
130+
}
131+
#toast-container > .toast-success {
132+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
133+
}
134+
#toast-container > .toast-warning {
135+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
136+
}
137+
#toast-container.toast-top-center > div,
138+
#toast-container.toast-bottom-center > div {
139+
width: 300px;
140+
margin-left: auto;
141+
margin-right: auto;
142+
}
143+
#toast-container.toast-top-full-width > div,
144+
#toast-container.toast-bottom-full-width > div {
145+
width: 96%;
146+
margin-left: auto;
147+
margin-right: auto;
148+
}
149+
.toast {
150+
background-color: #030303;
151+
}
152+
.toast-success {
153+
background-color: #51a351;
154+
}
155+
.toast-error {
156+
background-color: #bd362f;
157+
}
158+
.toast-info {
159+
background-color: #2f96b4;
160+
}
161+
.toast-warning {
162+
background-color: #f89406;
163+
}
164+
.toast-progress {
165+
position: absolute;
166+
left: 0;
167+
bottom: 0;
168+
height: 4px;
169+
background-color: #000000;
170+
opacity: 0.4;
171+
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
172+
filter: alpha(opacity=40);
173+
}
174+
/*Responsive Design*/
175+
@media all and (max-width: 240px) {
176+
#toast-container > div {
177+
padding: 8px 8px 8px 50px;
178+
width: 11em;
179+
}
180+
#toast-container .toast-close-button {
181+
right: -0.2em;
182+
top: -0.2em;
183+
}
184+
}
185+
@media all and (min-width: 241px) and (max-width: 480px) {
186+
#toast-container > div {
187+
padding: 8px 8px 8px 50px;
188+
width: 18em;
189+
}
190+
#toast-container .toast-close-button {
191+
right: -0.2em;
192+
top: -0.2em;
193+
}
194+
}
195+
@media all and (min-width: 481px) and (max-width: 768px) {
196+
#toast-container > div {
197+
padding: 15px 15px 15px 50px;
198+
width: 25em;
199+
}
200+
}

‎demo/src/demo/routes.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { Tree } from './tree';
1717
import { Menu } from './menu';
1818
import { Message } from './message';
1919
import { Alert } from './alert';
20+
import { Toastr } from './toastr';
2021

2122

2223
// Main routes builder
@@ -39,7 +40,8 @@ const m = [
3940
{ text: 'Tree', path: 'tree', component: Tree },
4041
{ text: 'Menu', path: 'menu', component: Menu },
4142
{ text: 'Message', path: 'message', component: Message },
42-
{ text: 'Alert', path: 'alert', component: Alert }
43+
{ text: 'Alert', path: 'alert', component: Alert },
44+
{ text: 'Toastr', path: 'toastr', component: Toastr }
4345
]
4446

4547
// Build router routes

‎demo/src/demo/toastr/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div>
2+
<ui-button @click="info">Info</ui-button><p/>
3+
<ui-button @click="warning">Warning</ui-button><p/>
4+
<ui-button @click="error">Error</ui-button><p/>
5+
<ui-button @click="remove">Remove</ui-button><p/>
6+
<ui-button @click="clear">Clear</ui-button>
7+
</div>

‎demo/src/demo/toastr/index.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component } from 'vue-typed';
2+
import { Base } from '../base'
3+
import * as Vue from 'vue'
4+
5+
@Component({
6+
template: require('./index.html')
7+
})
8+
export class Toastr extends Base {
9+
10+
info() {
11+
this.$ui.toast.info('Are you the 6 fingered man?')
12+
}
13+
14+
warning() {
15+
this.$ui.toast.warning('My name is Inigo Montoya. You killed my father. Prepare to die!')
16+
}
17+
18+
error() {
19+
this.$ui.toast.error('I do not think that word means what you think it means.', 'Inconceivable!')
20+
}
21+
22+
remove() {
23+
this.$ui.toast.remove()
24+
}
25+
26+
clear() {
27+
this.$ui.toast.clear()
28+
}
29+
30+
}

‎demo/src/index.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as Vue from 'vue';
22
import * as VueRouter from 'vue-router';
33
import { Component } from 'vue-typed';
4-
import * as VueTypedUI from '../../src/index';
4+
import * as VueTypedUI from '../../dist/vue-typed-ui';
55
import { SettingsPage } from './settings-page';
66

77

@@ -11,8 +11,14 @@ import { SettingsPage } from './settings-page';
1111
// OTHERWISE YOU'LL HAVE WEIRD UNREGISTERED COMPONENT WARNING.
1212
// --------------------------------------------------------------------------------------
1313
Vue.use(VueRouter);
14-
Vue.use(VueTypedUI, {
15-
prefix: 'ui'
14+
15+
Vue.use(VueTypedUI, <VueTypedUI.Options> {
16+
prefix: 'ui',
17+
toastr: {
18+
showDuration: 300,
19+
hideDuration: 300,
20+
timeOut: 3000
21+
}
1622
});
1723

1824

@@ -25,7 +31,7 @@ import { routes } from './routes';
2531
// --------------------------------------------------------------------------------------
2632
var router = new VueRouter({
2733
routes,
28-
linkActiveClass: 'active'
34+
linkActiveClass: 'active'
2935
});
3036

3137
import './styles/index.less'

‎dist/vue-typed-ui.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as Vue from 'vue'
22
import * as opts from '../lib/options'
33
import * as sets from '../lib/settings'
44
import * as formOpt from '../lib/form-options'
5-
// import { Modal } from '../lib/methods/modal'
65
import {VueTypedUIMethods} from '../lib/methods'
76
import * as modules from '../lib/modules'
87

@@ -20,6 +19,7 @@ declare class VueTypedUI extends VueTypedUIMethods {
2019

2120
createValidationRule(name: string, rule: Function)
2221
alert: modules.Alert
22+
toast: modules.Toastr
2323
}
2424

2525
declare module "vue/types/vue" {
@@ -28,4 +28,4 @@ declare module "vue/types/vue" {
2828
}
2929
}
3030

31-
export = VueTypedUI;
31+
export = VueTypedUI

0 commit comments

Comments
 (0)