-
Notifications
You must be signed in to change notification settings - Fork 28
/
Bookmarks.svelte
100 lines (92 loc) · 2.93 KB
/
Bookmarks.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<script lang="ts">
import { Tile, ClickableTile, Tag } from 'carbon-components-svelte';
import { CaretRight } from 'carbon-icons-svelte';
import { fade } from 'svelte/transition';
import {
selectedPlugin,
selectedMedia,
selectedItem,
} from './../../stores/Stores';
import MediaIcon from '../../../../img/media.webp';
import type { Bookmark } from '../../../../engine/providers/Bookmark';
//export let onlyNewContent = false;
async function selectBookmark(bookmark: Bookmark) {
$selectedPlugin = HakuNeko.BookmarkPlugin;
$selectedMedia = bookmark;
$selectedItem = undefined;
}
</script>
<div id="bookmarkspage" in:fade>
<Tile id="bookmarks" class="border">
{#each window.HakuNeko.BookmarkPlugin.Entries as bookmark (bookmark)}
<ClickableTile
class="suggesttile"
light
on:click={() => selectBookmark(bookmark)}
>
<div
class="mediaitem"
style="background-image: url({bookmark.Icon ?? MediaIcon});"
>
<Tag class="suggesttitle" type="outline" interactive>
<span title={bookmark.Title}>{bookmark.Title}</span>
</Tag>
{#await bookmark.GetUnflaggedContent() then value}
{#if value.length > 0}
<Tag
class="suggestcount"
type="outline"
icon={CaretRight}
interactive
>
{value.length}
</Tag>
{/if}
{/await}
</div>
</ClickableTile>
{/each}
</Tile>
</div>
<style>
#bookmarkspage {
padding: 0.5em;
height: 100%;
}
#bookmarkspage :global(#bookmarks) {
margin-bottom: 1em;
height: 100%;
}
#bookmarkspage :global(#bookmarks) {
display: grid;
grid-template-columns: repeat(auto-fit, 10em);
grid-auto-rows: 10em;
grid-gap: 0.5em;
overflow: auto;
}
#bookmarkspage :global(#bookmarks .suggesttile) {
padding: 0;
}
#bookmarkspage :global(#bookmarks .suggesttile .bx--tag span) {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
#bookmarkspage :global(#bookmarks .suggesttitle) {
width: 95%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#bookmarkspage :global(#bookmarks .suggestcount) {
position: absolute;
bottom: 0;
right: 0.2em;
}
.mediaitem {
height: 100%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
}
</style>