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

feat: add dropdown for guild settings and invite

Browse source
This commit is contained in:
SauceyRed 2025-06-07 06:25:51 +02:00
parent 010472c83d
commit 64c6276153
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 90 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components/GuildOptionsMenu.vue Normal file
View file

@ -0,0 +1,58 @@
<template>
<div id="guild-options-container">
<div v-for="setting of settings" class="guild-option" tabindex="0">
<button class="guild-option-button" @click="setting.action">{{ setting.name }}</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { InvitePopup } from '#components';
const showInviteModal = ref(false);
const settings = [
{ name: "Server Settings", icon: "lucide:cog" },
{ name: "Invite", icon: "lucide:letter", action: openInviteModal }
]
function openInviteModal() {
//showInviteModal.value = !showInviteModal.value;
//const invitePopup = createApp(InvitePopup);
//invitePopup
}
</script>
<style>
#guild-options-container {
display: flex;
flex-direction: column;
position: relative;
background-color: rgb(20, 20, 20);
top: 8dvh;
z-index: 10;
width: 100%;
position: absolute;
}
.guild-option {
display: flex;
justify-content: center;
align-items: center;
height: 5dvh;
}
.guild-option:hover {
border: var(--outline-border);
}
.guild-option-button {
border: 0;
background-color: transparent;
color: var(--main-text-color);
}
</style>

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

@ -1,21 +1,13 @@
<template> <template>
<NuxtLayout name="client"> <NuxtLayout name="client">
<div id="middle-left-column" class="main-grid-row"> <div id="middle-left-column" class="main-grid-row">
<div id="server-title"> <div id="server-name-container">
<h3> <span id="server-name">{{ server?.name }}</span>
{{ server?.name }} <button id="server-settings-button" @click="toggleGuildSettings">
<span> <Icon id="server-settings-icon" name="lucide:chevron-down" />
<button @click="showGuildSettings"> </button>
<Icon name="lucide:settings" /> <GuildOptionsMenu v-if="showGuildSettings" />
</button> <InvitePopup v-if="showInvitePopup" />
</span>
<span>
<button @click="toggleInvitePopup">
<Icon name="lucide:share-2" />
</button>
</span>
<InvitePopup v-if="showInvitePopup" />
</h3>
</div> </div>
<div id="channels-list"> <div id="channels-list">
<Channel v-for="channel of channels" :name="channel.name" <Channel v-for="channel of channels" :name="channel.name"
@ -49,6 +41,7 @@ const channels = ref<ChannelResponse[] | undefined>();
const channel = ref<ChannelResponse | undefined>(); const channel = ref<ChannelResponse | undefined>();
const showInvitePopup = ref(false); const showInvitePopup = ref(false);
const showGuildSettings = ref(false);
import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces"; import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
@ -72,7 +65,10 @@ onMounted(async () => {
console.log("channelid: set loading to false"); console.log("channelid: set loading to false");
}); });
function showGuildSettings() { } function toggleGuildSettings(e: Event) {
e.preventDefault();
showGuildSettings.value = !showGuildSettings.value;
}
function toggleInvitePopup(e: Event) { function toggleInvitePopup(e: Event) {
e.preventDefault(); e.preventDefault();
@ -132,4 +128,24 @@ function toggleInvitePopup(e: Event) {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#server-name-container {
padding-top: 3dvh;
padding-bottom: 3dvh;
display: flex;
justify-content: center;
position: relative;
}
#server-name {
font-size: 1.5em;
}
#server-settings-button {
background-color: transparent;
font-size: 1em;
color: white;
border: none;
padding: 0%;
}
</style> </style>