fix: popover positioning (#1378)

* fix: reset css

* fix: popover positioning when the window of the Agent small

* fix: optimise split mode offset

Author: ert78gb

packages/uhk-web/src/app/components/popover/popover.component.html

@@ -1,9 +1,5 @@
 <div class="popover"
-     #popover
-     [@popover]="{ value: animationState, params: { animationTime: animationTime } }"
      [ngClass]="{'leftArrow': leftArrow, 'rightArrow': rightArrow}"
-     [style.top.px]="topPosition"
-     [style.left.px]="leftPosition"
 >
     <div class="arrowCustom"></div>
     <div class="popover-title menu-tabs">
@@ -13,7 +9,7 @@
                 [class.active]="activeTab === tab.tabName"
                 [class.disabled]="tab.disabled"
                 (click)="selectTab(tab)">
-                <a class="nav-link menu-tabs--item" 
+                <a class="nav-link menu-tabs--item"
                     [class.active]="activeTab === tab.tabName"
                     [class.disabled]="tab.disabled">
                     <fa-icon [icon]="tab.icon"></fa-icon>
@@ -64,7 +60,7 @@
                 <div class="form-check mr-2">
                     <input type="checkbox" class="form-check-input"
                         id="remapOnAllKeymap"
-                        name="remapOnAllKeymap" 
+                        name="remapOnAllKeymap"
                         [(ngModel)]="remapInfo.remapOnAllKeymap">
                     <label class="form-check-label" for="remapOnAllKeymap">Remap on all keymaps</label>
                 </div>
@@ -105,4 +101,3 @@
         </div>
     </div>
 </div>
-<div class="popover-overlay" [class.display]="visible" (click)="onOverlay()"></div>

packages/uhk-web/src/app/components/popover/popover.component.scss

@@ -128,23 +128,6 @@
     padding-right: 10px;
 }
 
-.popover-overlay {
-    position: fixed;
-    width: 100%;
-    height: 0;
-    top: 0;
-    left: 0;
-    z-index: 1050;
-    background: rgba(0, 0, 0, 0);
-    transition: background 200ms ease-out, height 0ms 200ms linear;
-
-    &.display {
-        height: 100%;
-        background: rgba(0, 0, 0, 0.2);
-        transition: background 200ms ease-out;
-    }
-}
-
 .popover-action-form {
     margin-top: 4px;
 

packages/uhk-web/src/app/components/popover/popover.component.ts

@@ -2,7 +2,6 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
-    ElementRef,
     EventEmitter,
     HostListener,
     Input,
@@ -11,7 +10,6 @@ import {
     SimpleChanges,
     ViewChild
 } from '@angular/core';
-import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faBan, faClone, faKeyboard, faMousePointer, faPlay } from '@fortawesome/free-solid-svg-icons';
 
