diff --git a/chrome/content/zotero/elements/styleConfigurator.js b/chrome/content/zotero/elements/styleConfigurator.js index 3ac1e52b3a..d97293e5dc 100644 --- a/chrome/content/zotero/elements/styleConfigurator.js +++ b/chrome/content/zotero/elements/styleConfigurator.js @@ -29,13 +29,6 @@ Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this); class StyleSelector extends XULElementBase { - get stylesheets() { - return [ - 'chrome://global/skin/global.css', - 'chrome://zotero/skin/elements/style-configurator.css' - ]; - } - content = MozXULElement.parseXULToFragment(` <div id="style-selector" xmlns="http://www.w3.org/1999/xhtml" @@ -48,16 +41,16 @@ `); set value(val) { - this.shadowRoot.getElementById('style-list').value = val; + this.querySelector('#style-list').value = val; } get value() { - return this.shadowRoot.getElementById('style-list').value; + return this.querySelector('#style-list').value; } async init() { await Zotero.Styles.init(); - const styleListEl = this.shadowRoot.getElementById('style-list'); + const styleListEl = this.querySelector('#style-list'); Zotero.Styles.getVisible().forEach((so) => { const value = so.styleID; @@ -72,7 +65,7 @@ `)); }); this.value = this.getAttribute('value'); - this.shadowRoot.getElementById('style-list').addEventListener("select", () => { + this.querySelector('#style-list').addEventListener("select", () => { const event = document.createEvent("Events"); event.initEvent("select", true, true); this.dispatchEvent(event); @@ -94,13 +87,6 @@ </div> `); - get stylesheets() { - return [ - 'chrome://global/skin/global.css', - 'chrome://zotero/skin/elements/style-configurator.css' - ]; - } - get value() { return this.localeListEl.value; } @@ -124,8 +110,8 @@ connectedCallback() { super.connectedCallback(); - this.localeListEl = this.shadowRoot.getElementById('locale-list'); - this.localePopupEl = this.shadowRoot.querySelector('#locale-list > menupopup'); + this.localeListEl = this.querySelector('#locale-list'); + this.localePopupEl = this.querySelector('#locale-list > menupopup'); } async init() { @@ -166,15 +152,15 @@ class StyleConfigurator extends XULElementBase { content = MozXULElement.parseXULToFragment(` - <div id="style-configurator" + <div class="style-configurator" xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <label for="style-selector" data-l10n-id="bibliography-style-label" /> - <div id="style-selector-wrapper"> + <div class="style-selector-wrapper"> <xul:style-selector id="style-selector" value="${this.getAttribute('style') || Zotero.Prefs.get('export.lastStyle') || ''}" /> </div> - <div id="locale-selector-wrapper"> + <div class="locale-selector-wrapper"> <label for="locale-selector" class="file-input-label" data-l10n-id="bibliography-locale-label" /> <xul:locale-selector id="locale-selector" @@ -182,7 +168,7 @@ style="${this.getAttribute('style') || Zotero.Prefs.get('export.lastStyle') || ''}" /> </div> - <div id="display-as-wrapper"> + <div class="display-as-wrapper"> <xul:radiogroup id="display-as"> <xul:radio value="footnotes" data-l10n-id="integration-prefs-footnotes" selected="true" /> <xul:radio value="endnotes" data-l10n-id="integration-prefs-endnotes" /> @@ -191,43 +177,36 @@ </div> `); - get stylesheets() { - return [ - 'chrome://global/skin/global.css', - 'chrome://zotero/skin/elements/style-configurator.css' - ]; - } - set style(val) { - this.shadowRoot.getElementById('style-selector').value = val; + this.querySelector('#style-selector').value = val; this.handleStyleChanged(val); } get style() { - return this.shadowRoot.getElementById('style-selector').value; + return this.querySelector('#style-selector').value; } set locale(val) { - this.shadowRoot.getElementById('locale-selector').value = val; + this.querySelector('#locale-selector').value = val; } get locale() { - return this.shadowRoot.getElementById('locale-selector').value; + return this.querySelector('#locale-selector').value; } set displayAs(val) { - this.shadowRoot.getElementById('display-as').value = val; + this.querySelector('#display-as').value = val; } get displayAs() { - return this.shadowRoot.getElementById('display-as').value; + return this.querySelector('#display-as').value; } async init() { - this.shadowRoot.getElementById('style-configurator').style.display = 'none'; + this.querySelector('.style-configurator').style.display = 'none'; await Zotero.Styles.init(); - this.shadowRoot.getElementById('style-configurator').style.display = ''; - this.shadowRoot.getElementById('style-selector').addEventListener('select', (_event) => { + this.querySelector('.style-configurator').style.display = ''; + this.querySelector('#style-selector').addEventListener('select', (_event) => { this.handleStyleChanged(_event.target.value); const event = document.createEvent("Events"); @@ -235,13 +214,13 @@ this.dispatchEvent(event); }); - this.shadowRoot.getElementById('locale-selector').addEventListener('select', (_event) => { + this.querySelector('#locale-selector').addEventListener('select', (_event) => { const event = document.createEvent("Events"); event.initEvent("select", true, true); this.dispatchEvent(event); }); - this.shadowRoot.getElementById('display-as').addEventListener('select', (_event) => { + this.querySelector('#display-as').addEventListener('select', (_event) => { const event = document.createEvent("Events"); event.initEvent("select", true, true); this.dispatchEvent(event); @@ -249,10 +228,10 @@ } handleStyleChanged(style) { - this.shadowRoot.getElementById('locale-selector').style = style; + this.querySelector('#locale-selector').style = style; const styleData = style ? Zotero.Styles.get(style) : null; const isNoteStyle = (styleData || {}).class === 'note'; - this.shadowRoot.getElementById('display-as-wrapper').style.display = isNoteStyle ? '' : 'none'; + this.querySelector('.display-as-wrapper').style.display = isNoteStyle ? '' : 'none'; } } diff --git a/scss/_zotero.scss b/scss/_zotero.scss index fb5f3562a7..edf45dcc81 100644 --- a/scss/_zotero.scss +++ b/scss/_zotero.scss @@ -57,5 +57,6 @@ @import "elements/notesBox"; @import "elements/quickSearchTextbox"; @import "elements/richlistCheckbox"; +@import "elements/styleConfigurator"; @import "elements/tagsBox"; @import "elements/zoteroSearch"; diff --git a/scss/elements/_styleConfigurator.scss b/scss/elements/_styleConfigurator.scss new file mode 100644 index 0000000000..8f84973131 --- /dev/null +++ b/scss/elements/_styleConfigurator.scss @@ -0,0 +1,56 @@ +style-configurator { + display: block; + width: 100%; + + style-selector { + display: block; + } + + richlistbox { + padding: var(--style-configurator-richlistbox-padding, 2px); + max-height: var(--style-configurator-richlistitem-max-height, 260px); + overflow: var(--style-configurator-richlistitem-overflow, auto scroll); + + richlistitem { + line-height: var(--style-configurator-richlistitem-line-height, 1.5em); + } + + @media (-moz-platform: macos) { + &:not(:focus) richlistitem[selected="true"] { + background-color: -moz-mac-secondaryhighlight; + } + } + } + + .locale-selector-wrapper, + .style-selector-wrapper, + .display-as-wrapper { + background-color: var(--style-configurator-field-wrapper-background-color, $input-group-background-color); + border-radius: var(--style-configurator-field-wrapper-border-radius, $border-radius-base); + border: var(--style-configurator-field-wrapper-border, 1px solid $input-group-border-color); + margin: var(--style-configurator-field-margin, 1.5em 0 0 0); + padding: var(--style-configurator-field-padding, $space-xs); + } + + label[for="style-selector"] { + margin: var(--style-configurator-label-margin, 1.5em 0 0 0); + font-size: var(--style-configurator-label-font-size, 13px); + } + + .style-selector-wrapper { + margin: var(--style-configurator-style-field-margin, 0); + } + + .locale-selector-wrapper { + display: flex; + align-items: center; + } + + .display-as-wrapper { + radiogroup { + display: flex; + flex-direction: row; + } + } +} + diff --git a/scss/elements/style-configurator.scss b/scss/elements/style-configurator.scss deleted file mode 100644 index 5e72da7805..0000000000 --- a/scss/elements/style-configurator.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import "../abstracts/variables"; -@import "../abstracts/functions"; -@import "../abstracts/mixins"; -@import "../abstracts/placeholders"; -@import "../abstracts/utilities"; -@import "../themes/light"; - -:host { - display: block; - width: 100%; -} - -richlistbox { - padding: var(--style-configurator-richlistbox-padding, 2px); - max-height: var(--style-configurator-richlistitem-max-height, 260px); - overflow: var(--style-configurator-richlistitem-overflow, auto scroll); - - richlistitem { - line-height: var(--style-configurator-richlistitem-line-height, 1.5em); - } - - @media (-moz-platform: macos) { - &:not(:focus) richlistitem[selected="true"] { - background-color: -moz-mac-secondaryhighlight; - } - } -} - -#locale-selector-wrapper, -#style-selector-wrapper, -#display-as-wrapper { - background-color: var(--style-configurator-field-wrapper-background-color, $input-group-background-color); - border-radius: var(--style-configurator-field-wrapper-border-radius, $border-radius-base); - border: var(--style-configurator-field-wrapper-border, 1px solid $input-group-border-color); - margin: var(--style-configurator-field-margin, 1.5em 0 0 0); - padding: var(--style-configurator-field-padding, $space-xs); -} - -label[for="style-selector"] { - margin: var(--style-configurator-label-margin, 1.5em 0 0 0); - font-size: var(--style-configurator-label-font-size, 13px); -} - -#style-selector-wrapper { - margin: var(--style-configurator-style-field-margin, 0); -} - -#locale-selector-wrapper { - display: flex; - align-items: center; -} - -#display-as-wrapper { - radiogroup { - display: flex; - flex-direction: row; - } -} \ No newline at end of file