mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-23 10:32:17 -08:00
Code Issues Actions 1 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 { .icons {
display: flex; display: flex;
align-items: baseline; align-items: center;
} }
.icon { .icon {

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

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