diff --git a/src/SEQTA.ts b/src/SEQTA.ts index 4ad64600..a827a3bd 100644 --- a/src/SEQTA.ts +++ b/src/SEQTA.ts @@ -837,7 +837,7 @@ export function AppendElementsToDisabledPage() { AddBetterSEQTAElements(false) let settingsStyle = document.createElement('style') - settingsStyle.innerHTML = ` + settingsStyle.innerHTML = /* css */` .addedButton { position: absolute !important; right: 50px; @@ -903,18 +903,12 @@ export function closeSettings() { } function addExtensionSettings() { - /* const link = GetCSSElement('src/interface/popup.css') - document.querySelector('html')!.appendChild(link) */ - const extensionPopup = document.createElement('div') extensionPopup.classList.add('outside-container', 'hide') extensionPopup.id = 'ExtensionPopup' - document.body.appendChild(extensionPopup) - - const extensionpopup2div = document.createElement('div') - extensionpopup2div.classList.add('ExtensionPopup2') - extensionpopup2div.id = 'ExtensionPopup2' - extensionPopup.appendChild(extensionpopup2div) + + const extensionContainer = document.querySelector('#container') as HTMLDivElement + if (extensionContainer) extensionContainer.appendChild(extensionPopup) const extensionIframe: HTMLIFrameElement = document.createElement('iframe') extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded` diff --git a/src/css/injected.scss b/src/css/injected.scss index 314af33b..3ce9cbee 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -33,7 +33,7 @@ html { position: fixed; right: 0; height: 100%; - width: 200px; + z-index: 100; } .connectedNotificationsWrapper > div > button > svg > g { fill: var(--theme-primary) !important; diff --git a/src/seqta/ui/ThemeCreator.ts b/src/seqta/ui/ThemeCreator.ts index dca39128..372cf0d5 100644 --- a/src/seqta/ui/ThemeCreator.ts +++ b/src/seqta/ui/ThemeCreator.ts @@ -3,14 +3,21 @@ import popup from '../../interface/index.html?url' /** * Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup + * @returns void */ export function OpenThemeCreator() { - const container = document.querySelector('#container') + const width = '300px' + const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe') themeCreatorIframe.src = `${browser.runtime.getURL(popup)}#themeCreator` themeCreatorIframe.id = 'themeCreatorIframe' themeCreatorIframe.setAttribute('allowTransparency', 'true') themeCreatorIframe.setAttribute('excludeDarkCheck', 'true') + themeCreatorIframe.style.width = width themeCreatorIframe.style.border = 'none' - container!.appendChild(themeCreatorIframe) + + const mainContent = document.querySelector('#container') as HTMLDivElement + if (mainContent) mainContent.style.width = `calc(100% - ${width})` + + document.body.appendChild(themeCreatorIframe) } \ No newline at end of file diff --git a/src/seqta/utils/listeners/MessageListener.ts b/src/seqta/utils/listeners/MessageListener.ts index 928308e7..b8d2224f 100644 --- a/src/seqta/utils/listeners/MessageListener.ts +++ b/src/seqta/utils/listeners/MessageListener.ts @@ -13,6 +13,7 @@ export class MessageHandler { case 'EditSidebar': this.editSidebar(); + closeSettings(); sendResponse({ status: 'success' }); break; @@ -45,9 +46,13 @@ export class MessageHandler { return true; case 'OpenChangelog': OpenWhatsNewPopup(); + closeSettings(); + sendResponse({ status: 'success' }); break; case 'OpenThemeCreator': OpenThemeCreator(); + closeSettings(); + sendResponse({ status: 'success' }); break; default: