WIP: #8891 enhance LeftMenu with expandable item groups and improved pinning functionality #1693

Draft
jsegarra wants to merge 1 commits from 8891-leftMenu_expansion into dev
1 changed files with 72 additions and 26 deletions

View File

@ -225,37 +225,83 @@ const searchModule = () => {
(item.children && !filteredPinnedModules.has(item.name))
"
>
<QList v-if="item.children.length > 1">
<QExpansionItem
v-ripple
clickable
:content-inset-level="0.5"
@after-show="handleItemExpansion(item.name)"
>
<template #header>
<QItemSection avatar>
<QIcon :name="item.icon" />
</QItemSection>
<QItemSection>
<QItemLabel>{{ t(item.title) }}</QItemLabel>
</QItemSection>
<QBtn
v-if="item.isPinned === true"
@click="togglePinned(item, $event)"
icon="remove_circle"
size="xs"
flat
round
>
<QTooltip>
{{
t('components.leftMenu.removeFromPinned')
}}
</QTooltip>
</QBtn>
<QBtn
v-if="item.isPinned === false"
@click="togglePinned(item, $event)"
icon="push_pin"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.addToPinned') }}
</QTooltip>
</QBtn>
</template>
<LeftMenuItemGroup
:ref="(el) => (expansionItemElements[item.name] = el)"
:item="item"
/>
</QExpansionItem>
</QList>
<LeftMenuItem
v-else
:item="item"
group="modules"
:class="search && index === 0 ? 'searched' : ''"
>
<template #side>
<QBtn
v-if="item.isPinned === true"
@click="togglePinned(item, $event)"
icon="remove_circle"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.removeFromPinned') }}
</QTooltip>
</QBtn>
<QBtn
v-if="item.isPinned === false"
@click="togglePinned(item, $event)"
icon="push_pin"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.addToPinned') }}
</QTooltip>
</QBtn>
</template>
<QBtn
v-if="item.isPinned === true"
@click="togglePinned(item, $event)"
icon="remove_circle"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.removeFromPinned') }}
</QTooltip>
</QBtn>
<QBtn
v-if="item.isPinned === false"
@click="togglePinned(item, $event)"
icon="push_pin"
size="xs"
flat
round
>
<QTooltip>
{{ t('components.leftMenu.addToPinned') }}
</QTooltip>
</QBtn>
</LeftMenuItem>
</template>
</template>