resizable-sidebars #49
3 changed files with 44 additions and 13 deletions
|
@ -25,6 +25,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
|
|||
color: inherit;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.channel-list-link-container {
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<script lang="ts" setup>
|
||||
import type { ContextMenuItem } from '~/types/interfaces';
|
||||
|
||||
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[] }>();
|
||||
const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
|
||||
|
||||
const borderStyling = ".1rem solid var(--padding-color)";
|
||||
|
||||
|
@ -51,11 +51,13 @@ onMounted(() => {
|
|||
let delta = 0;
|
||||
if (props.borderSides == 'right') {
|
||||
delta = resizableSidebar.value.getBoundingClientRect().left;
|
||||
console.log("delta:", delta);
|
||||
resizableSidebar.value.style.width = `${pointer.clientX - delta}px`;
|
||||
} else {
|
||||
delta = resizableSidebar.value.getBoundingClientRect().right;
|
||||
console.log("delta:", delta);
|
||||
resizableSidebar.value.style.width = `${delta - pointer.clientX}px`;
|
||||
}
|
||||
console.log("delta:", delta);
|
||||
resizableSidebar.value.style.width = `${Math.abs(pointer.clientX - delta)}px`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -66,6 +68,9 @@ onMounted(() => {
|
|||
document.removeEventListener("pointermove", handleMove);
|
||||
console.log("removed pointermove event listener");
|
||||
document.body.style.cursor = "";
|
||||
if (resizableSidebar.value && props.localStorageName) {
|
||||
localStorage.setItem(props.localStorageName, resizableSidebar.value.style.width);
|
||||
}
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
|
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<ResizableSidebar width="14rem" min-width="10rem" max-width="20rem" border-sides="right">
|
||||
<ResizableSidebar
|
||||
:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
|
||||
min-width="5rem" max-width="30rem"
|
||||
border-sides="right" :local-storage-name="middleLeftColumnName">
|
||||
<div id="middle-left-column" class="main-grid-row">
|
||||
<div id="server-name-container">
|
||||
<span id="server-name">{{ server?.name }}</span>
|
||||
<span id="server-name" :title="server?.name">{{ server?.name }}</span>
|
||||
<button id="server-settings-button" @click="toggleGuildSettings">
|
||||
<Icon id="server-settings-icon" name="lucide:chevron-down" />
|
||||
</button>
|
||||
|
@ -17,7 +20,10 @@
|
|||
</div>
|
||||
</ResizableSidebar>
|
||||
<MessageArea :channel-url="channelUrlPath" />
|
||||
<ResizableSidebar width="15rem" min-width="13rem" max-width="30rem" border-sides="left">
|
||||
<ResizableSidebar
|
||||
:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
|
||||
min-width="5.5rem" max-width="30rem"
|
||||
border-sides="left" :local-storage-name="membersContainername">
|
||||
<div id="members-container">
|
||||
<div id="members-list">
|
||||
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
|
||||
|
@ -49,23 +55,26 @@ const members = ref<GuildMemberResponse[]>();
|
|||
const showInvitePopup = ref(false);
|
||||
const showGuildSettings = ref(false);
|
||||
|
||||
const middleLeftColumnWidth = ref<number>();
|
||||
const middleLeftColumnName = "channelsListWidth";
|
||||
|
||||
const membersContainerWidth = ref<number>();
|
||||
const membersContainername = "membersListWidth"
|
||||
|
||||
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
|
||||
//console.log("channelid: servers:", servers);
|
||||
|
||||
const { fetchMembers } = useApi();
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("mounting");
|
||||
const guildUrl = `guilds/${route.params.serverId}`;
|
||||
server.value = await fetchWithApi(guildUrl);
|
||||
await setArrayVariables();
|
||||
});
|
||||
|
||||
onActivated(async () => {
|
||||
console.log("activating");
|
||||
loadSidebarWidths();
|
||||
console.log("loaded sidebar widths");
|
||||
const guildUrl = `guilds/${route.params.serverId}`;
|
||||
server.value = await fetchWithApi(guildUrl);
|
||||
console.log("fetched guild");
|
||||
await setArrayVariables();
|
||||
console.log("set array variables");
|
||||
});
|
||||
|
||||
async function setArrayVariables() {
|
||||
|
@ -77,6 +86,18 @@ async function setArrayVariables() {
|
|||
console.log("channel:", channel.value);
|
||||
}
|
||||
|
||||
function loadSidebarWidths() {
|
||||
const channelsListWidth = localStorage.getItem(middleLeftColumnName);
|
||||
if (channelsListWidth) {
|
||||
middleLeftColumnWidth.value = parseInt(channelsListWidth) || undefined;
|
||||
}
|
||||
|
||||
const membersListWidth = localStorage.getItem(membersContainername);
|
||||
if (membersListWidth) {
|
||||
membersContainerWidth.value = parseInt(membersListWidth) || undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleGuildSettings(e: Event) {
|
||||
e.preventDefault();
|
||||
showGuildSettings.value = !showGuildSettings.value;
|
||||
|
@ -122,6 +143,7 @@ function handleMemberClick(member: GuildMemberResponse) {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
|
@ -145,6 +167,8 @@ function handleMemberClick(member: GuildMemberResponse) {
|
|||
|
||||
#server-name {
|
||||
font-size: 1.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#server-settings-button {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue