mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-19 02:51:14 +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,22 +1,83 @@
|
||||
<template>
|
||||
<el-menu
|
||||
:defaultActive="defaultActive"
|
||||
:collapse="collapse"
|
||||
:router="router"
|
||||
:class="['n8n-menu', $style[type + (light ? '-light' : '')]]"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot></slot>
|
||||
</el-menu>
|
||||
<div :class="{
|
||||
['menu-container']: true,
|
||||
[$style.container]: true,
|
||||
[$style.menuCollapsed]: collapsed
|
||||
}">
|
||||
<div v-if="$slots.header" :class="$style.menuHeader">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div :class="$style.menuContent">
|
||||
<div :class="{[$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
|
||||
<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
|
||||
<slot name="menuPrefix"></slot>
|
||||
</div>
|
||||
<el-menu
|
||||
:defaultActive="defaultActive"
|
||||
:collapse="collapsed"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<n8n-menu-item
|
||||
v-for="item in upperMenuItems"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:compact="collapsed"
|
||||
:popperClass="$style.submenuPopper"
|
||||
:tooltipDelay="tooltipDelay"
|
||||
:mode="mode"
|
||||
:activeTab="activeTab"
|
||||
@click="onSelect"
|
||||
/>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix }">
|
||||
<el-menu
|
||||
:defaultActive="defaultActive"
|
||||
:collapse="collapsed"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<n8n-menu-item
|
||||
v-for="item in lowerMenuItems"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:compact="collapsed"
|
||||
:popperClass="$style.submenuPopper"
|
||||
:tooltipDelay="tooltipDelay"
|
||||
:mode="mode"
|
||||
:activeTab="activeTab"
|
||||
@click="onSelect"
|
||||
/>
|
||||
</el-menu>
|
||||
<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
|
||||
<slot name="menuSuffix"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" :class="$style.menuFooter">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import ElMenu from 'element-ui/lib/menu';
|
||||
import N8nMenuItem from '../N8nMenuItem';
|
||||
|
||||
import Vue from 'vue';
|
||||
import Vue, { PropType } from 'vue';
|
||||
import { Route } from 'vue-router';
|
||||
import { IMenuItem } from '../../types';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'n8n-menu',
|
||||
components: {
|
||||
ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
N8nMenuItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: '',
|
||||
};
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
@@ -26,55 +87,96 @@ export default Vue.extend({
|
||||
defaultActive: {
|
||||
type: String,
|
||||
},
|
||||
collapse: {
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
light: {
|
||||
type: Boolean,
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'router',
|
||||
validator: (value: string): boolean => ['router', 'tabs'].includes(value),
|
||||
},
|
||||
router: {
|
||||
type: Boolean,
|
||||
tooltipDelay: {
|
||||
type: Number,
|
||||
default: 300,
|
||||
},
|
||||
items: {
|
||||
type: Array as PropType<IMenuItem[]>,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ElMenu, // eslint-disable-line @typescript-eslint/no-unsafe-assignment
|
||||
mounted() {
|
||||
if (this.mode === 'router') {
|
||||
const found = this.items.find(item => {
|
||||
return Array.isArray(item.activateOnRouteNames) && item.activateOnRouteNames.includes(this.$route.name || '') ||
|
||||
Array.isArray(item.activateOnRoutePaths) && item.activateOnRoutePaths.includes(this.$route.path);
|
||||
});
|
||||
this.activeTab = found ? found.id : '';
|
||||
} else {
|
||||
this.activeTab = this.items.length > 0 ? this.items[0].id : '';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
upperMenuItems(): IMenuItem[] {
|
||||
return this.items.filter((item: IMenuItem) => item.position === 'top' && item.available !== false);
|
||||
},
|
||||
lowerMenuItems(): IMenuItem[] {
|
||||
return this.items.filter((item: IMenuItem) => item.position === 'bottom' && item.available !== false);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSelect(event: MouseEvent, option: string): void {
|
||||
if (this.mode === 'tabs') {
|
||||
this.activeTab = option;
|
||||
}
|
||||
this.$emit('select', option);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.menu {
|
||||
max-width: 200px;
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-background-xlight);
|
||||
}
|
||||
|
||||
.primary {
|
||||
composes: menu;
|
||||
--menu-item-hover-font-color: var(--color-primary);
|
||||
}
|
||||
.menuContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
|
||||
.secondary {
|
||||
composes: menu;
|
||||
--menu-font-color: var(--color-text-base);
|
||||
--menu-item-font-weight: var(--font-weight-regular);
|
||||
--menu-background-color: transparent;
|
||||
--menu-item-active-font-color: var(--color-text-dark);
|
||||
--menu-item-active-background-color: var(--color-foreground-base);
|
||||
--menu-item-hover-font-color: var(--color-primary);
|
||||
--menu-item-border-radius: 4px;
|
||||
--menu-item-height: 38px;
|
||||
|
||||
li {
|
||||
padding-left: 12px !important;
|
||||
& > div > :global(.el-menu) {
|
||||
background: none;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-light {
|
||||
composes: secondary;
|
||||
--menu-item-active-background-color: hsl(
|
||||
var(--color-foreground-base-h),
|
||||
var(--color-foreground-base-s),
|
||||
var(--color-foreground-base-l),
|
||||
0.7
|
||||
);
|
||||
.upperContent {
|
||||
ul {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.submenuPopper {
|
||||
bottom: auto !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lowerContent {
|
||||
ul {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menuCollapsed {
|
||||
transition: width 150ms ease-in-out;
|
||||
:global(.hideme) { display: none !important; }
|
||||
}
|
||||
|
||||
.menuPrefix, .menuSuffix {
|
||||
padding: var(--spacing-xs) var(--spacing-l);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user