feat(editor): Fix ResourceLocator dropdown style (#5714)

* fix(editor): Fix ResourceLocator dropdown style * Fix other popper classes * Fix app hanging if loading many remote parameter options * Make ResourceLocatorDropdown flex * Override scrollbar styles * Hide resource locator on outside click not input blur
n8n-io · Mar 22, 2023 · 02810a9 · 02810a9
1 parent cc9fe7b
commit 02810a9
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 16 deletions.
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -206,7 +206,7 @@ export default Vue.extend({
 	border-bottom: var(--border-base);
 }
 
-.tooltipPopper {
+:root .tooltipPopper {
 	max-width: 400px;
 
 	li {

diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -149,7 +149,7 @@ export default mixins(Locale).extend({
 	--select-option-line-height: 1;
 }
 
-.limitPopperWidth {
+:root .limitPopperWidth {
 	width: 0;
 
 	li > span {

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
@@ -787,10 +787,13 @@ export default mixins(
 		isSecretParameter(): boolean {
 			return this.getArgument('password') === true;
 		},
+		remoteParameterOptionsKeys(): string[] {
+			return (this.remoteParameterOptions || []).map((o) => o.name);
+		},
 	},
 	methods: {
 		isRemoteParameterOption(option: INodePropertyOptions) {
-			return this.remoteParameterOptions.map((o) => o.name).includes(option.name);
+			return this.remoteParameterOptionsKeys.includes(option.name);
 		},
 		credentialSelected(updateInformation: INodeUpdatePropertiesInformation) {
 			// Update the values on the node

diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -5,6 +5,7 @@
 		:popper-class="$style.popover"
 		:value="show"
 		trigger="manual"
+		v-click-outside="onClickOutside"
 	>
 		<div :class="$style.messageContainer" v-if="errorView">
 			<slot name="error"></slot>
@@ -15,7 +16,6 @@
 				:value="filter"
 				:clearable="true"
 				@input="onFilterInput"
-				@blur="onSearchBlur"
 				ref="search"
 				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
 			>
@@ -36,7 +36,7 @@
 		<div
 			v-else-if="!errorView"
 			ref="resultsContainer"
-			:class="{ [$style.container]: true, [$style.pushDownResults]: filterable }"
+			:class="$style.container"
 			@scroll="onResultsEnd"
 		>
 			<div
@@ -65,7 +65,7 @@
 				</div>
 			</div>
 			<div v-if="loading && !errorView">
-				<div v-for="(_, i) in 3" :key="i" :class="$style.loadingItem">
+				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
 					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
 				</div>
 			</div>
@@ -201,7 +201,7 @@ export default Vue.extend({
 		onFilterInput(value: string) {
 			this.$emit('filter', value);
 		},
-		onSearchBlur() {
+		onClickOutside() {
 			this.$emit('hide');
 		},
 		onItemClick(selected: string) {
@@ -253,19 +253,32 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-.popover {
+:root .popover {
+	--content-height: 236px;
 	padding: 0;
 	border: var(--border-base);
-}
+	display: flex;
+	max-height: calc(var(--content-height) + var(--spacing-xl));
+	flex-direction: column;
+
+	& ::-webkit-scrollbar {
+		width: 12px;
+	}
 
-.pushDownResults {
-	padding-top: 36px;
+	& ::-webkit-scrollbar-thumb {
+		border-radius: 12px;
+		background: var(--color-foreground-dark);
+		border: 3px solid white;
+	}
+
+	& ::-webkit-scrollbar-thumb:hover {
+		background: var(--color-foreground-xdark);
+	}
 }
 
 .container {
 	position: relative;
-	max-height: 236px;
-	overflow: scroll;
+	overflow: auto;
 }
 
 .messageContainer {
@@ -279,8 +292,6 @@ export default Vue.extend({
 	border-bottom: var(--border-base);
 	--input-border-color: none;
 	--input-font-size: var(--font-size-2xs);
-	position: absolute;
-	top: 0;
 	width: 100%;
 	z-index: 1;
 }

diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -82,7 +82,7 @@ const containerCssVars = computed(() => ({
 	}
 }
 
-.tooltip {
+:root .tooltip {
 	max-width: 180px;
 }