Fix tooltips

whiletrue-industries · Feb 24, 2025 · 7691bcd · 7691bcd
1 parent e8b647a
commit 7691bcd
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 26 deletions.
diff --git a/projects/treecat/src/app/tooltip-container/tooltip-container.component.html b/projects/treecat/src/app/tooltip-container/tooltip-container.component.html
@@ -4,10 +4,11 @@
         [style.left.px]='tooltip.left()'
     >
         <app-tooltip [align]='tooltip.align()'
-            (mouseenter)='tooltip.keep()'
-            (mouseleave)='tooltip.unkeep()'
         >
-            <div [innerHTML]='tooltip.content()'></div>
+            <div [class.inert]='tooltip.inert()'
+                (mouseenter)='tooltip.keep()'
+                (mouseleave)='tooltip.unkeep()'
+                [innerHTML]='tooltip.content()'></div>
         </app-tooltip>
     </div>
 }
diff --git a/projects/treecat/src/app/tooltip-container/tooltip-container.component.less b/projects/treecat/src/app/tooltip-container/tooltip-container.component.less
@@ -7,4 +7,14 @@
     display: flex;
     flex-flow: column;
     align-items: flex-end;
+
+    app-tooltip {
+        pointer-events: none;
+        div {
+            pointer-events: all;
+            &.inert {
+                pointer-events: none;
+            }
+        }
+    }
 }
diff --git a/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.html b/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.html
@@ -1,4 +1,4 @@
-<span class='anchor' #anchor (mouseover)='show()'>
+<span class='anchor' #anchor (mouseover)='show($event)' (mousemove)='show($event)'>
     <ng-content select='[anchor]'></ng-content>
 </span>
 <span class='content' #content>

