From d56537af9f49d32b4bb174de45b29fabafb6d378 Mon Sep 17 00:00:00 2001 From: tibing Date: Thu, 20 Oct 2016 18:54:42 +0300 Subject: [PATCH] feat(ui): add modals --- src/app/app.component.ts | 5 +- src/app/pages/pages.menu.ts | 8 ++ src/app/pages/ui/components/modals/index.ts | 1 + .../ui/components/modals/modals.component.ts | 19 ++++ .../pages/ui/components/modals/modals.html | 96 +++++++++++++++++++ .../pages/ui/components/modals/modals.scss | 25 +++++ src/app/pages/ui/ui.module.ts | 5 +- src/app/pages/ui/ui.routing.ts | 4 +- 8 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 src/app/pages/ui/components/modals/index.ts create mode 100644 src/app/pages/ui/components/modals/modals.component.ts create mode 100644 src/app/pages/ui/components/modals/modals.html create mode 100644 src/app/pages/ui/components/modals/modals.scss diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 70294496..b00316f4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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(); diff --git a/src/app/pages/pages.menu.ts b/src/app/pages/pages.menu.ts index 78d8df94..82f87da8 100644 --- a/src/app/pages/pages.menu.ts +++ b/src/app/pages/pages.menu.ts @@ -116,6 +116,14 @@ export const PAGES_MENU = [ } } }, + { + path: 'modals', + data: { + menu: { + title: 'Modals', + } + } + }, { path: 'grid', data: { diff --git a/src/app/pages/ui/components/modals/index.ts b/src/app/pages/ui/components/modals/index.ts new file mode 100644 index 00000000..c777d418 --- /dev/null +++ b/src/app/pages/ui/components/modals/index.ts @@ -0,0 +1 @@ +export * from './modals.component'; diff --git a/src/app/pages/ui/components/modals/modals.component.ts b/src/app/pages/ui/components/modals/modals.component.ts new file mode 100644 index 00000000..f7df7b6b --- /dev/null +++ b/src/app/pages/ui/components/modals/modals.component.ts @@ -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(); + } +} diff --git a/src/app/pages/ui/components/modals/modals.html b/src/app/pages/ui/components/modals/modals.html new file mode 100644 index 00000000..dd4c3268 --- /dev/null +++ b/src/app/pages/ui/components/modals/modals.html @@ -0,0 +1,96 @@ +
+
+
+ + + + + + +
+
+
+ +
+
+ + + + + + + + + + + + diff --git a/src/app/pages/ui/components/modals/modals.scss b/src/app/pages/ui/components/modals/modals.scss new file mode 100644 index 00000000..5d6f69de --- /dev/null +++ b/src/app/pages/ui/components/modals/modals.scss @@ -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; +} diff --git a/src/app/pages/ui/ui.module.ts b/src/app/pages/ui/ui.module.ts index d0dde3a6..83c4619e 100644 --- a/src/app/pages/ui/ui.module.ts +++ b/src/app/pages/ui/ui.module.ts @@ -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, diff --git a/src/app/pages/ui/ui.routing.ts b/src/app/pages/ui/ui.routing.ts index 54931272..99d3e3bd 100644 --- a/src/app/pages/ui/ui.routing.ts +++ b/src/app/pages/ui/ui.routing.ts @@ -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 } ] } ];