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);
}
.tooltipPopper {
:root .tooltipPopper {
max-width: 400px;
li {

View file

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

View file

@ -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

View file

@ -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;
.pushDownResults {
padding-top: 36px;
& ::-webkit-scrollbar {
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 {
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;
}

View file

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