mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-26 05:04:05 -08:00
refactor tabs out
This commit is contained in:
Mutasem
parent
f5df535797
commit
32ec5133a3
|
|
@ -15,26 +15,7 @@
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="$style.tabs">
|
||||
<div :class="{[$style.activeTab]: openPanel === 'params'}" @click="() => handleTabClick('params')">
|
||||
{{ $locale.baseText('nodeSettings.parameters') }}
|
||||
</div>
|
||||
|
||||
<a v-if="documentationUrl" target="_blank" :href="documentationUrl" :class="$style.docsTab" @click="onDocumentationUrlClick">
|
||||
<div>
|
||||
{{$locale.baseText('nodeSettings.docs')}}
|
||||
<font-awesome-icon
|
||||
:class="$style.external"
|
||||
icon="external-link-alt"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div :class="{[$style.settingsTab]: true, [$style.activeTab]: openPanel === 'settings'}" @click="() => handleTabClick('settings')">
|
||||
<font-awesome-icon icon="cog" />
|
||||
</div>
|
||||
</div>
|
||||
<NodeTabs v-model="openPanel" :nodeType="nodeType" />
|
||||
</div>
|
||||
<div class="node-is-not-valid" v-if="node && !nodeValid">
|
||||
<n8n-text>
|
||||
|
|
@ -84,6 +65,7 @@ import NodeTitle from '@/components/NodeTitle.vue';
|
|||
import ParameterInputFull from '@/components/ParameterInputFull.vue';
|
||||
import ParameterInputList from '@/components/ParameterInputList.vue';
|
||||
import NodeCredentials from '@/components/NodeCredentials.vue';
|
||||
import NodeTabs from '@/components/NodeTabs.vue';
|
||||
import NodeWebhooks from '@/components/NodeWebhooks.vue';
|
||||
import { get, set, unset } from 'lodash';
|
||||
|
||||
|
|
@ -107,6 +89,7 @@ export default mixins(
|
|||
NodeCredentials,
|
||||
ParameterInputFull,
|
||||
ParameterInputList,
|
||||
NodeTabs,
|
||||
NodeWebhooks,
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -173,21 +156,7 @@ export default mixins(
|
|||
workflowRunning (): boolean {
|
||||
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;
|
||||
}
|
||||
|
||||
if (this.nodeType.documentationUrl || (this.nodeType.name && this.nodeType.name === 'n8n-nodes-base')) {
|
||||
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;
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -362,9 +331,6 @@ export default mixins(
|
|||
}
|
||||
}
|
||||
},
|
||||
onDocumentationUrlClick () {
|
||||
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType, documentationUrl: this.documentationUrl });
|
||||
},
|
||||
credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
|
||||
// Update the values on the node
|
||||
this.$store.commit('updateNodeProperties', updateInformation);
|
||||
|
|
@ -560,12 +526,6 @@ export default mixins(
|
|||
this.nodeValid = false;
|
||||
}
|
||||
},
|
||||
handleTabClick(tab: string) {
|
||||
this.openPanel = tab;
|
||||
if(tab === 'settings') {
|
||||
this.$telemetry.track('User viewed node settings', { node_type: this.node ? this.node.type : '', workflow_id: this.$store.getters.workflowId });
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.setNodeValues();
|
||||
|
|
@ -577,50 +537,6 @@ export default mixins(
|
|||
.header {
|
||||
background-color: var(--color-background-base);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
color: var(--color-text-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
font-size: var(--font-size-s);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeTab {
|
||||
color: var(--color-primary);
|
||||
border-bottom: var(--color-primary) 2px solid;
|
||||
}
|
||||
|
||||
.settingsTab {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.docsTab {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
|
||||
.external {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
128
packages/editor-ui/src/components/NodeTabs.vue
Normal file
128
packages/editor-ui/src/components/NodeTabs.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div :class="$style.tabs">
|
||||
<div
|
||||
:class="{ [$style.activeTab]: value === 'params' }"
|
||||
@click="() => handleTabClick('params')"
|
||||
>
|
||||
{{ $locale.baseText('nodeSettings.parameters') }}
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="documentationUrl"
|
||||
target="_blank"
|
||||
:href="documentationUrl"
|
||||
:class="$style.docsTab"
|
||||
@click="onDocumentationUrlClick"
|
||||
>
|
||||
<div>
|
||||
{{ $locale.baseText('nodeSettings.docs') }}
|
||||
<font-awesome-icon :class="$style.external" icon="external-link-alt" size="sm" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
:class="{ [$style.settingsTab]: true, [$style.activeTab]: value === 'settings' }"
|
||||
@click="() => handleTabClick('settings')"
|
||||
>
|
||||
<font-awesome-icon icon="cog" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { externalHooks } from '@/components/mixins/externalHooks';
|
||||
import { INodeTypeDescription } from 'n8n-workflow';
|
||||
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
export default mixins(
|
||||
externalHooks,
|
||||
).extend({
|
||||
name: 'NodeTabs',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
},
|
||||
nodeType: {
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
documentationUrl (): string {
|
||||
const nodeType = this.nodeType as INodeTypeDescription | null;
|
||||
if (!nodeType) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (nodeType.documentationUrl && nodeType.documentationUrl.startsWith('http')) {
|
||||
return nodeType.documentationUrl;
|
||||
}
|
||||
|
||||
if (nodeType.documentationUrl || (nodeType.name && nodeType.name.startsWith('n8n-nodes-base'))) {
|
||||
return 'https://docs.n8n.io/nodes/' + (nodeType.documentationUrl || nodeType.name) + '?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link&utm_campaign=' + nodeType.name;
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onDocumentationUrlClick () {
|
||||
if (this.nodeType) {
|
||||
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType as INodeTypeDescription, documentationUrl: this.documentationUrl });
|
||||
}
|
||||
},
|
||||
handleTabClick(tab: string) {
|
||||
this.$emit('input', tab);
|
||||
if(tab === 'settings' && this.nodeType) {
|
||||
this.$telemetry.track('User viewed node settings', { node_type: (this.nodeType as INodeTypeDescription).name, workflow_id: this.$store.getters.workflowId });
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" module>
|
||||
.tabs {
|
||||
color: var(--color-text-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
> * {
|
||||
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
|
||||
padding-bottom: var(--spacing-2xs);
|
||||
font-size: var(--font-size-s);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeTab {
|
||||
color: var(--color-primary);
|
||||
border-bottom: var(--color-primary) 2px solid;
|
||||
}
|
||||
|
||||
.settingsTab {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.docsTab {
|
||||
cursor: pointer;
|
||||
color: var(--color-text-base);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
|
||||
.external {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.external {
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in a new issue