full screen

iuin · iuin · commit 93d9b609194d · 2018-07-22T16:35:33.000+08:00
diff --git a/src/app/layout/dashboard/dashboard.component.html b/src/app/layout/dashboard/dashboard.component.html
@@ -41,7 +41,7 @@
     </div>
 </clr-modal> -->
 
-<full-screen-modal [opened]="opened">
+<full-screen-modal [(opened)]="opened">
     <clr-wizard #wizard [(clrWizardOpen)]="opened" style="height: 100%;" [clrWizardSize]="'xl'" [clrWizardForceForwardNavigation]="true" class="clr-wizard--inline clr-wizard--no-shadow clr-wizard--no-title"
                 [clrWizardPreventModalAnimation]="true">
                 <clr-wizard-title>Jump-To Wizard</clr-wizard-title>
diff --git a/src/app/shared/components/full-screen-modal/full-screen-modal.component.html b/src/app/shared/components/full-screen-modal/full-screen-modal.component.html
@@ -1,6 +1,7 @@
-<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'xl'" [clrModalClosable]="true" >
+<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'xl'" [clrModalClosable]="false" >
     
         <h3 class="modal-title">I have a nice title  
+            <button class="close" style="margin-right: 10px" (click)="close()"><clr-icon  [attr.shape] = "'close'"></clr-icon></button>
             <button class="close" style="margin-right: 10px" (click)="toggleFullScreen()"><clr-icon  [attr.shape] = "fullscreenShape"></clr-icon></button>
         </h3>
         <div class="modal-body" #ele>
diff --git a/src/app/shared/components/full-screen-modal/full-screen-modal.component.ts b/src/app/shared/components/full-screen-modal/full-screen-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, HostBinding, Output, EventEmitter, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, OnInit, Input, HostBinding, HostListener, Output, EventEmitter, ViewChild, ElementRef, Renderer2, OnChanges, SimpleChange} from '@angular/core';
 
 import {
     trigger,
@@ -13,15 +13,14 @@ import {
     templateUrl: './full-screen-modal.component.html',
     styleUrls: ['./full-screen-modal.component.scss']
 })
-export class FullScreenModalComponent implements OnInit {
+export class FullScreenModalComponent implements OnInit, OnChanges {
 
-    
+    @Output('clrModalOpenChange') _openChanged: EventEmitter<boolean> = new EventEmitter<boolean>(false);
 
     @ViewChild('ele') ele: ElementRef;
 
-    @HostBinding('@layout') layout = 'normal';
-
-    @Input('opened') opened;
+    @HostBinding('class.open')
+    @Input('opened') opened = false;
 
     private fullscreen = false;
 
@@ -55,4 +54,20 @@ export class FullScreenModalComponent implements OnInit {
         return this.fullscreen ? 'window-restore' : 'window-max';
     }
 
+    ngOnChanges(changes: { [propName: string]: SimpleChange }): void {
+        console.log(changes.opened);
+    }
+
+    open(): void {
+        if (this.opened === true) {
+          return;
+        }
+        this.opened = true;
+        this._openChanged.emit(true);
+      }
+
+    close(): void {
+        this.opened = false;
+        this._openChanged.emit(false);
+    }
 }
