Skip to content

Commit 439225b

Browse files
dvcoldvcol
committed
feat(panel): adds button tooltip & styling, adds collection info
1 parent 5ef92e5 commit 439225b

26 files changed

+1050
-177
lines changed

‎src/components/common/list/ListItemPanel.vue

+16-54
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import {
55
NProgress,
66
NSkeleton,
77
NTag,
8-
NTooltip,
98
type PopoverProps,
109
} from 'naive-ui';
1110
1211
import { computed, defineProps, type PropType, ref, toRefs } from 'vue';
1312
1413
import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
1514
import TagLink from '~/components/common/buttons/TagLink.vue';
15+
import ProgressTooltip from '~/components/common/tooltip/ProgressTooltip.vue';
1616
import { type ListScrollItem, type ShowProgress } from '~/models/list-scroll.model';
1717
1818
import { useShowStore } from '~/stores/data/show.store';
@@ -74,15 +74,15 @@ const tags = computed(
7474
}),
7575
);
7676
77-
const { getShowProgress } = useShowStore();
77+
const { getShowWatchedProgress } = useShowStore();
7878
7979
const progress = computed<ShowProgress | undefined>(() => {
8080
if (item?.value?.progress) return item.value?.progress;
8181
if (item?.value?.progressRef) return item.value?.progressRef.value;
8282
if (!item?.value?.getProgressQuery) return;
8383
const id = item.value?.getProgressQuery();
8484
if (!id) return;
85-
return getShowProgress(id).value;
85+
return getShowWatchedProgress(id).value;
8686
});
8787
8888
const innerContainer = ref();
@@ -137,47 +137,19 @@ const onTagClick = (url?: string) => {
137137
</template>
138138
</NFlex>
139139
<div v-if="showProgress && !loading" class="panel-progress">
140-
<NTooltip
141-
class="panel-progress-tooltip"
142-
:disabled="!progress"
143-
placement="top-end"
144-
:delay="100"
145-
:to="innerContainer"
146-
>
147-
<NFlex v-if="progress" vertical align="flex-end">
148-
<div>
149-
<span class="metric">{{ progress?.completed }}</span>
150-
<span> / </span>
151-
<span class="metric">{{ progress?.aired }}</span>
152-
<span>&nbsp;</span>
153-
<span>{{ i18n('tooltip_episodes') }}</span>
154-
</div>
155-
<div>
156-
<span class="metric">{{ Math.round(progress?.percentage) }}</span>
157-
<span>%</span>
158-
<span>&nbsp;</span>
159-
<span>{{ i18n('tooltip_watched') }}</span>
160-
</div>
161-
<div>
162-
<span class="metric">{{ progress?.aired - progress?.completed }}</span>
163-
<span>&nbsp;</span>
164-
<span>{{ i18n('tooltip_remaining') }}</span>
165-
</div>
166-
</NFlex>
167-
<template #trigger>
168-
<NProgress
169-
class="line"
170-
:data-show-id="progress?.id"
171-
:data-percentage="progress?.percentage"
172-
:theme-overrides="{
173-
railHeight: 'var(--rail-height)',
174-
}"
175-
:percentage="progress?.percentage ?? 0"
176-
:show-indicator="false"
177-
color="var(--trakt-red-dark)"
178-
/>
179-
</template>
180-
</NTooltip>
140+
<ProgressTooltip :progress="progress" :to="innerContainer" placement="top-end">
141+
<NProgress
142+
class="line"
143+
:data-show-id="progress?.id"
144+
:data-percentage="progress?.percentage"
145+
:theme-overrides="{
146+
railHeight: 'var(--rail-height)',
147+
}"
148+
:percentage="progress?.percentage ?? 0"
149+
:show-indicator="false"
150+
color="var(--trakt-red-dark)"
151+
/>
152+
</ProgressTooltip>
181153
</div>
182154
</div>
183155
</NFlex>
@@ -222,16 +194,6 @@ const onTagClick = (url?: string) => {
222194
&:hover {
223195
--trakt-red-dark: var(--trakt-red);
224196
}
225-
226-
&-tooltip {
227-
font-size: 0.8rem;
228-
229-
.metric {
230-
color: var(--vt-c-white);
231-
font-weight: bolder;
232-
font-variant-numeric: tabular-nums;
233-
}
234-
}
235197
}
236198
}
237199
</style>

