Skip to content

Commit 682b402

Browse files
antonreshetovantonreshetov
authored
fix: tag panel resize (#695)
* fix(sidebar/tree): restore panel sizing contract * fix(sidebar/library): normalize vertical resize behavior
1 parent 27f7e49 commit 682b402

File tree

2 files changed

+163
-144
lines changed

2 files changed

+163
-144
lines changed

‎src/renderer/components/sidebar/folders/Tree.vue‎

Lines changed: 92 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -315,96 +315,98 @@ async function onRemoveCustomIcon() {
315315
</script>
316316

317317
<template>
318-
<ContextMenu.ContextMenu>
319-
<ContextMenu.ContextMenuTrigger as-child>
320-
<UiTree
321-
:model-value="treeData"
322-
:selected-ids="selectedIds"
323-
:editable-id="editableId"
324-
:focused-id="focusedId"
325-
:highlighted-ids="highlightedIds"
326-
@click-node="onClickNode"
327-
@dblclick-node="onDblclickNode"
328-
@toggle-node="onToggleNode"
329-
@drag-node="onDragNode"
330-
@external-drop="onExternalDrop"
331-
@context-menu="onContextMenu"
332-
@update-label="onUpdateLabel"
333-
@cancel-edit="onCancelEdit"
334-
@update:selected-ids="selectedIds = $event"
335-
@update:editable-id="editableId = $event"
336-
@update:focused-id="focusedId = $event"
337-
@update:highlighted-ids="highlightedIds = $event"
338-
>
339-
<template #icon="{ node }">
340-
<div class="mr-1.5 flex flex-shrink-0 items-center">
341-
<UiFolderIcon
342-
v-if="getFolderByIdFromTree(folders, Number(node.id))?.icon"
343-
:name="getFolderByIdFromTree(folders, Number(node.id))!.icon!"
344-
/>
345-
<Folder
346-
v-else
347-
class="h-4 w-4"
348-
/>
349-
</div>
350-
</template>
351-
</UiTree>
352-
</ContextMenu.ContextMenuTrigger>
353-
<ContextMenu.ContextMenuContent>
354-
<template v-if="isContextMultiSelection">
355-
<ContextMenu.ContextMenuItem @click="onDeleteFolder">
356-
{{ i18n.t("action.delete.common") }}
357-
</ContextMenu.ContextMenuItem>
358-
</template>
359-
<template v-else>
360-
<ContextMenu.ContextMenuItem
361-
@click="createFolderAndSelect(contextNode?.id)"
362-
>
363-
{{ i18n.t("action.new.folder") }}
364-
</ContextMenu.ContextMenuItem>
365-
<ContextMenu.ContextMenuSeparator />
366-
<ContextMenu.ContextMenuItem @click="onRenameFolder">
367-
{{ i18n.t("action.rename") }}
368-
</ContextMenu.ContextMenuItem>
369-
<ContextMenu.ContextMenuItem @click="onDeleteFolder">
370-
{{ i18n.t("action.delete.common") }}
371-
</ContextMenu.ContextMenuItem>
372-
<ContextMenu.ContextMenuSeparator />
373-
<ContextMenu.ContextMenuItem @click="onSetCustomIcon">
374-
{{ i18n.t("action.setCustomIcon") }}
375-
</ContextMenu.ContextMenuItem>
376-
<ContextMenu.ContextMenuItem
377-
v-if="contextNode?.icon"
378-
@click="onRemoveCustomIcon"
318+
<div class="h-full min-h-0">
319+
<ContextMenu.ContextMenu>
320+
<ContextMenu.ContextMenuTrigger as-child>
321+
<UiTree
322+
:model-value="treeData"
323+
:selected-ids="selectedIds"
324+
:editable-id="editableId"
325+
:focused-id="focusedId"
326+
:highlighted-ids="highlightedIds"
327+
@click-node="onClickNode"
328+
@dblclick-node="onDblclickNode"
329+
@toggle-node="onToggleNode"
330+
@drag-node="onDragNode"
331+
@external-drop="onExternalDrop"
332+
@context-menu="onContextMenu"
333+
@update-label="onUpdateLabel"
334+
@cancel-edit="onCancelEdit"
335+
@update:selected-ids="selectedIds = $event"
336+
@update:editable-id="editableId = $event"
337+
@update:focused-id="focusedId = $event"
338+
@update:highlighted-ids="highlightedIds = $event"
379339
>
380-
{{ i18n.t("action.removeCustomIcon") }}
381-
</ContextMenu.ContextMenuItem>
382-
<ContextMenu.ContextMenuSeparator />
383-
<ContextMenu.ContextMenuSub>
384-
<ContextMenu.ContextMenuSubTrigger>
385-
{{ i18n.t("action.defaultLanguage") }}
386-
</ContextMenu.ContextMenuSubTrigger>
387-
<ContextMenu.ContextMenuSubContent>
388-
<div class="scrollbar max-h-[250px] min-h-0 overflow-y-auto">
389-
<ContextMenu.ContextMenuCheckboxItem
390-
v-for="language in languages"
391-
:key="language.value"
392-
:ref="
393-
(el) =>
394-
scrollToSelectedLanguage(
395-
el,
396-
contextNodeDefaultLanguage === language.value,
397-
)
398-
"
399-
:checked="contextNodeDefaultLanguage === language.value"
400-
@click="onSelectLanguage(language.value)"
401-
>
402-
{{ language.name }}
403-
</ContextMenu.ContextMenuCheckboxItem>
340+
<template #icon="{ node }">
341+
<div class="mr-1.5 flex flex-shrink-0 items-center">
342+
<UiFolderIcon
343+
v-if="getFolderByIdFromTree(folders, Number(node.id))?.icon"
344+
:name="getFolderByIdFromTree(folders, Number(node.id))!.icon!"
345+
/>
346+
<Folder
347+
v-else
348+
class="h-4 w-4"
349+
/>
404350
</div>
405-
</ContextMenu.ContextMenuSubContent>
406-
</ContextMenu.ContextMenuSub>
407-
</template>
408-
</ContextMenu.ContextMenuContent>
409-
</ContextMenu.ContextMenu>
351+
</template>
352+
</UiTree>
353+
</ContextMenu.ContextMenuTrigger>
354+
<ContextMenu.ContextMenuContent>
355+
<template v-if="isContextMultiSelection">
356+
<ContextMenu.ContextMenuItem @click="onDeleteFolder">
357+
{{ i18n.t("action.delete.common") }}
358+
</ContextMenu.ContextMenuItem>
359+
</template>
360+
<template v-else>
361+
<ContextMenu.ContextMenuItem
362+
@click="createFolderAndSelect(contextNode?.id)"
363+
>
364+
{{ i18n.t("action.new.folder") }}
365+
</ContextMenu.ContextMenuItem>
366+
<ContextMenu.ContextMenuSeparator />
367+
<ContextMenu.ContextMenuItem @click="onRenameFolder">
368+
{{ i18n.t("action.rename") }}
369+
</ContextMenu.ContextMenuItem>
370+
<ContextMenu.ContextMenuItem @click="onDeleteFolder">
371+
{{ i18n.t("action.delete.common") }}
372+
</ContextMenu.ContextMenuItem>
373+
<ContextMenu.ContextMenuSeparator />
374+
<ContextMenu.ContextMenuItem @click="onSetCustomIcon">
375+
{{ i18n.t("action.setCustomIcon") }}
376+
</ContextMenu.ContextMenuItem>
377+
<ContextMenu.ContextMenuItem
378+
v-if="contextNode?.icon"
379+
@click="onRemoveCustomIcon"
380+
>
381+
{{ i18n.t("action.removeCustomIcon") }}
382+
</ContextMenu.ContextMenuItem>
383+
<ContextMenu.ContextMenuSeparator />
384+
<ContextMenu.ContextMenuSub>
385+
<ContextMenu.ContextMenuSubTrigger>
386+
{{ i18n.t("action.defaultLanguage") }}
387+
</ContextMenu.ContextMenuSubTrigger>
388+
<ContextMenu.ContextMenuSubContent>
389+
<div class="scrollbar max-h-[250px] min-h-0 overflow-y-auto">
390+
<ContextMenu.ContextMenuCheckboxItem
391+
v-for="language in languages"
392+
:key="language.value"
393+
:ref="
394+
(el) =>
395+
scrollToSelectedLanguage(
396+
el,
397+
contextNodeDefaultLanguage === language.value,
398+
)
399+
"
400+
:checked="contextNodeDefaultLanguage === language.value"
401+
@click="onSelectLanguage(language.value)"
402+
>
403+
{{ language.name }}
404+
</ContextMenu.ContextMenuCheckboxItem>
405+
</div>
406+
</ContextMenu.ContextMenuSubContent>
407+
</ContextMenu.ContextMenuSub>
408+
</template>
409+
</ContextMenu.ContextMenuContent>
410+
</ContextMenu.ContextMenu>
411+
</div>
410412
</template>

‎src/renderer/components/sidebar/library/Library.vue‎

Lines changed: 71 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -220,11 +220,7 @@ function onResizeTagList(val: number[]) {
220220
</script>
221221

222222
<template>
223-
<Resizable.ResizablePanelGroup
224-
id="1"
225-
direction="vertical"
226-
@layout="onResizeTagList"
227-
>
223+
<div class="flex h-full min-h-0 flex-col">
228224
<div
229225
class="shrink-0 overflow-hidden"
230226
data-sidebar-library
@@ -248,54 +244,75 @@ function onResizeTagList(val: number[]) {
248244
</ContextMenu.ContextMenuContent>
249245
</ContextMenu.ContextMenu>
250246
</div>
251-
<div class="mt-1 flex items-center justify-between py-1 pl-1 select-none">
252-
<UiText
253-
as="div"
254-
variant="caption"
255-
weight="bold"
256-
uppercase
257-
>
258-
{{ i18n.t("sidebar.folders") }}
259-
</UiText>
260-
<UiActionButton
261-
:tooltip="i18n.t('action.new.folder')"
262-
@click="createFolderAndSelect()"
263-
>
264-
<Plus class="h-4 w-4" />
265-
</UiActionButton>
266-
</div>
267-
<Resizable.ResizablePanel as-child>
268-
<Tree
269-
v-if="folders?.length"
270-
v-model="folders"
271-
class="px-0.5 pb-1"
272-
@click-node="onFolderClick"
273-
@toggle-node="onFolderToggle"
274-
@drag-node="onFolderDrag"
275-
/>
276-
277-
<UiEmptyPlaceholder
278-
v-else
279-
:text="i18n.t('placeholder.emptyFoldersList')"
280-
/>
281-
</Resizable.ResizablePanel>
282-
<Resizable.ResizableHandle />
283-
<div class="flex items-center justify-between py-1 pl-1 select-none">
284-
<UiText
285-
as="div"
286-
variant="caption"
287-
weight="bold"
288-
uppercase
289-
>
290-
{{ i18n.t("sidebar.tags") }}
291-
</UiText>
292-
</div>
293-
<Resizable.ResizablePanel
294-
as-child
295-
:min-size="MIN_TAGS_PANEL_SIZE"
296-
:default-size="tagsListHeight"
247+
248+
<Resizable.ResizablePanelGroup
249+
id="1"
250+
direction="vertical"
251+
class="min-h-0 flex-1"
252+
@layout="onResizeTagList"
297253
>
298-
<SidebarTags class="px-1 pb-1" />
299-
</Resizable.ResizablePanel>
300-
</Resizable.ResizablePanelGroup>
254+
<Resizable.ResizablePanel>
255+
<div class="flex h-full min-h-0 flex-col">
256+
<div
257+
class="mt-1 flex items-center justify-between py-1 pl-1 select-none"
258+
>
259+
<UiText
260+
as="div"
261+
variant="caption"
262+
weight="bold"
263+
uppercase
264+
>
265+
{{ i18n.t("sidebar.folders") }}
266+
</UiText>
267+
<UiActionButton
268+
:tooltip="i18n.t('action.new.folder')"
269+
@click="createFolderAndSelect()"
270+
>
271+
<Plus class="h-4 w-4" />
272+
</UiActionButton>
273+
</div>
274+
275+
<div class="min-h-0 flex-1">
276+
<Tree
277+
v-if="folders?.length"
278+
v-model="folders"
279+
class="h-full px-0.5 pb-1"
280+
@click-node="onFolderClick"
281+
@toggle-node="onFolderToggle"
282+
@drag-node="onFolderDrag"
283+
/>
284+
285+
<UiEmptyPlaceholder
286+
v-else
287+
:text="i18n.t('placeholder.emptyFoldersList')"
288+
/>
289+
</div>
290+
</div>
291+
</Resizable.ResizablePanel>
292+
293+
<Resizable.ResizableHandle />
294+
295+
<Resizable.ResizablePanel
296+
:min-size="MIN_TAGS_PANEL_SIZE"
297+
:default-size="tagsListHeight"
298+
>
299+
<div class="flex h-full min-h-0 flex-col">
300+
<div class="flex items-center justify-between py-1 pl-1 select-none">
301+
<UiText
302+
as="div"
303+
variant="caption"
304+
weight="bold"
305+
uppercase
306+
>
307+
{{ i18n.t("sidebar.tags") }}
308+
</UiText>
309+
</div>
310+
311+
<div class="min-h-0 flex-1">
312+
<SidebarTags class="h-full px-1 pb-1" />
313+
</div>
314+
</div>
315+
</Resizable.ResizablePanel>
316+
</Resizable.ResizablePanelGroup>
317+
</div>
301318
</template>

0 commit comments

Comments
 (0)