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

feat: adjust width, min-width, and max-width of channels and members list sidebars and implement saving of widths

Browse source
This commit is contained in:
SauceyRed 2025-07-18 03:38:35 +02:00
parent 808cc980a7
commit 80df3dd13d
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
3 changed files with 44 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/UserInterface/ResizableSidebar.vue
View file

@ -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 });
});
}