Skip to content

Commit 6555d61

Browse files
authored
fix(ui): load panel sizes from storage on initial load (#7265)
1 parent 816a5c5 commit 6555d61

File tree

4 files changed

+4
-25
lines changed

4 files changed

+4
-25
lines changed

packages/ui/client/components/BrowserIframe.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const marginLeft = computed(() => {
5959
<div h="full" flex="~ col">
6060
<div p="3" h-10 flex="~ gap-2" items-center bg-header border="b base">
6161
<IconButton
62-
v-show="panels.navigation <= 2"
62+
v-show="panels.navigation <= 15"
6363
v-tooltip.bottom="'Show Navigation Panel'"
6464
title="Show Navigation Panel"
6565
rotate-180

packages/ui/client/components/explorer/Explorer.vue

+3-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { RecycleScroller } from 'vue-virtual-scroller'
88
import { config } from '~/composables/client'
99
import { useSearch } from '~/composables/explorer/search'
1010
11-
import { panels } from '~/composables/navigation'
1211
import { activeFileId } from '~/composables/params'
1312
1413
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
@@ -46,12 +45,10 @@ const {
4645
4746
const filterClass = ref<string>('grid-cols-2')
4847
const filterHeaderClass = ref<string>('grid-col-span-2')
49-
const testExplorerRef = ref<HTMLInputElement | undefined>()
5048
51-
const { width: windowWidth } = useWindowSize()
52-
53-
watch(() => windowWidth.value * (panels.navigation / 100), (width) => {
54-
if (width < 420) {
49+
const testExplorerRef = ref<HTMLElement | undefined>()
50+
useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
51+
if (contentRect.width < 420) {
5552
filterClass.value = 'grid-cols-2'
5653
filterHeaderClass.value = 'grid-col-span-2'
5754
}

packages/ui/client/composables/navigation.ts

-6
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,10 @@ export const coverageEnabled = computed(() => {
1919
export const mainSizes = useLocalStorage<[left: number, right: number]>(
2020
'vitest-ui_splitpanes-mainSizes',
2121
[33, 67],
22-
{
23-
initOnMounted: true,
24-
},
2522
)
2623
export const detailSizes = useLocalStorage<[left: number, right: number]>(
2724
'vitest-ui_splitpanes-detailSizes',
2825
[33, 67],
29-
{
30-
initOnMounted: true,
31-
},
3226
)
3327

3428
// live sizes of panels in percentage

packages/ui/client/pages/index.vue

-12
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,6 @@ const resizingMain = useDebounceFn((event: { size: number }[]) => {
4040
preventBrowserEvents()
4141
}, 0)
4242
43-
function resizeMain() {
44-
const width = window.innerWidth
45-
const panelWidth = Math.min(width / 3, 300)
46-
mainSizes.value[0] = (100 * panelWidth) / width
47-
mainSizes.value[1] = 100 - mainSizes.value[0]
48-
recordMainResize([
49-
{ size: mainSizes.value[0] },
50-
{ size: mainSizes.value[1] },
51-
])
52-
}
53-
5443
function recordMainResize(event: { size: number }[]) {
5544
panels.navigation = event[0].size
5645
panels.details.size = event[1].size
@@ -83,7 +72,6 @@ function allowBrowserEvents() {
8372
class="pt-4px"
8473
@resized="onMainResized"
8574
@resize="resizingMain"
86-
@ready="resizeMain"
8775
>
8876
<Pane :size="mainSizes[0]">
8977
<Navigation />

0 commit comments

Comments
 (0)