Skip to content

Commit d56537a

Browse files
tibing-old-emailtibing-old-email
committed
feat(ui): add modals
1 parent a587ac2 commit d56537a

File tree

8 files changed

+159
-4
lines changed

8 files changed

+159
-4
lines changed

‎src/app/app.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './app.loader.ts';
2-
import { Component, ViewEncapsulation } from '@angular/core';
2+
import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core';
33
import { GlobalState } from './global.state';
44
import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
55
import { layoutPaths } from './theme/theme.constants';
@@ -27,7 +27,8 @@ export class App {
2727
constructor(private _state: GlobalState,
2828
private _imageLoader: BaImageLoaderService,
2929
private _spinner: BaThemeSpinner,
30-
private _config:BaThemeConfig) {
30+
private _config: BaThemeConfig,
31+
private viewContainerRef: ViewContainerRef) {
3132

3233
this._loadImages();
3334

‎src/app/pages/pages.menu.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,14 @@ export const PAGES_MENU = [
116116
}
117117
}
118118
},
119+
{
120+
path: 'modals',
121+
data: {
122+
menu: {
123+
title: 'Modals',
124+
}
125+
}
126+
},
119127
{
120128
path: 'grid',
121129
data: {

‎src/app/pages/ui/components/modals/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './modals.component';

‎src/app/pages/ui/components/modals/modals.component.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { ModalDirective } from 'ng2-bootstrap';
3+
4+
@Component({
5+
selector: 'modals',
6+
styles: [require('./modals.scss')],
7+
template: require('./modals.html')
8+
})
9+
export class Modals {
10+
@ViewChild('childModal') childModal: ModalDirective;
11+
12+
showChildModal(): void {
13+
this.childModal.show();
14+
}
15+
16+
hideChildModal(): void {
17+
this.childModal.hide();
18+
}
19+
}

‎src/app/pages/ui/components/modals/modals.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<div class="widgets">
2+
<div class="row">
3+
<div class="col-md-12">
4+
<ba-card title="Modals" class="modal-buttons">
5+
<button class="btn btn-success" (click)="lgModal.show()">Large modal</button>
6+
<button class="btn btn-warning" (click)="smModal.show()">Small modal</button>
7+
<button class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
8+
<button class="btn btn-danger" (click)="showChildModal()">Open child modal</button>
9+
</ba-card>
10+
</div>
11+
</div>
12+
<div class="row">
13+
14+
</div>
15+
</div>
16+
17+
<!-- Large modal -->
18+
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
19+
<div class="modal-dialog modal-lg">
20+
<div class="modal-content">
21+
<div class="modal-header">
22+
<button class="close" (click)="lgModal.hide()" aria-label="Close">
23+
<span aria-hidden="true">&times;</span>
24+
</button>
25+
<h4 class="modal-title">Large modal</h4>
26+
</div>
27+
<div class="modal-body">
28+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
29+
</div>
30+
<div class="modal-footer">
31+
<button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<!-- Small modal -->
38+
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
39+
<div class="modal-dialog modal-sm">
40+
<div class="modal-content">
41+
<div class="modal-header">
42+
<button class="close" aria-label="Close" (click)="smModal.hide()">
43+
<span aria-hidden="true">&times;</span>
44+
</button>
45+
<h4 class="modal-title">Small modal</h4>
46+
</div>
47+
<div class="modal-body">
48+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
49+
</div>
50+
<div class="modal-footer">
51+
<button class="btn btn-primary confirm-btn" (click)="smModal.hide()">Save changes</button>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<!-- Static modal -->
58+
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
59+
<div class="modal-dialog modal-sm">
60+
<div class="modal-content">
61+
<div class="modal-header">
62+
<button class="close" aria-label="Close" (click)="staticModal.hide()">
63+
<span aria-hidden="true">&times;</span>
64+
</button>
65+
<h4 class="modal-title">Static modal</h4>
66+
</div>
67+
<div class="modal-body">
68+
This is static modal, backdrop click will not close it.
69+
Click <b>&times;</b> or confirmation button to close modal.
70+
</div>
71+
<div class="modal-footer">
72+
<button class="btn btn-primary confirm-btn" (click)="staticModal.hide()">Save changes</button>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
78+
<!-- control modal from parent component -->
79+
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
80+
<div class="modal-dialog modal-sm">
81+
<div class="modal-content">
82+
<div class="modal-header">
83+
<button class="close" aria-label="Close" (click)="hideChildModal()">
84+
<span aria-hidden="true">&times;</span>
85+
</button>
86+
<h4 class="modal-title">Child modal</h4>
87+
</div>
88+
<div class="modal-body">
89+
I am a child modal, opened from parent component!
90+
</div>
91+
<div class="modal-footer">
92+
<button class="btn btn-primary confirm-btn" (click)="hideChildModal()">Save changes</button>
93+
</div>
94+
</div>
95+
</div>
96+
</div>

‎src/app/pages/ui/components/modals/modals.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import "../../../../theme/sass/conf/conf";
2+
3+
.modal {
4+
padding-top: 300px;
5+
6+
.modal-content {
7+
color: $dropdown-text;
8+
9+
.modal-header {
10+
border: none;
11+
}
12+
13+
.modal-footer {
14+
border: none;
15+
}
16+
17+
.close {
18+
outline: none;
19+
}
20+
}
21+
}
22+
23+
.modal-buttons .btn {
24+
margin-right: 20px;
25+
}

‎src/app/pages/ui/ui.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import { FormsModule } from '@angular/forms';
44
import { NgaModule } from '../../theme/nga.module';
55

66
import { routing } from './ui.routing';
7-
import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';
7+
import { DropdownModule, ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
88
import { Ui } from './ui.component';
99
import { Buttons } from './components/buttons/buttons.component';
1010
import { Grid } from './components/grid/grid.component';
1111
import { Icons } from './components/icons/icons.component';
12+
import { Modals } from './components/modals/modals.component';
1213
import { Typography } from './components/typography/typography.component';
1314

1415
import { FlatButtons } from './components/buttons/components/flatButtons';
@@ -28,12 +29,14 @@ import { IconsService } from './components/icons/icons.service';
2829
FormsModule,
2930
NgaModule,
3031
DropdownModule,
32+
ModalModule,
3133
routing
3234
],
3335
declarations: [
3436
Buttons,
3537
Grid,
3638
Icons,
39+
Modals,
3740
Typography,
3841
Ui,
3942
FlatButtons,

‎src/app/pages/ui/ui.routing.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Ui } from './ui.component';
44
import { Buttons } from './components/buttons/buttons.component';
55
import { Grid } from './components/grid/grid.component';
66
import { Icons } from './components/icons/icons.component';
7+
import { Modals } from './components/modals/modals.component';
78
import { Typography } from './components/typography/typography.component';
89

910
// noinspection TypeScriptValidateTypes
@@ -15,7 +16,8 @@ const routes: Routes = [
1516
{ path: 'buttons', component: Buttons },
1617
{ path: 'grid', component: Grid },
1718
{ path: 'icons', component: Icons },
18-
{ path: 'typography', component: Typography }
19+
{ path: 'typography', component: Typography },
20+
{ path: 'modals', component: Modals }
1921
]
2022
}
2123
];

0 commit comments

Comments
 (0)