diff --git a/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.ts b/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.ts
@@ -9,6 +9,7 @@ import { TooltipAlignments, TooltipService } from '../tooltip.service';
 })
 export class TooltipWrapperComponent {
   @Input() align: TooltipAlignments = 'bottom-left';
+  @Input() inert = false;
 
   content = '';
   @ViewChild('anchor') anchorEl: ElementRef;
@@ -20,8 +21,9 @@ export class TooltipWrapperComponent {
     this.content = this.contentEl.nativeElement.innerHTML;
   }
 
-  show() {
-    console.log('showing tooltip');
-    this.tooltip.show(this.anchorEl.nativeElement, this.content, this.align);
+  show(event: MouseEvent) {
+    // console.log('showing tooltip', event, this.anchorEl.nativeElement);
+    this.tooltip.show(this.anchorEl.nativeElement, this.content, this.align, this.inert);
+    return true;
   }
 }
diff --git a/projects/treecat/src/app/tooltip.service.ts b/projects/treecat/src/app/tooltip.service.ts
@@ -17,21 +17,22 @@ export class TooltipService {
   keeping = false;
 
   visible = signal(false);
+  inert = signal(false);
 
   hider = new Subject<void>();
 
   constructor() {
     this.hider.pipe(
-      debounceTime(1000),
+      debounceTime(100),
       filter(() => !this.keeping)
     ).subscribe(() => {
       this.hide();
     });
   }
 
-  show(el: Element, content: string, align: TooltipAlignments = 'bottom-left') {
+  show(el: Element, content: string, align: TooltipAlignments = 'bottom-left', inert=false) {
     if (this.visible() && this.lastEl === el) {
-      console.log('already showing this tooltip');
+      // console.log('already showing this tooltip');
       return;
     }
     const rect = el.getBoundingClientRect();
@@ -44,26 +45,32 @@ export class TooltipService {
     this.left.set(rect.left + rect.width / 2);
     this.align.set(align);
     this.content.set(content);
-    this.visible.set(true); 
+    this.visible.set(true);
+    this.inert.set(inert);
     this.lastEl = el;
     fromEvent(el, 'mouseout').pipe(
       take(1)
     ).subscribe(() => {
+      // console.log('mouse out', el);
       this.hider.next();
     });
 
   }
 
   keep() {
+    // console.log('keeping');
     this.keeping = true;
   }
 
   unkeep() {
+    // console.log('unkeeping');
     this.keeping = false;
+    this.lastEl = null;
     this.hider.next();
   }
 
   hide() {
+    // console.log('hiding');
     this.visible.set(false);
     this.lastEl = null;
     this.keeping = false;

diff --git a/projects/treecat/src/app/tooltip/tooltip.component.less b/projects/treecat/src/app/tooltip/tooltip.component.less
@@ -2,6 +2,27 @@
 
 :host {
     width: fit-content;
+    height: 0;
+    overflow: visible;
+    position: relative;
+    &.align-bottom-left {
+        top: -8px;
+        left: -40px;
+    }
+    &.align-bottom-right {
+        top: -8px;
+        left: 40px;
+    }
+
+    &.align-top-left {
+        top: 8px;
+        left: -40px;
+    }
+
+    &.align-top-right {
+        top: 8px;
+        left: 40px;
+    }
 }
 .tooltip {
     border-radius: 5px;
@@ -26,15 +47,15 @@
     }
 
     &.align-bottom-left {
-        transform: translateY(-8px)translateX(-40px)translateY(-100%);
+        transform: translateY(-100%);
         .tip {
             bottom: 0;
             transform: translateY(100%);
             left: 32px;
         }
     }
     &.align-bottom-right {
-        transform: translateY(-8px)translateX(-100%)translateX(40px)translateY(-100%);
+        transform: translateX(-100%)translateY(-100%);
         .tip {
             bottom: 0;
             transform: translateY(100%);
@@ -43,7 +64,7 @@
     }
 
     &.align-top-left {
-        transform: translateY(8px)translateX(-40px);
+        // transform: translateY(8px)translateX(-40px);
         .tip {
             top: 0;
             left: 32px;
@@ -52,7 +73,7 @@
     }
 
     &.align-top-right {
-        transform: translateY(8px)translateX(-100%)translateX(40px);
+        transform: translateX(-100%);
         .tip {
             top: 0;
             right: 32px;

diff --git a/projects/treecat/src/app/tooltip/tooltip.component.ts b/projects/treecat/src/app/tooltip/tooltip.component.ts
@@ -5,10 +5,15 @@ import { TooltipAlignments } from '../tooltip.service';
   selector: 'app-tooltip',
   imports: [],
   templateUrl: './tooltip.component.html',
-  styleUrl: './tooltip.component.less'
+  styleUrl: './tooltip.component.less',
+  host: {
+    '[class.align-bottom-left]': 'align === "bottom-left"',
+    '[class.align-bottom-right]': 'align === "bottom-right"',
+    '[class.align-top-left]': 'align === "top-left"',
+    '[class.align-top-right]': 'align === "top-right"',
+  },
 })
 export class TooltipComponent {
 
   @Input() align: TooltipAlignments = 'bottom-left';
-
 }
diff --git a/projects/treecat/src/app/tree-card/tree-card.component.html b/projects/treecat/src/app/tree-card/tree-card.component.html
@@ -1,6 +1,8 @@
 <div class='card'>
     <img [src]='tree.mainPhoto?.url || data.DEFAULT_IMAGE_URL' (load)='markAsLoaded()'>
     <a class='overlay' (activated)='open()' clickOnReturn>
+        <!-- [class.visible]='showOverlay()'>
+    (mouseover)='showOverlay.set(true)' (mouseout)='showOverlay.set(false)'> -->
         <div class='content'>
             <div class='header'>
                 <div class='name'>
@@ -30,13 +32,13 @@ <h3>{{tree.botanicalName}}</h3>
             </div>
         </div>
     </a>
-    @if (state.isInCart(tree)) {
-        <app-tooltip-wrapper align='bottom-left' class='remove-from-cart'>
+    @if (isInCart()) {
+        <app-tooltip-wrapper align='bottom-left' class='remove-from-cart' [inert]='true'>
             <a anchor class='icon' (activated)='state.removeFromCart(tree)' clickOnReturn aria-label="הסרה מהמריצה"></a>
             <div tooltip>הסרה מהמריצה</div>
         </app-tooltip-wrapper>
     } @else {
-        <app-tooltip-wrapper align='bottom-left' class='add-to-cart'>
+        <app-tooltip-wrapper align='bottom-left' class='add-to-cart' [inert]='true'>
             <a anchor class='icon' (activated)='state.addToCart(tree)' clickOnReturn aria-label="הוספה למריצה"></a>
             <div tooltip>הוספה למריצה</div>
         </app-tooltip-wrapper>

diff --git a/projects/treecat/src/app/tree-card/tree-card.component.less b/projects/treecat/src/app/tree-card/tree-card.component.less
@@ -124,7 +124,6 @@
             }
         }
         .add-to-cart {
-            display: none;
             .icon {
                 background-image: url(../../../public/img/icon-star-empty-black.svg);
                 &:hover {
@@ -147,9 +146,6 @@
                     }
                 }
             }
-            .add-to-cart {
-                display: block;
-            }
         }
     }
 }
diff --git a/projects/treecat/src/app/tree-card/tree-card.component.ts b/projects/treecat/src/app/tree-card/tree-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, effect, EventEmitter, Input, Output, signal } from '@angular/core';
 import { DataService, Tree } from '../data.service';
 import { environment } from '../../environments/environment';
 import { Router, RouterModule } from '@angular/router';
@@ -22,7 +22,14 @@ export class TreeCardComponent {
   @Input() catalog = false;
   @Output() loaded = new EventEmitter<void>();
 
-  constructor(public state: StateService, public data: DataService, private router: Router) {}
+  isInCart = signal(false);
+  showOverlay = signal(false);
+
+  constructor(public state: StateService, public data: DataService, private router: Router) {
+    effect(() => {
+      this.isInCart.set(this.state.isInCart(this.tree));
+    });
+  }
 
   markAsLoaded() {
     this.loaded.emit();