fix(popover): Popover wrong left positioning

positive-js · May 25, 2020 · f9ddd6c · f9ddd6c
1 parent f324155
commit f9ddd6c
Show file tree

Hide file tree

Showing 4 changed files with 410 additions and 142 deletions.
diff --git a/packages/mosaic-dev/popover/module.ts b/packages/mosaic-dev/popover/module.ts
@@ -6,6 +6,10 @@ import { McButtonModule } from '@ptsecurity/mosaic/button';
 import { McPopoverModule } from '@ptsecurity/mosaic/popover';
 
 import { McIconModule } from '../../mosaic/icon/';
+import { FormsModule } from '@angular/forms';
+import { McInputModule } from '@ptsecurity/mosaic/input';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McSelectModule } from '@ptsecurity/mosaic/select';
 
 
 /* tslint:disable:no-trailing-whitespace */
@@ -20,6 +24,31 @@ export class DemoComponent {
 
     isPopoverVisibleLeft: boolean = false;
 
+    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 = 'top';
+    selectedTrigger: string = 'click';
+    selectedSize: string = 'normal';
+    layoutClass: string = 'flex layout-row layout-align-start-center';
+    content: string = 'button text';
+
     constructor() {
         this.popoverActiveStage = 1;
     }
@@ -44,6 +73,21 @@ export class DemoComponent {
     onPopoverVisibleChange() {
         console.log('onPopoverVisibleChange'); // tslint:disable-line:no-console
     }
+
+    setPlacement(placement: string) {
+        console.log(placement);
+        this.selectedPlacement = placement;
+    }
+
+
+    showElement(): string {
+        return this.selectedElement;
+    }
+
+    activated(value: string): boolean {
+        console.log(value, this.selectedPlacement);
+        return this.selectedPlacement === value;
+    }
 }
 
 @NgModule({
@@ -54,9 +98,13 @@ export class DemoComponent {
         BrowserModule,
         BrowserAnimationsModule,
         A11yModule,
+        FormsModule,
+        McFormFieldModule,
+        McSelectModule,
         McPopoverModule,
         McButtonModule,
-        McIconModule
+        McIconModule,
+        McInputModule
     ],
     bootstrap: [
         DemoComponent

diff --git a/packages/mosaic-dev/popover/styles.scss b/packages/mosaic-dev/popover/styles.scss
@@ -16,6 +16,90 @@ app {
     justify-content: center;
     align-items: stretch;
     padding: 0 10%;
+
+    .padding-32 {
+        padding: 32px;
+    }
+
+    .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 {