mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 12:44:07 -08:00
⚡ Add "About n8n" to Help in sidebar
This commit is contained in:
Jan Oberhauser
parent
9a2188f22f
commit
29633cfd1f
88
packages/editor-ui/src/components/About.vue
Normal file
88
packages/editor-ui/src/components/About.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<span>
|
||||
<el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" title="About n8n" :before-close="closeDialog">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="8" class="info-name">
|
||||
n8n Version:
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
{{versionCli}}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" class="info-name">
|
||||
Source Code:
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<a href="https://github.com/n8n-io/n8n" target="_blank">https://github.com/n8n-io/n8n</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8" class="info-name">
|
||||
License:
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank">Apache 2.0 with Commons Clause</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="action-buttons">
|
||||
<el-button type="success" @click="closeDialog">
|
||||
Close
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
import { showMessage } from '@/components/mixins/showMessage';
|
||||
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
export default mixins(
|
||||
genericHelpers,
|
||||
showMessage,
|
||||
).extend({
|
||||
name: 'About',
|
||||
props: [
|
||||
'dialogVisible',
|
||||
],
|
||||
computed: {
|
||||
versionCli (): string {
|
||||
return this.$store.getters.versionCli;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeDialog () {
|
||||
// Handle the close externally as the visible parameter is an external prop
|
||||
// and is so not allowed to be changed here.
|
||||
this.$emit('closeDialog');
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.n8n-about {
|
||||
.el-row {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 1em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div id="side-menu">
|
||||
<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
|
||||
<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
|
||||
<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
|
||||
<credentials-edit :dialogVisible="credentialNewDialogVisible" @closeDialog="closeCredentialNewDialog"></credentials-edit>
|
||||
|
|
@ -14,15 +15,9 @@
|
|||
<el-menu default-active="workflow" @select="handleSelect" :collapse="isCollapsed">
|
||||
|
||||
<el-menu-item index="logo" class="logo-item">
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<div slot="content">
|
||||
n8n.io - Currently installed version {{versionCli}}
|
||||
</div>
|
||||
<a href="https://n8n.io" target="_blank" class="logo">
|
||||
<img src="/n8n-icon-small.png" class="icon" alt="n8n.io"/>
|
||||
|
||||
</el-tooltip>
|
||||
<a href="https://n8n.io" class="logo-text" target="_blank" slot="title">
|
||||
n8n.io
|
||||
<span class="logo-text" slot="title">n8n.io</span>
|
||||
</a>
|
||||
</el-menu-item>
|
||||
|
||||
|
|
@ -149,6 +144,12 @@
|
|||
</a>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="help-about">
|
||||
<template slot="title">
|
||||
<font-awesome-icon class="about-icon" icon="info"/>
|
||||
<span slot="title" class="item-title">About n8n</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
|
||||
</el-menu>
|
||||
|
|
@ -168,6 +169,7 @@ import {
|
|||
IWorkflowDataUpdate,
|
||||
} from '../Interface';
|
||||
|
||||
import About from '@/components/About.vue';
|
||||
import CredentialsEdit from '@/components/CredentialsEdit.vue';
|
||||
import CredentialsList from '@/components/CredentialsList.vue';
|
||||
import ExecutionsList from '@/components/ExecutionsList.vue';
|
||||
|
|
@ -196,6 +198,7 @@ export default mixins(
|
|||
.extend({
|
||||
name: 'MainHeader',
|
||||
components: {
|
||||
About,
|
||||
CredentialsEdit,
|
||||
CredentialsList,
|
||||
ExecutionsList,
|
||||
|
|
@ -204,6 +207,7 @@ export default mixins(
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
aboutDialogVisible: false,
|
||||
isCollapsed: true,
|
||||
credentialNewDialogVisible: false,
|
||||
credentialOpenDialogVisible: false,
|
||||
|
|
@ -251,9 +255,6 @@ export default mixins(
|
|||
currentWorkflow (): string {
|
||||
return this.$route.params.name;
|
||||
},
|
||||
versionCli (): string {
|
||||
return this.$store.getters.versionCli;
|
||||
},
|
||||
workflowExecution (): IExecutionResponse | null {
|
||||
return this.$store.getters.getWorkflowExecution;
|
||||
},
|
||||
|
|
@ -269,6 +270,9 @@ export default mixins(
|
|||
this.$store.commit('setWorkflowExecutionData', null);
|
||||
this.updateNodesExecutionIssues();
|
||||
},
|
||||
closeAboutDialog () {
|
||||
this.aboutDialogVisible = false;
|
||||
},
|
||||
closeWorkflowOpenDialog () {
|
||||
this.workflowOpenDialogVisible = false;
|
||||
},
|
||||
|
|
@ -434,6 +438,8 @@ export default mixins(
|
|||
this.saveCurrentWorkflow();
|
||||
} else if (key === 'workflow-save-as') {
|
||||
this.saveCurrentWorkflow(true);
|
||||
} else if (key === 'help-about') {
|
||||
this.aboutDialogVisible = true;
|
||||
} else if (key === 'workflow-settings') {
|
||||
this.workflowSettingsDialogVisible = true;
|
||||
} else if (key === 'workflow-new') {
|
||||
|
|
@ -466,6 +472,9 @@ export default mixins(
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.about-icon {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#collapse-change-button {
|
||||
position: absolute;
|
||||
|
|
@ -520,7 +529,11 @@ export default mixins(
|
|||
}
|
||||
}
|
||||
|
||||
a.logo-text {
|
||||
a.logo {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 5px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue