Skip to content

Commit 15730c9

Browse files
dvcoldvcol
committed
feat(checkin): create now watching bar component
1 parent 69e5986 commit 15730c9

19 files changed

+840
-78
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
},
5353
"dependencies": {
5454
"@dvcol/base-http-client": "^1.10.0",
55-
"@dvcol/common-utils": "^1.3.0",
55+
"@dvcol/common-utils": "^1.4.0",
5656
"@dvcol/tmdb-http-client": "^1.2.3",
5757
"@dvcol/trakt-http-client": "^1.4.0",
5858
"@dvcol/tvdb-http-client": "^1.1.3",

‎pnpm-lock.yaml

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/AppComponent.vue

+87-62
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
<script setup lang="ts">
2-
import { NButton, NDrawer, NDrawerContent, NFlex, NIcon } from 'naive-ui';
2+
import {
3+
NButton,
4+
NDialogProvider,
5+
NDrawer,
6+
NDrawerContent,
7+
NFlex,
8+
NIcon,
9+
} from 'naive-ui';
310
import { ref, Transition, watch } from 'vue';
411
import { RouterView, useRouter } from 'vue-router';
512
6-
import { NavbarComponent } from '~/components/common';
713
import GridBackground from '~/components/common/background/GridBackground.vue';
814
import DebugProvider from '~/components/common/debug/DebugProvider.vue';
915
import PageLoading from '~/components/common/loading/PageLoading.vue';
16+
import NavbarComponent from '~/components/common/navbar/NavbarComponent.vue';
1017
import IconChevronLeft from '~/components/icons/IconChevronLeft.vue';
1118
import IconClose from '~/components/icons/IconClose.vue';
19+
import CheckinComponent from '~/components/views/checkin/CheckinComponent.vue';
1220
import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
1321
1422
const { isAuthenticated } = useAuthSettingsStoreRefs();
1523
const { currentRoute, push, back } = useRouter();
1624
1725
const panel = ref(false);
1826
const base = ref();
27+
const footer = ref(false);
28+
29+
const appRef = ref();
30+
const mainRef = ref();
31+
const footerRef = ref();
1932
2033
watch(
2134
currentRoute,
@@ -27,9 +40,6 @@ watch(
2740
immediate: true,
2841
},
2942
);
30-
31-
const asideRef = ref();
32-
3343
const onAfterLeave = () => {
3444
if (!base.value) return;
3545
push({ name: base.value });
@@ -46,68 +56,75 @@ const onBack = () => {
4656
</script>
4757

4858
<template>
49-
<header :class="{ open: panel }">
50-
<RouterView v-slot="{ Component }" name="navbar">
51-
<NavbarComponent v-if="isAuthenticated" :disabled="panel">
52-
<template v-if="Component" #drawer="{ parentElement }">
59+
<div ref="appRef">
60+
<NDialogProvider :to="appRef">
61+
<header :class="{ open: panel }">
62+
<RouterView v-slot="{ Component }" name="navbar">
63+
<NavbarComponent v-if="isAuthenticated" :disabled="panel">
64+
<template v-if="Component" #drawer="{ parentElement }">
65+
<Transition name="scale" mode="out-in">
66+
<KeepAlive>
67+
<component :is="Component" :parent-element="parentElement" />
68+
</KeepAlive>
69+
</Transition>
70+
</template>
71+
</NavbarComponent>
72+
</RouterView>
73+
</header>
74+
<RouterView v-slot="{ Component }">
75+
<main ref="mainRef">
76+
<GridBackground v-if="!Component" :size="20" />
5377
<Transition name="scale" mode="out-in">
5478
<KeepAlive>
55-
<component :is="Component" :parent-element="parentElement" />
79+
<component :is="Component ?? PageLoading" :panel="panel" :footer="footer" />
5680
</KeepAlive>
5781
</Transition>
58-
</template>
59-
</NavbarComponent>
60-
</RouterView>
61-
</header>
62-
<RouterView v-slot="{ Component }">
63-
<main ref="asideRef" style="position: relative">
64-
<GridBackground v-if="!Component" :size="20" />
65-
<Transition name="scale" mode="out-in">
66-
<KeepAlive>
67-
<component :is="Component ?? PageLoading" :panel="panel" />
68-
</KeepAlive>
69-
</Transition>
70-
</main>
71-
<aside>
72-
<RouterView v-slot="{ Component: PanelComponent }">
73-
<NDrawer
74-
v-model:show="panel"
75-
:to="asideRef"
76-
width="100%"
77-
class="panel"
78-
close-on-esc
79-
:on-after-leave="onAfterLeave"
80-
auto-focus
81-
>
82-
<NDrawerContent :native-scrollbar="false">
83-
<!-- Header -->
84-
<NFlex justify="space-between" class="panel-header">
85-
<NButton circle quaternary @click="onBack">
86-
<template #icon>
87-
<NIcon>
88-
<IconChevronLeft />
89-
</NIcon>
90-
</template>
91-
</NButton>
92-
<NButton circle quaternary @click="onClose">
93-
<template #icon>
94-
<NIcon>
95-
<IconClose />
96-
</NIcon>
97-
</template>
98-
</NButton>
99-
</NFlex>
100-
101-
<!-- Content -->
102-
<div class="panel-content">
103-
<component :is="PanelComponent" />
104-
</div>
105-
</NDrawerContent>
106-
</NDrawer>
82+
</main>
83+
<aside>
84+
<RouterView v-slot="{ Component: PanelComponent }">
85+
<NDrawer
86+
v-model:show="panel"
87+
:to="mainRef"
88+
width="100%"
89+
class="panel"
90+
close-on-esc
91+
:on-after-leave="onAfterLeave"
92+
auto-focus
93+
>
94+
<NDrawerContent :native-scrollbar="false">
95+
<!-- Header -->
96+
<NFlex justify="space-between" class="panel-header">
97+
<NButton circle quaternary @click="onBack">
98+
<template #icon>
99+
<NIcon>
100+
<IconChevronLeft />
101+
</NIcon>
102+
</template>
103+
</NButton>
104+
<NButton circle quaternary @click="onClose">
105+
<template #icon>
106+
<NIcon>
107+
<IconClose />
108+
</NIcon>
109+
</template>
110+
</NButton>
111+
</NFlex>
112+
113+
<!-- Content -->
114+
<div class="panel-content">
115+
<component :is="PanelComponent" />
116+
</div>
117+
</NDrawerContent>
118+
</NDrawer>
119+
</RouterView>
120+
</aside>
121+
<footer ref="footerRef" @mouseenter="footer = true" @mouseleave="footer = false">
122+
<CheckinComponent :parent-element="footerRef" />
123+
</footer>
124+
<DebugProvider />
107125
</RouterView>
108-
</aside>
109-
<DebugProvider />
110-
</RouterView>
126+
</NDialogProvider>
127+
</div>
111128
</template>
112129

113130
<style lang="scss" scoped>
@@ -140,6 +157,7 @@ header {
140157
}
141158
142159
main {
160+
position: relative;
143161
display: flex;
144162
flex-direction: column;
145163
align-items: center;
@@ -148,6 +166,13 @@ main {
148166
margin-top: layout.$header-navbar-height;
149167
}
150168
169+
footer {
170+
position: fixed;
171+
bottom: 0;
172+
z-index: layers.$layer-ui;
173+
width: 100%;
174+
}
175+
151176
.panel {
152177
position: relative;
153178
max-height: calc(100% - #{layout.$header-navbar-height});

‎src/components/common/buttons/FloatingButton.vue

+14-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { NFlex, NFloatButton, NIcon } from 'naive-ui';
44
import type { Component, PropType, Transition } from 'vue';
55
66
import IconChevronUp from '~/components/icons/IconChevronUp.vue';
7+
import { useWatchingStoreRefs } from '~/stores/data/watching.store';
78
89
defineProps({
910
show: {
@@ -21,14 +22,22 @@ defineProps({
2122
},
2223
});
2324
25+
const { isWatching } = useWatchingStoreRefs();
26+
2427
const emit = defineEmits<{
2528
(e: 'onClick'): void;
2629
}>();
2730
</script>
2831

2932
<template>
3033
<Transition name="scale">
31-
<NFloatButton v-if="show" class="button" width="fit-content" @click="emit('onClick')">
34+
<NFloatButton
35+
v-if="show"
36+
class="button"
37+
:class="{ watching: isWatching }"
38+
width="fit-content"
39+
@click="emit('onClick')"
40+
>
3241
<NFlex size="small" align="center" justify="space-evenly">
3342
<NIcon :component="icon" />
3443
<span
@@ -58,6 +67,10 @@ const emit = defineEmits<{
5867
flex-direction: row;
5968
padding: 0.5rem;
6069
70+
&.watching {
71+
bottom: 2.5rem;
72+
}
73+
6174
.text {
6275
display: inline-flex;
6376
width: 0;

‎src/components/views/calendar/CalendarComponent.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@ import { useCalendar, useCenterButton } from '~/utils/calendar.utils';
1111
import { useI18n } from '~/utils/i18n.utils';
1212
import { watchUserChange } from '~/utils/store.utils';
1313
14+
defineProps({
15+
footer: {
16+
type: Boolean,
17+
required: false,
18+
},
19+
});
20+
1421
const i18n = useI18n('calendar');
1522
1623
const { loading, center, filteredCalendar } = useCalendarStoreRefs();
@@ -62,7 +69,7 @@ const { onItemClick } = usePanelItem();
6269
</template>
6370
</ListScroll>
6471
<FloatingButton
65-
:show="scrolledOut"
72+
:show="!footer && scrolledOut"
6673
:width="centerIsToday ? '2.5rem' : '3.5rem'"
6774
:icon="recenterIcon"
6875
@on-click="onClick"

0 commit comments

Comments
 (0)