mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡ Add "About n8n" to Help in sidebar

Browse source
This commit is contained in:
Jan Oberhauser 2020-01-09 21:53:26 -06:00
parent 9a2188f22f
commit 29633cfd1f
2 changed files with 113 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/editor-ui/src/components/About.vue Normal file
View 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>

37
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -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;