diff --git a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html index f8414191..b101a052 100644 --- a/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html +++ b/booklore-ui/src/app/features/book/components/book-browser/book-card/book-card.component.html @@ -85,7 +85,7 @@ [pTooltip]="'Title: ' + displayTitle"> {{ displayTitle }} - + (); + @Output() menuToggled = new EventEmitter(); @Input() index!: number; @Input() book!: Book; @@ -126,6 +127,14 @@ export class BookCardComponent implements OnInit, OnChanges, OnDestroy { this.bookService.readBook(book.id); } + onMenuShow(): void { + this.menuToggled.emit(true); + } + + onMenuHide(): void { + this.menuToggled.emit(false); + } + onMenuToggle(event: Event, menu: TieredMenu): void { menu.toggle(event); diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html index 1c6c5774..a98860a4 100644 --- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html +++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.html @@ -23,8 +23,8 @@ #scrollContainer [horizontal]="true"> @for (book of books; track book.id) { -
- +
+
}
diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss index ee046706..90dd2c1d 100644 --- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss +++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.scss @@ -96,7 +96,7 @@ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; - &:hover { + &:hover, &.menu-open { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.4)); diff --git a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts index 25c5aae8..8a31aee2 100644 --- a/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts +++ b/booklore-ui/src/app/features/dashboard/components/dashboard-scroller/dashboard-scroller.component.ts @@ -25,4 +25,9 @@ export class DashboardScrollerComponent { @Input() isMagicShelf: boolean = false; @ViewChild('scrollContainer') scrollContainer!: ElementRef; + openMenuBookId: number | null = null; + + handleMenuToggle(bookId: number, isOpen: boolean) { + this.openMenuBookId = isOpen ? bookId : null; + } }