feat(popover): positioning and dev-example updates (UIM-447) (#467)

positive-js · May 28, 2020 · 702ad2a · 702ad2a
1 parent 345e264
commit 702ad2a
Show file tree

Hide file tree

Showing 6 changed files with 709 additions and 337 deletions.
diff --git a/packages/mosaic-dev/popover/module.ts b/packages/mosaic-dev/popover/module.ts
@@ -1,9 +1,15 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McCheckboxModule } from '@ptsecurity/mosaic/checkbox';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McInputModule } from '@ptsecurity/mosaic/input';
 import { McPopoverModule } from '@ptsecurity/mosaic/popover';
+import { McSelectModule } from '@ptsecurity/mosaic/select';
+import { McSplitterModule } from '@ptsecurity/mosaic/splitter';
 
 import { McIconModule } from '../../mosaic/icon/';
 
@@ -17,9 +23,39 @@ import { McIconModule } from '../../mosaic/icon/';
 })
 export class DemoComponent {
     popoverActiveStage: number;
+    selectedOrder: boolean;
 
     isPopoverVisibleLeft: boolean = false;
 
+    activatedPosition: string = '';
+
+    ELEMENTS = {
+        BUTTON: 'button',
+        INPUT: 'input',
+        ICON: 'icon'
+    };
+
+    TRIGGERS = {
+        CLICK: 'click',
+        FOCUS: 'focus',
+        HOVER: 'hover'
+    };
+
+    SIZE = {
+        LARGE: 'large',
+        NORMAL: 'normal',
+        SMALL: 'small'
+    };
+
+    selectedElement: string = 'button';
+    selectedPlacement: string = 'left';
+    selectedTrigger: string = 'click';
+    selectedSize: string = 'normal';
+    layoutClass: string = 'flex-65 layout-row layout-align-center-center';
+    content: string = 'button text';
+    userDefinedPlacementPriority: string[] = ['bottom', 'right'];
+    multipleSelected: string[] = [];
+
     constructor() {
         this.popoverActiveStage = 1;
     }
@@ -33,16 +69,43 @@ export class DemoComponent {
         this.popoverActiveStage += direction;
     }
 
-    changePopoverVisibilityLeft() {
-        this.isPopoverVisibleLeft = !this.isPopoverVisibleLeft;
+    onPopoverVisibleChange($event) {
+        if (!$event) {
+            this.activatedPosition = '';
+        }
+    }
+
+    onStrategyPlacementChange(event) {
+        this.activatedPosition = event;
+    }
+
+    setPlacement(placement: string) {
+        this.selectedPlacement = placement;
+    }
+
+    showElement(): string {
+        return this.selectedElement;
+    }
+
+    activated(value: string): boolean {
+        return this.selectedPlacement === value;
+    }
+
+    isActual(value: string): boolean {
+        return this.activatedPosition === value && this.selectedPlacement !== this.activatedPosition;
     }
 
-    onPopoverVisibleChangeLeft(update: boolean) {
-        this.isPopoverVisibleLeft = update;
+    getOrder(forElement: string) {
+        if (forElement === 'config') {
+            return this.selectedOrder ? {order: 2} : {order: 1};
+        }
+        if (forElement === 'result') {
+            return this.selectedOrder ? {order: 1} : {order: 2};
+        }
     }
 
-    onPopoverVisibleChange() {
-        console.log('onPopoverVisibleChange'); // tslint:disable-line:no-console
+    get isFallbackActivated(): boolean {
+        return this.selectedPlacement !== this.activatedPosition && this.activatedPosition !== '';
     }
 }
 
@@ -54,9 +117,15 @@ export class DemoComponent {
         BrowserModule,
         BrowserAnimationsModule,
         A11yModule,
+        FormsModule,
+        McFormFieldModule,
+        McSelectModule,
         McPopoverModule,
         McButtonModule,
-        McIconModule
+        McIconModule,
+        McInputModule,
+        McSplitterModule,
+        McCheckboxModule
     ],
     bootstrap: [
         DemoComponent

diff --git a/packages/mosaic-dev/popover/styles.scss b/packages/mosaic-dev/popover/styles.scss
@@ -10,12 +10,127 @@ body, html {
 app {
     height: 100%;
     width: 100%;
-    display: flex;
-    flex: 1 1 100%;
-    flex-flow: column;
-    justify-content: center;
-    align-items: stretch;
-    padding: 0 10%;
+
+    .actual {
+        animation: blink-animation 1s steps(5, start) infinite;
+        -webkit-animation: blink-animation 1s steps(5, start) infinite;
+    }
+    @keyframes blink-animation {
+        to {
+            visibility: hidden;
+        }
+    }
+    @-webkit-keyframes blink-animation {
+        to {
+            visibility: hidden;
+        }
+    }
+
+    .red {
+        color: red;
+    }
+
+    .container {
+        width: 100%;
+        height: 100%;
+        padding: 1%;
+    }
+
+    .config {
+        height: 50%;
+        width: 100%;
+    }
+
+    .result {
+        border-top: solid 2px #56d1ff;
+        border-bottom: solid 2px #56d1ff;
+        height: 50%;
+        width: 100%;
+    }
+
+    .padding-32 {
+        padding: 8px;
+    }
+
+    .visual-box {
+        height: 100px;
+        width: 240px;
+        border: 1px solid #575757;
+        position: relative;
+        margin: 50px;
+
+        .visual-box--clickable {
+            height: 12px;
+            width: 12px;
+            position: absolute;
+            background: #4dc3ff;
+            cursor: pointer;
+        }
+
+        .active {
+            background: red;
+        }
+
+        &_placement-top-left {
+            top: -6px;
+            left: 10px;
+        }
+
+        &_placement-top {
+            top: -6px;
+            left: calc(50% - 6px);
+        }
+
+        &_placement-top-right {
+            top: -6px;
+            right: 10px;
+        }
+
+        &_placement-left-top {
+            top: 10px;
+            left: -6px;
+        }
+
+        &_placement-left {
+            top: calc(50% - 6px);
+            left: -6px;
+        }
+
+        &_placement-left-bottom {
+            bottom: 10px;
+            left: -6px;
+        }
+
+        &_placement-bottom-right {
+            bottom: -6px;
+            right: 10px;
+        }
+
+        &_placement-bottom {
+            bottom: -6px;
+            right: calc(50% - 6px);
+        }
+
+        &_placement-bottom-left {
+            bottom: -6px;
+            left: 10px;
+        }
+
+        &_placement-right-bottom {
+            right: -6px;
+            bottom: 10px;
+        }
+
+        &_placement-right {
+            right: -6px;
+            bottom: calc(50% - 6px);
+        }
+
+        &_placement-right-top {
+            right: -6px;
+            top: 10px;
+        }
+    }
 }
 
 .popover-485 {