‎src/components/common/tooltip/ProgressTooltip.vue

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<script lang="ts" setup>
2+
import { NFlex, NTooltip } from 'naive-ui';
3+
4+
import { computed, type PropType, toRefs } from 'vue';
5+
6+
import {
7+
type EpisodeProgress,
8+
type SeasonProgress,
9+
type ShowProgress,
10+
ShowProgressType,
11+
type ShowProgressTypes,
12+
} from '~/models/list-scroll.model';
13+
14+
import { useI18n } from '~/utils';
15+
16+
const props = defineProps({
17+
progress: {
18+
type: Object as PropType<ShowProgress | SeasonProgress | EpisodeProgress>,
19+
required: false,
20+
},
21+
type: {
22+
type: String as PropType<ShowProgressTypes>,
23+
required: false,
24+
default: ShowProgressType.Watched,
25+
},
26+
disabled: {
27+
type: Boolean,
28+
required: false,
29+
},
30+
});
31+
32+
const { progress, type, disabled } = toRefs(props);
33+
34+
const percentage = computed(() => {
35+
if (!progress?.value) return;
36+
if (!('percentage' in progress.value)) return;
37+
return Math.round(progress.value?.percentage);
38+
});
39+
40+
const remaining = computed(() => {
41+
if (!progress?.value) return;
42+
if (!('aired' in progress.value)) return;
43+
return progress.value.aired - progress.value.completed;
44+
});
45+
46+
const isCount = computed(() => {
47+
if (!progress?.value) return false;
48+
if (!('aired' in progress.value)) return false;
49+
if (typeof progress.value.completed !== 'number') return false;
50+
return typeof progress.value?.aired === 'number';
51+
});
52+
53+
const i18n = useI18n('common', 'tooltip', 'progress');
54+
</script>
55+
56+
<template>
57+
<NTooltip class="progress-tooltip" :disabled="disabled || !progress" :delay="100">
58+
<NFlex v-if="progress && isCount" vertical align="flex-end">
59+
<div v-if="'aired' in progress">
60+
<span class="metric">{{ progress?.completed ?? '-' }}</span>
61+
<span> / </span>
62+
<span class="metric">{{ progress?.aired ?? '-' }}</span>
63+
<span>&nbsp;</span>
64+
<span>{{ i18n('episodes') }}</span>
65+
</div>
66+
<div v-if="percentage">
67+
<span class="metric">{{ percentage }}</span>
68+
<span>%</span>
69+
<span>&nbsp;</span>
70+
<span>{{ i18n(type) }}</span>
71+
</div>
72+
<div v-if="remaining">
73+
<span class="metric">{{ remaining }}</span>
74+
<span>&nbsp;</span>
75+
<span>{{ i18n('remaining') }}</span>
76+
</div>
77+
</NFlex>
78+
<template #trigger>
79+
<slot />
80+
</template>
81+
</NTooltip>
82+
</template>
83+
84+
<style lang="scss" scoped>
85+
.progress-tooltip {
86+
font-size: 0.8rem;
87+
88+
.metric {
89+
color: var(--vt-c-white);
90+
font-weight: bolder;
91+
font-variant-numeric: tabular-nums;
92+
}
93+
}
94+
</style>

‎src/components/container/ContainerComponent.ce.vue

