mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update main panel

Browse source
This commit is contained in:
Mutasem 2022-03-25 15:18:36 +01:00
parent fa7b12c3a3
commit be5933493e
6 changed files with 92 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
packages/editor-ui/src/components/DataDisplay.vue
View file

@ -2,39 +2,16 @@
<el-dialog <el-dialog
:visible="!!node" :visible="!!node"
:before-close="close" :before-close="close"
:custom-class="`classic data-display-wrapper`" custom-class="data-display-wrapper"
width="85%" width="85%"
append-to-body append-to-body
@opened="showDocumentHelp = true" @opened="showDocumentHelp = true"
> >
<div class="data-display" > <div class="data-display" v-if="node" >
<NodeSettings @valueChanged="valueChanged" /> <NodeSettings @valueChanged="valueChanged" />
<RunData /> <RunData />
</div> </div>
<transition name="fade">
<div v-if="nodeType && showDocumentHelp" class="doc-help-wrapper">
<svg id="help-logo" :href="documentationUrl" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>{{ $locale.baseText('dataDisplay.nodeDocumentation') }}</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g transform="translate(1117.000000, 825.000000)">
<g transform="translate(10.000000, 11.000000)">
<g transform="translate(2.250000, 2.250000)" fill="#FF6150">
<path d="M6,11.25 L7.5,11.25 L7.5,9.75 L6,9.75 L6,11.25 M6.75,2.25 C5.09314575,2.25 3.75,3.59314575 3.75,5.25 L5.25,5.25 C5.25,4.42157288 5.92157288,3.75 6.75,3.75 C7.57842712,3.75 8.25,4.42157288 8.25,5.25 C8.25,6.75 6,6.5625 6,9 L7.5,9 C7.5,7.3125 9.75,7.125 9.75,5.25 C9.75,3.59314575 8.40685425,2.25 6.75,2.25 M1.5,0 L12,0 C12.8284271,0 13.5,0.671572875 13.5,1.5 L13.5,12 C13.5,12.8284271 12.8284271,13.5 12,13.5 L1.5,13.5 C0.671572875,13.5 0,12.8284271 0,12 L0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z"></path>
</g>
<rect x="0" y="0" width="18" height="18"></rect>
</g>
</g>
</g>
</g>
</svg>
<div class="text">
{{ $locale.baseText('dataDisplay.needHelp') }} <n8n-link size="small" :to="documentationUrl" :bold="true" @click="onDocumentationUrlClick">{{ $locale.baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</n8n-link>
</div>
</div>
</transition>
</el-dialog> </el-dialog>
</template> </template>
@ -69,17 +46,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
}; };
}, },
computed: { computed: {
documentationUrl (): string {
if (!this.nodeType) {
return '';
}
if (this.nodeType.documentationUrl && this.nodeType.documentationUrl.startsWith('http')) {
return this.nodeType.documentationUrl;
}
return 'https://docs.n8n.io/nodes/' + (this.nodeType.documentationUrl || this.nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + this.nodeType.name;
},
node (): INodeUi { node (): INodeUi {
return this.$store.getters.activeNode; return this.$store.getters.activeNode;
}, },
@ -145,41 +111,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
height: 100%; height: 100%;
} }
.doc-help-wrapper {
position: absolute;
right: 0;
transition-delay: 2s;
background-color: #fff;
margin-top: 1%;
box-sizing: border-box;
border: 1px solid #DCDFE6;
border-radius: 4px;
background-color: #FFFFFF;
box-shadow: 0 2px 7px 0 rgba(0,0,0,0.15);
min-width: 319px;
height: 40px;
float: right;
padding: 5px;
display: flex;
flex-direction: row;
padding-top: 10px;
padding-right: 12px;
#help-logo {
flex: 1;
}
.text {
margin-left: 5px;
flex: 9;
font-family: "Open Sans";
font-size: 12px;
font-weight: 600;
line-height: 17px;
white-space: nowrap;
}
}
.fade-enter-active, .fade-enter-to, .fade-leave-active { .fade-enter-active, .fade-enter-to, .fade-leave-active {
transition: all .75s ease; transition: all .75s ease;
opacity: 1; opacity: 1;

11
packages/editor-ui/src/components/DisplayWithChange.vue
View file

@ -1,14 +1,5 @@
<template> <template>
<span class="static-text-wrapper"> <span class="static-text">{{currentValue}}</span>
<span v-show="!editActive" :title="$locale.baseText('displayWithChange.clickToChange')">
<span class="static-text" @mousedown="startEdit">{{currentValue}}</span>
</span>
<span v-show="editActive">
<input class="edit-field" ref="inputField" type="text" v-model="newValue" @keydown.enter.stop.prevent="setValue" @keydown.escape.stop.prevent="cancelEdit" @keydown.stop="noOp" @blur="cancelEdit" />
<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" :title="$locale.baseText('displayWithChange.cancelEdit')" />
<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" :title="$locale.baseText('displayWithChange.setValue')" />
</span>
</span>
</template> </template>
<script lang="ts"> <script lang="ts">

118
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -1,17 +1,37 @@
<template> <template>
<div class="node-settings" @keydown.stop> <div class="node-settings" @keydown.stop>
<div :class="$style.header">
<div class="header-side-menu"> <div class="header-side-menu">
<span v-if="node"> <display-with-change class="node-name" :key-name="'name'" @valueChanged="valueChanged"></display-with-change>
<display-with-change :key-name="'name'" @valueChanged="valueChanged"></display-with-change> <div
<span class="node-info"> v-if="!isReadOnly"
<n8n-link v-if="nodeType" :to="'http://n8n.io/nodes/' + nodeType.name"> class="execute-node-button"
<n8n-tooltip class="clickable" placement="top" > >
<div slot="content" v-html="`<strong>${$locale.baseText('nodeSettings.nodeDescription')}:</strong><br />` + nodeTypeDescription + `<br /><br /><strong>${$locale.baseText('nodeSettings.clickOnTheQuestionMarkIcon')}</strong>`"></div> <n8n-button
<font-awesome-icon icon="question-circle" /> :title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
</n8n-tooltip> :loading="workflowRunning"
</n8n-link> icon="play-circle"
</span> :label="$locale.baseText('runData.executeNode')"
</span> @click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
/>
</div>
</div>
<el-tabs :class="$style.tabs" @tab-click="handleTabClick">
<el-tab-pane index="params" :label="$locale.baseText('nodeSettings.parameters')"></el-tab-pane>
<el-tab-pane :disabled="true">
<a slot="label" target="_blank" :class="$style.docs" :href="documentationUrl">
{{$locale.baseText('nodeSettings.docs')}}
<font-awesome-icon
:class="$style.external"
icon="external-link-alt"
size="sm"
/>
</a>
</el-tab-pane>
<el-tab-pane index="settings">
<font-awesome-icon slot="label" icon="cog" />
</el-tab-pane>
</el-tabs>
</div> </div>
<div class="node-is-not-valid" v-if="node && !nodeValid"> <div class="node-is-not-valid" v-if="node && !nodeValid">
<n8n-text> <n8n-text>
@ -24,7 +44,7 @@
</n8n-text> </n8n-text>
</div> </div>
<div class="node-parameters-wrapper" v-if="node && nodeValid"> <div class="node-parameters-wrapper" v-if="node && nodeValid">
<el-tabs stretch @tab-click="handleTabClick"> <el-tabs @tab-click="handleTabClick">
<el-tab-pane :label="$locale.baseText('nodeSettings.parameters')"> <el-tab-pane :label="$locale.baseText('nodeSettings.parameters')">
<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials> <node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
<node-webhooks :node="node" :nodeType="nodeType" /> <node-webhooks :node="node" :nodeType="nodeType" />
@ -35,7 +55,8 @@
</n8n-text> </n8n-text>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$locale.baseText('nodeSettings.settings')"> <el-tab-pane>
<font-awesome-icon slot="label" icon="cog" />
<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" /> <parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
<parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" /> <parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
</el-tab-pane> </el-tab-pane>
@ -153,11 +174,23 @@ export default mixins(
workflowRunning (): boolean { workflowRunning (): boolean {
return this.$store.getters.isActionActive('workflowRunning'); return this.$store.getters.isActionActive('workflowRunning');
}, },
documentationUrl (): string {
if (!this.nodeType) {
return '';
}
if (this.nodeType.documentationUrl && this.nodeType.documentationUrl.startsWith('http')) {
return this.nodeType.documentationUrl;
}
return 'https://docs.n8n.io/nodes/' + (this.nodeType.documentationUrl || this.nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + this.nodeType.name;
},
}, },
data () { data () {
return { return {
nodeValid: true, nodeValid: true,
nodeColor: null, nodeColor: null,
openPanel: '0',
nodeValues: { nodeValues: {
color: '#ff0000', color: '#ff0000',
alwaysOutputData: false, alwaysOutputData: false,
@ -515,6 +548,7 @@ export default mixins(
} }
}, },
handleTabClick(tab: ElTabPane) { handleTabClick(tab: ElTabPane) {
this.openPanel = tab.index;
if(tab.label === 'Settings') { if(tab.label === 'Settings') {
this.$telemetry.track('User viewed node settings', { node_type: this.node ? this.node.type : '', workflow_id: this.$store.getters.workflowId }); this.$telemetry.track('User viewed node settings', { node_type: this.node ? this.node.type : '', workflow_id: this.$store.getters.workflowId });
} }
@ -526,8 +560,39 @@ export default mixins(
}); });
</script> </script>
<style lang="scss"> <style lang="scss" module>
.header {
background-color: var(--color-background-base);
}
.tabs {
* {
color: var(--color-text-base);
font-weight: var(--font-weight-bold) !important;
}
}
.docs {
&:hover {
color: var(--color-primary) !important;
cursor: pointer;
.external {
* {
color: var(--color-primary) !important;
}
display: inline-block;
}
}
}
.external {
display: none;
}
</style>
<style lang="scss">
.node-settings { .node-settings {
overflow: hidden; overflow: hidden;
min-width: 350px; min-width: 350px;
@ -538,20 +603,12 @@ export default mixins(
} }
.header-side-menu { .header-side-menu {
padding: 1em 0 1em 1.8em; padding: var(--spacing-s);
font-size: var(--font-size-l); font-size: var(--font-size-l);
background-color: $--custom-window-sidebar-top; display: flex;
.node-info { .node-name {
display: none; flex-grow: 1;
padding-left: 0.5em;
font-size: 0.8em;
}
&:hover {
.node-info {
display: inline;
}
} }
} }
@ -563,7 +620,7 @@ export default mixins(
height: 100%; height: 100%;
.el-tabs__header { .el-tabs__header {
background-color: #fff5f2; background-color: var(--color-background-base);
margin-bottom: 0; margin-bottom: 0;
} }
@ -572,7 +629,6 @@ export default mixins(
.el-tabs__content { .el-tabs__content {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding-bottom: 180px;
.el-tab-pane { .el-tab-pane {
margin: 0 var(--spacing-s); margin: 0 var(--spacing-s);
@ -580,9 +636,9 @@ export default mixins(
} }
} }
.el-tabs__nav { // .el-tabs__nav {
padding-bottom: var(--spacing-xs); // padding-bottom: var(--spacing-xs);
} // }
.add-option { .add-option {
i.el-select__caret { i.el-select__caret {

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

@ -2,19 +2,6 @@
<div class="run-data-view" v-loading="workflowRunning"> <div class="run-data-view" v-loading="workflowRunning">
<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/> <BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
<div
v-if="node && !isReadOnly"
class="execute-node-button"
>
<n8n-button
:title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
:loading="workflowRunning"
icon="play-circle"
:label="$locale.baseText('runData.executeNode')"
@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
/>
</div>
<div class="header"> <div class="header">
<div class="title-text"> <div class="title-text">
<n8n-text :bold="true" v-if="dataCount < maxDisplayItems"> <n8n-text :bold="true" v-if="dataCount < maxDisplayItems">
@ -782,12 +769,6 @@ export default mixins(
} }
} }
.execute-node-button {
position: absolute;
top: 10px;
right: 10px;
}
.header { .header {
padding-top: 10px; padding-top: 10px;
padding-left: 10px; padding-left: 10px;

3
packages/editor-ui/src/n8n-theme.scss
View file

@ -120,9 +120,6 @@
.el-tabs__nav:focus { .el-tabs__nav:focus {
outline: none; outline: none;
} }
.el-tabs__item {
color: #555;
}
.el-tabs__item.is-active { .el-tabs__item.is-active {
font-weight: bold; font-weight: bold;
} }

2
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -456,6 +456,7 @@
"description": "If active, the workflow continues even if this node's execution fails. When this occurs, the node passes along input data from previous nodes - so your workflow should account for unexpected output data.", "description": "If active, the workflow continues even if this node's execution fails. When this occurs, the node passes along input data from previous nodes - so your workflow should account for unexpected output data.",
"displayName": "Continue On Fail" "displayName": "Continue On Fail"
}, },
"docs": "Docs",
"executeOnce": { "executeOnce": {
"description": "If active, the node executes only once, with data from the first item it receives", "description": "If active, the node executes only once, with data from the first item it receives",
"displayName": "Execute Once" "displayName": "Execute Once"
@ -479,7 +480,6 @@
"description": "If active, the node tries to execute again when it fails", "description": "If active, the node tries to execute again when it fails",
"displayName": "Retry On Fail" "displayName": "Retry On Fail"
}, },
"settings": "Settings",
"theNodeIsNotValidAsItsTypeIsUnknown": "The node is not valid as its type ({nodeType}) is unknown", "theNodeIsNotValidAsItsTypeIsUnknown": "The node is not valid as its type ({nodeType}) is unknown",
"thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters", "thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
"waitBetweenTries": { "waitBetweenTries": {