Merge pull request #1435 from keepassxreboot/fix/css_issues

Fix CSS issues
This commit is contained in:
Sami Vänttinen 2021-10-30 22:39:46 +03:00 committed by GitHub
commit 1c3538f316
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 10 deletions

View file

@ -7,6 +7,9 @@ const MIN_INPUT_FIELD_OFFSET_WIDTH = 60;
const MIN_OPACITY = 0.7;
const MAX_OPACITY = 1;
let notificationWrapper;
let notificationTimeout;
const DatabaseState = {
DISCONNECTED: 0,
LOCKED: 1,
@ -207,7 +210,7 @@ kpxcUI.createNotification = function(type, message) {
return;
}
const banner = kpxcUI.createElement('div', 'kpxc-notification kpxc-notification-' + type, {});
const notification = kpxcUI.createElement('div', 'kpxc-notification kpxc-notification-' + type, {});
type = type.charAt(0).toUpperCase() + type.slice(1) + '!';
const className = (isFirefox() ? 'kpxc-banner-icon-moz' : 'kpxc-banner-icon');
@ -215,17 +218,31 @@ kpxcUI.createNotification = function(type, message) {
const label = kpxcUI.createElement('span', 'kpxc-label', {}, type);
const msg = kpxcUI.createElement('span', '', {}, message);
banner.addEventListener('click', function() {
document.body.removeChild(banner);
notification.addEventListener('click', function() {
if (notificationWrapper && window.parent.document.body.contains(notificationWrapper)) {
window.parent.document.body.removeChild(notificationWrapper);
notificationWrapper = undefined;
}
});
banner.appendMultiple(icon, label, msg);
document.body.appendChild(banner);
notification.appendMultiple(icon, label, msg);
const styleSheet = createStylesheet('css/notification.css');
notificationWrapper = notificationWrapper || document.createElement('div');
this.shadowRoot = notificationWrapper.attachShadow({ mode: 'closed' });
this.shadowRoot.append(styleSheet);
this.shadowRoot.append(notification);
document.body.append(notificationWrapper);
if (notificationTimeout) {
clearTimeout(notificationTimeout);
}
// Destroy the banner after five seconds
setTimeout(() => {
if ($('.kpxc-notification')) {
document.body.removeChild(banner);
notificationTimeout = setTimeout(() => {
if (notificationWrapper && window.parent.document.body.contains(notificationWrapper)) {
window.parent.document.body.removeChild(notificationWrapper);
notificationWrapper = undefined;
}
}, 5000);
};

View file

@ -1,4 +1,4 @@
:root {
:root, :host {
--kpxc-background-color: #fff;
--kpxc-card-background-color: #fff;
--kpxc-card-border-color: rgba(0,0,0,.125);
@ -19,7 +19,7 @@
}
@media (prefers-color-scheme: dark) {
:root {
:root, :host {
--kpxc-background-color: #3b3b3d;
--kpxc-card-background-color: #2b2a2a;
--kpxc-card-border-color: #292a2a;