diff --git a/projects/treecat/src/app/tooltip-container/tooltip-container.component.html b/projects/treecat/src/app/tooltip-container/tooltip-container.component.html index bbf54eb..e63536f 100644 --- 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()' > -
+
} diff --git a/projects/treecat/src/app/tooltip-container/tooltip-container.component.less b/projects/treecat/src/app/tooltip-container/tooltip-container.component.less index e97b823..d2588b5 100644 --- 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; + } + } + } } \ No newline at end of file diff --git a/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.html b/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.html index 3cd734a..b12dd36 100644 --- 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 @@ - + diff --git a/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.ts b/projects/treecat/src/app/tooltip-wrapper/tooltip-wrapper.component.ts index a9bcdb1..469189c 100644 --- 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 index 2c0794e..0dad564 100644 --- 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(); 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 index b4f970f..ff57933 100644 --- 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,7 +47,7 @@ } &.align-bottom-left { - transform: translateY(-8px)translateX(-40px)translateY(-100%); + transform: translateY(-100%); .tip { bottom: 0; transform: translateY(100%); @@ -34,7 +55,7 @@ } } &.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 index 37e5f67..2a45fcf 100644 --- 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 index daf0449..772e73a 100644 --- 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 @@
+
@@ -30,13 +32,13 @@

{{tree.botanicalName}}

 - @if (state.isInCart(tree)) { - + @if (isInCart()) { +
הסרה מהמריצה
 } @else { - +
הוספה למריצה
 diff --git a/projects/treecat/src/app/tree-card/tree-card.component.less b/projects/treecat/src/app/tree-card/tree-card.component.less index fd9f848..ce2c4f3 100644 --- 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 index 282b8f7..796d744 100644 --- 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(); - 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();