gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: add tabbing for channels list, members list, and messages
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-06-02 11:40:57 +02:00
parent c7e7f33240
commit 76952922bf
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
3 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Channel.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel"> <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
<NuxtLink class="channel-list-link" :href="props.href"> <NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
# {{ props.name }} # {{ props.name }}
</NuxtLink> </NuxtLink>
</div> </div>
<div v-else class="channel-list-link-container rounded-corners"> <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
<NuxtLink class="channel-list-link" :href="props.href"> <NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
# {{ props.name }} # {{ props.name }}
</NuxtLink> </NuxtLink>
</div> </div>

4
components/Message.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }"> <div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0">
<div class="left-column"> <div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username"> <img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
<Icon v-else name="lucide:user" class="message-author-avatar" /> <Icon v-else name="lucide:user" class="message-author-avatar" />
@ -16,7 +16,7 @@
<div class="message-text" v-html="sanitized"></div> <div class="message-text" v-html="sanitized"></div>
</div> </div>
</div> </div>
<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message"> <div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0">
<div class="left-column"> <div class="left-column">
<div> <div>
<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()"> <span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">

2
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -26,7 +26,7 @@
<MessageArea :channel-url="channelUrlPath" /> <MessageArea :channel-url="channelUrlPath" />
<div id="members-container"> <div id="members-container">
<div id="members-list"> <div id="members-list">
<div class="member-item" v-for="member of members"> <div class="member-item" v-for="member of members" tabindex="0">
<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" /> <img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
<Icon v-else class="member-avatar" name="lucide:user" /> <Icon v-else class="member-avatar" name="lucide:user" />
<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span> <span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>