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

refactor node creator list

Browse source
This commit is contained in:
Mutasem 2021-05-28 10:23:38 +03:00
parent d75141eb6c
commit 624d35deb8
2 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/editor-ui/src/components/NodeCreateIterator.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<div>
<node-create-item
v-for="(nodeType, index) in nodeTypes"
:active="index === activeIndex"
:nodeType="nodeType"
v-bind:key="nodeType.name"
@nodeTypeSelected="nodeTypeSelected"
></node-create-item>
</div>
</template>
<script lang="ts">
import NodeCreateItem from '@/components/NodeCreateItem.vue';
import Vue from 'vue';
export default Vue.extend({
name: 'NodeCreateIterator',
components: {
NodeCreateItem,
},
props: ['nodeTypes', 'activeIndex'],
methods: {
nodeTypeSelected (nodeTypeName: string) {
this.$emit('nodeTypeSelected', nodeTypeName);
},
}
});
</script>

20
packages/editor-ui/src/components/NodeCreateList.vue
View file

@ -11,12 +11,10 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="node-create-list-wrapper"> <div class="node-create-list-wrapper">
<div class="node-create-list"> <div v-if="filteredNodeTypes.length === 0" class="no-results">
<div v-if="filteredNodeTypes.length === 0" class="no-results"> 🙃 no nodes matching your search criteria
🙃 no nodes matching your search criteria
</div>
<node-create-item :active="index === activeNodeTypeIndex" :nodeType="nodeType" v-for="(nodeType, index) in filteredNodeTypes" v-bind:key="nodeType.name" @nodeTypeSelected="nodeTypeSelected"></node-create-item>
</div> </div>
<NodeCreateIterator :nodeTypes="filteredNodeTypes" :activeIndex="activeNodeTypeIndex" />
</div> </div>
</div> </div>
</template> </template>
@ -28,11 +26,13 @@ import { INodeTypeDescription } from 'n8n-workflow';
import NodeCreateItem from '@/components/NodeCreateItem.vue'; import NodeCreateItem from '@/components/NodeCreateItem.vue';
import mixins from "vue-typed-mixins"; import mixins from "vue-typed-mixins";
import NodeCreateIterator from "./NodeCreateIterator.vue";
export default mixins(externalHooks).extend({ export default mixins(externalHooks).extend({
name: 'NodeCreateList', name: 'NodeCreateList',
components: { components: {
NodeCreateItem, NodeCreateItem,
NodeCreateIterator,
}, },
data () { data () {
return { return {
@ -127,16 +127,6 @@ export default mixins(externalHooks).extend({
max-height: 100vh; max-height: 100vh;
} }
.node-create-list {
position: relative;
width: 100%;
}
.group-name {
font-size: 0.9em;
padding: 15px 0 5px 10px;
}
.el-input { .el-input {
background-color: $--node-creator-search-background-color; background-color: $--node-creator-search-background-color;
color: $--node-creator-search-placeholder-color; color: $--node-creator-search-placeholder-color;