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
This commit is contained in:
OlegIvaniv 2023-03-22 15:36:10 +01:00 committed by GitHub
parent cc9fe7b91f
commit 02810a9ba3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 16 deletions

View file

@ -206,7 +206,7 @@ export default Vue.extend({
border-bottom: var(--border-base); border-bottom: var(--border-base);
} }
.tooltipPopper { :root .tooltipPopper {
max-width: 400px; max-width: 400px;
li { li {

View file

@ -149,7 +149,7 @@ export default mixins(Locale).extend({
--select-option-line-height: 1; --select-option-line-height: 1;
} }
.limitPopperWidth { :root .limitPopperWidth {
width: 0; width: 0;
li > span { li > span {

View file

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

View file

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

View file

@ -82,7 +82,7 @@ const containerCssVars = computed(() => ({
} }
} }
.tooltip { :root .tooltip {
max-width: 180px; max-width: 180px;
} }