fix(modal): Fixed modal positioning for SUI v2.3 (edcarroll#362) (Closes

edcarroll#371) * fix(dimmer): Fixed dimmer to work correctly with SUI v2.3.0 * fix(modal): Fixed modal positioning for SUI v2.3.0 * chore: Updated SUI version to 2.3.1 * chore: Fixed typescript dependency version * feat(modal): Added isCentered property * doc(modal): Updated API description * docs(modal): Fixed a typo in a property description * fix(modal): Fixed barrel reference & private `HostBinding`
avohra · Oct 6, 2018 · e9b58a4 · e9b58a4
1 parent 4307585
commit e9b58a4
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 32 deletions.
diff --git a/demo/src/app/pages/modules/modal/modal.page.ts b/demo/src/app/pages/modules/modal/modal.page.ts
@@ -97,10 +97,17 @@ export class ModalPage {
                     description: "Sets whether the modal displays against a light background.",
                     defaultValue: "false"
                 },
+                {
+                    name: "isCentered",
+                    type: "boolean",
+                    description: "Whether or not the modal should be placed in the center of the page",
+                    defaultValue: "true"
+                },
                 {
                     name: "mustScroll",
                     type: "boolean",
-                    description: "Whether or not the modal should always display a scrollbar.",
+                    description: "Whether or not the modal should be always scrolling. " +
+                    "Should be used when the modal content is dynamic and can exceed the height of the browser",
                     defaultValue: "false"
                 },
                 {

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -12,7 +12,7 @@
     <meta name="description" content="ng2-semantic-ui - Semantic UI Angular 2 Integrations">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
     <!-- Calendar Module CSS -->
     <link rel="stylesheet" href="https://unpkg.com/semantic-ui-calendar/dist/calendar.min.css">
 

diff --git a/src/modules/dimmer/components/dimmer.ts b/src/modules/dimmer/components/dimmer.ts
@@ -8,14 +8,13 @@ import { TransitionController, SuiTransition, TransitionDirection, Transition }
     selector: "sui-dimmer",
     template: `
 <div [class.content]="wrapContent">
-    <div [class.center]="wrapContent">
-        <ng-content></ng-content>
-    </div>
+    <ng-content></ng-content>
 </div>
 `,
     styles: [`
-:host.dimmer {
+:host.dimmer:not(.hidden) {
     transition: none;
+    display: flex !important;
 }
 `]
 })

