DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added notification bell, WIP.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-05-20 06:29:10 +02:00
parent dc5affb4cf
commit 342ba6191e
7 changed files with 141 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
components/header/header.vue
View File

@@ -78,69 +78,92 @@
</button>
</form>
<VDropdown
<div
v-if="user"
:triggers="['click']"
:prevent-overflow="true"
class="userpanel"
:class="{ searching: searchFocused }"
>
<div
class="userpanel"
:class="{ searching: searchFocused }"
<VDropdown
:triggers="['click']"
:prevent-overflow="true"
>
<Icon
icon="bell2"
class="notifs-bell"
:class="{ unread: notifications.some((notif) => !notif.isSeen) }"
/>
<template #popper>
<div class="menu">
<ul class="notifs nolist">
<li
v-for="notif in notifications"
:key="notif.id"
class="notif"
>{{ notif.scene.title }}</li>
</ul>
</div>
</template>
</VDropdown>
<VDropdown
:triggers="['click']"
:prevent-overflow="true"
>
<img
:src="user.avatar"
class="avatar"
>
</div>
<template #popper>
<div class="menu">
<a
:href="`/user/${user.username}`"
class="menu-header ellipsis"
>{{ user.username }}</a>
<template #popper>
<div class="menu">
<a
:href="`/user/${user.username}`"
class="menu-header ellipsis"
>{{ user.username }}</a>
<ul class="menu-list nolist">
<li class="menu-item">
<a
:href="`/user/${user.username}`"
class="menu-button nolink"
<ul class="menu-list nolist">
<li class="menu-item">
<a
:href="`/user/${user.username}`"
class="menu-button nolink"
>
<Icon icon="user7" />
Profile
</a>
</li>
<li
v-if="user.primaryStash"
class="menu-item"
>
<Icon icon="user7" />
Profile
</a>
</li>
<a
:href="`/stash/${user.username}/${user.primaryStash.slug}`"
class="menu-button nolink favorites"
>
<Icon icon="heart7" />
Favorites
</a>
</li>
<li
v-if="user.primaryStash"
class="menu-item"
>
<a
:href="`/stash/${user.username}/${user.primaryStash.slug}`"
class="menu-button nolink favorites"
<li
v-close-popper
class="menu-item menu-button"
@click="showSettings = true"
>
<Icon icon="heart7" />
Favorites
</a>
</li>
<Icon icon="equalizer" />
Settings
</li>
<li
v-close-popper
class="menu-item menu-button"
@click="showSettings = true"
>
<Icon icon="equalizer" />
Settings
</li>
<li
class="menu-button menu-item logout"
@click="logout"
><Icon icon="exit2" />Log out</li>
</ul>
</div>
</template>
</VDropdown>
<li
class="menu-button menu-item logout"
@click="logout"
><Icon icon="exit2" />Log out</li>
</ul>
</div>
</template>
</VDropdown>
</div>
<div
v-else-if="allowLogin"
@@ -181,11 +204,14 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
const pageContext = inject('pageContext');
const user = pageContext.user;
const notifications = pageContext.notifications;
const query = ref(pageContext.urlParsed.search.q || '');
const allowLogin = pageContext.env.allowLogin;
const searchFocused = ref(false);
const showSettings = ref(false);
console.log(notifications);
const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
@@ -316,7 +342,7 @@ function blurSearch(event) {
height: 100%;
display: flex;
align-items: center;
padding: 0 1rem 0 1.5rem;
padding: 0 1rem 0 0;
font-size: 0;
cursor: pointer;
@@ -332,6 +358,31 @@ function blurSearch(event) {
object-fit: cover;
}
.notifs-bell {
padding: 0 1.25rem;
height: 100%;
fill: var(--shadow);
&:hover,
&.unread {
cursor: pointer;
fill: var(--primary);
}
}
.notifs {
overflow: auto;
}
.notif {
display: flex;
padding: .5rem 1rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
}
}
.login {
display: flex;
align-items: center;