resizable-sidebars #49
2 changed files with 21 additions and 19 deletions
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div ref="resizableSidebar" class="resizable-sidebar"
|
||||
:style="{
|
||||
'width': props.width,
|
||||
'width': storedWidth ? `${storedWidth}px` : props.width,
|
||||
'min-width': props.minWidth,
|
||||
'max-width': props.maxWidth,
|
||||
'border': props.borderSides == 'all' ? borderStyling : undefined,
|
||||
|
@ -29,12 +29,15 @@ const borderStyling = ".1rem solid var(--padding-color)";
|
|||
|
||||
const resizableSidebar = ref<HTMLDivElement>();
|
||||
const widthResizer = ref<HTMLDivElement>();
|
||||
const storedWidth = ref<number>();
|
||||
|
||||
const menuItems: ContextMenuItem[] = [
|
||||
{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
loadStoredWidth();
|
||||
|
||||
if (resizableSidebar.value && widthResizer.value) {
|
||||
widthResizer.value.addEventListener("pointerdown", (e) => {
|
||||
e.preventDefault();
|
||||
|
@ -76,6 +79,21 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
console.log("[res] activated");
|
||||
loadStoredWidth();
|
||||
});
|
||||
|
||||
function loadStoredWidth() {
|
||||
if (props.localStorageName) {
|
||||
const storedWidthValue = localStorage.getItem(props.localStorageName);
|
||||
if (storedWidthValue) {
|
||||
storedWidth.value = parseInt(storedWidthValue) || undefined;
|
||||
console.log("[res] loaded stored width");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<NuxtLayout name="client">
|
||||
<ResizableSidebar
|
||||
:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
|
||||
min-width="5rem" max-width="30rem"
|
||||
width="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">
|
||||
|
@ -21,8 +20,7 @@
|
|||
</ResizableSidebar>
|
||||
<MessageArea :channel-url="channelUrlPath" />
|
||||
<ResizableSidebar
|
||||
:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
|
||||
min-width="5.5rem" max-width="30rem"
|
||||
width="14rem" min-width="5.5rem" max-width="30rem"
|
||||
border-sides="left" :local-storage-name="membersContainername">
|
||||
<div id="members-container">
|
||||
<div id="members-list">
|
||||
|
@ -77,8 +75,6 @@ onMounted(async () => {
|
|||
|
||||
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");
|
||||
|
@ -95,18 +91,6 @@ 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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue