From c28b4c2668898e513c7eb8252c6cda3efa71a1de Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Mon, 12 Feb 2024 09:44:32 +0100 Subject: [PATCH] feat(ui): save splitpanes size to local storage (#5166) --- packages/ui/client/pages/index.vue | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/ui/client/pages/index.vue b/packages/ui/client/pages/index.vue index f92e9d63dc5b..341fa639591a 100644 --- a/packages/ui/client/pages/index.vue +++ b/packages/ui/client/pages/index.vue @@ -4,28 +4,32 @@ import { Pane, Splitpanes } from 'splitpanes' import { coverageUrl, coverageVisible, initializeNavigation } from '../composables/navigation' const dashboardVisible = initializeNavigation() -const mainSizes = reactive([33, 67]) -const detailSizes = reactive([33, 67]) +const mainSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-mainSizes', [33, 67], { + initOnMounted: true, +}) +const detailSizes = useLocalStorage<[left: number, right: number]>('vitest-ui_splitpanes-detailSizes', [33, 67], { + initOnMounted: true, +}) const onMainResized = useDebounceFn((event: { size: number }[]) => { event.forEach((e, i) => { - mainSizes[i] = e.size + mainSizes.value[i] = e.size }) }, 0) const onModuleResized = useDebounceFn((event: { size: number }[]) => { event.forEach((e, i) => { - detailSizes[i] = e.size + detailSizes.value[i] = e.size }) }, 0) function resizeMain() { const width = window.innerWidth const panelWidth = Math.min(width / 3, 300) - mainSizes[0] = (100 * panelWidth) / width - mainSizes[1] = 100 - mainSizes[0] + mainSizes.value[0] = (100 * panelWidth) / width + mainSizes.value[1] = 100 - mainSizes.value[0] // initialize suite width with the same navigation panel width in pixels (adjust its % inside detail's split pane) - detailSizes[0] = (100 * panelWidth) / (width - panelWidth) - detailSizes[1] = 100 - detailSizes[0] + detailSizes.value[0] = (100 * panelWidth) / (width - panelWidth) + detailSizes.value[1] = 100 - detailSizes.value[0] }