mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-20 03:12:15 +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,53 +1,22 @@
|
||||
<template>
|
||||
<div :class="$style.container">
|
||||
<n8n-menu :router="true" :default-active="$route.path" type="secondary">
|
||||
<div :class="$style.returnButton" @click="onReturn">
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon icon="arrow-left" />
|
||||
</i>
|
||||
<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
|
||||
</div>
|
||||
<n8n-menu-item index="/settings/personal" v-if="canAccessPersonalSettings()" :class="$style.tab">
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon icon="user-circle" />
|
||||
</i>
|
||||
<span slot="title">{{ $locale.baseText('settings.personal') }}</span>
|
||||
</n8n-menu-item>
|
||||
<n8n-menu-item index="/settings/users" v-if="canAccessUsersSettings()" :class="[$style.tab, $style.usersMenu]">
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon icon="user-friends" />
|
||||
</i>
|
||||
<span slot="title">{{ $locale.baseText('settings.users') }}</span>
|
||||
</n8n-menu-item>
|
||||
<n8n-menu-item index="/settings/api" v-if="canAccessApiSettings()" :class="[$style.tab, $style.apiMenu]">
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon icon="plug" />
|
||||
</i>
|
||||
<span slot="title">{{ $locale.baseText('settings.n8napi') }}</span>
|
||||
</n8n-menu-item>
|
||||
<n8n-menu-item
|
||||
v-for="fakeDoor in settingsFakeDoorFeatures"
|
||||
v-bind:key="fakeDoor.featureName"
|
||||
:index="`/settings/coming-soon/${fakeDoor.id}`"
|
||||
:class="$style.tab"
|
||||
>
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon :icon="fakeDoor.icon" />
|
||||
</i>
|
||||
<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
|
||||
</n8n-menu-item>
|
||||
<n8n-menu-item index="/settings/community-nodes" v-if="canAccessCommunityNodes()" :class="$style.tab">
|
||||
<i :class="$style.icon">
|
||||
<font-awesome-icon icon="cube" />
|
||||
</i>
|
||||
<span slot="title">{{ $locale.baseText('settings.communityNodes') }}</span>
|
||||
</n8n-menu-item>
|
||||
<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
|
||||
<template #header>
|
||||
<div :class="$style.returnButton" @click="onReturn">
|
||||
<i class="mr-xs">
|
||||
<font-awesome-icon icon="arrow-left" />
|
||||
</i>
|
||||
<n8n-heading slot="title" size="large" :class="$style.settingsHeading" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
|
||||
</div>
|
||||
</template>
|
||||
<template #menuSuffix>
|
||||
<div :class="$style.versionContainer">
|
||||
<n8n-link @click="onVersionClick" size="small">
|
||||
{{ $locale.baseText('settings.version') }} {{ versionCli }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</template>
|
||||
</n8n-menu>
|
||||
<div :class="$style.versionContainer">
|
||||
<n8n-link @click="onVersionClick" size="small">
|
||||
{{ $locale.baseText('settings.version') }} {{ versionCli }}
|
||||
</n8n-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,6 +28,8 @@ import { userHelpers } from './mixins/userHelpers';
|
||||
import { pushConnection } from "@/components/mixins/pushConnection";
|
||||
import { IFakeDoor } from '@/Interface';
|
||||
import GiftNotificationIcon from './GiftNotificationIcon.vue';
|
||||
import { IMenuItem } from 'n8n-design-system';
|
||||
import { BaseTextKey } from '@/plugins/i18n';
|
||||
|
||||
export default mixins(
|
||||
userHelpers,
|
||||
@@ -73,6 +44,64 @@ export default mixins(
|
||||
settingsFakeDoorFeatures(): IFakeDoor[] {
|
||||
return this.$store.getters['ui/getFakeDoorByLocation']('settings');
|
||||
},
|
||||
sidebarMenuItems(): IMenuItem[] {
|
||||
|
||||
const menuItems: IMenuItem[] = [
|
||||
{
|
||||
id: 'settings-personal',
|
||||
icon: 'user-circle',
|
||||
label: this.$locale.baseText('settings.personal'),
|
||||
position: 'top',
|
||||
available: this.canAccessPersonalSettings(),
|
||||
activateOnRouteNames: [ VIEWS.PERSONAL_SETTINGS ],
|
||||
},
|
||||
{
|
||||
id: 'settings-users',
|
||||
icon: 'user-friends',
|
||||
label: this.$locale.baseText('settings.users'),
|
||||
position: 'top',
|
||||
available: this.canAccessUsersSettings(),
|
||||
activateOnRouteNames: [ VIEWS.USERS_SETTINGS ],
|
||||
},
|
||||
{
|
||||
id: 'settings-api',
|
||||
icon: 'plug',
|
||||
label: this.$locale.baseText('settings.n8napi'),
|
||||
position: 'top',
|
||||
available: this.canAccessApiSettings(),
|
||||
activateOnRouteNames: [ VIEWS.API_SETTINGS ],
|
||||
},
|
||||
];
|
||||
|
||||
for (const item of this.settingsFakeDoorFeatures) {
|
||||
if (item.uiLocations.includes('settings')) {
|
||||
menuItems.push({
|
||||
id: item.id,
|
||||
icon: item.icon || 'question',
|
||||
label: this.$locale.baseText(item.featureName as BaseTextKey),
|
||||
position: 'top',
|
||||
available: true,
|
||||
activateOnRoutePaths: [ `/settings/coming-soon/${item.id}` ],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
menuItems.push(
|
||||
{
|
||||
id: 'settings-community-nodes',
|
||||
icon: 'cube',
|
||||
label: this.$locale.baseText('settings.communityNodes'),
|
||||
position: 'top',
|
||||
available: this.canAccessCommunityNodes(),
|
||||
activateOnRouteNames: [ VIEWS.COMMUNITY_NODES ],
|
||||
},
|
||||
);
|
||||
|
||||
return menuItems;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.pushConnect();
|
||||
},
|
||||
methods: {
|
||||
canAccessPersonalSettings(): boolean {
|
||||
@@ -96,83 +125,60 @@ export default mixins(
|
||||
openUpdatesPanel() {
|
||||
this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.pushConnect();
|
||||
async handleSelect (key: string) {
|
||||
switch (key) {
|
||||
case 'settings-personal':
|
||||
if (this.$router.currentRoute.name !== VIEWS.PERSONAL_SETTINGS) {
|
||||
this.$router.push({ name: VIEWS.PERSONAL_SETTINGS });
|
||||
}
|
||||
break;
|
||||
case 'settings-users':
|
||||
if (this.$router.currentRoute.name !== VIEWS.USERS_SETTINGS) {
|
||||
this.$router.push({ name: VIEWS.USERS_SETTINGS });
|
||||
}
|
||||
break;
|
||||
case 'settings-api':
|
||||
if (this.$router.currentRoute.name !== VIEWS.API_SETTINGS) {
|
||||
this.$router.push({ name: VIEWS.API_SETTINGS });
|
||||
}
|
||||
break;
|
||||
case 'environments':
|
||||
case 'logging':
|
||||
this.$router.push({ name: VIEWS.FAKE_DOOR, params: { featureId: key } }).catch(() => {});
|
||||
break;
|
||||
case 'settings-community-nodes':
|
||||
if (this.$router.currentRoute.name !== VIEWS.COMMUNITY_NODES) {
|
||||
this.$router.push({ name: VIEWS.COMMUNITY_NODES });
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
:global(.el-menu) {
|
||||
--menu-item-height: 35px;
|
||||
--submenu-item-height: 27px;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: 200px;
|
||||
height: 100%;
|
||||
min-width: $sidebar-expanded-width;
|
||||
height: 100vh;
|
||||
background-color: var(--color-background-xlight);
|
||||
border-right: var(--border-base);
|
||||
position: relative;
|
||||
padding: var(--spacing-xs);
|
||||
overflow: auto;
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.el-menu-item) > span{
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.settingsHeading {
|
||||
position: relative;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
svg:global(.svg-inline--fa) { position: relative; }
|
||||
}
|
||||
|
||||
.returnButton {
|
||||
composes: tab;
|
||||
margin-bottom: var(--spacing-l);
|
||||
padding: 0 var(--spacing-xs);
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-s) var(--spacing-l);
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
&:hover > * {
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.usersMenu svg { left: -2px; }
|
||||
.apiMenu svg { left: 2px; }
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.versionContainer {
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 420px) {
|
||||
.updatesSubmenu, .versionContainer { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user