mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-26 12:01:16 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Optimize application layout (#11769)

Browse source
This commit is contained in:
Csaba Tuncsik 2024-11-19 13:31:04 +01:00 committed by GitHub
parent 6c2dad7914
commit 91f9390b90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cypress/e2e/42-nps-survey.cy.ts
View file

@ -10,7 +10,7 @@ import { WorkflowPage } from '../pages/workflow';
const workflowPage = new WorkflowPage();
const NOW = 1717771477012;
const NOW = Date.now();
const ONE_DAY = 24 * 60 * 60 * 1000;
const THREE_DAYS = ONE_DAY * 3;
const SEVEN_DAYS = ONE_DAY * 7;

2
cypress/e2e/45-ai-assistant.cy.ts
View file

@ -557,6 +557,8 @@ describe('General help', () => {
}).as('chatRequest');
aiAssistant.getters.askAssistantFloatingButton().click();
wf.getters.zoomToFitButton().click();
aiAssistant.actions.sendMessage('What is wrong with this workflow?');
cy.wait('@chatRequest');

12
packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue
View file

@ -344,6 +344,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
.container {
height: 100%;
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
}
p {
@ -373,10 +375,6 @@ p {
background-color: var(--color-background-light);
border: var(--border-base);
border-top: 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 250px; // make scrollable at the end
position: relative;
pre,
@ -390,7 +388,13 @@ p {
}
.messages {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: var(--spacing-xs);
overflow-y: auto;
& + & {
padding-top: 0;

8
packages/editor-ui/src/App.vue
View file

@ -128,7 +128,8 @@ watch(defaultLocale, (newLocale) => {
.container {
height: 100vh;
overflow: hidden;
display: flex;
display: grid;
grid-template-columns: 1fr auto;
}
// App grid is the main app layout including modals and other absolute positioned elements
@ -136,13 +137,12 @@ watch(defaultLocale, (newLocale) => {
position: relative;
display: grid;
height: 100vh;
flex-basis: 100%;
grid-template-areas:
'banners banners'
'sidebar header'
'sidebar content';
grid-auto-columns: minmax(0, max-content) 1fr;
grid-template-rows: auto fit-content($header-height) 1fr;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto 1fr;
}
.banners {

6
packages/editor-ui/src/components/AskAssistant/AskAssistantChat.vue
View file

@ -103,12 +103,6 @@ function onClose() {
</template>
<style module>
.container {
height: 100%;
flex-basis: content;
z-index: var(--z-index-ask-assistant-chat);
}
.wrapper {
height: 100%;
}

6
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -211,7 +211,6 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
.main-header {
background-color: var(--color-background-xlight);
height: $header-height;
width: 100%;
box-sizing: border-box;
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
@ -222,16 +221,15 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
display: flex;
align-items: center;
font-size: 0.9em;
height: $header-height;
font-weight: 400;
padding: 0 var(--spacing-m) 0 var(--spacing-m);
padding: var(--spacing-xs) var(--spacing-m);
}
.github-button {
display: flex;
position: relative;
align-items: center;
height: $header-height;
align-self: stretch;
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
background-color: var(--color-background-xlight);

5
packages/editor-ui/src/components/MainHeader/TabBar.vue
View file

@ -40,15 +40,16 @@ function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
<style module lang="scss">
.container {
position: absolute;
top: 47px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%) translateY(50%);
min-height: 30px;
display: flex;
padding: var(--spacing-5xs);
background-color: var(--color-foreground-base);
border-radius: var(--border-radius-base);
transition: all 150ms ease-in-out;
z-index: 1;
}
@media screen and (max-width: 430px) {

6
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -777,6 +777,10 @@ $--header-spacing: 20px;
.name-container {
margin-right: $--header-spacing;
:deep(.el-input) {
padding: 0;
}
}
.name {
@ -827,6 +831,7 @@ $--header-spacing: 20px;
display: flex;
align-items: center;
gap: var(--spacing-m);
flex-wrap: wrap;
}
</style>
@ -837,6 +842,7 @@ $--header-spacing: 20px;
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.group {