Arsisakarn Srilatanart / ng2-test-modal

Download as
Browse Code »

Commit 4fc210970b70f7d3197690222ea789934d2e8485

Authored by Arsisakarn Srilatanart
1 parent aeb06133
Exists in master

first commit

Showing 17 changed files with 265 additions and 5 deletions   Show diff stats
src/app/app-routing.module.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,25 @@ @@ -0,0 +1,25 @@
  1 +import { NgModule } from '@angular/core';
  2 +import { RouterModule, Routes } from '@angular/router';
  3 +
  4 +import { WizardBaseComponent } from './wizard-base/wizard-base.component';
  5 +import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
  6 +import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
  7 +
  8 +const routes: Routes = [
  9 + {
  10 + path: 'wizard',
  11 + component: WizardBaseComponent,
  12 + children: [
  13 + { path: '1', component: ModalOneComponent },
  14 + { path: '2', component: ModalTwoComponent },
  15 + ]
  16 + },
  17 + { path: '', redirectTo: '/wizard', pathMatch: 'full' },
  18 +];
  19 +
  20 +@NgModule({
  21 + imports: [ RouterModule.forRoot(routes) ],
  22 + exports: [ RouterModule ]
  23 +})
  24 +export class AppRoutingModule {
  25 +}
src/app/app.component.html
  Diff comments   View file @4fc2109
1 -<h1>  
2 - {{title}}  
3 -</h1> 1 +<router-outlet></router-outlet>
src/app/app.module.ts
  Diff comments   View file @4fc2109
@@ -3,16 +3,25 @@ import { NgModule } from &#39;@angular/core&#39;; @@ -3,16 +3,25 @@ import { NgModule } from &#39;@angular/core&#39;;
3 import { FormsModule } from '@angular/forms'; 3 import { FormsModule } from '@angular/forms';
4 import { HttpModule } from '@angular/http'; 4 import { HttpModule } from '@angular/http';
5 5
  6 +import { AppRoutingModule } from './app-routing.module';
  7 +
6 import { AppComponent } from './app.component'; 8 import { AppComponent } from './app.component';
  9 +import { WizardBaseComponent } from './wizard-base/wizard-base.component';
  10 +import { ModalOneComponent } from './wizard-base/modal-one/modal-one.component';
  11 +import { ModalTwoComponent } from './wizard-base/modal-two/modal-two.component';
