Skip to content

Commit

Permalink
feat(editor): updated n8n-menu component (#4290)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@MiloradFilipovic
MiloradFilipovic authored Oct 10, 2022
1 parent d47ff48 commit 6af3ba7
Show file tree
Hide file tree
Showing 15 changed files with 1,102 additions and 773 deletions.
46 changes: 0 additions & 46 deletions packages/design-system/src/components/N8nMenu/Menu.stories.js
View file

This file was deleted.

160 changes: 160 additions & 0 deletions packages/design-system/src/components/N8nMenu/Menu.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import N8nMenu from './Menu.vue';
import N8nIcon from '../N8nIcon';
import N8nText from '../N8nText';
import { StoryFn } from '@storybook/vue';
import { action } from '@storybook/addon-actions';

export default {
title: 'Atoms/Menu',
component: N8nMenu,
argTypes: {
},
};

const methods = {
onSelect: action('select'),
};

const template: StoryFn = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
N8nMenu,
},
template: `
<div style="height: 90vh; width: 200px">
<n8n-menu v-bind="$props" @select="onSelect"></n8n-menu>
</div>
`,
methods,
});

const templateWithHeaderAndFooter: StoryFn = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
N8nMenu,
N8nIcon,
N8nText,
},
template: `
<div style="height: 90vh; width: 200px">
<n8n-menu v-bind="$props" @select="onSelect">
<template #header>
<a href="#" class="p-m hideme" style="display: block;">
<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
</a>
</template>
<template #footer>
<div class="p-m hideme">
<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
<n8n-text>John Smithson</n8n-text>
</div>
</template>
</n8n-menu>
</div>
`,
methods,
});

const templateWithAllSlots: StoryFn = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
N8nMenu,
N8nIcon,
N8nText,
},
template: `
<div style="height: 90vh; width: 200px">
<n8n-menu v-bind="$props" @select="onSelect">
<template #header>
<a href="#" class="p-m hideme" style="display: block;">
<n8n-icon icon="long-arrow-alt-left"/>&nbsp;&nbsp;Back to home
</a>
</template>
<template #menuPrefix>
<n8n-text class="hideme" size="small" color="text-light">Something can be added here...</n8n-text>
</template>
<template #menuSuffix>
<n8n-text class="hideme" size="small" color="text-light">...and here if needed</n8n-text>
</template>
<template #footer>
<div class="p-m hideme">
<n8n-icon icon="user-circle" size="xlarge"/>&nbsp;&nbsp;
<n8n-text>John Smithson</n8n-text>
</div>
</template>
</n8n-menu>
</div>
`,
methods,
});

const menuItems = [
{
id: 'workflows',
icon: 'network-wired',
label: 'Workflows',
position: 'top',
},
{
id: 'executions',
icon: 'tasks',
label: 'Executions',
position: 'top',
},
{
id: 'disabled-item',
icon: 'times',
label: 'Not Available',
available: false,
position: 'top',
},
{
id: 'website',
icon: 'globe',
label: 'Website',
type: 'link',
properties: {
href: 'https://www.n8n.io',
newWindow: true,
},
position: 'bottom',
},
{
id: 'help',
icon: 'question',
label: 'Help',
position: 'bottom',
children: [
{ icon: 'info', label: 'About n8n', id: 'about' },
{ icon: 'book', label: 'Documentation', id: 'docs' },
{
id: 'disabled-submenu-item',
icon: 'times',
label: 'Not Available',
available: false,
position: 'top',
},
{
id: 'quickstart',
icon: 'video',
label: 'Quickstart',
type: 'link',
properties: {
href: 'https://www.youtube.com/watch?v=RpjQTGKm-ok',
newWindow: true,
},
},
],
},
];

export const primary = template.bind({});
primary.args = {
items: menuItems,
};

export const withHeaderAndFooter = templateWithHeaderAndFooter.bind({});
withHeaderAndFooter.args = { items: menuItems };

export const withAllSlots = templateWithAllSlots.bind({});
withAllSlots.args = { items: menuItems };
Loading

0 comments on commit 6af3ba7

Please sign in to comment.