From 1fc7392eb589b092b44ea90c69ca1e0260a7bbad Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 22 Jun 2023 14:42:10 +0300
Subject: [PATCH] fix: fix ndv and dialog design

---
 packages/design-system/src/css/dialog.scss               | 9 +++++++--
 packages/editor-ui/src/components/HoverableNodeIcon.vue  | 2 +-
 packages/editor-ui/src/components/InputPanel.vue         | 6 +-----
 packages/editor-ui/src/components/NDVDraggablePanels.vue | 1 +
 packages/editor-ui/src/components/Node.vue               | 6 ++----
 packages/editor-ui/src/components/NodeDetailsView.vue    | 7 +++----
 packages/editor-ui/src/components/ParameterInput.vue     | 4 ++--
 packages/editor-ui/src/components/ParameterInputFull.vue | 3 +--
 packages/editor-ui/src/components/RunData.vue            | 7 +++++--
 packages/editor-ui/src/views/CanvasAddButton.vue         | 3 +--
 10 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/design-system/src/css/dialog.scss b/packages/design-system/src/css/dialog.scss
index b2b1c19152..4eca1fddc7 100644
--- a/packages/design-system/src/css/dialog.scss
+++ b/packages/design-system/src/css/dialog.scss
@@ -10,8 +10,13 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	padding: var(--spacing-2xl);
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: hsla(247deg, 14%, 30%, 0.75);
+}
+
+@include mixins.b(overlay-dialog) {
+	width: 100%;
+	height: 100%;
+	padding-top: var(--spacing-2xl);
 }
 
 @include mixins.b(dialog) {
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index a4fe8fe2d7..5e79a51cd9 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -7,7 +7,7 @@
 		@mouseleave="showTooltip = false"
 	>
 		<div :class="$style.tooltip">
-			<n8n-tooltip placement="top" manual :value="showTooltip">
+			<n8n-tooltip placement="top" :visible="showTooltip">
 				<template #content>
 					<div v-text="nodeType.displayName"></div>
 				</template>
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 8e91e5ef27..eefe22a7e4 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -63,11 +63,7 @@
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
 				}}</n8n-text>
-				<n8n-tooltip
-					v-if="!readOnly"
-					:manual="true"
-					:value="showDraggableHint && showDraggableHintWithDelay"
-				>
+				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
 					<template #content>
 						<div
 							v-html="
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index bd822b28c9..31eda98acb 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -305,6 +305,7 @@ export default defineComponent({
 			return px / this.windowWidth;
 		},
 		relativeWidthToPx(relativeWidth: number) {
+			console.log('relativeWidth', relativeWidth, this.windowWidth);
 			return relativeWidth * this.windowWidth;
 		},
 		onResizeStart() {
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 55a8b03cfc..113f7f266a 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -70,8 +70,7 @@
 				<div class="node-trigger-tooltip__wrapper">
 					<n8n-tooltip
 						placement="top"
-						manual
-						:value="showTriggerNodeTooltip"
+						:visible="showTriggerNodeTooltip"
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>
@@ -82,8 +81,7 @@
 					<n8n-tooltip
 						v-if="isTriggerNode"
 						placement="top"
-						manual
-						:value="pinDataDiscoveryTooltipVisible"
+						:visible="pinDataDiscoveryTooltipVisible"
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 767a61cebc..30d1848958 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -4,15 +4,15 @@
 		:before-close="close"
 		:show-close="false"
 		class="data-display-wrapper ndv-wrapper"
+		overlay-class="data-display-overlay"
 		width="auto"
 		append-to-body
 		data-test-id="ndv"
 	>
 		<n8n-tooltip
 			placement="bottom-start"
-			:value="showTriggerWaitingWarning"
+			:visible="showTriggerWaitingWarning"
 			:disabled="!showTriggerWaitingWarning"
-			manual
 		>
 			<template #content>
 				<div :class="$style.triggerWarning">
@@ -698,9 +698,8 @@ export default defineComponent({
 }
 
 .data-display-wrapper {
-	height: 93%;
+	height: calc(100% - var(--spacing-2xl));
 	width: 100%;
-	margin-top: var(--spacing-xl) !important;
 	background: none;
 	border: none;
 
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 85078da31b..e0c5075422 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -197,7 +197,7 @@
 				ref="inputField"
 				type="datetime"
 				:size="inputSize"
-				:value="displayValue"
+				:modelValue="displayValue"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				:placeholder="
@@ -335,7 +335,7 @@
 				class="switch-input"
 				ref="inputField"
 				active-color="#13ce66"
-				:value="displayValue"
+				:modelValue="displayValue"
 				:disabled="isReadOnly"
 				@update:modelValue="valueChanged"
 			/>
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 03ae599b23..762e5061ff 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -30,8 +30,7 @@
 			<template #default="{ droppable, activeDrop }">
 				<n8n-tooltip
 					placement="left"
-					:manual="true"
-					:value="showMappingTooltip"
+					:visible="showMappingTooltip"
 					:buttons="dataMappingTooltipButtons"
 				>
 					<template #content>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 5b35d075a7..80e2348ab7 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -74,8 +74,11 @@
 					placement="bottom-end"
 					v-if="canPinData && jsonData && jsonData.length > 0"
 					v-show="!editMode.enabled"
-					:value="pinDataDiscoveryTooltipVisible"
-					:manual="isControlledPinDataTooltip"
+					:visible="
+						isControlledPinDataTooltip
+							? isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible
+							: undefined
+					"
 				>
 					<template #content v-if="!isControlledPinDataTooltip">
 						<div :class="$style.tooltipContainer">
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 4dace734ab..bf5c391473 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -7,8 +7,7 @@
 	>
 		<n8n-tooltip
 			placement="top"
-			:value="showTooltip"
-			manual
+			:visible="showTooltip"
 			:disabled="nodeCreatorStore.showScrim"
 			:popper-class="$style.tooltip"
 			:open-delay="700"