7 12
8 @NgModule({ 13 @NgModule({
9 declarations: [ 14 declarations: [
10 - AppComponent 15 + AppComponent,
  16 + WizardBaseComponent,
  17 + ModalOneComponent,
  18 + ModalTwoComponent
11 ], 19 ],
12 imports: [ 20 imports: [
13 BrowserModule, 21 BrowserModule,
14 FormsModule, 22 FormsModule,
15 - HttpModule 23 + HttpModule,
  24 + AppRoutingModule
16 ], 25 ],
17 providers: [], 26 providers: [],
18 bootstrap: [AppComponent] 27 bootstrap: [AppComponent]
src/app/wizard-base/modal-one/modal-one.component.css 0 → 100644
  Diff comments   View file @4fc2109
src/app/wizard-base/modal-one/modal-one.component.html 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,19 @@ @@ -0,0 +1,19 @@
  1 +<div id="myModal" class="modal">
  2 +
  3 + <!-- Modal content -->
  4 + <div class="modal-content">
  5 + <div class="modal-header">
  6 + <span class="close">&times;</span>
  7 + <h2>Modal Header One</h2>
  8 + </div>
  9 + <div class="modal-body">
  10 + <p>Some text in the Modal Body</p>
  11 + <p>Some other text...</p>
  12 + </div>
  13 + <div class="modal-footer">
  14 + <h3>Modal Footer</h3>
  15 + <button [routerLink]="['/wizard', 2]">Next</button>
  16 + </div>
  17 + </div>
  18 +
  19 +</div>
src/app/wizard-base/modal-one/modal-one.component.spec.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,25 @@ @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ModalOneComponent } from './modal-one.component';
  4 +
  5 +describe('ModalOneComponent', () => {
  6 + let component: ModalOneComponent;
  7 + let fixture: ComponentFixture<ModalOneComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ModalOneComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ModalOneComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/wizard-base/modal-one/modal-one.component.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-modal-one',
  5 + templateUrl: './modal-one.component.html',
  6 + styleUrls: ['./modal-one.component.css']
  7 +})
  8 +export class ModalOneComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/wizard-base/modal-two/modal-two.component.css 0 → 100644
  Diff comments   View file @4fc2109
src/app/wizard-base/modal-two/modal-two.component.html 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,19 @@ @@ -0,0 +1,19 @@
  1 +<div id="myModal" class="modal">
  2 +
  3 + <!-- Modal content -->
  4 + <div class="modal-content">
  5 + <div class="modal-header">
  6 + <span class="close">&times;</span>
  7 + <h2>Modal Header Two</h2>
  8 + </div>
  9 + <div class="modal-body">
  10 + <p>Some text in the Modal Body</p>
  11 + <p>Some other text...</p>
  12 + </div>
  13 + <div class="modal-footer">
  14 + <h3>Modal Footer</h3>
  15 + <button [routerLink]="['/wizard', 1]">Prev</button>
  16 + </div>
  17 + </div>
  18 +
  19 +</div>
src/app/wizard-base/modal-two/modal-two.component.spec.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,25 @@ @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ModalTwoComponent } from './modal-two.component';
  4 +
  5 +describe('ModalTwoComponent', () => {
  6 + let component: ModalTwoComponent;
  7 + let fixture: ComponentFixture<ModalTwoComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ModalTwoComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ModalTwoComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/wizard-base/modal-two/modal-two.component.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-modal-two',
  5 + templateUrl: './modal-two.component.html',
  6 + styleUrls: ['./modal-two.component.css']
  7 +})
  8 +export class ModalTwoComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/wizard-base/wizard-base.component.css 0 → 100644
  Diff comments   View file @4fc2109
src/app/wizard-base/wizard-base.component.html 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,4 @@ @@ -0,0 +1,4 @@
  1 +<p>
  2 + wizard-base works!
  3 +</p>
  4 +<router-outlet></router-outlet>
src/app/wizard-base/wizard-base.component.spec.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,25 @@ @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { WizardBaseComponent } from './wizard-base.component';
  4 +
  5 +describe('WizardBaseComponent', () => {
  6 + let component: WizardBaseComponent;
  7 + let fixture: ComponentFixture<WizardBaseComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ WizardBaseComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(WizardBaseComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/wizard-base/wizard-base.component.ts 0 → 100644
  Diff comments   View file @4fc2109
@@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-wizard-base',
  5 + templateUrl: './wizard-base.component.html',
  6 + styleUrls: ['./wizard-base.component.css']
  7 +})
  8 +export class WizardBaseComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/index.html
  Diff comments   View file @4fc2109
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 7
8 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <link rel="icon" type="image/x-icon" href="favicon.ico"> 9 <link rel="icon" type="image/x-icon" href="favicon.ico">
  10 + <link rel="stylesheet" href="styles.css">
10 </head> 11 </head>
11 <body> 12 <body>
12 <app-root>Loading...</app-root> 13 <app-root>Loading...</app-root>
src/styles.css
  Diff comments   View file @4fc2109
1 /* You can add global styles to this file, and also import other style files */ 1 /* You can add global styles to this file, and also import other style files */
  2 +/* The Modal (background) */
  3 +.modal {
  4 +
  5 + position: fixed; /* Stay in place */
  6 + z-index: 1; /* Sit on top */
  7 + padding-top: 100px; /* Location of the box */
  8 + left: 0;
  9 + top: 0;
  10 + width: 100%; /* Full width */
  11 + height: 100%; /* Full height */
  12 + overflow: auto; /* Enable scroll if needed */
  13 + background-color: rgb(0,0,0); /* Fallback color */
  14 + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  15 +}
  16 +
  17 +/* Modal Content */
  18 +.modal-content {
  19 + position: relative;
  20 + background-color: #fefefe;
  21 + margin: auto;
  22 + padding: 0;
  23 + border: 1px solid #888;
  24 + width: 80%;
  25 + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  26 +}
  27 +
  28 +/* Add Animation */
  29 +@-webkit-keyframes animatetop {
  30 + from {top:-300px; opacity:0}
  31 + to {top:0; opacity:1}
  32 +}
  33 +
  34 +@keyframes animatetop {
  35 + from {top:-300px; opacity:0}
  36 + to {top:0; opacity:1}
  37 +}
  38 +
  39 +/* The Close Button */
  40 +.close {
  41 + color: white;
  42 + float: right;
  43 + font-size: 28px;
  44 + font-weight: bold;
  45 +}
  46 +
  47 +.close:hover,
  48 +.close:focus {
  49 + color: #000;
  50 + text-decoration: none;
  51 + cursor: pointer;
  52 +}
  53 +
  54 +.modal-header {
  55 + padding: 2px 16px;
  56 + background-color: #5cb85c;
  57 + color: white;
  58 +}
  59 +
  60 +.modal-body {padding: 2px 16px;}
  61 +
  62 +.modal-footer {
  63 + padding: 2px 16px;
  64 + background-color: #5cb85c;
  65 + color: white;
  66 +}