mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: fix ndv and dialog design

Browse source
This commit is contained in:
Alex Grozav 2023-06-22 14:42:10 +03:00
parent 206baebf77
commit 1fc7392eb5
10 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/design-system/src/css/dialog.scss
View file

@ -10,8 +10,13 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
padding: var(--spacing-2xl); background-color: hsla(247deg, 14%, 30%, 0.75);
background-color: rgba(0, 0, 0, 0.5); }
@include mixins.b(overlay-dialog) {
width: 100%;
height: 100%;
padding-top: var(--spacing-2xl);
} }
@include mixins.b(dialog) { @include mixins.b(dialog) {

2
packages/editor-ui/src/components/HoverableNodeIcon.vue
View file

@ -7,7 +7,7 @@
@mouseleave="showTooltip = false" @mouseleave="showTooltip = false"
> >
<div :class="$style.tooltip"> <div :class="$style.tooltip">
<n8n-tooltip placement="top" manual :value="showTooltip"> <n8n-tooltip placement="top" :visible="showTooltip">
<template #content> <template #content>
<div v-text="nodeType.displayName"></div> <div v-text="nodeType.displayName"></div>
</template> </template>

6
packages/editor-ui/src/components/InputPanel.vue
View file

@ -63,11 +63,7 @@
<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ <n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
$locale.baseText('ndv.input.noOutputData.title') $locale.baseText('ndv.input.noOutputData.title')
}}</n8n-text> }}</n8n-text>
<n8n-tooltip <n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
v-if="!readOnly"
:manual="true"
:value="showDraggableHint && showDraggableHintWithDelay"
>
<template #content> <template #content>
<div <div
v-html=" v-html="

1
packages/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -305,6 +305,7 @@ export default defineComponent({
return px / this.windowWidth; return px / this.windowWidth;
}, },
relativeWidthToPx(relativeWidth: number) { relativeWidthToPx(relativeWidth: number) {
console.log('relativeWidth', relativeWidth, this.windowWidth);
return relativeWidth * this.windowWidth; return relativeWidth * this.windowWidth;
}, },
onResizeStart() { onResizeStart() {

6
packages/editor-ui/src/components/Node.vue
View file

@ -70,8 +70,7 @@
<div class="node-trigger-tooltip__wrapper"> <div class="node-trigger-tooltip__wrapper">
<n8n-tooltip <n8n-tooltip
placement="top" placement="top"
manual :visible="showTriggerNodeTooltip"
:value="showTriggerNodeTooltip"
popper-class="node-trigger-tooltip__wrapper--item" popper-class="node-trigger-tooltip__wrapper--item"
> >
<template #content> <template #content>
@ -82,8 +81,7 @@
<n8n-tooltip <n8n-tooltip
v-if="isTriggerNode" v-if="isTriggerNode"
placement="top" placement="top"
manual :visible="pinDataDiscoveryTooltipVisible"
:value="pinDataDiscoveryTooltipVisible"
popper-class="node-trigger-tooltip__wrapper--item" popper-class="node-trigger-tooltip__wrapper--item"
> >
<template #content> <template #content>

7
packages/editor-ui/src/components/NodeDetailsView.vue
View file

@ -4,15 +4,15 @@
:before-close="close" :before-close="close"
:show-close="false" :show-close="false"
class="data-display-wrapper ndv-wrapper" class="data-display-wrapper ndv-wrapper"
overlay-class="data-display-overlay"
width="auto" width="auto"
append-to-body append-to-body
data-test-id="ndv" data-test-id="ndv"
> >
<n8n-tooltip <n8n-tooltip
placement="bottom-start" placement="bottom-start"
:value="showTriggerWaitingWarning" :visible="showTriggerWaitingWarning"
:disabled="!showTriggerWaitingWarning" :disabled="!showTriggerWaitingWarning"
manual
> >
<template #content> <template #content>
<div :class="$style.triggerWarning"> <div :class="$style.triggerWarning">
@ -698,9 +698,8 @@ export default defineComponent({
} }
.data-display-wrapper { .data-display-wrapper {
height: 93%; height: calc(100% - var(--spacing-2xl));
width: 100%; width: 100%;
margin-top: var(--spacing-xl) !important;
background: none; background: none;
border: none; border: none;

4
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -197,7 +197,7 @@
ref="inputField" ref="inputField"
type="datetime" type="datetime"
:size="inputSize" :size="inputSize"
:value="displayValue" :modelValue="displayValue"
:title="displayTitle" :title="displayTitle"
:disabled="isReadOnly" :disabled="isReadOnly"
:placeholder=" :placeholder="
@ -335,7 +335,7 @@
class="switch-input" class="switch-input"
ref="inputField" ref="inputField"
active-color="#13ce66" active-color="#13ce66"
:value="displayValue" :modelValue="displayValue"
:disabled="isReadOnly" :disabled="isReadOnly"
@update:modelValue="valueChanged" @update:modelValue="valueChanged"
/> />

3
packages/editor-ui/src/components/ParameterInputFull.vue
View file

@ -30,8 +30,7 @@
<template #default="{ droppable, activeDrop }"> <template #default="{ droppable, activeDrop }">
<n8n-tooltip <n8n-tooltip
placement="left" placement="left"
:manual="true" :visible="showMappingTooltip"
:value="showMappingTooltip"
:buttons="dataMappingTooltipButtons" :buttons="dataMappingTooltipButtons"
> >
<template #content> <template #content>

7
packages/editor-ui/src/components/RunData.vue
View file

@ -74,8 +74,11 @@
placement="bottom-end" placement="bottom-end"
v-if="canPinData && jsonData && jsonData.length > 0" v-if="canPinData && jsonData && jsonData.length > 0"
v-show="!editMode.enabled" v-show="!editMode.enabled"
:value="pinDataDiscoveryTooltipVisible" :visible="
:manual="isControlledPinDataTooltip" isControlledPinDataTooltip
? isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible
: undefined
"
> >
<template #content v-if="!isControlledPinDataTooltip"> <template #content v-if="!isControlledPinDataTooltip">
<div :class="$style.tooltipContainer"> <div :class="$style.tooltipContainer">

3
packages/editor-ui/src/views/CanvasAddButton.vue
View file

@ -7,8 +7,7 @@
> >
<n8n-tooltip <n8n-tooltip
placement="top" placement="top"
:value="showTooltip" :visible="showTooltip"
manual
:disabled="nodeCreatorStore.showScrim" :disabled="nodeCreatorStore.showScrim"
:popper-class="$style.tooltip" :popper-class="$style.tooltip"
:open-delay="700" :open-delay="700"