mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-12 13:27:31 -08:00
fix(editor): Extend menu item and use it as a recursive component (#6618)
This commit is contained in:
parent
a95862b6e2
commit
d617f63ae9
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="['n8n-menu-item', $style.item]">
|
||||
<el-submenu
|
||||
v-if="item.children && item.children.length > 0"
|
||||
v-if="item.children?.length"
|
||||
:id="item.id"
|
||||
:class="{
|
||||
[$style.submenu]: true,
|
||||
|
@ -21,25 +21,16 @@
|
|||
/>
|
||||
<span :class="$style.label">{{ item.label }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="child in availableChildren"
|
||||
:key="child.id"
|
||||
:id="child.id"
|
||||
:class="{
|
||||
[$style.menuItem]: true,
|
||||
[$style.disableActiveStyle]: !isItemActive(child),
|
||||
[$style.active]: isItemActive(child),
|
||||
}"
|
||||
data-test-id="menu-item"
|
||||
:index="child.id"
|
||||
@click="onItemClick(child, $event)"
|
||||
>
|
||||
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
|
||||
<span :class="$style.label">{{ child.label }}</span>
|
||||
<span v-if="child.secondaryIcon" :class="$style.secondaryIcon">
|
||||
<n8n-icon :icon="child.secondaryIcon.name" :size="child.secondaryIcon.size || 'small'" />
|
||||
</span>
|
||||
</el-menu-item>
|
||||
<n8n-menu-item
|
||||
v-for="item in availableChildren"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:compact="compact"
|
||||
:tooltipDelay="tooltipDelay"
|
||||
:popperClass="popperClass"
|
||||
:mode="mode"
|
||||
:activeTab="activeTab"
|
||||
/>
|
||||
</el-submenu>
|
||||
<n8n-tooltip
|
||||
v-else
|
||||
|
@ -68,9 +59,16 @@
|
|||
:size="item.customIconSize || 'large'"
|
||||
/>
|
||||
<span :class="$style.label">{{ item.label }}</span>
|
||||
<span v-if="item.secondaryIcon" :class="$style.secondaryIcon">
|
||||
<n8n-tooltip
|
||||
v-if="item.secondaryIcon"
|
||||
:class="$style.secondaryIcon"
|
||||
:placement="item.tooltip?.placement || 'right'"
|
||||
:content="item.tooltip?.content"
|
||||
:disabled="compact || !item.tooltip?.content || item.tooltip?.bindTo !== 'secondaryIcon'"
|
||||
:open-delay="tooltipDelay"
|
||||
>
|
||||
<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
|
||||
</span>
|
||||
</n8n-tooltip>
|
||||
</el-menu-item>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import type { Tooltip } from 'element-ui';
|
||||
|
||||
export type IMenuItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
|
@ -14,6 +16,7 @@ export type IMenuItem = {
|
|||
// For more specific matching, we can use paths
|
||||
activateOnRoutePaths?: string[];
|
||||
children?: IMenuItem[];
|
||||
tooltip?: Tooltip & { bindTo?: 'menuItem' | 'secondaryIcon' };
|
||||
};
|
||||
|
||||
export type ILinkMenuItemProperties = {
|
||||
|
|
|
@ -193,6 +193,22 @@ export default defineComponent({
|
|||
const items: IMenuItem[] = [];
|
||||
const injectedItems = this.uiStore.sidebarMenuItems;
|
||||
|
||||
const workflows: IMenuItem = {
|
||||
id: 'workflows',
|
||||
icon: 'network-wired',
|
||||
label: this.$locale.baseText('mainSidebar.workflows'),
|
||||
position: 'top',
|
||||
activateOnRouteNames: [VIEWS.WORKFLOWS],
|
||||
};
|
||||
|
||||
if (this.sourceControlStore.preferences.branchReadOnly) {
|
||||
workflows.secondaryIcon = { name: 'lock' };
|
||||
workflows.tooltip = {
|
||||
content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
|
||||
bindTo: 'secondaryIcon',
|
||||
};
|
||||
}
|
||||
|
||||
if (injectedItems && injectedItems.length > 0) {
|
||||
for (const item of injectedItems) {
|
||||
items.push({
|
||||
|
@ -209,16 +225,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const regularItems: IMenuItem[] = [
|
||||
{
|
||||
id: 'workflows',
|
||||
icon: 'network-wired',
|
||||
secondaryIcon: this.sourceControlStore.preferences.branchReadOnly
|
||||
? { name: 'lock' }
|
||||
: undefined,
|
||||
label: this.$locale.baseText('mainSidebar.workflows'),
|
||||
position: 'top',
|
||||
activateOnRouteNames: [VIEWS.WORKFLOWS],
|
||||
},
|
||||
workflows,
|
||||
{
|
||||
id: 'templates',
|
||||
icon: 'box-open',
|
||||
|
|
|
@ -619,6 +619,7 @@
|
|||
"mainSidebar.showMessage.stopExecution.title": "Execution stopped",
|
||||
"mainSidebar.templates": "Templates",
|
||||
"mainSidebar.workflows": "Workflows",
|
||||
"mainSidebar.workflows.readOnlyEnv.tooltip": "Protected mode is active, so no workflows changes are allowed. Change this in Settings, under 'Source Control'",
|
||||
"mainSidebar.executions": "All executions",
|
||||
"menuActions.duplicate": "Duplicate",
|
||||
"menuActions.download": "Download",
|
||||
|
|
Loading…
Reference in a new issue