feat: add ui-modal[size] param

ngx-kit · Oct 13, 2018 · f3eb176 · f3eb176
1 parent 495d4cb
commit f3eb176
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 8 deletions.
diff --git a/projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.html b/projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.html
@@ -116,3 +116,56 @@ <h2>
     </ui-modal-footer>
   </ui-modal>
 </kit-modal>
+
+<div>
+  <h2>
+    Modals sizes
+  </h2>
+  <button uiButton (click)="display9 = true">Small modal (s)</button>
+  <kit-modal (close)="display9 = false">
+    <ui-modal *kitOverlay="display9"
+              size="s"
+              header="Small modal">
+      Small modal body
+      <ui-modal-footer>
+        <button uiButton (click)="display9 = false">Cancel</button>
+      </ui-modal-footer>
+    </ui-modal>
+  </kit-modal>
+
+  <button uiButton (click)="display10 = true">Medium modal (m)</button>
+  <kit-modal (close)="display10 = false">
+    <ui-modal *kitOverlay="display10"
+              size="m"
+              header="Medium modal">
+      Medium modal body
+      <ui-modal-footer>
+        <button uiButton (click)="display10 = false">Cancel</button>
+      </ui-modal-footer>
+    </ui-modal>
+  </kit-modal>
+
+  <button uiButton (click)="display11 = true">Large modal (l)</button>
+  <kit-modal (close)="display11 = false">
+    <ui-modal *kitOverlay="display11"
+              size="l"
+              header="Large modal">
+      Large modal body
+      <ui-modal-footer>
+        <button uiButton (click)="display11 = false">Cancel</button>
+      </ui-modal-footer>
+    </ui-modal>
+  </kit-modal>
+
+  <button uiButton (click)="display12 = true">Full-screen modal (full)</button>
+  <kit-modal (close)="display12 = false">
+    <ui-modal *kitOverlay="display12"
+              size="full"
+              header="Full-screen modal">
+      Full-screen modal body
+      <ui-modal-footer>
+        <button uiButton (click)="display12 = false">Cancel</button>
+      </ui-modal-footer>
+    </ui-modal>
+  </kit-modal>
+</div>
diff --git a/projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.ts b/projects/ui/src/lib/ui-modal/demo/ui-modal-demo.component.ts
@@ -6,19 +6,36 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'ui-ui-modal-demo',
   templateUrl: './ui-modal-demo.component.html',
-  styleUrls: ['./ui-modal-demo.component.scss']
+  styleUrls: ['./ui-modal-demo.component.scss'],
 })
 export class UiModalDemoComponent implements OnInit {
   display1 = false;
+
   display2 = false;
+
   display3 = false;
+
   display4 = false;
+
   display5 = false;
+
   display6 = false;
+
   display7 = false;
+
   display8 = false;
 
-  constructor() { }
+  // sizes
+  display9 = false;
+
+  display10 = false;
+
+  display11 = false;
+
+  display12 = false;
+
+  constructor() {
+  }
 
   ngOnInit() {
   }

diff --git a/projects/ui/src/lib/ui-modal/meta.ts b/projects/ui/src/lib/ui-modal/meta.ts
@@ -0,0 +1 @@
+export type UiModalSize = 's' | 'm' | 'l' | 'full';
diff --git a/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.html b/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.html
@@ -1,4 +1,5 @@
 <div class="modal"
+     [kitClass]="{size: size}"
      [@fade]="true">
   <div *ngIf="header"
        class="header"

diff --git a/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.scss b/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.scss
@@ -16,15 +16,11 @@
   color: var(--mainTextColor);
   display: flex;
   flex-direction: column;
-  max-height: 90%;
-  max-width: 90%;
-  min-width: 60%;
 }
 
 .header {
   align-items: center;
   border-bottom: 1px solid var(--mainBdColor);
-  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
   display: flex;
   font-weight: 700;
   flex-direction: row;
@@ -94,8 +90,49 @@
   padding: calc(var(--grid) * 4) calc(var(--grid) * 2);
 }
 
-@media screen and (min-width: 740px) {
-  .modal {
+.size-s, .size-m, .size-l, .size-full {
+  border-radius: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.size {
+  &-full {
+    border-radius: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+@media screen and (min-width: 270px) {
+  .size-s {
+    border-radius: var(--borderRadius);
+    max-width: 400px;
+    min-width: 250px;
+    position: relative;
+  }
+}
+
+@media screen and (min-width: 520px) {
+  .size-m {
+    border-radius: var(--borderRadius);
+    max-width: 800px;
     min-width: 500px;
+    position: relative;
+  }
+}
+
+@media screen and (min-width: 820px) {
+  .size-l {
+    border-radius: var(--borderRadius);
+    max-width: 1200px;
+    min-width: 800px;
+    position: relative;
   }
 }
diff --git a/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.ts b/projects/ui/src/lib/ui-modal/ui-modal/ui-modal.component.ts
@@ -1,6 +1,7 @@
 import { animate, animateChild, query, style, transition, trigger } from '@angular/animations';
 import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Input, OnInit } from '@angular/core';
 import { KitFocusManagerService, KitModalRef } from '@ngx-kit/core';
+import { UiModalSize } from '../meta';
 
 @Component({
   selector: 'ui-modal',
@@ -42,6 +43,8 @@ export class UiModalComponent implements OnInit {
 
   @Input() headerColor = 'default';
 
+  @Input() size: UiModalSize = 'm';
+
   @HostBinding('@modalHost') hostTrigger: void;
 
   constructor(