@@ -57,64 +55,28 @@ export interface TabHeader {
     selector: 'popover',
     templateUrl: './popover.component.html',
     styleUrls: ['./popover.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    animations: [
-        trigger('popover', [
-            state('closed', style({
-                transform: 'translateY(30px)',
-                visibility: 'hidden',
-                opacity: 0
-            })),
-            state('opened', style({
-                transform: 'translateY(0)',
-                visibility: 'visible',
-                opacity: 1
-            })),
-            transition('opened => closed', [
-                animate('{{animationTime}} ease-out', keyframes([
-                    style({transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 0}),
-                    style({transform: 'translateY(30px)', visibility: 'hidden', opacity: 0, offset: 1})
-                ]))
-            ], { params: { animationTime: '200ms' } }),
-            transition('closed => opened', [
-                style({
-                    visibility: 'visible'
-                }),
-                animate('{{animationTime}} ease-out', keyframes([
-                    style({transform: 'translateY(30px)', opacity: 0, offset: 0}),
-                    style({transform: 'translateY(0)', opacity: 1, offset: 1})
-                ]))
-            ], { params: { animationTime: '200ms' } })
-        ])
-    ]
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PopoverComponent implements OnChanges {
-    @Input() animationEnabled: boolean;
     @Input() defaultKeyAction: KeyAction;
     @Input() currentKeymap: Keymap;
     @Input() currentLayer: number;
-    @Input() keyPosition: any;
-    @Input() wrapPosition: any;
     @Input() visible: boolean;
     @Input() allowLayerDoubleTap: boolean;
     @Input() remapInfo: RemapInfo;
+    @Input() leftArrow: boolean = false;
+    @Input() rightArrow: boolean = false;
 
     @Output() cancel = new EventEmitter<any>();
     @Output() remap = new EventEmitter<KeyActionRemap>();
 
     @ViewChild('tab', { static: false }) selectedTab: Tab;
-    @ViewChild('popover', { static: false }) popoverHost: ElementRef;
 
     tabName = TabName;
     keyActionValid: boolean;
     activeTab: TabName;
     keymaps$: Observable<Keymap[]>;
     keymapOptions$: Observable<SelectOptionData[]>;
-    leftArrow: boolean = false;
-    rightArrow: boolean = false;
-    topPosition: number = 0;
-    leftPosition: number = 0;
-    animationState: string;
     shadowKeyAction: KeyAction;
     disableRemapOnAllLayer = false;
     tabHeaders: TabHeader[] = [
@@ -154,7 +116,6 @@ export class PopoverComponent implements OnChanges {
 
     constructor(private store: Store<AppState>,
                 private cdRef: ChangeDetectorRef) {
-        this.animationState = 'closed';
         this.keymaps$ = store.select(getKeymaps);
         this.keymapOptions$ = store.select(getKeymapOptions);
         this.macroPlaybackSupported$ = store.select(macroPlaybackSupported);
@@ -164,10 +125,6 @@ export class PopoverComponent implements OnChanges {
     ngOnChanges(change: SimpleChanges) {
         let tab: TabHeader = this.tabHeaders[5];
 
-        if (this.keyPosition && this.wrapPosition && (change['keyPosition'] || change['wrapPosition'])) {
-            this.calculatePosition();
-        }
-
         if (change['defaultKeyAction']) {
             this.disableRemapOnAllLayer = false;
 
@@ -195,19 +152,11 @@ export class PopoverComponent implements OnChanges {
 
         if (change['visible']) {
             if (change['visible'].currentValue) {
-                this.animationState = 'opened';
-
                 this.selectTab(tab);
-            } else {
-                this.animationState = 'closed';
             }
         }
     }
 
-    get animationTime(): string {
-        return this.animationEnabled ? '200ms' : '0ms';
-    }
-
     onCancelClick(): void {
         this.cancel.emit(undefined);
     }
@@ -251,10 +200,6 @@ export class PopoverComponent implements OnChanges {
         }
     }
 
-    onOverlay() {
-        this.cancel.emit(undefined);
-    }
-
     remapInfoChange(): void {
         this.selectedTab.remapInfoChanged(this.remapInfo);
     }
@@ -287,25 +232,4 @@ export class PopoverComponent implements OnChanges {
     trackTabHeader(index: number, tabItem: TabHeader): string {
         return tabItem.tabName.toString();
     }
-
-    private calculatePosition() {
-        const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
-        const popover: HTMLElement = this.popoverHost.nativeElement;
-        let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
-
-        this.leftArrow = newLeft < offsetLeft;
-        this.rightArrow = (newLeft + popover.offsetWidth) > offsetLeft + this.wrapPosition.width;
-
-        if (this.leftArrow) {
-            newLeft = this.keyPosition.left;
-        } else if (this.rightArrow) {
-            newLeft = this.keyPosition.left - popover.offsetWidth + this.keyPosition.width;
-        } else {
-            newLeft -= popover.offsetWidth / 2;
-        }
-
-        // 7 is a space between a bottom key position and a popover
-        this.topPosition = this.keyPosition.top + this.keyPosition.height + 7 + window.scrollY;
-        this.leftPosition = newLeft;
-    }
 }

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss

@@ -13,6 +13,5 @@ editable-text {
     padding-left: 2em;
     padding-right: 2em;
     display: block;
-    position: relative;
     z-index: 51;
 }

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -1,5 +1,5 @@
 <ng-template [ngIf]="layers">
-    <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
+    <layers [class.disabled]="animationState === 'opened'" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider id="keyboard-slider"
                      [animationEnabled]="animationEnabled"
                      [layers]="layers"
@@ -17,10 +17,12 @@
     ></keyboard-slider>
 
     <popover tabindex="0"
-             [animationEnabled]="animationEnabled"
-             [visible]="popoverShown"
-             [keyPosition]="keyPosition"
-             [wrapPosition]="wrapPosition"
+             [@popover]="{ value: animationState, params: { animationTime: animationTime } }"
+             [visible]="animationState === 'opened'"
+             [style.top.px]="topPosition"
+             [style.left.px]="leftPosition"
+             [leftArrow]="leftArrow"
+             [rightArrow]="rightArrow"
              [defaultKeyAction]="popoverInitKeyAction"
              [currentKeymap]="keymap"
              [currentLayer]="currentLayer"
@@ -41,4 +43,5 @@
             </p>
         </div>
     </div>
+    <div class="popover-overlay" [class.display]="animationState === 'opened'" (click)="hidePopover()"></div>
 </ng-template>

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.scss

@@ -1,10 +1,7 @@
 :host {
     width: 100%;
+    height: 100%;
     display: block;
-
-    &.space {
-        margin-bottom: 405px;
-    }
 }
 
 keyboard-slider {
@@ -14,6 +11,30 @@ keyboard-slider {
     margin-top: 30px;
 }
 
+popover {
+    display: inline-block;
+    width: 600px;
+    position: absolute;
+    z-index: 1051;
+}
+
+.popover-overlay {
+    position: fixed;
+    width: 100%;
+    height: 0;
+    top: 0;
+    left: 0;
+    z-index: 1050;
+    background: rgba(0, 0, 0, 0);
+    transition: background 200ms ease-out, height 0ms 200ms linear;
+
+    &.display {
+        height: 100%;
+        background: rgba(0, 0, 0, 0.2);
+        transition: background 200ms ease-out;
+    }
+}
+
 .tooltip {
     position: fixed;
     transform: translate(-50%, -6px);