mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
3db53a1934
* 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
85 lines
1.4 KiB
Vue
85 lines
1.4 KiB
Vue
<template>
|
|
<div :class="[$style.wrapper, !sidebarMenuCollapsed && $style.expandedSidebar]">
|
|
<div :class="$style.container">
|
|
<aside :class="$style.aside" v-if="$slots.aside">
|
|
<slot name="aside" />
|
|
</aside>
|
|
<main :class="$style.content">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
|
|
export default Vue.extend({
|
|
name: 'PageViewLayout',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
};
|
|
},
|
|
computed: {
|
|
sidebarMenuCollapsed(): boolean {
|
|
return this.$store.getters['ui/sidebarMenuCollapsed'];
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.wrapper {
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
background: var(--color-gray-light);
|
|
padding: var(--spacing-l) var(--spacing-l) 0;
|
|
@media (min-width: 1200px) {
|
|
padding: var(--spacing-2xl) var(--spacing-2xl) 0;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
max-width: 1280px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.aside {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 160px;
|
|
margin-right: var(--spacing-l);
|
|
|
|
@media (min-width: 1200px) {
|
|
margin-right: var(--spacing-2xl);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 1 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
.aside {
|
|
height: auto;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|