aa3d9c7fea
* test: Add basic e2e tests for node creator * add spec to check if all nodes are rendered * revert SearchBar.vue changes * fixed manual key typo Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> * Add custom component tests * Fix wrongly resolved merge conflcit Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<div :class="$style.container" :style="containerCssVars" ref="container" data-test-id="canvas-add-button">
|
|
<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :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 lang="ts">
|
|
import Vue from 'vue';
|
|
import { XYPosition } from '@/Interface';
|
|
import { mapStores } from 'pinia';
|
|
import { useNodeCreatorStore } from '@/stores/nodeCreator';
|
|
|
|
export default Vue.extend({
|
|
name: 'CanvasAddButton',
|
|
props: {
|
|
showTooltip: {
|
|
type: Boolean,
|
|
},
|
|
position: {
|
|
type: Array,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapStores(
|
|
useNodeCreatorStore,
|
|
),
|
|
containerCssVars(): Record<string, string> {
|
|
const position = this.position as XYPosition;
|
|
return {
|
|
'--trigger-placeholder-left-position': `${position[0]}px`,
|
|
'--trigger-placeholder-top-position': `${position[1]}px`,
|
|
};
|
|
},
|
|
isScrimActive(): boolean {
|
|
return this.nodeCreatorStore.showScrim;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.container {
|
|
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>
|