n8n/packages/design-system
Milorad FIlipović 3db53a1934
feat(editor): Main navigation redesign (#4144)
* 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

* 👌 Addressing main sidebar product review comments

* 💄 Updating css variable names after vite merge

* ✔️ Fixing linting errors in the design system

* ✔️ Fixing `element-ui` type import

* 👌 Addressing the code review comments.

*  Adding link to new credentials view, removed old modal

* 💄 Updating credentials view responsiveness and route highlight handling

* 💄 Adding highlight to workflows submenu when on new workflow page

* 💄 Updated active submenu text color
2022-09-26 15:25:19 +02:00
..
.storybook fix(typescript): Use consistent typescript configs - N8N-4552 (#4049) 2022-09-09 18:00:18 +02:00
src feat(editor): Main navigation redesign (#4144) 2022-09-26 15:25:19 +02:00
theme/preview feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061) 2022-09-23 17:14:28 +03:00
.browserslistrc Implement design system (#2050) 2021-08-29 13:36:17 +02:00
.editorconfig Implement design system (#2050) 2021-08-29 13:36:17 +02:00
.eslintrc.js fix(eslint): setup eslint to run on every package - N8N-4553 (#4050) 2022-09-12 11:41:50 +02:00
.gitignore feat(design-system,editor-ui): upgrade some of the frontend dev dependencies (#3978) 2022-08-31 15:47:33 +02:00
.npmignore fix(npm): improve .npmignore to reduce the size of the published packages (#3970) 2022-08-30 13:43:47 +02:00
babel.config.js Implement design system (#2050) 2021-08-29 13:36:17 +02:00
jest.config.js Implement design system (#2050) 2021-08-29 13:36:17 +02:00
LICENSE.md docs(license): Introduce n8n Enterprise License (#3945) 2022-08-29 22:08:42 +02:00
LICENSE_EE.md docs(license): Introduce n8n Enterprise License (#3945) 2022-08-29 22:08:42 +02:00
package.json feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061) 2022-09-23 17:14:28 +03:00
postcss.config.js feat(design-system,editor-ui): upgrade some of the frontend dev dependencies (#3978) 2022-08-31 15:47:33 +02:00
README.md refactor: Update additional README.md files 2022-08-03 13:34:49 +02:00
tsconfig.json fix(typescript): Use consistent typescript configs - N8N-4552 (#4049) 2022-09-09 18:00:18 +02:00
tslint.json Implement design system (#2050) 2021-08-29 13:36:17 +02:00
vite.config.ts test(editor): Add first frontend unit-test and update notice component design (#3166) 2022-04-29 15:23:41 +02:00

n8n-design-system

A component system for n8n using Storybook to preview.

Project setup

npm install

Compiles and hot-reloads for development

npm run storybook

Build static pages

npm run build:storybook

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Build css files

npm run build:theme

Monitor theme files and build any changes

npm run watch:theme

License

n8n is fair-code distributed under the Sustainable Use License.

Additional information about the license can be found in the docs.