fix(plex): fixes para version 8.0.5

andes · Oct 15, 2024 · 08d9472 · 08d9472
1 parent 39a7801
commit 08d9472
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 28 deletions.
diff --git a/src/lib/css/hint.scss b/src/lib/css/hint.scss
@@ -1,32 +1,40 @@
 plex-hint {
-    .hint-wrapper {
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: flex-end;
-        align-items: center;
-        gap: 5px;
-    }
-
     .hint-container {
-        position: relative;
-        top: -5px;
+        @include position(relative);
+
+        &.detach-both {
+            left: 5px;
+            bottom: 5px;
+        }
+
+        &.detach-right {
+            left: 5px;
+        }
+
+        &.detach-top {
+            bottom: 5px;
+        }
+
         display: inline-flex;
+        top: -15px;
+        left: -5px;
+        margin-right: -20px;
         z-index: 10;
 
         .hint {
-
             // $colors definidos en colors.scss
             @each $name, $color in $colors {
                 &.#{$name} {
                     @include generic-factory($front-color: $light-blue, $bg-color: $color);
                 }
             }
 
-            font-family: sans-serif;
-            font-size: 12px;
-            border-radius: 9px;
-            padding: 1px 3px;
-            z-index: 1;
+            border-radius: 100%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
             &:hover {
                 background-color: $blue;

diff --git a/src/lib/hint/hint.component.ts b/src/lib/hint/hint.component.ts
@@ -1,18 +1,17 @@
 import { MatTooltip } from '@angular/material/tooltip';
-import { Component, OnInit, Input, HostListener, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, HostListener, ViewChild, ElementRef } from '@angular/core';
 import { PlexType } from '../core/plex-type.type';
 
 @Component({
     selector: 'plex-hint',
     template: `
-        <div #hintElem class="hint-wrapper">
-        <span #matTooltip="matTooltip" tabindex="0" role="link" *ngIf="position && content" class="hint-container"
+        <span #matTooltip="matTooltip" tabindex="0" role="link" *ngIf="position && content" class="hint-container detach-{{detach}}"
             [matTooltip]="content" [matTooltipPosition]="position" (click)="showTooltip()">
             <plex-icon class="hint {{ hintType }}" [name]="hintIcon" size="xs" type="light"></plex-icon>
-        </span></div>
+        </span>
     `
 })
-export class HintComponent implements OnInit, AfterViewInit {
+export class HintComponent implements OnInit {
 
     @Input()
     hostElement: HTMLElement;
@@ -29,21 +28,17 @@ export class HintComponent implements OnInit, AfterViewInit {
     @Input()
     position = 'above';
 
+    @Input()
+    detach: '' | 'both' | 'right' | 'top';
+
     constructor() { }
 
     @ViewChild('matTooltip', { static: false }) matTooltip: MatTooltip;
-    @ViewChild('hintElem') elementoActual!: ElementRef;
 
     ngOnInit() {
         this.position = 'above';
     }
 
-    ngAfterViewInit() {
-        const elemento: HTMLElement = this.elementoActual.nativeElement;
-
-        elemento.appendChild(this.hostElement);
-    }
-
     showTooltip() {
         this.matTooltip.show(0);
     }