Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui): add modals

Browse source
This commit is contained in:
tibing 2016-10-20 18:54:42 +03:00
parent a587ac2606
commit d56537af9f
8 changed files with 159 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/app.component.ts
View file

@ -1,5 +1,5 @@
import './app.loader.ts';
import { Component, ViewEncapsulation } from '@angular/core';
import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { GlobalState } from './global.state';
import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
import { layoutPaths } from './theme/theme.constants';
@ -27,7 +27,8 @@ export class App {
constructor(private _state: GlobalState,
private _imageLoader: BaImageLoaderService,
private _spinner: BaThemeSpinner,
private _config:BaThemeConfig) {
private _config: BaThemeConfig,
private viewContainerRef: ViewContainerRef) {
this._loadImages();

8
src/app/pages/pages.menu.ts
View file

@ -116,6 +116,14 @@ export const PAGES_MENU = [
}
}
},
{
path: 'modals',
data: {
menu: {
title: 'Modals',
}
}
},
{
path: 'grid',
data: {

1
src/app/pages/ui/components/modals/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './modals.component';

19
src/app/pages/ui/components/modals/modals.component.ts Normal file
View file

@ -0,0 +1,19 @@
import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap';
@Component({
selector: 'modals',
styles: [require('./modals.scss')],
template: require('./modals.html')
})
export class Modals {
@ViewChild('childModal') childModal: ModalDirective;
showChildModal(): void {
this.childModal.show();
}
hideChildModal(): void {
this.childModal.hide();
}
}

96
src/app/pages/ui/components/modals/modals.html Normal file
View file

@ -0,0 +1,96 @@
<div class="widgets">
<div class="row">
<div class="col-md-12">
<ba-card title="Modals" class="modal-buttons">
<button class="btn btn-success" (click)="lgModal.show()">Large modal</button>
<button class="btn btn-warning" (click)="smModal.show()">Small modal</button>
<button class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
<button class="btn btn-danger" (click)="showChildModal()">Open child modal</button>
</ba-card>
</div>
</div>
<div class="row">
</div>
</div>
<!-- Large modal -->
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
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.
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn" (click)="lgModal.hide()">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<div bsModal #smModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close" (click)="smModal.hide()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Small modal</h4>
</div>
<div class="modal-body">
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.
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn" (click)="smModal.hide()">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Static modal -->
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close" (click)="staticModal.hide()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Static modal</h4>
</div>
<div class="modal-body">
This is static modal, backdrop click will not close it.
Click <b>&times;</b> or confirmation button to close modal.
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn" (click)="staticModal.hide()">Save changes</button>
</div>
</div>
</div>
</div>
<!-- control modal from parent component -->
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label="Close" (click)="hideChildModal()">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Child modal</h4>
</div>
<div class="modal-body">
I am a child modal, opened from parent component!
</div>
<div class="modal-footer">
<button class="btn btn-primary confirm-btn" (click)="hideChildModal()">Save changes</button>
</div>
</div>
</div>
</div>

25
src/app/pages/ui/components/modals/modals.scss Normal file
View file

@ -0,0 +1,25 @@
@import "../../../../theme/sass/conf/conf";
.modal {
padding-top: 300px;
.modal-content {
color: $dropdown-text;
.modal-header {
border: none;
}
.modal-footer {
border: none;
}
.close {
outline: none;
}
}
}
.modal-buttons .btn {
margin-right: 20px;
}

5
src/app/pages/ui/ui.module.ts
View file

@ -4,11 +4,12 @@ import { FormsModule } from '@angular/forms';
import { NgaModule } from '../../theme/nga.module';
import { routing } from './ui.routing';
import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';
import { DropdownModule, ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Ui } from './ui.component';
import { Buttons } from './components/buttons/buttons.component';
import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { Typography } from './components/typography/typography.component';
import { FlatButtons } from './components/buttons/components/flatButtons';
@ -28,12 +29,14 @@ import { IconsService } from './components/icons/icons.service';
FormsModule,
NgaModule,
DropdownModule,
ModalModule,
routing
],
declarations: [
Buttons,
Grid,
Icons,
Modals,
Typography,
Ui,
FlatButtons,

4
src/app/pages/ui/ui.routing.ts
View file

@ -4,6 +4,7 @@ import { Ui } from './ui.component';
import { Buttons } from './components/buttons/buttons.component';
import { Grid } from './components/grid/grid.component';
import { Icons } from './components/icons/icons.component';
import { Modals } from './components/modals/modals.component';
import { Typography } from './components/typography/typography.component';
// noinspection TypeScriptValidateTypes
@ -15,7 +16,8 @@ const routes: Routes = [
{ path: 'buttons', component: Buttons },
{ path: 'grid', component: Grid },
{ path: 'icons', component: Icons },
{ path: 'typography', component: Typography }
{ path: 'typography', component: Typography },
{ path: 'modals', component: Modals }
]
}
];