add back to canvas button

This commit is contained in:
Mutasem 2022-04-06 07:58:34 +02:00
parent adb6b37eb8
commit 9572a3b900
4 changed files with 31 additions and 1 deletions

View file

@ -2,6 +2,7 @@
<component <component
:is="$options.components.N8nText" :is="$options.components.N8nText"
:size="props.size" :size="props.size"
:color="props.color"
:compact="true" :compact="true"
> >
<component <component
@ -36,6 +37,8 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
color: {
},
}, },
}; };
</script> </script>

View file

@ -8,6 +8,11 @@
append-to-body append-to-body
@opened="showDocumentHelp = true" @opened="showDocumentHelp = true"
> >
<div :class="$style.backToCanvas">
<n8n-icon icon="arrow-left" color="text-xlight" size="small" />
<n8n-text color="text-xlight" size="small">{{ $locale.baseText('node.backToCanvas') }}</n8n-text>
</div>
<div class="data-display" v-if="node" > <div class="data-display" v-if="node" >
<NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" /> <NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" />
<RunData @openSettings="openSettings" /> <RunData @openSettings="openSettings" />
@ -92,6 +97,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
<style lang="scss"> <style lang="scss">
.data-display-wrapper { .data-display-wrapper {
height: 85%; height: 85%;
margin-top: 32px !important;
.el-dialog__header { .el-dialog__header {
padding: 0 !important; padding: 0 !important;
@ -122,3 +128,23 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
opacity: 0; opacity: 0;
} }
</style> </style>
<style lang="scss" module>
.backToCanvas {
position: absolute;
top: -24px;
pointer-events: none;
> * {
margin-right: var(--spacing-3xs);
}
}
@media (min-width: $--breakpoint-lg) {
.backToCanvas {
position: fixed;
top: 10px;
left: 10px;
}
}
</style>

View file

@ -85,7 +85,7 @@ Vue.use(N8nAvatar);
Vue.use(N8nButton); Vue.use(N8nButton);
Vue.component('n8n-form-box', N8nFormBox); Vue.component('n8n-form-box', N8nFormBox);
Vue.component('n8n-form-inputs', N8nFormInputs); Vue.component('n8n-form-inputs', N8nFormInputs);
Vue.use('n8n-icon', N8nIcon); Vue.component('n8n-icon', N8nIcon);
Vue.use(N8nIconButton); Vue.use(N8nIconButton);
Vue.use(N8nInfoTip); Vue.use(N8nInfoTip);
Vue.use(N8nInput); Vue.use(N8nInput);

View file

@ -1160,6 +1160,7 @@
"node.output.emptyOutput": "This output item is empty.", "node.output.emptyOutput": "This output item is empty.",
"node.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.", "node.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.",
"node.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.", "node.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.",
"node.backToCanvas": "Back to canvas",
"openWorkflow.workflowImportError": "Could not import workflow", "openWorkflow.workflowImportError": "Could not import workflow",
"openWorkflow.workflowNotFoundError": "Could not find workflow", "openWorkflow.workflowNotFoundError": "Could not find workflow",
"settings": "Settings", "settings": "Settings",