mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-09 11:57:28 -08:00
766501723b
* WIP: Nodeview * Replace types * Finish N8nPlus endpoint type * Working on connector * Apply prettier * Fixed prettier issues * Debugging rendering * Fixed connectorrs position recalc * Fix snapping and output labels, WIP dragging * Fix N8nPlus endpoint rendering issues * Cleanup * Fix undo/redo and canvas add button position, cleanup * Cleanup * Revert accidental CLI changes * Fix pnpm-lock * Address bugs that came up during review * Reset CLI package from master * Various fixes * Fix run items label toggling * Linter fixes * Fix stalk size for larger run items label * Remove comment * Correctly reset workspace after renaming the node * Fix canvas e2e tests * Fix undo/redo tests * Fix stalk positioning and triggering of endpoint overlays * Repaint connections on pin removal * Limit repaintings * Unbind jsPlumb events on deactivation * Fix jsPlumb managment of Sticky and minor memort managment improvments * Address rest of PR points * Lint fix * Copy patches folder to docker * Fix e2e tests * set allowNonAppliedPatches to allow build * fix(editor): Handling router errors when navigation is canceled by user (#5271) * 🔨 Handling router errors in main sidebar, removing unused code * 🔨 Handling router errors in modals * ci(core): Fix docker nightly/custom image build (no-changelog) (#5284) * ci(core): Copy patches dir to Docker (no-changelog) * Update patch * Update package-lock * reapply the patch * skip patchedDependencies after the frontend is built --------- Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in> * Fix connector hover state on success * Remove allowNonAppliedPatches from package.json --------- Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
:class="$style.canvasAddButton"
|
|
:style="containerCssVars"
|
|
ref="container"
|
|
data-test-id="canvas-add-button"
|
|
>
|
|
<n8n-tooltip
|
|
placement="top"
|
|
:value="showTooltip"
|
|
manual
|
|
:disabled="nodeCreatorStore.showScrim"
|
|
:popper-class="$style.tooltip"
|
|
:open-delay="700"
|
|
>
|
|
<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
|
|
<font-awesome-icon icon="plus" size="lg" />
|
|
</button>
|
|
<template #content>
|
|
<p v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')" />
|
|
</template>
|
|
</n8n-tooltip>
|
|
<p :class="$style.label" v-text="$locale.baseText('nodeView.canvasAddButton.addFirstStep')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { XYPosition } from '@/Interface';
|
|
import { useNodeCreatorStore } from '@/stores/nodeCreator';
|
|
|
|
export interface Props {
|
|
showTooltip: boolean;
|
|
position: XYPosition;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const nodeCreatorStore = useNodeCreatorStore();
|
|
const containerCssVars = computed(() => ({
|
|
'--trigger-placeholder-left-position': `${props.position[0]}px`,
|
|
'--trigger-placeholder-top-position': `${props.position[1]}px`,
|
|
}));
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.canvasAddButton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: absolute;
|
|
top: var(--trigger-placeholder-top-position);
|
|
left: var(--trigger-placeholder-left-position);
|
|
// We have to increase z-index to make sure it's higher than selecting box in NodeView
|
|
// otherwise the clics wouldn't register
|
|
z-index: 101;
|
|
|
|
&:hover .button svg path {
|
|
fill: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background: var(--color-foreground-xlight);
|
|
border: 2px dashed var(--color-foreground-xdark);
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
|
|
min-width: 100px;
|
|
min-height: 100px;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 26px !important;
|
|
height: 40px;
|
|
path {
|
|
fill: var(--color-foreground-xdark);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
max-width: 180px;
|
|
}
|
|
|
|
.label {
|
|
width: max-content;
|
|
font-weight: var(--font-weight-bold);
|
|
font-size: var(--font-size-m);
|
|
line-height: var(--font-line-height-xloose);
|
|
color: var(--color-text-dark);
|
|
margin-top: var(--spacing-2xs);
|
|
}
|
|
</style>
|