mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-08 19:37:29 -08:00
3f9127955a
Some checks failed
Test Master / install-and-build (push) Has been cancelled
Test Master / Unit tests (18.x) (push) Has been cancelled
Test Master / Unit tests (20.x) (push) Has been cancelled
Test Master / Unit tests (22.4) (push) Has been cancelled
Test Master / Lint (push) Has been cancelled
Test Master / Notify Slack on failure (push) Has been cancelled
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
96 lines
2.3 KiB
Vue
96 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import type { XYPosition } from '@/Interface';
|
|
import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
|
|
import { useI18n } from '@/composables/useI18n';
|
|
|
|
export interface Props {
|
|
showTooltip: boolean;
|
|
position: XYPosition;
|
|
}
|
|
|
|
const i18n = useI18n();
|
|
|
|
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>
|
|
|
|
<template>
|
|
<div
|
|
ref="container"
|
|
:class="$style.canvasAddButton"
|
|
:style="containerCssVars"
|
|
data-test-id="canvas-add-button"
|
|
>
|
|
<n8n-tooltip
|
|
placement="top"
|
|
:visible="showTooltip"
|
|
:disabled="nodeCreatorStore.showScrim"
|
|
:popper-class="$style.tooltip"
|
|
:show-after="700"
|
|
>
|
|
<button :class="$style.button" data-test-id="canvas-plus-button" @click="$emit('click')">
|
|
<font-awesome-icon icon="plus" size="lg" />
|
|
</button>
|
|
<template #content>
|
|
{{ i18n.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting') }}
|
|
</template>
|
|
</n8n-tooltip>
|
|
<p :class="$style.label" v-text="i18n.baseText('nodeView.canvasAddButton.addFirstStep')" />
|
|
</div>
|
|
</template>
|
|
|
|
<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 clicks wouldn't register
|
|
z-index: var(--z-index-canvas-add-button);
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|