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

chore: sort components into subfolders
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-13 20:34:59 +02:00
parent 2299d3a17a
commit 86ddae62b2
No known key found for this signature in database
12 changed files with 13 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/Guild/GuildDropdown.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<div class="dropdown-body">
<div v-for="option of props.options" class="dropdown-option">
<button class="dropdown-button" :data-value="option.value" @click.prevent="option.callback" tabindex="0">{{ option.name }}</button>
</div>
</div>
</template>
<script lang="ts" setup>
import type { DropdownOption } from '~/types/interfaces';
const props = defineProps<{ options: DropdownOption[] }>();
</script>
<style scoped>
.dropdown-body {
position: absolute;
z-index: 100;
left: 4dvw;
bottom: 4dvh;
background-color: var(--chat-background-color);
width: 8rem;
display: flex;
flex-direction: column;
}
.dropdown-option {
border: .09rem solid rgb(70, 70, 70);
}
.dropdown-button {
padding-top: .5dvh;
padding-bottom: .5dvh;
color: var(--text-color);
background-color: transparent;
width: 100%;
border: none;
}
.dropdown-button:hover {
background-color: var(--padding-color);
}
</style>

59
components/Guild/GuildOptionsMenu.vue Normal file
View file

@ -0,0 +1,59 @@
<template>
<div id="guild-options-menu" class="destroy-on-click">
<div v-for="setting of settings" class="guild-option" tabindex="0">
<button class="guild-option-button" @click="setting.action" tabindex="0">{{ setting.name }}</button>
</div>
</div>
</template>
<script lang="ts" setup>
import { render } from 'vue';
import InviteModal from '../Modals/InviteModal.vue';
const settings = [
{ name: "Invite", icon: "lucide:letter", action: openInviteModal }
]
function openInviteModal() {
const div = document.createElement("div");
const guildId = useRoute().params.serverId as string;
console.log("guild id:", guildId);
const inviteModal = h(InviteModal, { guildId });
document.body.appendChild(div);
render(inviteModal, div);
}
</script>
<style>
#guild-options-menu {
display: flex;
flex-direction: column;
position: relative;
background-color: var(--chat-background-color);
top: 8dvh;
z-index: 10;
width: 100%;
position: absolute;
}
.guild-option {
display: flex;
justify-content: center;
align-items: center;
height: 2em;
box-sizing: border-box;
}
.guild-option:hover {
background-color: var(--padding-color);
}
.guild-option-button {
border: 0;
background-color: transparent;
color: var(--main-text-color);
height: 100%;
width: 100%;
}
</style>