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.

Sign up for GitHub

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

Jump to bottom

refactor(editor): N8N-4540 Main navigation layout rework #4060

Merged
merged 24 commits into from
Sep 15, 2022
Merged

refactor(editor): N8N-4540 Main navigation layout rework #4060

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d03f439
✨ Implemented new editor layout using css grid
MiloradFilipovic Sep 6, 2022
67a2003
Merge branch 'feature-main-nav-redesign' into N8N-4540-main-nav-layout
MiloradFilipovic Sep 7, 2022
3c50a34
✨ Reworking main navigation layout, migrating some styling to css mod…
MiloradFilipovic Sep 7, 2022
fe35ebc
✨ Reworking main sidebar layout and responsiveness
MiloradFilipovic Sep 7, 2022
b67ce67
💄 Minor type update
MiloradFilipovic Sep 7, 2022
c6831d2
✨ Updated editor grid layout so empty cells are collapsed (`fit-conte…
MiloradFilipovic Sep 8, 2022
61dcb2e
✨ Implemented new user area look & feel in main sidebar
MiloradFilipovic Sep 8, 2022
142ea65
💄 Adjusting sidebar bottom padding when user area is not shown
MiloradFilipovic Sep 8, 2022
ba56e07
💄 CSS cleanup/refactor + minor vue refactoring
MiloradFilipovic Sep 8, 2022
8d569d6
Merge branch 'feature-main-nav-redesign' into N8N-4540-main-nav-layout
MiloradFilipovic Sep 8, 2022
d18e973
✨ Fixing overscoll issue in chrome and scrolling behaviour of the con…
MiloradFilipovic Sep 13, 2022
87c6d0e
Merge branch 'feature-main-nav-redesign' into N8N-4540-main-nav-layout
MiloradFilipovic Sep 13, 2022
56e28ef
👌 Addressing review feedback
MiloradFilipovic Sep 13, 2022
239665b
✨ Added collapsed and expanded versions of n8n logo
MiloradFilipovic Sep 13, 2022
b1cfbf2
✨ Updating infinite scrolling in templates view to work with the new …
MiloradFilipovic Sep 13, 2022
7a5eabf
Merge branch 'feature-main-nav-redesign' into N8N-4540-main-nav-layout
MiloradFilipovic Sep 13, 2022
18b8a0c
💄 Updating main sidebar expanded width and templates view left margin
MiloradFilipovic Sep 13, 2022
cafe806
💄 Updating main content height
MiloradFilipovic Sep 13, 2022
7ae4658
💄 Adding global styles for scrollable views with centered content, mi…
MiloradFilipovic Sep 13, 2022
a4b597b
✨ Updating zoomToFit logic, lasso select box position and new nodes p…
MiloradFilipovic Sep 14, 2022
fd0dc1e
✨ Fixing new node drop position now that mouse detection has been adj…
MiloradFilipovic Sep 14, 2022
8e7ea9d
👌 Updating templates view scroll to top logic and responsive padding,…
MiloradFilipovic Sep 14, 2022
dea8c96
Merge branch 'feature-main-nav-redesign' into N8N-4540-main-nav-layout
MiloradFilipovic Sep 15, 2022
e49fcc8
💄 Moving template layout style from global css class to component level
MiloradFilipovic Sep 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/design-system/theme/src/reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ html {
body {
height: 100%;
width: 100%;
overscroll-behavior-x: none;
overscroll-behavior: none;
line-height: 1;
font-size: var(--font-size-m);
font-weight: var(--font-weight-regular);
Expand Down
0 packages/editor-ui/public/n8n-icon.svg → ...s/editor-ui/public/n8n-logo-collapsed.svg
View file
Open in desktop
File renamed without changes
6 changes: 6 additions & 0 deletions packages/editor-ui/public/n8n-logo-expanded.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 20 additions & 6 deletions packages/editor-ui/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div :class="$style.app">
<div :class="{[$style.app]: true, ['root-container']: true, ['menu-collapsed']: sidebarMenuCollapsed}">
<LoadingView v-if="loading" />
<div
v-else
id="app"
:class="{
[$style['container']]: true,
[$style['sidebar-collapsed']]: sidebarMenuCollapsed
[$style.container]: true,
[$style.sidebarCollapsed]: sidebarMenuCollapsed
}"
>
<div id="header" :class="$style['header']">
Expand Down Expand Up @@ -187,9 +187,7 @@ export default mixins(

<style lang="scss" module>
.app {
position: fixed;
height: 100vh;
width: 100%;
overflow: hidden;
MiloradFilipovic marked this conversation as resolved.
Show resolved Hide resolved
}

Expand All @@ -200,11 +198,12 @@ export default mixins(
"sidebar content";
grid-auto-columns: fit-content($--sidebar-expanded-width) 1fr;
grid-template-rows: fit-content($--sidebar-width) 1fr;
height: 100%;
}

.content {
grid-area: content;
overflow: auto;
height: 100vh;
}

.header {
Expand All @@ -214,7 +213,22 @@ export default mixins(

.sidebar {
grid-area: sidebar;
height: 100vh;
z-index: 999;
}
</style>

<style lang="scss">
.root-container {
.centered-content {
padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl) 0;
}
}

.root-container.menu-collapsed {
.centered-content {
padding-left: var(--spacing-3xl);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not a fan of this... would be great if we can do this without having to set overrides in a parent component..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My goal was to have it in a global class so we can just apply it on content container that needs to be centered. Any ideas on where it should be?
This has also be simplified in latest commits.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer the previous div... why cannot padding sit at root level? or else set a prop and update component.. or create a common layout and read menu status from store.. but we should avoid this kind of global css as much as possible.. instead think in terms of components


</style>
107 changes: 62 additions & 45 deletions packages/editor-ui/src/components/MainSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<template>
<div id="side-menu" :class="['side-menu', $style['side-menu']]">
<div id="side-menu" :class="['side-menu', $style.sideMenu]">
<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">

<div :class="$style['side-menu-wrapper']">
<div :class="$style.sideMenuWrapper">
<div
id="collapse-change-button"
:class="['clickable', $style['side-menu-collapse-button']]"
:class="['clickable', $style.sideMenuCollapseButton]"
@click="toggleCollapse"
>
<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style['icon-collapsed']" />
<font-awesome-icon v-else icon="angle-left" :class="$style['icon-expanded']" />
<font-awesome-icon v-if="isCollapsed" icon="angle-right" :class="$style.iconCollapsed" />
<font-awesome-icon v-else icon="angle-left" :class="$style.iconExpanded" />
</div>
<n8n-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
<div :class="$style['side-menu-flex-container']">
<div :class="$style['side-menu-upper']">
<div :class="$style.sideMenuFlexContainer">
<div :class="$style.sideMenuUpper">
<n8n-menu-item
index="logo"
:class="{[$style['logo-item']]: true, [$style['logo-item--collapsed']]: isCollapsed}"
:class="{[$style.logoItem]: true, [$style.logoItemCollapsed]: isCollapsed}"
>
<a href="https://n8n.io" target="_blank" :class="$style['logo-link']">
<img :src="basePath + 'n8n-icon.svg'" :class="$style['icon']" alt="n8n"/>
<span :class="['logo-text', $style['logo-text']]" slot="title">n8n</span>
<img v-if="isCollapsed" :src="basePath + 'n8n-logo-collapsed.svg'" :class="$style['icon']" alt="n8n"/>
<img v-else :src="basePath + 'n8n-logo-expanded.svg'" :class="$style['icon']" alt="n8n"/>
</a>
</n8n-menu-item>

Expand Down Expand Up @@ -124,13 +124,13 @@
<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
</n8n-menu-item>
</div>
<div :class="$style['side-menu-lower']">
<div :class="$style.sideMenuLower">
<n8n-menu-item index="settings" v-if="canUserAccessSettings && currentUser">
<font-awesome-icon icon="cog"/>&nbsp;
<span slot="title" class="item-title-root">{{ $locale.baseText('settings') }}</span>
</n8n-menu-item>

<el-submenu index="help" :class="$style['help-menu']" title="Help" popperClass="sidebar-popper">
<el-submenu index="help" :class="$style.helpMenu" title="Help" popperClass="sidebar-popper">
<template slot="title">
<font-awesome-icon icon="question"/>&nbsp;
<span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
Expand All @@ -149,35 +149,35 @@
<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>

<div :class="{
[$style['footer-menu-items']] : true,
[$style['logged-in']]: showUserArea,
[$style.footerMenuItems] : true,
[$style.loggedIn]: showUserArea,
}">
<n8n-menu-item index="updates" :class="$style['updates-submenu']" v-if="hasVersionUpdates" @click="openUpdatesPanel">
<div :class="$style['gift-container']">
<n8n-menu-item index="updates" :class="$style.updatesSubmenu" v-if="hasVersionUpdates" @click="openUpdatesPanel">
<div :class="$style.giftContainer">
<GiftNotificationIcon />
</div>
<span slot="title" :class="['item-title-root', $style['updates-label']]">
<span slot="title" :class="['item-title-root', $style.updatesLabel]">
{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available
</span>
</n8n-menu-item>
<div ref="user" v-if="showUserArea">
<n8n-menu-item :class="$style['user-submenu']">
<n8n-menu-item :class="$style.userSubmenu">
<!-- This dropdown is only enabled when sidebar is collapsed -->
<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
<div :class="{[$style['avatar']]: true, ['clickable']: isCollapsed }">
<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
</el-dropdown-menu>
</div>
</el-dropdown>
<div slot="title" :class="['item-title-root', $style['username'] ]" v-if="!isCollapsed">
<div slot="title" :class="['item-title-root', $style.username ]" v-if="!isCollapsed">
<span>{{currentUser.fullName}}</span>
<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
<div :class="{[$style['user-actions']]: true }">
<div :class="{[$style.userActions]: true, ['user-actions']: true }">
MiloradFilipovic marked this conversation as resolved.
Show resolved Hide resolved
<n8n-icon icon="ellipsis-v" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown" :class="$style.userActionsMenu">
<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
</el-dropdown-menu>
Expand Down Expand Up @@ -422,7 +422,7 @@ export default mixins(
}
},
toggleCollapse () {
this.$store.dispatch('ui/toggleSidebarMenuCollapse');
this.$store.commit('ui/toggleSidebarMenuCollapse');
},
clearExecutionData () {
this.$store.commit('setWorkflowExecutionData', null);
Expand Down Expand Up @@ -698,17 +698,17 @@ export default mixins(

$--n8n-logo-text-color: #101330;
MiloradFilipovic marked this conversation as resolved.
Show resolved Hide resolved

.side-menu {
.sideMenu {
height: 100%;
}

.side-menu-wrapper {
.sideMenuWrapper {
height: 100%;
position: relative;
ul { height: 100%; }
}

.side-menu-collapse-button {
.sideMenuCollapseButton {
position: absolute;
right: -10px;
top: 50%;
Expand All @@ -721,19 +721,27 @@ $--n8n-logo-text-color: #101330;
text-align: center;
border-radius: 50%;

svg {
position: relative;
top: .5px;
}

.iconCollapsed { left: .5px; }
.iconExpanded { left: -.5px; }

&:hover {
color: #EA4B71;
color: var(--color-primary-shade-1);
}
}

.side-menu-flex-container {
.sideMenuFlexContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.logo-item {
.logoItem {
display: flex;
justify-content: space-between;
height: $--header-height;
Expand All @@ -743,7 +751,7 @@ $--n8n-logo-text-color: #101330;
* { vertical-align: middle; }
.icon { height: 18px; }

.logo-text {
.logoText {
position: relative;
left: 5px;
font-weight: bold;
Expand All @@ -752,32 +760,32 @@ $--n8n-logo-text-color: #101330;
}
}

.logo-item--collapsed {
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
.logoItemCollapsed {
border-bottom: var(--border-base);

.logo-text { display: none; }
.logoText { display: none; }
}

.footer-menu-items {
.footerMenuItems {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 20px;

&.logged-in {
&.loggedIn {
padding-bottom: var(--spacing-m);
}
}

.about-icon {
.aboutIcon {
margin-left: 5px;
}

.updates-submenu {
.updatesSubmenu {
color: $--sidebar-inactive-color !important;

.updates-label {
.updatesLabel {
font-size: var(--font-size-xs);
top: 0 !important;
left: 13px !important;
Expand All @@ -787,7 +795,7 @@ $--n8n-logo-text-color: #101330;
color: $--sidebar-active-color;
}

.gift-container {
.giftContainer {
display: flex;
justify-content: flex-start;
align-items: center;
Expand All @@ -796,7 +804,7 @@ $--n8n-logo-text-color: #101330;
}
}

.user-submenu {
.userSubmenu {
position: relative;
border-top: var(--border-width-base) var(--border-style-base) var(--color-foreground-light);
MiloradFilipovic marked this conversation as resolved.
Show resolved Hide resolved
cursor: default;
Expand All @@ -813,8 +821,8 @@ $--n8n-logo-text-color: #101330;
}

.username {
display: flex;
width: 60%;
display: flex !important;
width: 80%;
left: 8px !important;
justify-content: space-between;
color: var(--color-text-base);
Expand All @@ -823,13 +831,13 @@ $--n8n-logo-text-color: #101330;
cursor: default;

span {
max-width: 130px;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
}

.user-actions {
.userActions {
position: relative;
left: 10px;
cursor: pointer;
Expand All @@ -840,8 +848,12 @@ $--n8n-logo-text-color: #101330;
}
}

.userActionsMenu {
margin-left: 25px !important;
}

@media screen and (max-height: 470px) {
.help-menu { display: none; }
.helpMenu { display: none; }
}
</style>

Expand Down Expand Up @@ -921,6 +933,7 @@ $--n8n-logo-text-color: #101330;
}

.el-menu-item {
min-width: 200px;
a {
color: var(--color-text-base);

Expand All @@ -941,4 +954,8 @@ $--n8n-logo-text-color: #101330;
display: inline-block;
}


.el-menu--collapse .el-menu-item {
min-width: auto !important;
}
</style>
10 changes: 8 additions & 2 deletions packages/editor-ui/src/components/TemplateList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,17 @@ export default mixins(genericHelpers).extend({
},
mounted() {
if (this.infiniteScrollEnabled) {
window.addEventListener('scroll', this.onScroll);
const content = document.getElementById('content');
if (content) {
content.addEventListener('scroll', this.onScroll);
}
}
},
destroyed() {
window.removeEventListener('scroll', this.onScroll);
const content = document.getElementById('content');
if (content) {
content.removeEventListener('scroll', this.onScroll);
}
},
components: {
TemplateCard,
Expand Down
Loading