mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
feat(editor): updated n8n-menu component (#4290)
* refactor(editor): N8N-4540 Main navigation layout rework (#4060) * ✨ Implemented new editor layout using css grid * ✨ Reworking main navigation layout, migrating some styling to css modules * ✨ Reworking main sidebar layout and responsiveness * 💄 Minor type update * ✨ Updated editor grid layout so empty cells are collapsed (`fit-content`), fixed updates menu items styling * ✨ Implemented new user area look & feel in main sidebar * 💄 Adjusting sidebar bottom padding when user area is not shown * 💄 CSS cleanup/refactor + minor vue refactoring * ✨ Fixing overscoll issue in chrome and scrolling behaviour of the content view * 👌 Addressing review feedback * ✨ Added collapsed and expanded versions of n8n logo * ✨ Updating infinite scrolling in templates view to work with the new layout * 💄 Updating main sidebar expanded width and templates view left margin * 💄 Updating main content height * 💄 Adding global styles for scrollable views with centered content, minor updates to user area * ✨ Updating zoomToFit logic, lasso select box position and new nodes positioning * ✨ Fixing new node drop position now that mouse detection has been adjusted * 👌 Updating templates view scroll to top logic and responsive padding, aligning menu items titles * 💄 Moving template layout style from global css class to component level * ✨ Moved 'Workflows' menu to node view header. Added new dropdown component for user area and the new WF menu * 💄 Updating disabled states in new WF menu * 💄 Initial stab at new sidebar styling * ✨ Finished main navigation restyling * ✨ Updating `zoomToFit` and centering logic * ✨ Adding updates menu item to settings sidebar * 💄 Adding updates item to the settings sidebar and final touches on main sidebar style * 💄 Removing old code & refactoring * 💄 Minor CSS tweaks * 💄 Opening credentials modal on sidebar menu item click. Minor CSS updates * 💄 Updating sidebar expand/collapse animation * 💄 Few more refinements of sidebar animation * 👌 Addressing code review comments * ✨ Moved ActionDropdown component to design system * 👌 Fixing bugs reported during code review and testing * 👌 Addressing design review comments for the new sidebar * ✔️ Updating `N8nActionDropdown` component tests * ✨ Remembering scroll position when going back to templates list * ✨ Updating zoomToFit logic to account for footer content * 👌 Addressing latest sidebar review comments * ✨ New `n8n-menu-item` component * ✨ Implemented new `n8n-menu` design system component, updated menu items to support collapsed mode * Minor update to n8n-menu storybook entry * 💄 Updating collapsed sub-menu style. Fixing vue error on hover. * ⚡ Changing IMenuItem from interface to type * ✨ Added new n8n-menu component to editor main sidebar * ⚡ Finished main sidebar * ⚡ Added new menus to setttings and credentials view * ✨ Implemented tab and router modes for n8n-menu * ✨ Implemented credentials menus using new n8n-menu component * 💄 Finishing main and settings sidebar details, updating design system stories * 💄 Adding injected items support to main sidebar, handling navigation errors, small tweaks * ✔️ Fixing linting errors * ✔️ Addressing typescript errors in design system components * ⚡ Using design-system types in editor UI * 💄 Add support for custom icon size in menu items * 👌 Addressing code review and design review feedback * 💄 Minor updates
This commit is contained in:
Milorad FIlipović
committed by
GitHub
GitHub
parent
d47ff48fb6
commit
6af3ba75dc
@@ -1,7 +1,272 @@
|
||||
<template>
|
||||
<el-submenu
|
||||
v-if="item.children && item.children.length > 0"
|
||||
:id="item.id"
|
||||
:class="{
|
||||
[$style.submenu]: true,
|
||||
[$style.item]: true,
|
||||
[$style.compact]: compact,
|
||||
[$style.active]: mode === 'router' && isItemActive(item)
|
||||
}"
|
||||
:index="item.id"
|
||||
:popper-append-to-body="false"
|
||||
:popper-class="`${$style.submenuPopper} ${popperClass}`"
|
||||
>
|
||||
<template slot="title">
|
||||
<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
|
||||
<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),
|
||||
}"
|
||||
:index="child.id"
|
||||
@click="onItemClick(child)"
|
||||
>
|
||||
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
|
||||
<span :class="$style.label">{{ child.label }}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
|
||||
<el-menu-item
|
||||
:id="item.id"
|
||||
:class="{
|
||||
[$style.menuItem]: true,
|
||||
[$style.item]: true,
|
||||
[$style.disableActiveStyle]: !isItemActive(item),
|
||||
[$style.active]: isItemActive(item),
|
||||
[$style.compact]: compact
|
||||
}"
|
||||
:index="item.id"
|
||||
@click="onItemClick(item)"
|
||||
>
|
||||
<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
|
||||
<span :class="$style.label">{{ item.label }}</span>
|
||||
</el-menu-item>
|
||||
</n8n-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ElSubmenu from 'element-ui/lib/submenu';
|
||||
import ElMenuItem from 'element-ui/lib/menu-item';
|
||||
import N8nTooltip from '../N8nTooltip';
|
||||
import N8nIcon from '../N8nIcon';
|
||||
import { IMenuItem } from '../../types';
|
||||
import Vue from 'vue';
|
||||
import { Route } from 'vue-router';
|
||||
|
||||
ElMenuItem.name = 'n8n-menu-item'; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
|
||||
export default Vue.extend({
|
||||
name: 'n8n-menu-item',
|
||||
components: {
|
||||
ElSubmenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
ElMenuItem, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
N8nIcon,
|
||||
N8nTooltip,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object as () => IMenuItem,
|
||||
required: true,
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tooltipDelay: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
popperClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'router',
|
||||
validator: (value: string): boolean => ['router', 'tabs'].includes(value),
|
||||
},
|
||||
activeTab: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
availableChildren(): IMenuItem[] {
|
||||
return Array.isArray(this.item.children) ? this.item.children.filter(child => child.available !== false) : [];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isItemActive(item: IMenuItem): boolean {
|
||||
const isItemActive = this.isActive(item);
|
||||
const hasActiveChild = Array.isArray(item.children) && item.children.some(child => this.isActive(child));
|
||||
return isItemActive || hasActiveChild;
|
||||
},
|
||||
isActive(item: IMenuItem): boolean {
|
||||
if (this.mode === 'router') {
|
||||
if (item.activateOnRoutePaths) {
|
||||
return Array.isArray(item.activateOnRoutePaths) && item.activateOnRoutePaths.includes(this.$route.path);
|
||||
} else if (item.activateOnRouteNames) {
|
||||
return Array.isArray(item.activateOnRouteNames) && item.activateOnRouteNames.includes(this.$route.name || '');
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
return item.id === this.activeTab;
|
||||
}
|
||||
},
|
||||
onItemClick(item: IMenuItem, event: MouseEvent) {
|
||||
if (item && item.type === 'link' && item.properties) {
|
||||
const href: string = item.properties.href;
|
||||
if (!href) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.properties.newWindow) {
|
||||
window.open(href);
|
||||
}
|
||||
else {
|
||||
window.location.assign(item.properties.href);
|
||||
}
|
||||
|
||||
}
|
||||
this.$emit('click', event, item.id);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default ElMenuItem;
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
// Element menu-item overrides
|
||||
:global(.el-menu-item), :global(.el-submenu__title) {
|
||||
--menu-font-color: var(--color-text-base);
|
||||
--menu-item-active-background-color: var(--color-foreground-base);
|
||||
--menu-item-active-font-color: var(--color-text-dark);
|
||||
--menu-item-hover-fill: var(--color-foreground-base);
|
||||
--menu-item-hover-font-color: var(--color-text-dark);
|
||||
--menu-item-height: 35px;
|
||||
--submenu-item-height: 27px;
|
||||
}
|
||||
|
||||
|
||||
.submenu {
|
||||
:global(.el-submenu__title) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-2xs) var(--spacing-xs) !important;
|
||||
user-select: none;
|
||||
|
||||
i {
|
||||
padding-top: 2px;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon { color: var(--color-text-dark) }
|
||||
}
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
height: var(--submenu-item-height) !important;
|
||||
min-width: auto !important;
|
||||
margin: var(--spacing-2xs) 0 !important;
|
||||
padding-left: var(--spacing-l) !important;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
.icon { color: var(--color-text-dark) }
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
.disableActiveStyle {
|
||||
background-color: initial !important;
|
||||
color: var(--color-text-base) !important;
|
||||
|
||||
svg {
|
||||
color: var(--color-text-base) !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-foreground-base) !important;
|
||||
svg {
|
||||
color: var(--color-text-dark) !important;
|
||||
}
|
||||
&:global(.el-submenu) {
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--color-foreground-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
.icon { color: var(--color-text-dark) }
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
display: flex;
|
||||
padding: var(--spacing-2xs) var(--spacing-xs) !important;
|
||||
margin: 0 !important;
|
||||
border-radius: var(--border-radius-base) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: var(--spacing-s);
|
||||
margin-right: var(--spacing-xs);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
|
||||
.compact {
|
||||
width: 40px;
|
||||
.icon {
|
||||
margin: 0;
|
||||
overflow: visible !important;
|
||||
visibility: visible !important;
|
||||
width: initial !important;
|
||||
height: initial !important;
|
||||
}
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.submenuPopper {
|
||||
display: block;
|
||||
left: 40px !important;
|
||||
bottom: 110px !important;
|
||||
top: auto !important;
|
||||
|
||||
ul {
|
||||
padding: 0 var(--spacing-xs) !important;
|
||||
}
|
||||
.menuItem {
|
||||
display: flex;
|
||||
padding: var(--spacing-2xs) var(--spacing-xs) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user