admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor-ui): Resizable main panel (#3980)

Browse Source 
* Introduce node deprecation (#3930)

✨ Introduce node deprecation

* 🚧 Scaffold out Code node

* 👕 Fix lint

* 📘 Create types file

* 🚚 Rename theme

* 🔥 Remove unneeded prop

* ⚡ Override keybindings

* ⚡ Expand lintings

* ⚡ Create editor content getter

* 🚚 Ensure all helpers use `$`

* ✨ Add autocompletion

* ♻️ Refactore Resize UI lib component, allow to use it in different than n8n-sticky context

* 🚧 Use variable width for node settings and allow for resizing

* ✨ Use store to keep track of wide and regular main panel widths

* ♻️ Extract Resize wrapper from the Sticky and create a story for it

* 🐛 Fixed cherry-pick conflicts

* ⚡ Filter out welcome note node

* ⚡ Convey error line number

* ⚡ Highlight error line

* ⚡ Restore logging from node

* ✨ More autocompletions

* ⚡ Streamline completions

* 💄 Fix drag-button border

* ✏️ Update placeholders

* ⚡ Update linter to new methods

* ✨ Preserve main panel width in local storage

* 🐛 Fallback to max size size if window is too big

* 🔥 Remove `$nodeItem` completions

* ⚡ Re-update placeholders

* 🎨 Fix formatting

* 📦 Update `package-lock.json`

* ⚡ Refresh with multi-line empty string

* ♻️ Refactored DraggablePanels to use relative units and implemented independent resizing, cleaned store

* 🐛 Re-implement dragging indicators and move border styles to NDVDraggablePanels component

* 🚨 Fix semis

* 🚨 Remove unsused UI state props

* ♻️ Use only relative left position and calculate right based on it, fix quirks

* 🚨Fix linting error

* ♻️ Store and retrieve main panel dimensions from store to make them persistable in the same app mount session

* 🐛 Prevent resizing of unknown nodes

* ♻️ Add typings for `nodeType` prop, remove unused `convertRemToPixels` import

* 🏷️ Add typings for `nodeType` prop in NodeSettings.vue

* 🐛 Prevent the main panel resize below 280px

* 🐛 Fix inputless panel left position

* ✨ Resize resource locator on main panel size change

* 🐛 Resize resource locator on window resize

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
This commit is contained in:
OlegIvaniv
2022-09-22 17:41:15 +02:00
committed by GitHub
parent 8eeed77edb
commit d01f7d4d93
16 changed files with 510 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/editor-ui/src/components/NodeSettings.vue
View File

@@ -1,5 +1,6 @@
<template>
<div :class="{'node-settings': true, 'dragging': dragging}" @keydown.stop>
<div :class="{
'node-settings': true, 'dragging': dragging }" @keydown.stop>
<div :class="$style.header">
<div class="header-side-menu">
<NodeTitle class="node-name" :value="node && node.name" :nodeType="nodeType" @input="nameChanged" :readOnly="isReadOnly"></NodeTitle>
@@ -96,7 +97,7 @@
</template>
<script lang="ts">
import Vue from 'vue';
import Vue, { PropType } from 'vue';
import {
INodeTypeDescription,
INodeParameters,
@@ -113,7 +114,8 @@ import {
import {
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
} from '../constants';
MAIN_NODE_PANEL_WIDTH,
} from '@/constants';
import NodeTitle from '@/components/NodeTitle.vue';
import ParameterInputFull from '@/components/ParameterInputFull.vue';
@@ -148,13 +150,6 @@ export default mixins(
NodeExecuteButton,
},
computed: {
nodeType (): INodeTypeDescription | null {
if (this.node) {
return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
}
return null;
},
nodeTypeName(): string {
if (this.nodeType) {
const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
@@ -224,6 +219,9 @@ export default mixins(
sessionId: {
type: String,
},
nodeType: {
type: Object as PropType<INodeTypeDescription>,
},
},
data () {
return {
@@ -336,6 +334,7 @@ export default mixins(
] as INodeProperties[],
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
MAIN_NODE_PANEL_WIDTH,
};
},
watch: {
@@ -641,13 +640,9 @@ export default mixins(
<style lang="scss">
.node-settings {
overflow: hidden;
min-width: 360px;
max-width: 360px;
background-color: var(--color-background-xlight);
height: 100%;
border: var(--border-base);
border-radius: var(--border-radius-large);
box-shadow: 0 4px 16px rgb(50 61 85 / 10%);
width: 100%;
.no-parameters {
margin-top: var(--spacing-xs);