Kavita/UI/Web/src/app/book-reader/_components/personal-table-of-contents/personal-table-of-contents.component.html
Robbie Davis 62383042b0
UX Pass 6 (#3131)
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
2024-08-26 10:52:46 -04:00

32 lines
1.1 KiB
HTML

<ng-container *transloco="let t; read: 'personal-table-of-contents'">
<div class="table-of-contents">
@if (Pages.length === 0) {
<div>
<em>{{t('no-data')}}</em>
</div>
}
<ul>
@for (page of Pages; track page) {
<li>
<span (click)="loadChapterPage(page, '')">{{t('page', {value: page})}}</span>
<ul class="chapter-title">
@for(bookmark of bookmarks[page]; track bookmark) {
<li class="ellipsis"
[ngbTooltip]="bookmark.title"
placement="right"
(click)="loadChapterPage(bookmark.pageNumber, bookmark.bookScrollId); $event.stopPropagation();">
{{bookmark.title}}
<button class="btn btn-icon ms-1" (click)="removeBookmark(bookmark); $event.stopPropagation();">
<i class="fa-solid fa-trash" aria-hidden="true"></i>
<span class="visually-hidden">{{t('delete', {bookmarkName: bookmark.title})}}</span>
</button>
</li>
}
</ul>
</li>
}
</ul>
</div>
</ng-container>