mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

finish up tabs

Browse source
This commit is contained in:
Mutasem 2022-03-28 09:48:37 +02:00
parent be5933493e
commit 83460e967a
2 changed files with 60 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -79,9 +79,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
this.showDocumentHelp = false; this.showDocumentHelp = false;
this.$store.commit('setActiveNode', null); this.$store.commit('setActiveNode', null);
}, },
onDocumentationUrlClick () {
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType, documentationUrl: this.documentationUrl });
},
}, },
}); });

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

@ -16,10 +16,13 @@
/> />
</div> </div>
</div> </div>
<el-tabs :class="$style.tabs" @tab-click="handleTabClick"> <div :class="$style.tabs">
<el-tab-pane index="params" :label="$locale.baseText('nodeSettings.parameters')"></el-tab-pane> <div :class="{[$style.paramsTab]: true, [$style.activeTab]: openPanel === 'params'}" @click="() => handleTabClick('params')">
<el-tab-pane :disabled="true"> {{ $locale.baseText('nodeSettings.parameters') }}
<a slot="label" target="_blank" :class="$style.docs" :href="documentationUrl"> </div>
<div :class="$style.docsTab">
<a target="_blank" :class="$style.docs" :href="documentationUrl" @click="onDocumentationUrlClick">
{{$locale.baseText('nodeSettings.docs')}} {{$locale.baseText('nodeSettings.docs')}}
<font-awesome-icon <font-awesome-icon
:class="$style.external" :class="$style.external"
@ -27,11 +30,12 @@
size="sm" size="sm"
/> />
</a> </a>
</el-tab-pane> </div>
<el-tab-pane index="settings">
<font-awesome-icon slot="label" icon="cog" /> <div :class="{[$style.settingsTab]: true, [$style.activeTab]: openPanel === 'settings'}" @click="() => handleTabClick('settings')">
</el-tab-pane> <font-awesome-icon icon="cog" />
</el-tabs> </div>
</div>
</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>
@ -44,23 +48,20 @@
</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 @tab-click="handleTabClick"> <div v-show="openPanel === 'params'">
<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" /> <parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" /> <div v-if="parametersNoneSetting.length === 0" class="no-parameters">
<div v-if="parametersNoneSetting.length === 0" class="no-parameters"> <n8n-text>
<n8n-text> {{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }} </n8n-text>
</n8n-text> </div>
</div> </div>
</el-tab-pane> <div v-show="openPanel === 'settings'">
<el-tab-pane> <parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
<font-awesome-icon slot="label" icon="cog" /> <parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" /> </div>
<parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
</el-tab-pane>
</el-tabs>
</div> </div>
</div> </div>
</template> </template>
@ -190,7 +191,7 @@ export default mixins(
return { return {
nodeValid: true, nodeValid: true,
nodeColor: null, nodeColor: null,
openPanel: '0', openPanel: 'params',
nodeValues: { nodeValues: {
color: '#ff0000', color: '#ff0000',
alwaysOutputData: false, alwaysOutputData: false,
@ -359,6 +360,9 @@ export default mixins(
} }
} }
}, },
onDocumentationUrlClick () {
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType, documentationUrl: this.documentationUrl });
},
credentialSelected (updateInformation: INodeUpdatePropertiesInformation) { credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
// Update the values on the node // Update the values on the node
this.$store.commit('updateNodeProperties', updateInformation); this.$store.commit('updateNodeProperties', updateInformation);
@ -547,9 +551,9 @@ export default mixins(
this.nodeValid = false; this.nodeValid = false;
} }
}, },
handleTabClick(tab: ElTabPane) { handleTabClick(tab: string) {
this.openPanel = tab.index; this.openPanel = tab;
if(tab.label === 'Settings') { if(tab === '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 });
} }
}, },
@ -566,21 +570,38 @@ export default mixins(
} }
.tabs { .tabs {
* { color: var(--color-text-base);
color: var(--color-text-base); font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold) !important; display: flex;
width: 100%;
> * {
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
padding-bottom: var(--spacing-2xs);
cursor: pointer;
&:hover {
color: var(--color-primary);
}
} }
} }
.activeTab {
color: var(--color-primary);
border-bottom: var(--color-primary) 2px solid;
}
.settingsTab {
margin-left: auto;
}
.docs { .docs {
// todo
color: var(--color-text-base) !important;
&:hover { &:hover {
color: var(--color-primary) !important; color: var(--color-primary) !important;
cursor: pointer; cursor: pointer;
.external { .external {
* {
color: var(--color-primary) !important;
}
display: inline-block; display: inline-block;
} }
} }
@ -603,7 +624,7 @@ export default mixins(
} }
.header-side-menu { .header-side-menu {
padding: var(--spacing-s); padding: var(--spacing-s) var(--spacing-s) var(--spacing-l) var(--spacing-s);
font-size: var(--font-size-l); font-size: var(--font-size-l);
display: flex; display: flex;
@ -618,50 +639,13 @@ export default mixins(
.node-parameters-wrapper { .node-parameters-wrapper {
height: 100%; height: 100%;
overflow-y: auto;
padding: 0 20px 200px 20px;
.el-tabs__header { .el-tabs__header {
background-color: var(--color-background-base); background-color: var(--color-background-base);
margin-bottom: 0; margin-bottom: 0;
} }
.el-tabs {
height: 100%;
.el-tabs__content {
overflow-y: auto;
height: 100%;
.el-tab-pane {
margin: 0 var(--spacing-s);
}
}
}
// .el-tabs__nav {
// padding-bottom: var(--spacing-xs);
// }
.add-option {
i.el-select__caret {
color: var(--color-foreground-xlight);
}
.el-input .el-input__inner {
&,
&:hover,
&:focus {
border-radius: 20px;
color: var(--color-foreground-xlight);
font-weight: 600;
background-color: var(--color-primary);
border-color: var(--color-primary);
text-align: center;
}
&::placeholder {
color: var(--color-foreground-xlight);
opacity: 1; /** Firefox */
}
}
}
} }
} }