admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Main navigation redesign (#4144)

Browse Source 
* 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
This commit is contained in:
Milorad FIlipović
2022-09-26 15:25:19 +02:00
committed by GitHub
parent e6e4f297c6
commit 3db53a1934
37 changed files with 1358 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/editor-ui/src/views/NodeView.vue
View File

@@ -307,11 +307,11 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty;
if(result) {
const confirmModal = await this.confirmModal(
this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.headline'),
'warning',
this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
this.$locale.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
true,
);
@@ -1470,9 +1470,13 @@ export default mixins(
const nodeTypeName = event.dataTransfer.getData('nodeTypeName');
if (nodeTypeName) {
const mousePosition = this.getMousePositionWithinNodeView(event);
const sidebarOffset = this.sidebarMenuCollapsed ? CanvasHelpers.SIDEBAR_WIDTH : CanvasHelpers.SIDEBAR_WIDTH_EXPANDED;
this.addNodeButton(nodeTypeName, {
position: [mousePosition[0] - CanvasHelpers.NODE_SIZE / 2, mousePosition[1] - CanvasHelpers.NODE_SIZE / 2],
position: [
mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
],
dragAndDrop: true,
});
this.createNodeActive = false;
@@ -3210,7 +3214,7 @@ export default mixins(
<style scoped lang="scss">
.zoom-menu {
$--zoom-menu-margin: 5;
$--zoom-menu-margin: 15;
position: fixed;
left: $sidebar-width + $--zoom-menu-margin;
@@ -3288,19 +3292,14 @@ export default mixins(
}
.node-view-root {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
background-color: var(--color-canvas-background);
width: 100%;
height: 100%;
}
.node-view-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
.node-view {
@@ -3308,6 +3307,7 @@ export default mixins(
width: 100%;
height: 100%;
transform-origin: 0 0;
z-index: -1;
}
.node-view-background {
@@ -3315,6 +3315,7 @@ export default mixins(
position: absolute;
width: 10000px;
height: 10000px;
z-index: -2;
}
.move-active {