Skip to content
This repository was archived by the owner on May 15, 2019. It is now read-only.

Commit 3172bf6

Browse files
benjaminforrasbenjaminforras
committed
feat(message): Add notification functionality (edcarroll#242)
1 parent 3ef2fb6 commit 3172bf6

File tree

28 files changed

+932
-236
lines changed

28 files changed

+932
-236
lines changed

‎demo/src/app/app.module.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import {BrowserModule} from "@angular/platform-browser";
2-
import {NgModule} from "@angular/core";
3-
import {CommonModule} from "@angular/common";
4-
import {SuiPopupModule, SuiSidebarModule} from "ngx-fomantic-ui";
1+
import { BrowserModule } from "@angular/platform-browser";
2+
import { NgModule } from "@angular/core";
3+
import { CommonModule } from "@angular/common";
4+
import { SuiPopupModule, SuiSidebarModule } from "ngx-fomantic-ui";
55

6-
import {DemoRoutingModule} from "./app.routing";
7-
import {DemoComponentsModule} from "./components/demo-components.module";
8-
import {DemoModalsModule} from "./modals/demo-modals.module";
9-
import {DemoPagesModule} from "./pages/demo-pages.module";
6+
import { DemoRoutingModule } from "./app.routing";
7+
import { DemoComponentsModule } from "./components/demo-components.module";
8+
import { DemoModalsModule } from "./modals/demo-modals.module";
9+
import { DemoPagesModule } from "./pages/demo-pages.module";
1010

11-
import {AppComponent} from "./app.component";
11+
import { AppComponent } from "./app.component";
1212

1313
@NgModule({
1414
imports: [

‎demo/src/app/components/page-content/page-content.component.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323
}
2424
}
2525

26-
@media only screen and (max-width: 425px) {
26+
@media only screen and (max-width: 480px) {
2727
:host.ui.main.container {
2828
margin-left: 1em !important;
2929
margin-right: 1em !important;
3030
margin-bottom: 1em !important;
3131
}
32-
}
32+
}

‎demo/src/app/pages/collections/message/message.page.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,31 @@ <h4 class="ui header">Icon Message</h4>
2828
<example-message-icon result></example-message-icon>
2929
</demo-example>
3030

31+
<h4 class="ui header">Notification Message</h4>
32+
33+
<button class="ui button" (click)="open()">Open notification</button>
34+
<button class="ui button" (click)="openCustom()">Open custom</button>
35+
<br/>
36+
<br/>
37+
<sui-message-container [controller]="controller"></sui-message-container>
38+
39+
<div class="ui segment">
40+
<div class="ui input" style="margin-right: 15px;">
41+
<input type="text" [(ngModel)]="headerInput" placeholder="Notification header"/>
42+
</div>
43+
<div class="ui input">
44+
<input type="text" [(ngModel)]="messageInput" placeholder="Notification message"/>
45+
</div>
46+
</div>
47+
48+
<div class="ui segment">
49+
<demo-codeblock language="typescript" [src]="notificationMarkup"></demo-codeblock>
50+
</div>
51+
52+
<div class="ui segment">
53+
<demo-codeblock language="typescript" [src]="notificationMarkup2"></demo-codeblock>
54+
</div>
55+
3156
<h4 class="ui header">Manually Dismissing Message</h4>
3257
<p>Manually dismissing a message is shown below:</p>
3358
<div class="ui segment">

‎demo/src/app/pages/collections/message/message.page.ts

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import {Component} from "@angular/core";
2-
import {ApiDefinition} from "../../../components/api/api.component";
1+
import { Component } from "@angular/core";
2+
import { ApiDefinition } from "../../../components/api/api.component";
3+
import { MessageState, MessagePosition, MessageConfig, MessageController, SuiMessageService } from "ngx-fomantic-ui";
34

45
const exampleStandardTemplate = `
56
<sui-message class="success">
@@ -11,7 +12,7 @@ const exampleStandardTemplate = `
1112
`;
1213

1314
const exampleNoDismissTemplate = `
14-
<sui-message class="attached warning" [isDismissable]="false">
15+
<sui-message class="attached warning" [hasDismissButton]="false">
1516
<div class="header">
1617
Attached message!
1718
</div>
@@ -39,12 +40,13 @@ const exampleIconTemplate = `
3940
templateUrl: "./message.page.html"
4041
})
4142
export class MessagePage {
43+
public controller:MessageController;
4244
public api:ApiDefinition = [
4345
{
4446
selector: "<sui-message>",
4547
properties: [
4648
{
47-
name: "isDismissable",
49+
name: "hasDismissButton",
4850
type: "boolean",
4951
description: "Sets whether or not the message has a dismiss button.",
5052
defaultValue: "true"
@@ -75,6 +77,25 @@ export class MessagePage {
7577
public exampleNoDismissTemplate:string = exampleNoDismissTemplate;
7678
public exampleIconTemplate:string = exampleIconTemplate;
7779

80+
public notificationMarkup:string = `
81+
<sui-message-container [controller]="controller"></sui-message-container>
82+
83+
<button class="ui button" (click)="open()">Open notification</button>`;
84+
85+
public notificationMarkup2:string = `
86+
constructor(private _messageService:SuiMessageService) {
87+
this.controller = new MessageController();
88+
this._messageService.position = MessagePosition.BottomRight;
89+
this._messageService.isNewestOnTop = true;
90+
}
91+
92+
public open():void {
93+
const message = new MessageConfig(Date.now().toString(), MessageState.Default, "Header");
94+
message.hasProgress = true;
95+
this.controller.show(message);
96+
this._messageService.show(message);
97+
}`;
98+
7899
public manualDismissMarkup:string = `
79100
<sui-message #message>
80101
<div class="header">
@@ -96,6 +117,28 @@ export class MyComponent {
96117
}
97118
}
98119
`;
120+
public headerInput:string;
121+
public messageInput:string;
122+
123+
constructor(private _messageService:SuiMessageService) {
124+
this.controller = new MessageController();
125+
this._messageService.position = MessagePosition.BottomRight;
126+
this._messageService.isNewestOnTop = true;
127+
}
128+
129+
public open():void {
130+
const message = new MessageConfig(Date.now().toString(), MessageState.Default, "Header");
131+
message.hasProgress = true;
132+
this.controller.show(message);
133+
this._messageService.show(message);
134+
}
135+
136+
public openCustom():void {
137+
const message = new MessageConfig(this.messageInput, MessageState.Default, this.headerInput);
138+
message.hasProgress = true;
139+
this.controller.show(message);
140+
this._messageService.show(message);
141+
}
99142
}
100143

101144
@Component({

‎demo/src/app/pages/demo-pages.module.ts

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import {NgModule} from "@angular/core";
2-
import {CommonModule} from "@angular/common";
3-
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
4-
import {RouterModule} from "@angular/router";
5-
import {SuiModule} from "ngx-fomantic-ui";
6-
import {DemoComponentsModule} from "../components/demo-components.module";
1+
import { NgModule } from "@angular/core";
2+
import { CommonModule } from "@angular/common";
3+
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
4+
import { RouterModule } from "@angular/router";
5+
import { SuiModule } from "ngx-fomantic-ui";
6+
import { DemoComponentsModule } from "../components/demo-components.module";
77

8-
import {GettingStartedPage} from "./getting-started/getting-started.page";
8+
import { GettingStartedPage } from "./getting-started/getting-started.page";
99
// Collections
10-
import {MessagePageComponents} from "./collections/message/message.page";
11-
import {PaginationPageComponents} from "./collections/pagination/pagination.page";
10+
import { MessagePageComponents } from "./collections/message/message.page";
11+
import { PaginationPageComponents } from "./collections/pagination/pagination.page";
1212
// Modules
13-
import {AccordionPageComponents} from "./modules/accordion/accordion.page";
14-
import {CheckboxPageComponents} from "./modules/checkbox/checkbox.page";
15-
import {CollapsePageComponents} from "./modules/collapse/collapse.page";
16-
import {DatepickerPageComponents} from "./modules/datepicker/datepicker.page";
17-
import {DimmerPageComponents} from "./modules/dimmer/dimmer.page";
18-
import {DropdownPageComponents} from "./modules/dropdown/dropdown.page";
19-
import {ConfirmModalComponent, ModalPageComponents} from "./modules/modal/modal.page";
20-
import {PopupPageComponents} from "./modules/popup/popup.page";
21-
import {ProgressPageComponents} from "./modules/progress/progress.page";
22-
import {RatingPageComponents} from "./modules/rating/rating.page";
23-
import {SearchPageComponents} from "./modules/search/search.page";
24-
import {SelectPageComponents} from "./modules/select/select.page";
25-
import {SidebarPageComponents} from "./modules/sidebar/sidebar.page";
26-
import {TabsPageComponents} from "./modules/tabs/tabs.page";
27-
import {TransitionPageComponents} from "./modules/transition/transition.page";
13+
import { AccordionPageComponents } from "./modules/accordion/accordion.page";
14+
import { CheckboxPageComponents } from "./modules/checkbox/checkbox.page";
15+
import { CollapsePageComponents } from "./modules/collapse/collapse.page";
16+
import { DatepickerPageComponents } from "./modules/datepicker/datepicker.page";
17+
import { DimmerPageComponents } from "./modules/dimmer/dimmer.page";
18+
import { DropdownPageComponents } from "./modules/dropdown/dropdown.page";
19+
import { ConfirmModalComponent, ModalPageComponents } from "./modules/modal/modal.page";
20+
import { PopupPageComponents } from "./modules/popup/popup.page";
21+
import { ProgressPageComponents } from "./modules/progress/progress.page";
22+
import { RatingPageComponents } from "./modules/rating/rating.page";
23+
import { SearchPageComponents } from "./modules/search/search.page";
24+
import { SelectPageComponents } from "./modules/select/select.page";
25+
import { SidebarPageComponents } from "./modules/sidebar/sidebar.page";
26+
import { TabsPageComponents } from "./modules/tabs/tabs.page";
27+
import { TransitionPageComponents } from "./modules/transition/transition.page";
2828
// Behaviors
29-
import {LocalizationPageComponents} from "./behaviors/localization/localization.page";
29+
import { LocalizationPageComponents } from "./behaviors/localization/localization.page";
3030
// Development
31-
import {TestPage} from "./development/test/test.page";
31+
import { TestPage } from "./development/test/test.page";
3232

3333
@NgModule({
3434
imports: [

‎demo/src/app/pages/development/test/test.page.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<demo-page-content>
88
<h2 class="ui dividing header">Examples</h2>
99
<div class="ui segment">
10-
10+
<button class="ui button" (click)="open()">open</button>
11+
<button class="ui button" (click)="controller.dismissAll()">dismiss all</button>
12+
<br>
13+
<br>
14+
<sui-message-container [controller]="controller"></sui-message-container>
1115
</div>
12-
</demo-page-content>
16+
</demo-page-content>

‎demo/src/app/pages/development/test/test.page.ts

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,28 @@
1-
import {Component} from "@angular/core";
1+
import { Component } from "@angular/core";
2+
import { MessageController, SuiMessageService, MessagePosition, MessageConfig, MessageState } from "ngx-fomantic-ui";
23

34
@Component({
45
selector: "demo-page-test",
56
templateUrl: "./test.page.html"
67
})
78
export class TestPage {
8-
constructor() {}
9+
public controller:MessageController;
10+
11+
constructor(private _messageService:SuiMessageService) {
12+
this.controller = new MessageController();
13+
this._messageService.position = MessagePosition.BottomRight;
14+
this._messageService.isNewestOnTop = true;
15+
}
16+
17+
public open():void {
18+
const message = new MessageConfig(Date.now().toString(), MessageState.Default, "Header");
19+
message.hasProgress = true;
20+
// this.controller.show(message);
21+
// this._messageService.show(message);
22+
}
23+
24+
public dismissAll():void {
25+
this.controller.dismissAll();
26+
this._messageService.dismissAll();
27+
}
928
}

‎demo/src/app/pages/modules/accordion/accordion.page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66
</demo-page-title>
77
<demo-page-content>
8-
<sui-message class="warning" [isDismissable]="false">
8+
<sui-message class="warning" [hasDismissButton]="false">
99
<div class="header">Important Note</div>
1010
<p>
1111
The accordion depends on the Web Animations API, which requires a polyfill for full browser

‎demo/src/app/pages/modules/collapse/collapse.page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h4 class="ui header">Collapse</h4>
1414
<example-collapse-standard result></example-collapse-standard>
1515
</demo-example>
1616

17-
<sui-message class="warning" [isDismissable]="false">
17+
<sui-message class="warning" [hasDismissButton]="false">
1818
<div class="header">Important Note</div>
1919
<p>The collapse component uses the <a href="https://w3c.github.io/web-animations/">Web Animations API.</a></p>
2020
<p>

‎demo/src/app/pages/modules/datepicker/datepicker.page.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h4 class="ui header">Min & Max</h4>
3434
<example-datepicker-min-max result></example-datepicker-min-max>
3535
</demo-example>
3636

37-
<sui-message class="info" [isDismissable]="false">
37+
<sui-message class="info" [hasDismissButton]="false">
3838
<div class="header">Timezones</div>
3939
<p>
4040
The datepicker will always return a <code>Date</code> object in the local timezone.
@@ -52,7 +52,7 @@ <h4 class="ui header">Mobile Fallback</h4>
5252
<example-datepicker-mobile-fallback result></example-datepicker-mobile-fallback>
5353
</demo-example>
5454

55-
<sui-message class="info" [isDismissable]="false">
55+
<sui-message class="info" [hasDismissButton]="false">
5656
<div class="header">Localization</div>
5757
<p>
5858
The datepicker has full localization support. Read the

‎demo/src/app/pages/modules/dropdown/dropdown.page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h4 class="ui header">Versatility</h4>
3636
<example-dropdown-menu result></example-dropdown-menu>
3737
</demo-example>
3838

39-
<sui-message class="info" [isDismissable]="false">
39+
<sui-message class="info" [hasDismissButton]="false">
4040
<div class="header">Selection Dropdowns</div>
4141
<p>
4242
Looking for selection dropdowns? That functionality is in

‎demo/src/app/pages/modules/popup/popup.page.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import {Component, Input} from "@angular/core";
2-
import {ApiDefinition} from "../../../components/api/api.component";
3-
import {SuiPopupConfig} from "ngx-fomantic-ui";
1+
import { Component, Input } from "@angular/core";
2+
import { ApiDefinition } from "../../../components/api/api.component";
3+
import { SuiPopupConfig } from "ngx-fomantic-ui";
44

55
const exampleStandardTemplate = `
66
<button class="ui green icon button" suiPopup popupHeader="Example" popupText="This is an example popup">
@@ -204,7 +204,7 @@ export class PopupPage {
204204
"right bottom"
205205
];
206206

207-
public position:string = "bottom right";
207+
public position:string = "top right";
208208

209209
public manualPopupMarkup:string = `
210210
<div class="ui segment" suiPopup popupText="Manual" popupTrigger="manual" #popup="suiPopup">

‎demo/src/app/pages/modules/progress/progress.page.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Component} from "@angular/core";
2-
import {ApiDefinition} from "../../../components/api/api.component";
1+
import { Component } from "@angular/core";
2+
import { ApiDefinition } from "../../../components/api/api.component";
33

44
const exampleStandardTemplate = `
55
<div class="ui segment">
@@ -91,6 +91,24 @@ export class ProgressPage {
9191
type: "boolean",
9292
description: "Sets whether or not the progress bar automatically turns green when <code>value == maximum</code>.",
9393
defaultValue: "true"
94+
},
95+
{
96+
name: "transition",
97+
type: "number",
98+
description: "Sets the transition function used when transitioning between values.",
99+
defaultValue: "350"
100+
},
101+
{
102+
name: "transitionDuration",
103+
type: "number",
104+
description: "Sets the transition duration of the bar between values.",
105+
defaultValue: "350"
106+
},
107+
{
108+
name: "canCompletelyEmpty",
109+
type: "boolean",
110+
description: "Sets whether the progress bar can empty completely.",
111+
defaultValue: "false"
94112
}
95113
]
96114
}

‎demo/src/app/pages/modules/search/search.page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h4 class="ui header">Template</h4>
3232
<example-search-template result></example-search-template>
3333
</demo-example>
3434

35-
<sui-message class="info" [isDismissable]="false">
35+
<sui-message class="info" [hasDismissButton]="false">
3636
<div class="header">Localization</div>
3737
<p>
3838
The search component has full localization support. Read the

‎demo/src/app/pages/modules/select/select.page.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h4 class="ui header">Selection</h4>
1818
</div>
1919
</demo-example>
2020

21-
<sui-message class="info" [isDismissable]="false">
21+
<sui-message class="info" [hasDismissButton]="false">
2222
<div class="header">Important Note</div>
2323
<p>
2424
The select component is unusual in the fact that it requires you to manually provide the options within.
@@ -95,7 +95,7 @@ <h4 class="ui header">Remote Lookup</h4>
9595
</div>
9696
</demo-example>
9797

98-
<sui-message class="info" [isDismissable]="false">
98+
<sui-message class="info" [hasDismissButton]="false">
9999
<div class="header">Localization</div>
100100
<p>
101101
The select component has full localization support. Read the

0 commit comments

Comments
 (0)