prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add support for showing Autocomplete Menu on top (#1866)

Browse source 
Add support for showing Autocomplete Menu on top
This commit is contained in:
Sami Vänttinen 2023-02-28 08:34:52 +02:00 committed by GitHub
parent 48eea53838
commit b525513819
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
keepassxc-browser/content/autocomplete.js
View file

@ -110,8 +110,8 @@ class Autocomplete {
}
this.updateList();
this.updatePosition();
this.container.style.display = 'block';
this.updatePosition();
}
async updateList() {
@ -273,11 +273,21 @@ class Autocomplete {
const rect = this.input.getBoundingClientRect();
this.container.style.minWidth = Pixels(this.input.offsetWidth);
// Calculate Y offset if menu does not fit to the bottom of the screen -> show it at the top of the input field
const menuRect = this.container.getBoundingClientRect();
const totalHeight = menuRect.height + rect.height;
const menuOffset = (totalHeight + rect.y) > window.self.visualViewport.height ? totalHeight : 0;
if (menuOffset > 0) {
this.container.classList.add('kpxcAutocomplete-container-on-top');
} else {
this.container.classList.remove('kpxcAutocomplete-container-on-top');
}
if (kpxcUI.bodyStyle.position.toLowerCase() === 'relative') {
this.container.style.top = Pixels(rect.top - kpxcUI.bodyRect.top + document.scrollingElement.scrollTop + this.input.offsetHeight);
this.container.style.top = Pixels(rect.top - kpxcUI.bodyRect.top + document.scrollingElement.scrollTop + this.input.offsetHeight - menuOffset);
this.container.style.left = Pixels(rect.left - kpxcUI.bodyRect.left + document.scrollingElement.scrollLeft);
} else {
this.container.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + this.input.offsetHeight);
this.container.style.top = Pixels(rect.top + document.scrollingElement.scrollTop + this.input.offsetHeight - menuOffset);
this.container.style.left = Pixels(rect.left + document.scrollingElement.scrollLeft);
}
}

7
keepassxc-browser/css/autocomplete.css
View file

@ -8,6 +8,13 @@
overflow: hidden; /* this fixes an issue with the border radius not showing up clearly */
}
.kpxcAutocomplete-container-on-top {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
.kpxcAutocomplete-items {
max-height: 250px;
overflow-y: auto;