Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(editor): updated n8n-menu component #4290

Merged
merged 49 commits into from
Oct 10, 2022

Conversation

MiloradFilipovic
Copy link
Contributor

Closes N8N-4736

* ✨ 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
# Conflicts:
#	packages/editor-ui/src/components/MainSidebar.vue
#	packages/editor-ui/src/constants.ts
# Conflicts:
#	packages/editor-ui/src/components/MainSidebar.vue
@MiloradFilipovic MiloradFilipovic self-assigned this Oct 8, 2022
@linear
Copy link

linear bot commented Oct 8, 2022

N8N-4736

@n8n-assistant n8n-assistant bot added the n8n team Authored by the n8n team label Oct 8, 2022
@MiloradFilipovic MiloradFilipovic changed the title feat(editor): Updated n8n-menu component feat(editor): updated n8n-menu component Oct 10, 2022
@ivov ivov added the tech debt label Oct 10, 2022
cstuncsik
cstuncsik previously approved these changes Oct 10, 2022
@MiloradFilipovic MiloradFilipovic merged commit 6af3ba7 into master Oct 10, 2022
@MiloradFilipovic MiloradFilipovic deleted the N8N-4736-n8n-menu-rework branch October 10, 2022 16:17
@n8n-assistant n8n-assistant bot added the Upcoming Release Will be part of the upcoming release label Oct 10, 2022
@janober
Copy link
Member

janober commented Oct 14, 2022

Got released with n8n@0.198.0

@janober janober removed the Upcoming Release Will be part of the upcoming release label Oct 14, 2022
valya pushed a commit to valya/n8n that referenced this pull request Nov 8, 2022
* refactor(editor): N8N-4540 Main navigation layout rework (n8n-io#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
n8n team Authored by the n8n team tech debt ui Enhancement in /editor-ui or /design-system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants