mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Update execution view layout (#6882)

Browse source 
* fix(editor): Update execution view layout

* fix(editor): Update element UI dropdown close method

* fix(editor): Icons vertical alignment in exec list card
This commit is contained in:
Csaba Tuncsik 2023-08-09 14:41:23 +02:00 committed by GitHub
parent eda34a7ae7
commit 0339732378
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
View file

@ -238,7 +238,7 @@ export default defineComponent({
.icons {
display: flex;
align-items: baseline;
align-items: center;
}
.icon {

19
packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
View file

@ -12,7 +12,7 @@
</div>
<div v-else :class="$style.previewContainer">
<div
:class="{ [$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }"
:class="$style.executionDetails"
v-if="activeExecution"
:data-test-id="`execution-preview-details-${executionId}`"
>
@ -128,14 +128,12 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useMessage } from '@/composables';
import WorkflowPreview from '@/components/WorkflowPreview.vue';
import type { IExecutionUIData } from '@/mixins/executionsHelpers';
import { executionHelpers } from '@/mixins/executionsHelpers';
import { MODAL_CONFIRM, VIEWS } from '@/constants';
import { useUIStore } from '@/stores/ui.store';
import { ElDropdown } from 'element-plus';
type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
@ -158,13 +156,9 @@ export default defineComponent({
};
},
computed: {
...mapStores(useUIStore),
executionUIDetails(): IExecutionUIData | null {
return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;
},
sidebarCollapsed(): boolean {
return this.uiStore.sidebarMenuCollapsed;
},
executionMode(): string {
return this.activeExecution?.mode || '';
},
@ -197,7 +191,7 @@ export default defineComponent({
// Hide dropdown when clicking outside of current document
const retryDropdownRef = this.$refs.retryDropdown as RetryDropdownRef | undefined;
if (retryDropdownRef && event.relatedTarget === null) {
retryDropdownRef.hide();
retryDropdownRef.handleClose();
}
},
},
@ -206,7 +200,8 @@ export default defineComponent({
<style module lang="scss">
.previewContainer {
height: calc(100% - $header-height);
position: relative;
height: 100%;
overflow: hidden;
}
@ -214,7 +209,7 @@ export default defineComponent({
position: absolute;
padding: var(--spacing-m);
padding-right: var(--spacing-xl);
width: calc(100% - 510px);
width: 100%;
display: flex;
justify-content: space-between;
transition: all 150ms ease-in-out;
@ -223,10 +218,6 @@ export default defineComponent({
& * {
pointer-events: all;
}
&.sidebarCollapsed {
width: calc(100% - 375px);
}
}
.spinner {