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
86
packages/editor-ui/src/components/NodeCreator/NodeItem.vue
Normal file
86
packages/editor-ui/src/components/NodeCreator/NodeItem.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template functional>
|
||||
<div :class="{[$style['node-item']]: true, [$style.bordered]: props.bordered}">
|
||||
<NodeIcon :class="$style['node-icon']" :nodeType="props.nodeType" :style="{color: props.nodeType.defaults.color}" />
|
||||
<div>
|
||||
<div :class="$style.details">
|
||||
<span :class="$style.name">{{props.nodeType.displayName}}</span>
|
||||
<span :class="$style['trigger-icon']">
|
||||
<TriggerIcon v-if="$options.isTrigger(props.nodeType)" />
|
||||
</span>
|
||||
</div>
|
||||
<div :class="$style.description">
|
||||
{{props.nodeType.description}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import Vue from 'vue';
|
||||
import { INodeTypeDescription } from 'n8n-workflow';
|
||||
|
||||
import NodeIcon from '../NodeIcon.vue';
|
||||
import TriggerIcon from '../TriggerIcon.vue';
|
||||
|
||||
Vue.component('NodeIcon', NodeIcon);
|
||||
Vue.component('TriggerIcon', TriggerIcon);
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'active',
|
||||
'filter',
|
||||
'nodeType',
|
||||
'bordered',
|
||||
],
|
||||
isTrigger (nodeType: INodeTypeDescription): boolean {
|
||||
return nodeType.group.includes('trigger');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.node-item {
|
||||
padding: 11px 8px 11px 0;
|
||||
margin-left: 15px;
|
||||
margin-right: 12px;
|
||||
display: flex;
|
||||
|
||||
&.bordered {
|
||||
border-bottom: 1px solid $--node-creator-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
min-width: 26px;
|
||||
max-width: 26px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 2px;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
color: $--node-creator-description-color;
|
||||
}
|
||||
|
||||
.trigger-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user