+11-20
Original file line numberDiff line numberDiff line change
@@ -140,28 +140,18 @@ const root = ref<HTMLElement>();
140140
.n-dropdown-menu,
141141
.n-date-panel,
142142
.n-virtual-list {
143-
@include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
144-
145-
@media (prefers-color-scheme: dark) {
146-
@include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
147-
}
148-
149-
@media (prefers-color-scheme: light) {
150-
@include mixin.hover-background(var(--bg-color-80), var(--bg-color-90));
151-
}
143+
@include mixin.hover-background(
144+
$from: var(--custom-bg-color, var(--bg-color-80)),
145+
$to: var(--custom-bg-color-hover, var(--bg-color-90))
146+
);
152147
}
153148
154149
.n-popselect-menu,
155150
.n-select-menu {
156-
@include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
157-
158-
@media (prefers-color-scheme: dark) {
159-
@include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
160-
}
161-
162-
@media (prefers-color-scheme: light) {
163-
@include mixin.hover-background(var(--bg-color-20), var(--bg-color-80));
164-
}
151+
@include mixin.hover-background(
152+
$from: var(--custom-bg-color, var(--bg-color-20)),
153+
$to: var(--custom-bg-color-hover, var(--bg-color-80))
154+
);
165155
}
166156
167157
.n-drawer-mask {
@@ -177,11 +167,12 @@ const root = ref<HTMLElement>();
177167
.n-notification-container .n-notification,
178168
.n-tooltip.n-tooltip,
179169
.n-popover-arrow.n-popover-arrow.n-popover-arrow {
180-
background: var(--bg-color-60);
170+
background: var(--custom-bg-color, var(--bg-color-60));
181171
backdrop-filter: blur(var(--bg-blur));
182172
183173
&:hover {
184-
background: var(--bg-black-90);
174+
background: var(--custom-bg-color-hover, var(--bg-black-90));
175+
backdrop-filter: var(--custom-bg-blur-hover, var(--bg-blur-hover));
185176
}
186177
187178
@media (prefers-color-scheme: light) {

‎src/components/icons/IconChecked.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-linecap="round"
7+
stroke-linejoin="round"
8+
stroke-width="2"
9+
>
10+
<path
11+
stroke-dasharray="60"
12+
stroke-dashoffset="60"
13+
d="M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
14+
>
15+
<animate
16+
fill="freeze"
17+
attributeName="stroke-dashoffset"
18+
dur="0.5s"
19+
values="60;0"
20+
/>
21+
</path>
22+
<path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
23+
<animate
24+
fill="freeze"
25+
attributeName="stroke-dashoffset"
26+
begin="0.6s"
27+
dur="0.2s"
28+
values="14;0"
29+
/>
30+
</path>
31+
</g>
32+
</svg>
33+
</template>

‎src/components/icons/IconGridEmpty.vue

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="currentColor"
6+
stroke-dasharray="10"
7+
stroke-dashoffset="10"
8+
stroke-linecap="round"
9+
>
10+
<g>
11+
<circle cx="5" cy="5" r="1.5" />
12+
<circle cx="12" cy="5" r="1.5" />
13+
<circle cx="19" cy="5" r="1.5" />
14+
<animate
15+
fill="freeze"
16+
attributeName="stroke-dashoffset"
17+
dur="0.2s"
18+
values="10;0"
19+
/>
20+
</g>
21+
<g>
22+
<circle cx="5" cy="12" r="1.5" />
23+
<circle cx="12" cy="12" r="1.5" />
24+
<circle cx="19" cy="12" r="1.5" />
25+
<animate
26+
fill="freeze"
27+
attributeName="stroke-dashoffset"
28+
begin="0.3s"
29+
dur="0.2s"
30+
values="10;0"
31+
/>
32+
</g>
33+
<g>
34+
<circle cx="5" cy="19" r="1.5" />
35+
<circle cx="12" cy="19" r="1.5" />
36+
<circle cx="19" cy="19" r="1.5" />
37+
<animate
38+
fill="freeze"
39+
attributeName="stroke-dashoffset"
40+
begin="0.6s"
41+
dur="0.2s"
42+
values="10;0"
43+
/>
44+
</g>
45+
</g>
46+
</svg>
47+
</template>

0 commit comments

Comments
 (0)