Skip to content

Commit 693e025

Browse files
arashsheydaarashsheyda
authored
fix(rolldown): improve responsiveness for smaller screens (#222)
1 parent 46019a6 commit 693e025

File tree

8 files changed

+161
-167
lines changed

8 files changed

+161
-167
lines changed

‎packages/rolldown/src/app/components/data/SearchPanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function unselectToggle() {
7171
</script>
7272

7373
<template>
74-
<div flex="col gap-2" max-w-90vw min-w-30vw border="~ base rounded-xl" bg-glass>
74+
<div flex="col gap-2" min-w-30vw border="~ base rounded-xl" bg-glass>
7575
<slot name="search">
7676
<div v-if="modelValue.search !== false" class="flex items-center">
7777
<input

‎packages/rolldown/src/app/components/modules/Folder.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const moduleTree = computed(() => {
5757
</script>
5858

5959
<template>
60-
<div of-auto max-h-screen pt-45 relative>
60+
<div of-auto max-h-screen relative>
6161
<div flex="~ col gap-2" p4>
6262
<DisplayTreeNode
6363
v-if="Object.keys(moduleTree.workspace.children).length"

‎packages/rolldown/src/app/pages/session/[session]/assets.vue‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,10 @@ watch(() => settings.value.assetViewType, () => {
136136

137137
<template>
138138
<VisualLoading v-if="isLoading" />
139-
<div v-else relative max-h-screen of-hidden>
140-
<div absolute left-4 top-4 z-panel-nav>
139+
<div v-else relative>
140+
<div sticky left-4 right-4 top-4 z-panel-nav p-4>
141141
<DataSearchPanel v-model="searchValue" :rules="[]">
142-
<div flex="~ gap-2 items-center" p2 border="t base">
142+
<div flex="~ wrap gap-2 items-center" p2 border="t base">
143143
<span op50 pl2 text-sm>View as</span>
144144
<button
145145
v-for="viewType of assetViewTypes"
@@ -154,47 +154,45 @@ watch(() => settings.value.assetViewType, () => {
154154
</div>
155155
</DataSearchPanel>
156156
</div>
157-
<div of-auto h-screen flex="~ col gap-2" pt32>
158-
<template v-if="settings.assetViewType === 'list'">
159-
<AssetsList v-if="searched?.length" :assets="searched" :session="session" />
160-
<div
161-
absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
162-
>
163-
<span op50>{{ searched.length }} of {{ assets?.length || 0 }}</span>
164-
</div>
165-
</template>
166-
<template v-else-if="settings.assetViewType === 'folder'">
167-
<AssetsFolder v-if="searched?.length" :assets="searched" :session="session" />
168-
</template>
169-
<template v-else-if="settings.assetViewType === 'treemap'">
170-
<ChartTreemap
171-
v-if="graph" :graph="graph"
172-
:selected="nodeSelected"
173-
@select="x => selectNode(x)"
174-
>
175-
<template #default="{ selected, options, onSelect }">
176-
<ChartNavBreadcrumb
177-
border="b base" py2 min-h-10
178-
:selected="selected"
179-
:options="options"
180-
@select="onSelect"
181-
/>
182-
</template>
183-
</ChartTreemap>
184-
</template>
185-
<template v-else-if="settings.assetViewType === 'sunburst'">
186-
<AssetsSunburst
187-
v-if="graph" :graph="graph"
188-
:selected="nodeSelected"
189-
@select="x => selectNode(x)"
190-
/>
191-
</template>
192-
<template v-else-if="settings.assetViewType === 'flamegraph'">
193-
<AssetsFlamegraph
194-
v-if="graph" :graph="graph"
195-
/>
196-
</template>
197-
</div>
157+
<template v-if="settings.assetViewType === 'list'">
158+
<AssetsList v-if="searched?.length" :assets="searched" :session="session" />
159+
<div
160+
fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
161+
>
162+
<span op50>{{ searched.length }} of {{ assets?.length || 0 }}</span>
163+
</div>
164+
</template>
165+
<template v-else-if="settings.assetViewType === 'folder'">
166+
<AssetsFolder v-if="searched?.length" :assets="searched" :session="session" />
167+
</template>
168+
<template v-else-if="settings.assetViewType === 'treemap'">
169+
<ChartTreemap
170+
v-if="graph" :graph="graph"
171+
:selected="nodeSelected"
172+
@select="x => selectNode(x)"
173+
>
174+
<template #default="{ selected, options, onSelect }">
175+
<ChartNavBreadcrumb
176+
border="b base" py2 min-h-10
177+
:selected="selected"
178+
:options="options"
179+
@select="onSelect"
180+
/>
181+
</template>
182+
</ChartTreemap>
183+
</template>
184+
<template v-else-if="settings.assetViewType === 'sunburst'">
185+
<AssetsSunburst
186+
v-if="graph" :graph="graph"
187+
:selected="nodeSelected"
188+
@select="x => selectNode(x)"
189+
/>
190+
</template>
191+
<template v-else-if="settings.assetViewType === 'flamegraph'">
192+
<AssetsFlamegraph
193+
v-if="graph" :graph="graph"
194+
/>
195+
</template>
198196
<DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
199197
<div
200198
v-if="nodeHover?.meta"

‎packages/rolldown/src/app/pages/session/[session]/chunks.vue‎

Lines changed: 74 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,8 @@ watch(() => settings.value.chunkViewType, () => {
204204

205205
<template>
206206
<VisualLoading v-if="isLoading" />
207-
<div v-else relative max-h-screen of-hidden>
208-
<div absolute left-4 top-4 z-panel-nav>
207+
<div v-else relative :class="{ 'max-h-screen of-hidden': settings.chunkViewType === 'graph' }">
208+
<div sticky left-4 right-4 top-4 z-panel-nav p-4>
209209
<DataSearchPanel v-model="searchValue" :rules="[]">
210210
<template v-if="pathSelectorVisible" #search>
211211
<DataPathSelector :session="session" :data="searched" import-id-key="chunk_id" :search-keys="['name']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -224,7 +224,10 @@ watch(() => settings.value.chunkViewType, () => {
224224
</DataPathSelector>
225225
</template>
226226
<template #search-end>
227-
<div v-if="settings.chunkViewType === 'graph'" h10 mr2 flex="~ items-center">
227+
<div
228+
v-if="settings.chunkViewType === 'graph'"
229+
h10 mr2 flex="~ items-center"
230+
>
228231
<button
229232
w-8 h-8 rounded-full flex items-center justify-center
230233
hover="bg-active op100" op50 title="Graph Path Selector" @click="togglePathSelector(true)"
@@ -233,7 +236,7 @@ watch(() => settings.value.chunkViewType, () => {
233236
</button>
234237
</div>
235238
</template>
236-
<div flex="~ gap-2 items-center" p2 border="t base">
239+
<div flex="~ wrap gap-2 items-center" p2 border="t base">
237240
<span op50 pl2 text-sm>View as</span>
238241
<button
239242
v-for="viewType of chunkViewTypes"
@@ -248,69 +251,76 @@ watch(() => settings.value.chunkViewType, () => {
248251
</div>
249252
</DataSearchPanel>
250253
</div>
251-
<template v-if="settings.chunkViewType === 'list'">
252-
<div class="px5 pt32 of-auto h-screen" flex="~ col gap-4">
253-
<ChunksFlatList
254-
:session="session"
255-
:chunks="searched"
256-
/>
257-
</div>
258-
</template>
259-
<template v-if="settings.chunkViewType === 'detailed-list'">
260-
<div class="px5 pt32 of-auto h-screen" flex="~ col gap-4">
261-
<template v-for="chunk of searched" :key="chunk.id">
262-
<DataChunkDetails
263-
border="~ base rounded-lg"
264-
p3
265-
:chunk="chunk"
266-
:chunks="searched!"
267-
:session="session"
254+
<div
255+
v-if="settings.chunkViewType === 'list'"
256+
class="px5 pt-4" flex="~ col gap-4"
257+
>
258+
<ChunksFlatList
259+
:session="session"
260+
:chunks="searched"
261+
/>
262+
</div>
263+
<div
264+
v-if="settings.chunkViewType === 'detailed-list'"
265+
class="px5 pt-4" flex="~ col gap-4"
266+
>
267+
<DataChunkDetails
268+
v-for="chunk of searched"
269+
:key="chunk.id"
270+
border="~ base rounded-lg"
271+
p3
272+
:chunk="chunk"
273+
:chunks="searched!"
274+
:session="session"
275+
/>
276+
</div>
277+
<ChunksGraph
278+
v-else-if="settings.chunkViewType === 'graph'"
279+
class="pt32"
280+
:session="session"
281+
:chunks="normalizedGraph"
282+
:entry-id="pathNodes.start"
283+
/>
284+
<div
285+
v-else-if="settings.chunkViewType === 'treemap'"
286+
flex="~ col gap-2"
287+
>
288+
<ChartTreemap
289+
v-if="graph"
290+
:graph="graph"
291+
:selected="nodeSelected"
292+
@select="x => selectNode(x)"
293+
>
294+
<template #default="{ selected, options, onSelect }">
295+
<ChartNavBreadcrumb
296+
border="b base" py2 min-h-10
297+
:selected="selected"
298+
:options="options"
299+
@select="onSelect"
268300
/>
269301
</template>
270-
</div>
271-
</template>
272-
<template v-else-if="settings.chunkViewType === 'graph'">
273-
<ChunksGraph
274-
class="pt32"
275-
:session="session"
276-
:chunks="normalizedGraph"
277-
:entry-id="pathNodes.start"
302+
</ChartTreemap>
303+
</div>
304+
<div
305+
v-else-if="settings.chunkViewType === 'sunburst'"
306+
flex="~ col gap-2" pt-4
307+
>
308+
<ChunksSunburst
309+
v-if="graph"
310+
:graph="graph"
311+
:selected="nodeSelected"
312+
@select="x => selectNode(x)"
278313
/>
279-
</template>
280-
<template v-else-if="settings.chunkViewType === 'treemap'">
281-
<div of-auto h-screen flex="~ col gap-2" pt32>
282-
<ChartTreemap
283-
v-if="graph" :graph="graph"
284-
:selected="nodeSelected"
285-
@select="x => selectNode(x)"
286-
>
287-
<template #default="{ selected, options, onSelect }">
288-
<ChartNavBreadcrumb
289-
border="b base" py2 min-h-10
290-
:selected="selected"
291-
:options="options"
292-
@select="onSelect"
293-
/>
294-
</template>
295-
</ChartTreemap>
296-
</div>
297-
</template>
298-
<template v-else-if="settings.chunkViewType === 'sunburst'">
299-
<div of-auto h-screen flex="~ col gap-2" pt32>
300-
<ChunksSunburst
301-
v-if="graph" :graph="graph"
302-
:selected="nodeSelected"
303-
@select="x => selectNode(x)"
304-
/>
305-
</div>
306-
</template>
307-
<template v-else-if="settings.chunkViewType === 'flamegraph'">
308-
<div of-auto h-screen flex="~ col gap-2" pt32>
309-
<ChunksFlamegraph
310-
v-if="graph" :graph="graph"
311-
/>
312-
</div>
313-
</template>
314+
</div>
315+
<div
316+
v-else-if="settings.chunkViewType === 'flamegraph'"
317+
flex="~ col gap-2" pt-4
318+
>
319+
<ChunksFlamegraph
320+
v-if="graph" :graph="graph"
321+
/>
322+
</div>
323+
314324
<DisplayGraphHoverView :hover-x="mouse.x" :hover-y="mouse.y">
315325
<div
316326
v-if="nodeHover?.meta"

‎packages/rolldown/src/app/pages/session/[session]/graph/index.vue‎

Lines changed: 29 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,8 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
134134
</script>
135135

136136
<template>
137-
<div relative max-h-screen of-hidden>
138-
<div absolute left-4 top-4 z-panel-nav>
137+
<div relative :class="{ 'max-h-screen of-hidden': settings.moduleGraphViewType === 'graph' }">
138+
<div sticky left-4 right-4 top-4 z-panel-nav p-4>
139139
<DataSearchPanel v-model="searchValue" :rules="searchFilterTypes">
140140
<template v-if="pathSelectorVisible" #search>
141141
<DataPathSelector :session="session" :data="searched" import-id-key="module_id" :search-keys="['id']" @select="selectPathNodes" @close="togglePathSelector(false)">
@@ -170,7 +170,7 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
170170
</button>
171171
</div>
172172
</template>
173-
<div flex="~ gap-2 items-center" p2 border="t base">
173+
<div flex="~ wrap gap-2 items-center" p2 border="t base">
174174
<span op50 pl2 text-sm>View as</span>
175175
<button
176176
v-for="viewType of moduleViewTypes"
@@ -185,43 +185,31 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
185185
</div>
186186
</DataSearchPanel>
187187
</div>
188-
<template v-if="settings.moduleGraphViewType === 'list'">
189-
<div of-auto h-screen pt-45>
190-
<ModulesFlatList
191-
:session="session"
192-
:modules="searched"
193-
/>
194-
<div
195-
absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
196-
>
197-
<span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
198-
</div>
199-
</div>
200-
</template>
201-
<template v-else-if="settings.moduleGraphViewType === 'detailed-list'">
202-
<div of-auto h-screen pt-45>
203-
<ModulesDetailedList
204-
:session="session"
205-
:modules="searched"
206-
/>
207-
<div
208-
absolute bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
209-
>
210-
<span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
211-
</div>
212-
</div>
213-
</template>
214-
<template v-else-if="settings.moduleGraphViewType === 'graph'">
215-
<ModulesGraph
216-
:session="session"
217-
:modules="normalizedGraph"
218-
/>
219-
</template>
220-
<template v-else>
221-
<ModulesFolder
222-
:session="session"
223-
:modules="searched"
224-
/>
225-
</template>
188+
<ModulesFlatList
189+
v-if="settings.moduleGraphViewType === 'list'"
190+
:session="session"
191+
:modules="searched"
192+
/>
193+
<ModulesDetailedList
194+
v-else-if="settings.moduleGraphViewType === 'detailed-list'"
195+
:session="session"
196+
:modules="searched"
197+
/>
198+
<ModulesGraph
199+
v-else-if="settings.moduleGraphViewType === 'graph'"
200+
:session="session"
201+
:modules="normalizedGraph"
202+
/>
203+
<ModulesFolder
204+
v-else
205+
:session="session"
206+
:modules="searched"
207+
/>
208+
<div
209+
v-if="settings.moduleGraphViewType === 'list' || settings.moduleGraphViewType === 'detailed-list'"
210+
fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
211+
>
212+
<span op50>{{ searched.length }} of {{ session.modulesList.length }}</span>
213+
</div>
226214
</div>
227215
</template>

‎packages/rolldown/src/app/pages/session/[session]/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const dataTable = computed<DataTableItem[]>(() => {
8585
<div>
8686
{{ item.title }}
8787
</div>
88-
<div font-mono>
88+
<div font-mono truncate>
8989
<time v-if="(item.value instanceof Date)" :datetime="item.value.toISOString()">{{ item.value.toLocaleString() }}</time>
9090
<DisplayBadge v-else-if="item.type === 'badge'" :text="String(item.value)" py1 />
9191
<DisplayDuration v-else-if="item.type === 'duration'" :duration="+item.value" />
@@ -108,7 +108,7 @@ const dataTable = computed<DataTableItem[]>(() => {
108108
<div op50 mt-4>
109109
Views
110110
</div>
111-
<div flex="~ gap-2">
111+
<div flex="~ wrap gap-2">
112112
<template v-for="item of sideNavItems" :key="item.to">
113113
<NuxtLink v-if="item.category === 'session'" btn-action :to="{ path: item.to }" flex="~ col" min-w-40 p4>
114114
<div :class="item.icon" text-2xl />

0 commit comments

Comments
 (0)