diff --git a/src/modules/modal/classes/modal-config.ts b/src/modules/modal/classes/modal-config.ts
@@ -29,6 +29,8 @@ export class ModalConfig<T, U = undefined, V = undefined> {
     public isBasic:boolean;
     // Whether the modal shows against a light background.
     public isInverted:boolean;
+    // Whether or not the modal should be placed in the center of the page.
+    public isCentered:boolean;
 
     // Whether or not the modal should always display a scrollbar.
     public mustScroll:boolean;
@@ -47,6 +49,7 @@ export class ModalConfig<T, U = undefined, V = undefined> {
         this.isFullScreen = false;
         this.isBasic = false;
         this.isInverted = false;
+        this.isCentered = true;
 
         this.mustScroll = false;
 

diff --git a/src/modules/modal/components/dimmer.ts b/src/modules/modal/components/dimmer.ts
@@ -0,0 +1,26 @@
+import { Component, HostBinding, Renderer2, ElementRef, ChangeDetectorRef } from "@angular/core";
+import { SuiDimmer } from "../../dimmer/internal";
+
+@Component({
+    selector: "sui-modal-dimmer",
+    template: `<ng-content></ng-content>`,
+    styles: [`
+        :host.ui.dimmer:not(.hidden) {
+            transition: none;
+            overflow-y: auto;
+            display: flex !important; 
+        }
+    `]
+})
+export class SuiModalDimmer extends SuiDimmer {
+
+    @HostBinding("class.page")
+    @HostBinding("class.modals")
+    public readonly hasClasses:boolean;
+
+    constructor(renderer:Renderer2, element:ElementRef, changeDetector:ChangeDetectorRef) {
+        super(renderer, element, changeDetector);
+        this.hasClasses = true;
+        this.isClickable = false;
+    }
+}
diff --git a/src/modules/modal/components/modal.ts b/src/modules/modal/components/modal.ts
@@ -11,12 +11,10 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
     selector: "sui-modal",
     template: `
 <!-- Page dimmer for modal background. -->
-<sui-dimmer class="page"
+<sui-modal-dimmer [ngClass]="{'top aligned': !isCentered}" 
             [class.inverted]="isInverted"
             [(isDimmed)]="dimBackground"
-            [isClickable]="false"
             [transitionDuration]="transitionDuration"
-            [wrapContent]="false"
             (click)="close()">
 
     <!-- Modal component, with transition component attached -->
@@ -25,7 +23,7 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
          [class.active]="transitionController?.isVisible"
          [class.fullscreen]="isFullScreen"
          [class.basic]="isBasic"
-         [class.scroll]="mustScroll"
+         [class.scrolling]="mustScroll"
          [class.inverted]="isInverted"
          [ngClass]="dynamicClasses"
          (click)="onClick($event)"
@@ -38,21 +36,9 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
         <!-- @ViewChild reference so we can insert elements beside this div. -->
         <div #templateSibling></div>
     </div>
-</sui-dimmer>
+</sui-modal-dimmer>
 `,
-    styles: [`
-.ui.dimmer {
-    overflow-y: auto;
-    display: flex !important;
-}
-
-/* avoid .scrolling as Semantic UI adds unwanted styles. */
-.scroll {
-    margin-top: 3.5rem !important;
-    margin-bottom: 3.5rem !important;
-    top: 0;
-}
-`]
+    styles: [``]
 })
 export class SuiModal<T, U> implements OnInit, AfterViewInit {
     @Input()
@@ -93,6 +79,9 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
     @Input()
     public size:ModalSize;
 
+    @Input()
+    public isCentered:boolean;
+
     // Whether the modal takes up the full width of the screen.
     private _isFullScreen:boolean;
 
@@ -206,11 +195,8 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
             templateElement.parentNode.removeChild(templateElement);
         }
 
-        // Update margin offset to center modal correctly on-screen.
         const element = this._modalElement.nativeElement as Element;
-        setTimeout(() => {
-            this.updateScroll();
-        });
+        setTimeout(() => this.updateScroll());
 
         // Focus any element with [autofocus] attribute.
         const autoFocus = element.querySelector("[autofocus]") as HTMLElement | null;
@@ -231,6 +217,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
         this.isFullScreen = config.isFullScreen;
         this.isBasic = config.isBasic;
         this.isInverted = config.isInverted;
+        this.isCentered = config.isCentered;
 
         this.mustScroll = config.mustScroll;
 
@@ -269,12 +256,13 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
 
     // Decides whether the modal needs to reposition to allow scrolling.
     private updateScroll():void {
-        // Semantic UI modal margin is 3.5rem, which is relative to the global font size, so for compatibility:
-        const fontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"));
-        const margin = fontSize * 3.5;
 
         // _mustAlwaysScroll works by stopping _mustScroll from being automatically updated, so it stays `true`.
         if (!this._mustAlwaysScroll && this._modalElement) {
+
+            // Semantic UI modal margin and dimmer padding are 1rem, which is relative to the global font size, so for compatibility:
+            const fontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"));
+            const margin = fontSize * 2;
             const element = this._modalElement.nativeElement as Element;
 
             // The modal must scroll if the window height is smaller than the modal height + both margins.

diff --git a/src/modules/modal/modal.module.ts b/src/modules/modal/modal.module.ts
@@ -5,6 +5,7 @@ import { SuiTransitionModule } from "../transition/internal";
 import { SuiUtilityModule } from "../../misc/util/internal";
 import { SuiModalService } from "./services/modal.service";
 import { SuiModal } from "./components/modal";
+import { SuiModalDimmer } from "./components/dimmer";
 
 @NgModule({
     imports: [
@@ -14,7 +15,8 @@ import { SuiModal } from "./components/modal";
         SuiUtilityModule
     ],
     declarations: [
-        SuiModal
+        SuiModal,
+        SuiModalDimmer
     ],
     exports: [
         SuiModal