mirror of
https://github.com/keepassxreboot/keepassxc-browser.git
synced 2026-03-11 08:54:43 +00:00
Fix breaking page layouts
This commit is contained in:
parent
a7661f8cd3
commit
8ba9526eae
4 changed files with 24 additions and 30 deletions
|
|
@ -83,14 +83,7 @@ PasswordIcon.prototype.createIcon = function(field) {
|
|||
|
||||
kpxcUI.setIconPosition(icon, field, this.rtl);
|
||||
this.icon = icon;
|
||||
|
||||
const styleSheet = createStylesheet('css/pwgen.css');
|
||||
const wrapper = document.createElement('div');
|
||||
|
||||
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
|
||||
this.shadowRoot.append(styleSheet);
|
||||
this.shadowRoot.append(icon);
|
||||
document.body.append(wrapper);
|
||||
this.createWrapper('css/pwgen.css');
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -167,15 +167,5 @@ TOTPFieldIcon.prototype.createIcon = function(field, segmented = false) {
|
|||
|
||||
kpxcUI.setIconPosition(icon, field, this.rtl, segmented);
|
||||
this.icon = icon;
|
||||
|
||||
const styleSheet = createStylesheet('css/totp.css');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.all = 'unset';
|
||||
wrapper.style.display = 'none';
|
||||
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
|
||||
|
||||
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
|
||||
this.shadowRoot.append(styleSheet);
|
||||
this.shadowRoot.append(icon);
|
||||
document.body.append(wrapper);
|
||||
this.createWrapper('css/totp.css');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,6 +50,27 @@ class Icon {
|
|||
}
|
||||
}
|
||||
|
||||
// Creates a wrapper div that has the icon in Shadow DOM
|
||||
createWrapper(styleSheetFilename) {
|
||||
const styleSheet = createStylesheet(styleSheetFilename);
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.all = 'unset';
|
||||
wrapper.style.display = 'none';
|
||||
|
||||
// Make sure the wrapper is positioned correctly without CSS styles affecting to it
|
||||
wrapper.style.position = 'absolute';
|
||||
wrapper.style.top = Pixels(0);
|
||||
wrapper.style.left = Pixels(0);
|
||||
|
||||
// Waits for stylesheet to load before displaying the element
|
||||
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
|
||||
|
||||
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
|
||||
this.shadowRoot.append(styleSheet);
|
||||
this.shadowRoot.append(this.icon);
|
||||
document.body.append(wrapper);
|
||||
}
|
||||
|
||||
switchIcon(state, uuid) {
|
||||
if (!this.icon) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -105,17 +105,7 @@ UsernameFieldIcon.prototype.createIcon = function(field) {
|
|||
|
||||
kpxcUI.setIconPosition(icon, field, this.rtl);
|
||||
this.icon = icon;
|
||||
|
||||
const styleSheet = createStylesheet('css/username.css');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.all = 'unset';
|
||||
wrapper.style.display = 'none';
|
||||
styleSheet.addEventListener('load', () => wrapper.style.display = 'block');
|
||||
|
||||
this.shadowRoot = wrapper.attachShadow({ mode: 'closed' });
|
||||
this.shadowRoot.append(styleSheet);
|
||||
this.shadowRoot.append(icon);
|
||||
document.body.append(wrapper);
|
||||
this.createWrapper('css/username.css');
|
||||
};
|
||||
|
||||
const iconClicked = async function(field, icon) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue