tooltip added

apps/red-ui/src/app/common/red-tooltip/custom-tooltip.directive.ts

@@ -0,0 +1,116 @@
+import { ComponentRef, Directive, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { TooltipContentComponent } from './tooltip-content/tooltip-content.component';
+import { TooltipModel } from './tooltip-content/tooltip.model';
+import { ArOverlayPosition, Placement } from '../../common/model/ar-overlay-position';
+import { NavigationStart, Router } from '@angular/router';
+
+@Directive({
+    selector: '[redTooltip]',
+    exportAs: 'redTooltip'
+})
+export class CustomTooltipDirective implements OnInit, OnChanges, OnDestroy {
+    @Input() redTooltip: string;
+
+    @Input() placement: Placement = 'top';
+
+    private overlayRef: OverlayRef;
+    private tooltipRef: ComponentRef<TooltipContentComponent>;
+
+    private _enable = true;
+    protected test: string;
+
+    constructor(
+        protected overlayPositionBuilder: OverlayPositionBuilder,
+        protected router: Router,
+        protected elementRef: ElementRef,
+        protected overlay: Overlay
+    ) {}
+
+    ngOnInit(): void {
+        this.router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.destroyOverlay();
+            }
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (this.tooltipRef && this.redTooltip) {
+            this.tooltipRef.instance.tooltip = new TooltipModel(this.redTooltip);
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.destroyOverlay();
+    }
+
+    @HostListener('mouseover', ['$event'])
+    show($event) {
+        if (this._enable) {
+            $event.stopPropagation();
+            $event.preventDefault();
+            this.open();
+        }
+    }
+
+    open(model?: TooltipModel) {
+        if (!this.overlayRef) {
+            this.createOverlay();
+        }
+
+        if (model) {
+            this.redTooltip = model;
+        }
+        if (this.redTooltip) {
+            this.overlayRef.detach();
+            const tooltipPortal = new ComponentPortal(TooltipContentComponent);
+            this.tooltipRef = this.overlayRef.attach(tooltipPortal);
+            this.tooltipRef.instance.tooltip = new TooltipModel(this.redTooltip);
+        }
+    }
+
+    close() {
+        this.destroyOverlay();
+    }
+
+    @HostListener('mouseout')
+    hideFromMouseOut() {
+        this.detachOverlay();
+    }
+
+    @HostListener('mousedown')
+    hideFromClick() {
+        this._enable = false;
+        this.destroyOverlay();
+    }
+
+    @HostListener('mouseup')
+    _enableTooltip() {
+        this._enable = true;
+    }
+
+    private createOverlay() {
+        const positionStrategy = this.overlayPositionBuilder
+            .flexibleConnectedTo(this.elementRef)
+            .withPositions(ArOverlayPosition.getConnectedPosition(this.placement));
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close()
+        });
+    }
+
+    private destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+
+    private detachOverlay() {
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            this.overlayRef.detach();
+        }
+    }
+}

apps/red-ui/src/app/common/red-tooltip/custom-tooltip.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CustomTooltipDirective } from './ar-tooltip.directive';
+import { TooltipContentComponent } from './tooltip-content/tooltip-content.component';
+
+@NgModule({
+    imports: [CommonModule, OverlayModule],
+    declarations: [CustomTooltipDirective, TooltipContentComponent],
+    exports: [CustomTooltipDirective],
+    entryComponents: [TooltipContentComponent]
+})
+export class CustomTooltipModule {}

apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.html

@@ -0,0 +1,10 @@
+<div class="tooltip-wrapper">
+    <div *ngIf="tooltip.title && tooltip.body; else onlyBodyOrTile">
+        <div class="tooltip-title">{{ tooltip.title }}</div>
+        <div class="tooltip-body">{{ tooltip.body }}</div>
+    </div>
+    <ng-template #onlyBodyOrTile>
+        <div *ngIf="tooltip.title" class="tooltip-body">{{ tooltip.title }}</div>
+        <div *ngIf="tooltip.body" class="tooltip-body">{{ tooltip.body }}</div>
+    </ng-template>
+</div>

apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.scss

@@ -0,0 +1,19 @@
+@import '../../../../../../../assets/styles/ar-typography';
+
+.tooltip-wrapper {
+    background-color: $aci-white;
+    box-shadow: 2px 3px 20px 0 rgba(0, 0, 0, 0.1);
+    padding: 12px 16px;
+    max-width: 300px;
+    font-size: 13px;
+    opacity: 0.95;
+
+    .tooltip-title {
+        @extend .aci-font-style-f8, .aci-grey-1;
+        padding-bottom: 4px;
+    }
+
+    .tooltip-body {
+        @extend .aci-font-style-f9, .aci-grey-1;
+    }
+}

apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip-content.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TooltipModel } from './tooltip.model';
+
+@Component({
+    selector: 'up-ext-tooltip-content',
+    templateUrl: './tooltip-content.component.html',
+    styleUrls: ['./tooltip-content.component.scss']
+})
+export class TooltipContentComponent implements OnInit {
+    @Input() tooltip: TooltipModel;
+
+    constructor() {}
+
+    ngOnInit() {}
+}

apps/red-ui/src/app/common/red-tooltip/tooltip-content/tooltip.model.ts

@@ -0,0 +1,3 @@
+export class TooltipModel {
+    constructor(public body: string) {}
+}