d01f7d4d93
* 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>
138 lines
2.4 KiB
Vue
138 lines
2.4 KiB
Vue
<template>
|
|
<Draggable type="panel-resize" @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd" :class="$style.dragContainer">
|
|
<template v-slot="{ isDragging }">
|
|
<div
|
|
:class="{ [$style.dragButton]: true }"
|
|
>
|
|
<span v-if="canMoveLeft" :class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }">
|
|
<font-awesome-icon icon="arrow-left" />
|
|
</span>
|
|
<span v-if="canMoveRight" :class="{ [$style.rightArrow]: true, [$style.visible]: isDragging }">
|
|
<font-awesome-icon icon="arrow-right" />
|
|
</span>
|
|
<div :class="$style.grid">
|
|
<div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Draggable>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import mixins from 'vue-typed-mixins';
|
|
import Draggable from './Draggable.vue';
|
|
import dragging from './Draggable.vue';
|
|
|
|
export default mixins(dragging).extend({
|
|
components: {
|
|
Draggable,
|
|
},
|
|
props: {
|
|
canMoveRight: {
|
|
type: Boolean,
|
|
},
|
|
canMoveLeft: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
methods: {
|
|
onDrag(e: {x: number, y: number}) {
|
|
this.$emit('drag', e);
|
|
},
|
|
onDragStart() {
|
|
this.$emit('dragstart');
|
|
},
|
|
onDragEnd() {
|
|
this.$emit('dragend');
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.dragContainer {
|
|
pointer-events: all;
|
|
}
|
|
.dragButton {
|
|
background-color: var(--color-background-base);
|
|
width: 64px;
|
|
height: 21px;
|
|
border-top-left-radius: var(--border-radius-base);
|
|
border-top-right-radius: var(--border-radius-base);
|
|
cursor: grab;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: visible;
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
&:hover {
|
|
.leftArrow, .rightArrow {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
color: var(--color-background-xlight);
|
|
font-size: var(--font-size-3xs);
|
|
visibility: hidden;
|
|
top: 0;
|
|
}
|
|
|
|
.leftArrow {
|
|
composes: arrow;
|
|
left: -16px;
|
|
}
|
|
|
|
.rightArrow {
|
|
composes: arrow;
|
|
right: -16px;
|
|
}
|
|
|
|
.grid {
|
|
> div {
|
|
display: flex;
|
|
|
|
&:first-child {
|
|
> div {
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
> div {
|
|
height: 2px;
|
|
width: 2px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-foreground-xdark);
|
|
margin-right: 4px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|