Fix breaking page layouts

This commit is contained in:
varjolintu 2024-07-16 07:42:21 +03:00
parent a7661f8cd3
commit 8ba9526eae
4 changed files with 24 additions and 30 deletions

View file

@ -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');
};

View file

@ -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');
};

View file

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

View file

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