Remove shadow root from StyleConfigurator #3082
Also renamed style-configurator.scss -> styleConfigurator.scss
This commit is contained in:
Tom Najdek
parent
947fa2b558
commit
842f474939
4 changed files with 80 additions and 102 deletions
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -57,5 +57,6 @@
|
|||
@import "elements/notesBox";
|
||||
@import "elements/quickSearchTextbox";
|
||||
@import "elements/richlistCheckbox";
|
||||
@import "elements/styleConfigurator";
|
||||
@import "elements/tagsBox";
|
||||
@import "elements/zoteroSearch";
|
||||
|
|
|
|||
56
scss/elements/_styleConfigurator.scss
Normal file
56
scss/elements/_styleConfigurator.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue