mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
✨ Change the UI of the Nodes Panel (#1855)
* Add codex search properties to node types * implement basic styles * update header designs * update node list designs * add trigger icon * refactor node creator list * implement categories and subcategories * fix up spacing * add arrows * implement navigatable list * implement more of feature * implement navigation * add transitions * fix lint issues * fix overlay * ⚡ Get and add codex categories * fix up design * update borders * implement no-matches view * fix preview bug * add color to search * clean up borders * add comma * Revert "Merge branch 'add-codex-data' of github.com:n8n-io/n8n into PROD-819-nodes-panel-redesign" 38b7d7ead19ab069f3f00a1ae6b6267eee55122a * use new impl * remove empty categories * update scrolling, hide start node * make scrollable * remove text while subcategory panel is open * fix up spacing * fix lint issues * update descriptions * update path * update images * fix tags manager * give min height to image * gst * update clear color * update font size * fix firefox spacing * close on click outside * add external link icon * update iterator key * add client side caching for images * update caching header * ⚡️ Add properties to codex for nodes panel (#1854) * ⚡ Get and add codex categories * ⚡ Add parens to evaluation + destructuring * 🔥 Remove non-existing class reference * ⚡ Add alias to codex property * move constants * 🔨 Rename CodexCategories to CodexData * ✏️ Update getCodex documentation * refactor and move * refactor no results view * more refactoring * refactor subcategory panel * more refactoring * update text * update no results view * add miscellaneous to end of list * address design feedback * reimplement node search * fix up clear * update placeholder color * impl transition * focus on tab * update spacing * fix transition bug on start * fix up x * fix position * build * safari fix * remove input changes * css bleed issue with image * update css value * clean up * simplify impl * rename again * rename again * rename all * fix hover bug * remove keep alive * delete icon * update interface type * refactor components * update scss to module * clean up impl * clean up colors as vars * fix indentation * clean up scss * clean up scss * clean up scss * clean up scss * Clean up files * update logic to be more efficient * fix search bug * update type * remove unused * clean up js * update scrollable, border impl, transition * fix simicolon * build * update search * address max's comments * change icon border radius * change margin * update icon size * update icon size * update slide transition out * add comma * remove full * update trigger icon size * fix image size * address design feedback * update external link icons * address codacy issues * support custom nodes without codex file * address jan's feedback * address Ben's comments * add subcategory index * open/close categories with arrow keys * add lint comment * Address latest comments * ⚡ Minor changes Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Mutasem <mutdmour@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Ben Hesseldieck
101
packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
Normal file
101
packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<SlideTransition>
|
||||
<div class="node-creator" v-if="active" v-click-outside="closeCreator">
|
||||
<MainPanel @nodeTypeSelected="nodeTypeSelected" :categorizedItems="categorizedItems" :categoriesWithNodes="categoriesWithNodes" :searchItems="searchItems"></MainPanel>
|
||||
</div>
|
||||
</SlideTransition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Vue from 'vue';
|
||||
|
||||
import { ICategoriesWithNodes, INodeCreateElement } from '@/Interface';
|
||||
import { INodeTypeDescription } from 'n8n-workflow';
|
||||
import SlideTransition from '../transitions/SlideTransition.vue';
|
||||
import { HIDDEN_NODES } from '@/constants';
|
||||
|
||||
import MainPanel from './MainPanel.vue';
|
||||
import { getCategoriesWithNodes, getCategorizedList } from './helpers';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'NodeCreator',
|
||||
components: {
|
||||
MainPanel,
|
||||
SlideTransition,
|
||||
},
|
||||
props: [
|
||||
'active',
|
||||
],
|
||||
computed: {
|
||||
visibleNodeTypes(): INodeTypeDescription[] {
|
||||
return this.$store.getters.allNodeTypes
|
||||
.filter((nodeType: INodeTypeDescription) => {
|
||||
return !HIDDEN_NODES.includes(nodeType.name);
|
||||
});
|
||||
},
|
||||
categoriesWithNodes(): ICategoriesWithNodes {
|
||||
return getCategoriesWithNodes(this.visibleNodeTypes);
|
||||
},
|
||||
categorizedItems(): INodeCreateElement[] {
|
||||
return getCategorizedList(this.categoriesWithNodes);
|
||||
},
|
||||
searchItems(): INodeCreateElement[] {
|
||||
const sorted = [...this.visibleNodeTypes];
|
||||
sorted.sort((a, b) => {
|
||||
const textA = a.displayName.toLowerCase();
|
||||
const textB = b.displayName.toLowerCase();
|
||||
return textA < textB ? -1 : textA > textB ? 1 : 0;
|
||||
});
|
||||
|
||||
return sorted.map((nodeType) => ({
|
||||
type: 'node',
|
||||
category: '',
|
||||
key: `${nodeType.name}`,
|
||||
properties: {
|
||||
nodeType,
|
||||
subcategory: '',
|
||||
},
|
||||
includedByTrigger: nodeType.group.includes('trigger'),
|
||||
includedByRegular: !nodeType.group.includes('trigger'),
|
||||
}));
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeCreator () {
|
||||
this.$emit('closeNodeCreator');
|
||||
},
|
||||
nodeTypeSelected (nodeTypeName: string) {
|
||||
this.$emit('nodeTypeSelected', nodeTypeName);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ *, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.node-creator {
|
||||
position: fixed;
|
||||
top: $--header-height;
|
||||
right: 0;
|
||||
width: $--node-creator-width;
|
||||
height: 100%;
|
||||
background-color: $--node-creator-background-color;
|
||||
z-index: 200;
|
||||
color: $--node-creator-text-color;
|
||||
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
content: ' ';
|
||||
border-left: 1px solid $--node-creator-border-color;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user