fx102: Cleans up scss files, removes shadow DOM use from CEs (#3051)

Removes a huge amount of excessive files and duplication for CE scss.
All CE css is now output in the single
zotero-react-client.css file.

Moving all CE styling into a single stylesheet required removing their
shadow DOMs. It is desirable anyway, since you want to
be able to style CEs from "outside", when embedding in different
contexts.

Shadow removal required some CE code changes to maintain
functionality.

Elements refactored:
- attachment-box (displayed when an attachment (like PDF) is selected in
the item tree)
- color-picker (in the tag color selector)
- guidance-panel (displayed on first run when editing authors for a book
section)
- item-box (info tab in the item pane)
- note-editor
- notes-box (note tab in the item pane)
- quick-search-textbox
- related-box (related tab in the item pane)
- tags-box (tags tab in the item pane)
- zoterosearch (advanced search condition builder form)
This commit is contained in:
Adomas Ven 2023-04-01 08:37:55 +03:00 committed by GitHub
parent bd9a40562f
commit 6b819e259c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
100 changed files with 854 additions and 994 deletions

View file

@ -2,7 +2,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/about.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/about.dtd">
<window

View file

@ -3,7 +3,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window [
<!ENTITY % zoteroDTD SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -3,7 +3,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE dialog [
<!ENTITY % zoteroDTD SYSTEM "chrome://zotero/locale/zotero.dtd"> %zoteroDTD;

View file

@ -1,7 +1,7 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -168,7 +168,7 @@
}
this._mode = val;
this.shadowRoot.getElementById('attachment-box').setAttribute('mode', val);
this.querySelector('#attachment-box').setAttribute('mode', val);
}
get item() {
@ -184,14 +184,7 @@
}
connectedCallback() {
var shadow = this.attachShadow({ mode: "open" });
var s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/attachmentBox.css";
shadow.append(s1);
shadow.appendChild(document.importNode(this.content, true));
this.appendChild(document.importNode(this.content, true));
// For the time being, use a silly little popup
this._id('title').addEventListener('click', () => {
@ -605,7 +598,7 @@
}
_id(id) {
return this.shadowRoot.getElementById(id);
return this.querySelector(`#${id}`);
}
}

View file

@ -24,13 +24,6 @@
*/
class XULElementBase extends XULElement {
/**
* @return {String[]} Stylesheet URIs
*/
get stylesheets() {
return [];
}
/**
* @return {DocumentFragment | null}
*/
@ -43,23 +36,14 @@ class XULElementBase extends XULElement {
destroy() {}
connectedCallback() {
let shadow = this.attachShadow({ mode: 'open' });
for (let href of this.stylesheets) {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
shadow.append(link);
}
let content = this.content;
if (content) {
content = document.importNode(content, true);
shadow.append(content);
this.append(content);
}
MozXULElement.insertFTLIfNeeded("zotero.ftl");
if (document.l10n) {
if (document.l10n && this.shadowRoot) {
document.l10n.connectRoot(this.shadowRoot);
}

View file

@ -31,16 +31,14 @@
Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
class ColorPicker extends XULElementBase {
stylesheets = ['chrome://global/skin/', 'chrome://zotero-platform/content/colorPicker.css'];
content = MozXULElement.parseXULToFragment(`
<vbox>
<html:button id="button">
<html:span id="button-tile"/>
<html:button class="button">
<html:span class="button-tile"/>
</html:button>
<panel id="panel">
<html:div id="grid"/>
<panel class="panel">
<html:div class="grid"/>
</panel>
</vbox>
`);
@ -103,9 +101,9 @@
}
init() {
let button = this.shadowRoot.getElementById('button');
let panel = this.shadowRoot.getElementById('panel');
let grid = this.shadowRoot.getElementById('grid');
let button = this.querySelector('.button');
let panel = this.querySelector('.panel');
let grid = this.querySelector('.grid');
button.addEventListener('click', () => {
grid.style.gridTemplateColumns = `repeat(${this.cols}, ${this.tileWidth}px)`;
@ -120,10 +118,10 @@
attributeChangedCallback(attrName, oldVal, newVal) {
if (attrName == 'color') {
this.shadowRoot.getElementById('button-tile').style.backgroundColor = newVal;
this.querySelector('.button-tile').style.backgroundColor = newVal;
}
else if (attrName == 'colors') {
let grid = this.shadowRoot.getElementById('grid');
let grid = this.querySelector('.grid');
grid.innerHTML = '';
for (let color of newVal.split(',')) {
let tile = document.createElement('div');
@ -131,13 +129,13 @@
tile.style.backgroundColor = color;
tile.addEventListener('click', () => {
this.color = color;
this.shadowRoot.getElementById('panel').hidePopup();
this.querySelector('.panel').hidePopup();
});
grid.append(tile);
}
}
else if (attrName == 'disabled') {
this.shadowRoot.getElementById('button').disabled = !!newVal;
this.querySelector('.button').disabled = !!newVal;
}
}
}

View file

@ -47,10 +47,8 @@
</panel>
`);
stylesheets = ['chrome://global/skin/', 'chrome://zotero-platform/content/guidancePanel.css'];
get panel() {
return this.shadowRoot.querySelector('panel');
return this.querySelector('panel');
}
init() {
@ -194,7 +192,7 @@
}
id(id) {
return this.shadowRoot.getElementById(id);
return this.querySelector(`#${id}`);
}
}

View file

@ -110,20 +110,7 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
var shadow = this.attachShadow({ mode: "open" });
//shadow.host.style.display = 'flex';
var s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/itemBox.css";
shadow.append(s1);
var s2 = document.createElement("link");
s2.rel = "stylesheet";
s2.href = "chrome://global/skin/global.css";
shadow.append(s2);
shadow.appendChild(document.importNode(this.content, true));
this.appendChild(document.importNode(this.content, true));
this._creatorTypeMenu.addEventListener('popupshowing', () => {
var typeBox = document.popupNode.localName == 'th' ? document.popupNode : document.popupNode.parentNode;
@ -617,7 +604,7 @@
this.nextSibling.querySelector('input, textarea').blur();
}
else {
this.getRootNode().host.toggleAbstractExpand(
this.closest('item-box').toggleAbstractExpand(
this.firstElementChild, this.closest('tr').querySelector('.value')
);
}
@ -1024,7 +1011,7 @@
var td = document.createElement('td');
td.id = 'more-creators-label';
td.setAttribute('onclick',
"var binding = this.getRootNode().host; "
"var binding = this.closest('item-box'); "
+ "binding._displayAllCreators = true; "
+ "binding.refresh()"
);
@ -1076,7 +1063,7 @@
button.style.background = `url("chrome://zotero/skin/textfield-dual${Zotero.hiDPISuffix}.png") center/21px auto no-repeat`;
button.setAttribute('title', Zotero.getString('pane.item.switchFieldMode.two'));
lastName.setAttribute('fieldMode', '1');
button.setAttribute('onclick', "this.getRootNode().host.switchCreatorMode(this.closest('tr'), 0, false, true)");
button.setAttribute('onclick', "this.closest('item-box').switchCreatorMode(this.closest('tr'), 0, false, true)");
delete lastName.style.width;
delete lastName.style.maxWidth;
@ -1115,7 +1102,7 @@
button.style.background = `url("chrome://zotero/skin/textfield-single${Zotero.hiDPISuffix}.png") center/21px auto no-repeat`;
button.setAttribute('title', Zotero.getString('pane.item.switchFieldMode.one'));
lastName.setAttribute('fieldMode', '0');
button.setAttribute('onclick', "this.getRootNode().host.switchCreatorMode(this.closest('tr'), 1, false, true)");
button.setAttribute('onclick', "this.closest('item-box').switchCreatorMode(this.closest('tr'), 1, false, true)");
// appropriately truncate lastName
@ -1979,7 +1966,7 @@
newVal = val;
if (Zotero.ItemTypes.getName(this.item.itemTypeID) === "bookSection") {
var creatorTypeLabels = this.shadowRoot.querySelectorAll(".creator-type-label");
var creatorTypeLabels = this.querySelectorAll(".creator-type-label");
this._id("zotero-author-guidance").show({
forEl: creatorTypeLabels[creatorTypeLabels.length - 1]
});
@ -2309,7 +2296,7 @@
}
focusField(fieldName) {
let field = this.shadowRoot.querySelector(`[fieldname="${fieldName}"][ztabindex]`);
let field = this.querySelector(`[fieldname="${fieldName}"][ztabindex]`);
if (!field) return false;
return this._focusNextField(field.getAttribute('ztabindex'));
}
@ -2558,7 +2545,7 @@
}
_id(id) {
return this.shadowRoot.getElementById(id);
return this.querySelector(`#${id}`);
}
}
customElements.define("item-box", ItemBox);

View file

@ -59,13 +59,12 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
var shadow = this.attachShadow({ mode: "open" });
MozXULElement.insertFTLIfNeeded('mozilla/textActions.ftl');
document.l10n.connectRoot(shadow);
document.l10n.connectRoot(this);
// var s1 = document.createElement("link");
// s1.rel = "stylesheet";
// s1.href = "chrome://zotero-platform/content/noteEditor.css";
// s1.href = "chrome://zotero-platform/content/zotero.css";
// shadow.append(s1);
let content = document.importNode(this.content, true);
@ -86,7 +85,7 @@
}, true);
this._initialized = true;
});
shadow.append(content);
this.append(content);
this._notifierID = Zotero.Notifier.registerObserver(this, ['item'], 'noteEditor');
this.notitle = !!this.getAttribute('notitle');
@ -322,7 +321,7 @@
}
_id(id) {
return this.shadowRoot.querySelector(`[id=${id}]`);
return this.querySelector(`#${id}`);
}
}
customElements.define("note-editor", NoteEditor);
@ -367,18 +366,7 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
var shadow = this.attachShadow({ mode: "open" });
var s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/noteEditor.css";
shadow.append(s1);
var s2 = document.createElement("link");
s2.rel = "stylesheet";
s2.href = "chrome://global/skin/global.css";
shadow.append(s2);
shadow.append(document.importNode(this.content, true));
this.append(document.importNode(this.content, true));
this._id('parent-value').addEventListener('click', this._parentClickHandler);
this._id('related-value').addEventListener('click', this._relatedClickHandler);
@ -538,7 +526,7 @@
};
_id(id) {
return this.shadowRoot.querySelector(`[id=${id}]`);
return this.querySelector(`#${id}`);
}
}
customElements.define("links-box", LinksBox);

View file

@ -52,15 +52,8 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
let shadow = this.attachShadow({ mode: "open" });
let s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/notesBox.css";
shadow.append(s1);
let content = document.importNode(this.content, true);
shadow.append(content);
this.append(content);
this._id('add').addEventListener('click', this._handleAdd);
@ -173,7 +166,7 @@
}
_id(id) {
return this.shadowRoot.querySelector(`[id=${id}]`);
return this.querySelector(`[id=${id}]`);
}
}
customElements.define("notes-box", NotesBox);

View file

@ -48,23 +48,18 @@
return;
}
let s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/quickSearchTextbox.css";
this.shadowRoot.append(s1);
// Need to create an inner shadow DOM so that global.css styles,
// which we need for the menupopup, don't break the search textbox
let dropmarkerHost = document.createXULElement('hbox');
let dropmarkerShadow = dropmarkerHost.attachShadow({ mode: 'open' });
let s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/zotero.css";
let s2 = document.createElement("link");
s2.rel = "stylesheet";
s2.href = "chrome://zotero-platform/content/quickSearchTextbox.css";
let s3 = document.createElement("link");
s3.rel = "stylesheet";
s3.href = "chrome://global/skin/global.css";
s2.href = "chrome://global/skin/global.css";
let dropmarker = document.createXULElement('button');
dropmarker.id = "zotero-tb-search-menu-button";
@ -72,7 +67,7 @@
dropmarker.setAttribute("type", "menu");
dropmarker.append(this.searchModePopup);
dropmarkerShadow.append(s2, s3, dropmarker);
dropmarkerShadow.append(s1, s2, dropmarker);
this.inputField.before(dropmarkerHost);

View file

@ -54,15 +54,8 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
let shadow = this.attachShadow({ mode: "open" });
let s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/relatedBox.css";
shadow.append(s1);
let content = document.importNode(this.content, true);
shadow.append(content);
this.append(content);
this._id('related-add').addEventListener('click', this.add);
@ -258,7 +251,7 @@
}
_id(id) {
return this.shadowRoot.querySelector(`[id=${id}]`);
return this.querySelector(`[id=${id}]`);
}
}
customElements.define("related-box", RelatedBox);

View file

@ -76,25 +76,8 @@
this._destroyed = false;
window.addEventListener("unload", this.destroy);
let shadow = this.attachShadow({ mode: "open" });
let s1 = document.createElement("link");
s1.rel = "stylesheet";
s1.href = "chrome://zotero-platform/content/tagsBox.css";
shadow.append(s1);
let s2 = document.createElement("link");
s2.rel = "stylesheet";
s2.href = "chrome://global/skin/";
shadow.append(s2);
let s3 = document.createElement("link");
s3.rel = "stylesheet";
s3.href = "chrome://zotero/skin/overlay.css";
shadow.append(s3);
let content = document.importNode(this.content, true);
shadow.append(content);
this.append(content);
this._id('add').addEventListener('click', this._handleAddButtonClick);
this._id('add').addEventListener('keydown', this._handleAddButtonKeyDown);
@ -919,7 +902,7 @@
Zotero.debug('Looking for tabindex ' + nextIndex, 4);
var next = this.shadowRoot.getElementsByAttribute('ztabindex', nextIndex);
var next = this.querySelector(`[ztabindex=${nextIndex}]`);
if (next.length) {
next = next[0];
next.click();
@ -958,7 +941,7 @@
async blurOpenField(stayOpen) {
this._lastTabIndex = false;
var textboxe = this.shadowRoot.querySelector('.editable');
var textboxe = this.querySelector('.editable');
if (textboxe) {
await this.blurHandler({
target: textboxe,
@ -971,7 +954,7 @@
}
_id(id) {
return this.shadowRoot.querySelector(`[id=${id}]`);
return this.querySelector(`[id=${id}]`);
}
}

View file

@ -32,29 +32,20 @@
Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
class SearchElementBase extends XULElementBase {
get stylesheets() {
return [
'chrome://global/skin/global.css',
'chrome://zotero-platform/content/zoteroSearch.css'
];
}
}
class ZoteroSearch extends SearchElementBase {
class ZoteroSearch extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="search-box" flex="1" onkeypress="this.getRootNode().host.handleKeyPress(event)">
id="search-box" flex="1" onkeypress="this.closest('zoterosearch').handleKeyPress(event)">
<hbox align="center">
<label value="&zotero.search.searchInLibrary;" control="libraryMenu"/>
<menulist id="libraryMenu" oncommand="this.getRootNode().host.updateLibrary();" native="true">
<menulist id="libraryMenu" oncommand="this.closest('zoterosearch').updateLibrary();" native="true">
<menupopup/>
</menulist>
</hbox>
<groupbox>
<caption align="center">
<label value="&zotero.search.joinMode.prefix;"/>
<menulist id="joinModeMenu" oncommand="this.getRootNode().host.updateJoinMode();" native="true">
<menulist id="joinModeMenu" oncommand="this.closest('zoterosearch').updateJoinMode();" native="true">
<menupopup>
<menuitem label="&zotero.search.joinMode.any;" value="any"/>
<menuitem label="&zotero.search.joinMode.all;" value="all" selected="true"/>
@ -65,11 +56,11 @@
<vbox id="conditions"/>
</groupbox>
<hbox>
<checkbox id="recursiveCheckbox" label="&zotero.search.recursive.label;" oncommand="this.getRootNode().host.updateCheckbox('recursive');" native="true"/>
<checkbox id="noChildrenCheckbox" label="&zotero.search.noChildren;" oncommand="this.getRootNode().host.updateCheckbox('noChildren');" native="true"/>
<checkbox id="recursiveCheckbox" label="&zotero.search.recursive.label;" oncommand="this.closest('zoterosearch').updateCheckbox('recursive');" native="true"/>
<checkbox id="noChildrenCheckbox" label="&zotero.search.noChildren;" oncommand="this.closest('zoterosearch').updateCheckbox('noChildren');" native="true"/>
</hbox>
<hbox>
<checkbox id="includeParentsAndChildrenCheckbox" label="&zotero.search.includeParentsAndChildren;" oncommand="this.getRootNode().host.updateCheckbox('includeParentsAndChildren');" native="true"/>
<checkbox id="includeParentsAndChildrenCheckbox" label="&zotero.search.includeParentsAndChildren;" oncommand="this.closest('zoterosearch').updateCheckbox('includeParentsAndChildren');" native="true"/>
</hbox>
</vbox>
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
@ -81,7 +72,7 @@
set search(val) {
this.searchRef = val;
var libraryMenu = this.shadowRoot.getElementById('libraryMenu');
var libraryMenu = this.querySelector('#libraryMenu');
var libraries = Zotero.Libraries.getAll();
Zotero.Utilities.Internal.buildLibraryMenu(
libraryMenu, libraries, this.searchRef.libraryID
@ -91,10 +82,10 @@
}
this.updateLibrary();
this.shadowRoot.getElementById('joinModeMenu').removeAttribute('condition');
this.shadowRoot.getElementById('joinModeMenu').value = 'all';
this.querySelector('#joinModeMenu').removeAttribute('condition');
this.querySelector('#joinModeMenu').value = 'all';
var conditionsBox = this.shadowRoot.getElementById('conditions');
var conditionsBox = this.querySelector('#conditions');
while (conditionsBox.hasChildNodes())
conditionsBox.removeChild(conditionsBox.firstChild);
@ -107,14 +98,14 @@
case 'noChildren':
case 'includeParentsAndChildren':
let checkbox = condition.condition + 'Checkbox';
this.shadowRoot.getElementById(checkbox).setAttribute('condition', id);
this.shadowRoot.getElementById(checkbox).checked = condition.operator == 'true';
this.querySelector(`#${checkbox}`).setAttribute('condition', id);
this.querySelector(`#${checkbox}`).checked = condition.operator == 'true';
continue;
}
if (condition.condition == 'joinMode') {
this.shadowRoot.getElementById('joinModeMenu').setAttribute('condition', id);
this.shadowRoot.getElementById('joinModeMenu').value = condition.operator;
this.querySelector('#joinModeMenu').setAttribute('condition', id);
this.querySelector('#joinModeMenu').value = condition.operator;
}
else {
this.addCondition(condition);
@ -123,7 +114,7 @@
}
addCondition(ref) {
var conditionsBox = this.shadowRoot.getElementById('conditions');
var conditionsBox = this.querySelector('#conditions');
var condition = document.createXULElement('zoterosearchcondition');
condition.setAttribute('flex', '1');
@ -145,7 +136,7 @@
}
removeCondition(id) {
var conditionsBox = this.shadowRoot.getElementById('conditions');
var conditionsBox = this.querySelector('#conditions');
this.search.removeCondition(id);
@ -162,7 +153,7 @@
}
updateLibrary() {
var menu = this.shadowRoot.getElementById('libraryMenu');
var menu = this.querySelector('#libraryMenu');
var libraryID = parseInt(menu.selectedItem.value);
if (this.onLibraryChange) {
@ -172,11 +163,11 @@
this.searchRef.libraryID = libraryID;
}
[...this.shadowRoot.getElementById('conditions').childNodes].forEach(x => x.onLibraryChange());
[...this.querySelector('#conditions').childNodes].forEach(x => x.onLibraryChange());
}
updateJoinMode() {
var menu = this.shadowRoot.getElementById('joinModeMenu');
var menu = this.querySelector('#joinModeMenu');
if(menu.hasAttribute('condition'))
this.search.updateCondition(menu.getAttribute('condition'),'joinMode',menu.value,null);
else
@ -184,7 +175,7 @@
}
updateCheckbox(condition) {
var checkbox = this.shadowRoot.getElementById(condition + 'Checkbox');
var checkbox = this.querySelector('#' + condition + 'Checkbox');
var value = checkbox.checked ? 'true' : 'false';
if(checkbox.hasAttribute('condition'))
{
@ -200,7 +191,7 @@
// Calls updateSearch() on all search conditions
updateSearch() {
var conditionsBox = this.shadowRoot.getElementById('conditions');
var conditionsBox = this.querySelector('#conditions');
if (conditionsBox.hasChildNodes()) {
for(var i = 0, len=conditionsBox.childNodes.length; i < len; i++) {
conditionsBox.childNodes[i].updateSearch();
@ -225,20 +216,20 @@
}
customElements.define("zoterosearch", ZoteroSearch);
class ZoteroSearchCondition extends SearchElementBase {
class ZoteroSearchCondition extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<xul:hbox id="search-condition" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
flex="1">
<xul:popupset id="condition-tooltips"/>
<xul:menulist id="conditionsmenu" oncommand="this.getRootNode().host.onConditionSelected(event.target.value); event.stopPropagation()" native="true">
<xul:menupopup onpopupshown="this.getRootNode().host.revealSelectedCondition()">
<xul:menulist id="conditionsmenu" oncommand="this.closest('zoterosearchcondition').onConditionSelected(event.target.value); event.stopPropagation()" native="true">
<xul:menupopup onpopupshown="this.closest('zoterosearchcondition').revealSelectedCondition()">
<xul:menu id="more-conditions-menu" label="&zotero.general.more;">
<xul:menupopup/>
</xul:menu>
</xul:menupopup>
</xul:menulist>
<xul:menulist id="operatorsmenu" oncommand="this.getRootNode().host.onOperatorSelected(); event.stopPropagation()" native="true">
<xul:menulist id="operatorsmenu" oncommand="this.closest('zoterosearchcondition').onOperatorSelected(); event.stopPropagation()" native="true">
<xul:menupopup/>
</xul:menulist>
<xul:zoterosearchtextbox id="valuefield" flex="1"/>
@ -246,8 +237,8 @@
<xul:menupopup/>
</xul:menulist>
<xul:zoterosearchagefield id="value-date-age" hidden="true" flex="1"/>
<xul:label id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.getRootNode().host.onRemoveClicked(event)"/>
<xul:label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.getRootNode().host.onAddClicked(event)"/>
<xul:label id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/>
<xul:label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
</xul:hbox>
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
@ -264,7 +255,7 @@
'isAfter',
'isInTheLast'
];
var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
var operatorsList = this.querySelector('#operatorsmenu');
// Build operator menu
for (let operator of operators) {
@ -275,8 +266,8 @@
}
// Build conditions menu
var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu');
var moreConditionsMenu = this.shadowRoot.getElementById('more-conditions-menu');
var conditionsMenu = this.querySelector('#conditionsmenu');
var moreConditionsMenu = this.querySelector('#more-conditions-menu');
var conditions = Zotero.SearchConditions.getStandardConditions();
for (let condition of conditions) {
@ -300,7 +291,7 @@
// Add tooltip, building it if it doesn't exist
if (baseFields) {
if (!this.shadowRoot.getElementById(condition.name + '-tooltip')) {
if (!this.querySelector('#' + condition.name + '-tooltip')) {
var fieldName = null;
try {
fieldName = Zotero.ItemFields.getLocalizedString(condition.name);
@ -343,7 +334,7 @@
hbox.appendChild(vbox);
tt.appendChild(hbox);
this.shadowRoot.getElementById('condition-tooltips').appendChild(tt);
this.querySelector('#condition-tooltips').appendChild(tt);
}
menuitem.setAttribute('tooltip', condition.name + '-tooltip');
@ -375,8 +366,8 @@
}
onConditionSelected(conditionName, reload) {
var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu');
var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
var conditionsMenu = this.querySelector('#conditionsmenu');
var operatorsList = this.querySelector('#operatorsmenu');
// Skip if no condition or correct condition already selected
if (!conditionName || (conditionName == this.selectedCondition && !reload)) {
@ -488,22 +479,22 @@
default:
if (operatorsList.value=='isInTheLast')
{
this.shadowRoot.getElementById('value-date-age').value = this.value;
this.querySelector('#value-date-age').value = this.value;
}
// Textbox
else {
// If switching from menu to textbox, clear value
if (this.shadowRoot.getElementById('valuefield').hidden){
this.shadowRoot.getElementById('valuefield').value = '';
if (this.querySelector('#valuefield').hidden){
this.querySelector('#valuefield').value = '';
}
// If switching between textbox conditions, get loaded value for new one
else {
this.shadowRoot.getElementById('valuefield').value = this.value;
this.querySelector('#valuefield').value = this.value;
}
// Update field drop-down if applicable
this.shadowRoot.getElementById('valuefield').update(conditionName, this.mode);
this.querySelector('#valuefield').update(conditionName, this.mode);
}
}
@ -511,44 +502,44 @@
}
onOperatorSelected() {
var operatorsList = this.shadowRoot.getElementById('operatorsmenu');
var operatorsList = this.querySelector('#operatorsmenu');
// Drop-down menu
if (this.selectedCondition == 'collection'
|| this.selectedCondition == 'itemType'
|| this.selectedCondition == 'fileTypeID') {
this.shadowRoot.getElementById('valuefield').hidden = true;
this.shadowRoot.getElementById('valuemenu').hidden = false;
this.shadowRoot.getElementById('value-date-age').hidden = true;
this.querySelector('#valuefield').hidden = true;
this.querySelector('#valuemenu').hidden = false;
this.querySelector('#value-date-age').hidden = true;
}
// Textbox + units dropdown for isInTheLast operator
else if (operatorsList.value=='isInTheLast')
{
// If switching from text field, clear value
if (this.shadowRoot.getElementById('value-date-age').hidden){
if (this.querySelector('#value-date-age').hidden){
this.value = '';
}
this.shadowRoot.getElementById('valuefield').hidden = true;
this.shadowRoot.getElementById('valuemenu').hidden = true;
this.shadowRoot.getElementById('value-date-age').hidden = false;
this.querySelector('#valuefield').hidden = true;
this.querySelector('#valuemenu').hidden = true;
this.querySelector('#value-date-age').hidden = false;
}
// Textbox
else
{
// If switching from date age, clear value
if (this.shadowRoot.getElementById('valuefield').hidden){
if (this.querySelector('#valuefield').hidden){
this.value = '';
}
this.shadowRoot.getElementById('valuefield').hidden = false;
this.shadowRoot.getElementById('valuemenu').hidden = true;
this.shadowRoot.getElementById('value-date-age').hidden = true;
this.querySelector('#valuefield').hidden = false;
this.querySelector('#valuemenu').hidden = true;
this.querySelector('#value-date-age').hidden = true;
}
}
createValueMenu(rows) {
let valueMenu = this.shadowRoot.getElementById('valuemenu');
let valueMenu = this.querySelector('#valuemenu');
while (valueMenu.hasChildNodes()){
valueMenu.removeChild(valueMenu.firstChild);
@ -568,13 +559,13 @@
valueMenu.value = this.value;
}
valueMenu.shadowRoot.querySelector('#label-box > image').style.maxHeight = '16px';
valueMenu.querySelector('#label-box > image').style.maxHeight = '16px';
}
initWithParentAndCondition(parent, condition) {
this.parent = parent;
this.conditionID = condition['id'];
var menu = this.shadowRoot.getElementById('conditionsmenu');
var menu = this.querySelector('#conditionsmenu');
if(this.parent.search)
{
@ -613,7 +604,7 @@
}
this.mode = condition['mode'];
this.shadowRoot.getElementById('operatorsmenu').value = condition['operator'];
this.querySelector('#operatorsmenu').value = condition['operator'];
this.value = prefix +
(condition.value ? condition.value : '');
@ -622,19 +613,19 @@
this.onConditionSelected(menu.value);
this.shadowRoot.getElementById('conditionsmenu').focus();
this.querySelector('#conditionsmenu').focus();
}
updateSearch() {
if(this.parent && this.parent.search && !this.dontupdate)
{
var condition = this.selectedCondition;
var operator = this.shadowRoot.getElementById('operatorsmenu').value;
var operator = this.querySelector('#operatorsmenu').value;
// Regular text field
if (!this.shadowRoot.getElementById('valuefield').hidden)
if (!this.querySelector('#valuefield').hidden)
{
var value = this.shadowRoot.getElementById('valuefield').value;
var value = this.querySelector('#valuefield').value;
// Convert datetimes to UTC before saving
switch (condition) {
@ -647,21 +638,21 @@
}
// Append mode to condition
if (this.shadowRoot.getElementById('valuefield').mode){
condition += '/' + this.shadowRoot.getElementById('valuefield').mode;
if (this.querySelector('#valuefield').mode){
condition += '/' + this.querySelector('#valuefield').mode;
}
}
// isInTheLast operator
else if (!this.shadowRoot.getElementById('value-date-age').hidden)
else if (!this.querySelector('#value-date-age').hidden)
{
var value = this.shadowRoot.getElementById('value-date-age').value;
var value = this.querySelector('#value-date-age').value;
}
// Handle special C1234 and S5678 form for
// collections and searches
else if (condition == 'collection') {
var letter = this.shadowRoot.getElementById('valuemenu').value.substr(0,1);
var letter = this.querySelector('#valuemenu').value.substr(0,1);
if (letter=='C')
{
condition = 'collection';
@ -670,13 +661,13 @@
{
condition = 'savedSearch';
}
var value = this.shadowRoot.getElementById('valuemenu').value.substr(1);
var value = this.querySelector('#valuemenu').value.substr(1);
}
// Regular drop-down menu
else
{
var value = this.shadowRoot.getElementById('valuemenu').value;
var value = this.querySelector('#valuemenu').value;
}
this.parent.search.updateCondition(this.conditionID, condition, operator, value);
}
@ -705,7 +696,7 @@
}
if (!menu) {
menu = this.shadowRoot.getElementById('conditionsmenu');
menu = this.querySelector('#conditionsmenu');
}
for (let i = 0; i < menu.itemCount; i++) {
let item = menu.getItemAtIndex(i);
@ -745,8 +736,8 @@
if (this.parent){
let ref = this.parent.search.getCondition(
this.parent.search.addCondition(
this.shadowRoot.getElementById('conditionsmenu').getAttribute('data-value'),
this.shadowRoot.getElementById('operatorsmenu').value,
this.querySelector('#conditionsmenu').getAttribute('data-value'),
this.querySelector('#operatorsmenu').value,
""
)
)
@ -756,20 +747,20 @@
}
disableRemoveButton() {
var button = this.shadowRoot.getElementById("remove");
var button = this.querySelector("#remove");
button.setAttribute('disabled', true);
button.removeAttribute('onclick');
}
enableRemoveButton() {
var button = this.shadowRoot.getElementById("remove");
var button = this.querySelector("#remove");
button.setAttribute('disabled', false);
button.setAttribute('onclick', "this.getRootNode().host.onRemoveClicked(event)");
button.setAttribute('onclick', "this.closest('zoterosearchcondition').onRemoveClicked(event)");
}
}
customElements.define("zoterosearchcondition", ZoteroSearchCondition);
class ZoteroSearchTextbox extends SearchElementBase {
class ZoteroSearchTextbox extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<xul:stack
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@ -797,11 +788,11 @@
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
get value() {
return this.shadowRoot.getElementById('search-textbox').value;
return this.querySelector('#search-textbox').value;
}
set value(val) {
this.shadowRoot.getElementById('search-textbox').value = val;
this.querySelector('#search-textbox').value = val;
}
get mode() {
@ -809,7 +800,7 @@
return false;
}
var menu = this.shadowRoot.getElementById('textbox-fulltext-menu');
var menu = this.querySelector('#textbox-fulltext-menu');
var selectedIndex = -1;
for (var i=0; i<menu.childNodes.length; i++){
@ -836,12 +827,12 @@
}
update(condition, mode) {
var textbox = this.shadowRoot.getElementById('search-textbox');
var button = this.shadowRoot.getElementById('textbox-button');
var textbox = this.querySelector('#search-textbox');
var button = this.querySelector('#textbox-button');
switch (condition){
case 'fulltextContent':
var menu = this.shadowRoot.getElementById('textbox-fulltext-menu');
var menu = this.querySelector('#textbox-fulltext-menu');
this.setAttribute('hasOptions', true);
button.setAttribute('hidden', false);
@ -908,7 +899,7 @@
}
customElements.define("zoterosearchtextbox", ZoteroSearchTextbox);
class ZoteroSearchAgeField extends SearchElementBase {
class ZoteroSearchAgeField extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<xul:hbox id="search-in-the-last" flex="1"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@ -925,19 +916,19 @@
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
get value() {
var input = this.shadowRoot.getElementById('input');
var menulist = this.shadowRoot.getElementById('age-list');
var input = this.querySelector('#input');
var menulist = this.querySelector('#age-list');
return input.value + ' '
+ menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value');
}
set value(val) {
var input = this.shadowRoot.getElementById('input');
var input = this.querySelector('#input');
var [num, units] = val.split(' ');
input.setAttribute('value', num);
var menulist = this.shadowRoot.getElementById('age-list');
var menulist = this.querySelector('#age-list');
var menupopup = menulist.firstChild;
var selectThis = 0;

View file

@ -2,7 +2,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/errorReport.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -1,6 +1,6 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window [
<!ENTITY % zoteroDTD SYSTEM "chrome://zotero/locale/zotero.dtd" >

View file

@ -28,7 +28,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<?xml-stylesheet href="chrome://zotero/skin/integration.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -27,7 +27,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<?xml-stylesheet href="chrome://zotero/skin/integration.css" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -28,7 +28,7 @@
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/preferences.css"?>
<?xml-stylesheet href="chrome://zotero/skin/preferences.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<window
id="zotero-locate-manager-prefs"

View file

@ -1,6 +1,6 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -27,7 +27,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/merge.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -26,7 +26,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/preferences.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window [

View file

@ -36,7 +36,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css"?>
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!--
To add an observer for a preference change, add an appropriate case in

View file

@ -1,6 +1,6 @@
<?xml version="1.0" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

View file

@ -1,7 +1,7 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -27,7 +27,7 @@
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/overlay.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">

View file

@ -26,6 +26,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/tagColorChooser.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
<window

View file

@ -34,7 +34,7 @@
<?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
<?xml-stylesheet href="chrome://zotero/skin/itemPane.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/itemPane.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window [
<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;

View file

@ -1,3 +0,0 @@
@import "components/attachmentBox";
@import "components/textLink";
@import "components/clicky";

View file

@ -1 +0,0 @@
@import "components/colorPicker";

View file

@ -1 +0,0 @@
@import "components/guidancePanel";

View file

@ -1,2 +0,0 @@
@import "components/itemBox";
@import "components/clicky";

View file

@ -1,4 +0,0 @@
@import "components/noteEditor";
@import "components/clicky";
@import "components/tagsBox";
@import "components/autosuggest";

View file

@ -1,2 +0,0 @@
@import "components/notesBox";
@import "components/clicky";

View file

@ -1 +0,0 @@
@import "components/quickSearchTextbox";

View file

@ -1,2 +0,0 @@
@import "components/relatedBox";
@import "components/clicky";

View file

@ -1,2 +0,0 @@
@import "components/tagsBox";
@import "components/clicky";

View file

@ -37,16 +37,25 @@
@import "components/mainWindow";
@import "components/notesList";
@import "components/progressMeter";
@import "components/publications-dialog.scss";
@import "components/publications-dialog";
@import "components/rtfScan.scss";
@import "components/search";
@import "components/syncButtonTooltip";
@import "components/tabBar";
@import "components/tagsBox";
@import "components/tagSelector";
@import "components/textLink";
@import "components/virtualized-table";
// Elements
// --------------------------------------------------
@import "elements/attachmentBox";
@import "elements/colorPicker";
@import "elements/guidancePanel";
@import "elements/itemBox";
@import "elements/noteEditor";
@import "elements/notesBox";
@import "elements/quickSearchTextbox";
@import "elements/richlistCheckbox";
@import "elements/tagsBox";
@import "elements/zoteroSearch";

View file

@ -1,2 +0,0 @@
@import "components/zoteroSearch";
@import "components/clicky";

View file

@ -1,2 +0,0 @@
@import "attachmentBox";
@import "mac/attachmentBox";

View file

@ -1 +0,0 @@
@import "attachmentBox";

View file

@ -1 +0,0 @@
@import "attachmentBox";

View file

@ -1 +0,0 @@
@import "colorPicker";

View file

@ -1 +0,0 @@
@import "colorPicker";

View file

@ -1 +0,0 @@
@import "colorPicker";

View file

@ -1,69 +0,0 @@
#metadata {
padding: 5px 2px 2px 2px;
}
#title
{
font-weight: bold;
/* Don't collapse blank attachment titles, since it prevents renaming */
min-height: 1.25em;
}
#metadata > label {
margin: 6px 10px 4px !important;
}
#reindex
{
padding-left: 5px;
list-style-image: url(chrome://zotero/skin/arrow_refresh.png);
}
@media (min-resolution: 1.25dppx) {
#reindex {
list-style-image: url(chrome://zotero/skin/arrow_refresh@2x.png);
width: 20px;
}
}
#linksbox
{
margin-bottom: 4px;
}
tr label
{
margin: 0 !important;
padding: 0 !important;
}
td > label, td > hbox
{
margin-top: 1px !important;
margin-bottom: 1px !important;
-moz-box-pack: start;
-moz-margin-start: 1px !important;
-moz-margin-end: 5px !important;
padding: 0 2px 0 2px !important;
border-radius: 6px;
border: 1px solid transparent;
}
td > hbox {
-moz-box-align: center;
}
/* Reindex icon makes the row larger */
#indexStatusRow > td > hbox {
margin: 0 !important;
}
td:first-child {
text-align: right;
font-weight: bold;
-moz-margin-start: 3px !important;
-moz-margin-end: 0 !important;
width: 62px;
text-align: right;
font-weight:bold;
}

View file

@ -1,37 +0,0 @@
#button {
width: 38px;
height: 24px;
appearance: none;
border: 1px solid #a7a7a7;
background-color: white;
padding: 3px;
&:active {
background-color: #ddd;
}
}
#button-tile {
display: block;
background-color: #000000;
width: 100%;
height: 100%;
}
#grid {
display: grid;
margin: 2px;
gap: 2px;
}
.grid-tile:hover {
border: 0;
}
.grid-tile[selected="true"] {
border: 1px outset #C0C0C0;
}
.grid-tile:hover:not([selected="true"]) {
border: 1px dotted #A7A7A7;
}

View file

@ -1,56 +0,0 @@
panel {
min-width: none;
}
stack {
width: 400px;
margin: 0;
padding: 0;
}
#nav-buttons {
-moz-box-align: end;
-moz-box-pack: end;
}
#nav-buttons > toolbarbutton {
-moz-appearance: none; /* Necessary on Linux for button to be shown */
width: 22px;
height: 22px;
border: 1px solid lightgray;
border-radius: 3px;
background-position: 5px 5px;
background-size: 10px;
background-repeat: no-repeat;
margin: 0;
margin-bottom: -7px;
}
#nav-buttons > toolbarbutton:hover {
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
}
#nav-buttons > toolbarbutton:active:hover {
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
transition-duration: 10ms;
}
#back-button {
background-image: url("chrome://zotero/skin/chevron-left_808080_32.png");
}
#forward-button {
margin-right: -16px;
background-image: url("chrome://zotero/skin/chevron-right_808080_32.png");
}
#close-button-box {
-moz-box-align: start;
-moz-box-pack: end;
}
#close-button {
margin: -16px -16px;
}

View file

@ -1,305 +0,0 @@
:host {
display: flex;
min-width: 0;
width: 100%;
}
#item-box {
display: flex;
flex-direction: column;
/*overflow: auto;*/
margin-top: 8px;
align-items: start;
width: 100%;
}
#info-table {
display: grid;
grid-template-columns: max-content 1fr;
grid-auto-rows: min-content;
align-items: center;
width: 100%;
}
tr {
display: contents;
}
td {
display: flex;
min-width: 0;
align-self: stretch;
align-items: center;
margin-inline-end: 5px;
}
td > input {
align-self: stretch;
}
th > label {
margin-top: 1px !important;
margin-bottom: 1px !important;
-moz-box-pack: start;
margin-inline-start: 1px !important;
margin-inline-end: 5px !important;
padding: 0 2px;
}
td > [fieldname] {
width: 100%;
}
.value {
min-height: 14px;
align-self: center;
}
.value:not(.multiline) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value.multiline {
white-space: pre-line;
}
/*td > vbox > description
{
margin: 0 !important;
}*/
#item-type-menu {
height: 1.5em !important;
min-height: 1.5em !important;
padding: 0 !important;
margin: 0 !important;
margin-inline-end: 5px !important;
max-height: 1.5em !important;
flex: 1;
&::part(dropmarker) {
display: none;
}
&::part(label) {
margin-inline-start: 0;
}
}
#item-type-menu:not(:hover):not(:active) {
border: 1px solid transparent;
background-color: transparent;
}
#item-type-menu > .menulist-label-box {
-moz-box-flex: 0 !important;
}
#item-type-menu > .menulist-label-box, #item-type-menu > .menulist-label-box > .menulist-label {
margin: 0 !important;
padding: 0 !important;
}
/* DEBUG: this doesn't seem to work, unfortunately
label[singleField=false]:after
{
content:",";
}
*/
/*textbox .textbox-input-box
{
margin: 0;
}*/
textarea {
font: inherit;
resize: none;
}
/* metadata field names */
th {
align-self: stretch;
font-weight: normal;
text-align: right;
margin-inline-start: 5px !important;
margin-inline-end: 2px !important;
}
#more-creators-label
{
font-weight: bold;
}
/*row > label
{
border: 1px solid transparent;
}
row label
{
-moz-user-focus: ignore;
}*/
.pointer:hover, .pointer:hover > label {
cursor: pointer !important;
}
/* creator type menu */
.creator-type-label, .creator-type-value {
-moz-box-align: center;
-moz-box-pack: right;
}
.creator-name-box {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
& > input {
flex: 1;
min-width: 60%;
}
& > div {
flex-shrink: 1;
min-width: 10px;
}
}
.creator-type-label > label
{
margin: 1px 0 !important;
margin-inline-end: 4px !important;
padding-inline-end: 2px !important;
}
.creator-type-dropmarker {
display: inline-block;
margin: 0 1em 1px;
background-image: url('chrome://zotero/skin/arrow-down.gif');
background-size: cover;
width: 11px;
height: 6px;
}
.creator-name-box, .date-box > span {
margin: 1px 0 !important;
margin-inline-start: 1px !important;
}
.comma {
margin: 1px 0 !important;
margin-inline-end: 3px !important;
}
#zotero-date-field-status
{
color: #666;
padding: 0 !important;
padding-inline-start: 1px !important;
padding-inline-end: 10px !important;
white-space: nowrap;
}
.zotero-field-toggle
{
width: 27px !important;
max-width: 27px !important;
min-width: 27px !important;
height: 14px;
margin: 0 !important;
margin-inline-end: 5px !important;
background-repeat: no-repeat !important;
background-position: center !important;
border-width: 0 !important;
border-radius: 4px !important;
}
/* Merge pane in duplicates view */
.zotero-field-version-button {
margin: 0;
padding: 0;
}
/*
* Retraction box
*/
#retraction-box {
cursor: default;
}
#retraction-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5em 1em;
background: #d93425;
color: white;
font-weight: bold;
}
#retraction-details {
background: #fbf0f0;
padding: .5em 1.5em;
margin-top: 0;
margin-bottom: 1em;
cursor: text;
-moz-user-select: text;
}
#retraction-details dt {
font-weight: bold;
}
#retraction-details dt:not(:first-child) {
margin-top: .5em;
}
#retraction-details dd {
margin-left: 2em;
}
#retraction-details a {
text-decoration: underline;
}
#retraction-links ul {
padding-left: 0;
}
#retraction-links li {
list-style: none;
}
#retraction-links li:not(:first-child) {
margin-top: .75em;
}
#retraction-credit {
text-align: right;
margin-top: 1.5em;
margin-right: -.9em;
margin-bottom: .2em;
}
#retraction-hide {
text-align: right;
margin-top: .3em;
margin-right: -1.2em;
margin-bottom: .3em;
}
#retraction-hide button {
background: none;
margin: 0;
padding: 0;
cursor: pointer;
display: inline;
text-decoration: underline;
border-style: none;
}

View file

@ -1,42 +0,0 @@
.header {
display: flex;
padding-left: 10px;
align-items: center;
label {
margin-right: 5px;
}
button {
min-width: 79px;
margin: 5px 6px 3px;
padding-top: 1px;
padding-bottom: 1px;
color: ButtonText;
text-shadow: none;
font-size: inherit;
}
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
.box {
overflow: hidden;
display: flex;
margin-left: 5px;
img {
width: 16px;
height: 16px;
}
label {
margin-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

View file

@ -1,42 +0,0 @@
.header {
display: flex;
padding-left: 10px;
align-items: center;
label {
margin-right: 5px;
}
button {
min-width: 79px;
margin: 5px 6px 3px;
padding-top: 1px;
padding-bottom: 1px;
color: ButtonText;
text-shadow: none;
font-size: inherit;
}
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
.box {
overflow: hidden;
display: flex;
margin-left: 5px;
img {
width: 16px;
height: 16px;
}
label {
margin-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

View file

@ -1,72 +0,0 @@
.tags-box-header {
display: flex;
padding-left: 10px;
align-items: center;
button {
min-width: 79px;
margin: 5px 6px 3px;
padding-top: 1px;
padding-bottom: 1px;
color: ButtonText;
text-shadow: none;
font-size: inherit;
}
}
.tags-box-list {
list-style: none;
margin: 0;
padding: 2px 0 0; // Leave space for textbox border on top tag
li {
display: flex;
margin: 3px 0;
margin-inline-start: 6px;
align-items: center;
height: 1.5em;
// Shift-Enter
&.multiline {
align-items: start;
height: 9em;
textarea.editable {
resize: none;
}
}
&:not(.multiline) .editable {
padding: 0 1px;
}
.zotero-box-icon {
width: 16px;
height: 16px;
}
.zotero-box-label {
flex-grow: 1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
width: 0;
}
.editable {
font-family: inherit;
font-size: inherit;
flex-grow: 1;
margin: 0 2px;
width: 0;
}
button {
border: 0;
background: none;
padding: 0;
width: 20px;
height: 18px;
}
}
}

View file

@ -1,55 +0,0 @@
#search-box > hbox, #search-box > groupbox {
margin-left: 6px;
}
groupbox {
margin-top: 0;
padding-top: 0;
}
caption {
font: inherit;
padding-left: 0 !important;
}
label:first-child:not(tooltip label), checkbox:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
checkbox {
margin-right: .5em;
}
#operatorsmenu {
width: 15em;
}
#condition-tooltips tooltip
{
background: red !important;
}
#condition-tooltips hbox > label
{
font-weight: bold;
}
.toolbarbutton-text
{
margin: 0;
padding: 0;
}
#textbox-button {
cursor: default;
appearance: none;
justify-self: end;
margin-inline-end: 8px;
align-self: center;
}
#search-in-the-last input
{
min-width: 3em;
}

View file

@ -0,0 +1,71 @@
attachment-box {
#metadata {
padding: 5px 2px 2px 2px;
}
#title
{
font-weight: bold;
/* Don't collapse blank attachment titles, since it prevents renaming */
min-height: 1.25em;
}
#metadata > label {
margin: 6px 10px 4px !important;
}
#reindex
{
padding-left: 5px;
list-style-image: url(chrome://zotero/skin/arrow_refresh.png);
}
@media (min-resolution: 1.25dppx) {
#reindex {
list-style-image: url(chrome://zotero/skin/arrow_refresh@2x.png);
width: 20px;
}
}
#linksbox
{
margin-bottom: 4px;
}
tr label
{
margin: 0 !important;
padding: 0 !important;
}
td > label, td > hbox
{
margin-top: 1px !important;
margin-bottom: 1px !important;
-moz-box-pack: start;
-moz-margin-start: 1px !important;
-moz-margin-end: 5px !important;
padding: 0 2px 0 2px !important;
border-radius: 6px;
border: 1px solid transparent;
}
td > hbox {
-moz-box-align: center;
}
/* Reindex icon makes the row larger */
#indexStatusRow > td > hbox {
margin: 0 !important;
}
td:first-child {
text-align: right;
font-weight: bold;
-moz-margin-start: 3px !important;
-moz-margin-end: 0 !important;
width: 62px;
text-align: right;
font-weight:bold;
}
}

View file

@ -0,0 +1,40 @@
color-picker {
button {
width: 38px;
height: 24px;
appearance: none;
border: 1px solid #a7a7a7;
background-color: white;
padding: 3px;
&:active {
background-color: #ddd;
}
}
.button-tile {
display: block;
background-color: #000000;
width: 100%;
height: 100%;
}
.grid {
display: grid;
margin: 2px;
gap: 2px;
}
.grid-tile:hover {
border: 0;
}
.grid-tile[selected="true"] {
border: 1px outset #C0C0C0;
}
.grid-tile:hover:not([selected="true"]) {
border: 1px dotted #A7A7A7;
}
}

View file

@ -0,0 +1,58 @@
guidance-panel {
panel {
min-width: none;
}
stack {
width: 400px;
margin: 0;
padding: 0;
}
#nav-buttons {
-moz-box-align: end;
-moz-box-pack: end;
}
#nav-buttons > toolbarbutton {
-moz-appearance: none; /* Necessary on Linux for button to be shown */
width: 22px;
height: 22px;
border: 1px solid lightgray;
border-radius: 3px;
background-position: 5px 5px;
background-size: 10px;
background-repeat: no-repeat;
margin: 0;
margin-bottom: -7px;
}
#nav-buttons > toolbarbutton:hover {
border-color: var(--toolbarbutton-hover-bordercolor);
box-shadow: var(--toolbarbutton-hover-boxshadow);
}
#nav-buttons > toolbarbutton:active:hover {
border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow);
transition-duration: 10ms;
}
#back-button {
background-image: url("chrome://zotero/skin/chevron-left_808080_32.png");
}
#forward-button {
margin-right: -16px;
background-image: url("chrome://zotero/skin/chevron-right_808080_32.png");
}
#close-button-box {
-moz-box-align: start;
-moz-box-pack: end;
}
#close-button {
margin: -16px -16px;
}
}

304
scss/elements/_itemBox.scss Normal file
View file

@ -0,0 +1,304 @@
item-box {
display: flex;
min-width: 0;
width: 100%;
#item-box {
display: flex;
flex-direction: column;
margin-top: 8px;
align-items: start;
width: 100%;
}
#info-table {
display: grid;
grid-template-columns: max-content 1fr;
grid-auto-rows: min-content;
align-items: center;
width: 100%;
}
tr {
display: contents;
}
td {
display: flex;
min-width: 0;
align-self: stretch;
align-items: center;
margin-inline-end: 5px;
}
td > input {
align-self: stretch;
}
th > label {
margin-top: 1px !important;
margin-bottom: 1px !important;
-moz-box-pack: start;
margin-inline-start: 1px !important;
margin-inline-end: 5px !important;
padding: 0 2px;
}
td > [fieldname] {
width: 100%;
}
.value {
min-height: 14px;
align-self: center;
}
.value:not(.multiline) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value.multiline {
white-space: pre-line;
}
/*td > vbox > description
{
margin: 0 !important;
}*/
#item-type-menu {
height: 1.5em !important;
min-height: 1.5em !important;
padding: 0 !important;
margin: 0 !important;
margin-inline-end: 5px !important;
max-height: 1.5em !important;
flex: 1;
&::part(dropmarker) {
display: none;
}
&::part(label) {
margin-inline-start: 0;
}
}
#item-type-menu:not(:hover):not(:active) {
border: 1px solid transparent;
background-color: transparent;
}
#item-type-menu > .menulist-label-box {
-moz-box-flex: 0 !important;
}
#item-type-menu > .menulist-label-box, #item-type-menu > .menulist-label-box > .menulist-label {
margin: 0 !important;
padding: 0 !important;
}
/* DEBUG: this doesn't seem to work, unfortunately
label[singleField=false]:after
{
content:",";
}
*/
/*textbox .textbox-input-box
{
margin: 0;
}*/
textarea {
font: inherit;
resize: none;
}
/* metadata field names */
th {
align-self: stretch;
font-weight: normal;
text-align: right;
margin-inline-start: 5px !important;
margin-inline-end: 2px !important;
}
#more-creators-label
{
font-weight: bold;
}
/*row > label
{
border: 1px solid transparent;
}
row label
{
-moz-user-focus: ignore;
}*/
.pointer:hover, .pointer:hover > label {
cursor: pointer !important;
}
/* creator type menu */
.creator-type-label, .creator-type-value {
-moz-box-align: center;
-moz-box-pack: right;
}
.creator-name-box {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
& > input {
flex: 1;
min-width: 60%;
}
& > div {
flex-shrink: 1;
min-width: 10px;
}
}
.creator-type-label > label
{
margin: 1px 0 !important;
margin-inline-end: 4px !important;
padding-inline-end: 2px !important;
}
.creator-type-dropmarker {
display: inline-block;
margin: 0 1em 1px;
background-image: url('chrome://zotero/skin/arrow-down.gif');
background-size: cover;
width: 11px;
height: 6px;
}
.creator-name-box, .date-box > span {
margin: 1px 0 !important;
margin-inline-start: 1px !important;
}
.comma {
margin: 1px 0 !important;
margin-inline-end: 3px !important;
}
#zotero-date-field-status
{
color: #666;
padding: 0 !important;
padding-inline-start: 1px !important;
padding-inline-end: 10px !important;
white-space: nowrap;
}
.zotero-field-toggle
{
width: 27px !important;
max-width: 27px !important;
min-width: 27px !important;
height: 14px;
margin: 0 !important;
margin-inline-end: 5px !important;
background-repeat: no-repeat !important;
background-position: center !important;
border-width: 0 !important;
border-radius: 4px !important;
}
/* Merge pane in duplicates view */
.zotero-field-version-button {
margin: 0;
padding: 0;
}
/*
* Retraction box
*/
#retraction-box {
cursor: default;
}
#retraction-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5em 1em;
background: #d93425;
color: white;
font-weight: bold;
}
#retraction-details {
background: #fbf0f0;
padding: .5em 1.5em;
margin-top: 0;
margin-bottom: 1em;
cursor: text;
-moz-user-select: text;
}
#retraction-details dt {
font-weight: bold;
}
#retraction-details dt:not(:first-child) {
margin-top: .5em;
}
#retraction-details dd {
margin-left: 2em;
}
#retraction-details a {
text-decoration: underline;
}
#retraction-links ul {
padding-left: 0;
}
#retraction-links li {
list-style: none;
}
#retraction-links li:not(:first-child) {
margin-top: .75em;
}
#retraction-credit {
text-align: right;
margin-top: 1.5em;
margin-right: -.9em;
margin-bottom: .2em;
}
#retraction-hide {
text-align: right;
margin-top: .3em;
margin-right: -1.2em;
margin-bottom: .3em;
}
#retraction-hide button {
background: none;
margin: 0;
padding: 0;
cursor: pointer;
display: inline;
text-decoration: underline;
border-style: none;
}
}

View file

@ -0,0 +1,44 @@
notes-box, related-box {
.header {
display: flex;
padding-left: 10px;
align-items: center;
label {
margin-right: 5px;
}
button {
min-width: 79px;
margin: 5px 6px 3px;
padding-top: 1px;
padding-bottom: 1px;
color: ButtonText;
text-shadow: none;
font-size: inherit;
}
}
.grid {
display: grid;
grid-template-columns: 1fr auto;
.box {
overflow: hidden;
display: flex;
margin-left: 5px;
img {
width: 16px;
height: 16px;
}
label {
margin-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}

View file

@ -1,10 +1,14 @@
:host(#zotero-tb-search) {
font-size: var(--zotero-font-size) !important;
quick-search-textbox {
font-size: var(--zotero-font-size);
margin-right: 0;
width: 172px;
height: 25px;
}
*[zoteroFontSize=small] quick-search-textbox {
font-size: 11px;
}
#zotero-tb-search-menu-button {
margin: 0;
padding: 0;

View file

@ -0,0 +1,74 @@
tags-box {
.tags-box-header {
display: flex;
padding-left: 10px;
align-items: center;
button {
min-width: 79px;
margin: 5px 6px 3px;
padding-top: 1px;
padding-bottom: 1px;
color: ButtonText;
text-shadow: none;
font-size: inherit;
}
}
.tags-box-list {
list-style: none;
margin: 0;
padding: 2px 0 0; // Leave space for textbox border on top tag
li {
display: flex;
margin: 3px 0;
margin-inline-start: 6px;
align-items: center;
height: 1.5em;
// Shift-Enter
&.multiline {
align-items: start;
height: 9em;
textarea.editable {
resize: none;
}
}
&:not(.multiline) .editable {
padding: 0 1px;
}
.zotero-box-icon {
width: 16px;
height: 16px;
}
.zotero-box-label {
flex-grow: 1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
width: 0;
}
.editable {
font-family: inherit;
font-size: inherit;
flex-grow: 1;
margin: 0 2px;
width: 0;
}
button {
border: 0;
background: none;
padding: 0;
width: 20px;
height: 18px;
}
}
}
}

View file

@ -0,0 +1,57 @@
zoterosearch {
#search-box > hbox, #search-box > groupbox {
margin-left: 6px;
}
groupbox {
margin-top: 0;
padding-top: 0;
}
caption {
font: inherit;
padding-left: 0 !important;
}
label:first-child:not(tooltip label), checkbox:first-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
checkbox {
margin-right: .5em;
}
#operatorsmenu {
width: 15em;
}
#condition-tooltips tooltip
{
background: red !important;
}
#condition-tooltips hbox > label
{
font-weight: bold;
}
.toolbarbutton-text
{
margin: 0;
padding: 0;
}
#textbox-button {
cursor: default;
appearance: none;
justify-self: end;
margin-inline-end: 8px;
align-self: center;
}
#search-in-the-last input
{
min-width: 3em;
}
}

View file

@ -1 +0,0 @@
@import "guidancePanel";

View file

@ -1 +0,0 @@
@import "guidancePanel";

View file

@ -1 +0,0 @@
@import "guidancePanel";

View file

@ -1,2 +0,0 @@
@import "itemBox";
@import "mac/itemBox";

View file

@ -1,2 +0,0 @@
@import "itemBox";
@import "linux/itemBox";

View file

@ -1,2 +0,0 @@
@import "itemBox";
@import "win/itemBox";

View file

@ -1,7 +0,0 @@
input
{
padding: 1px 0;
padding-inline-start: 1px;
padding-inline-end: 2px;
margin: -1px 0;
}

View file

@ -0,0 +1,20 @@
item-box {
th {
margin-top: 1px;
}
.zotero-clicky {
min-height: 17px;
}
td input {
margin: -2px 0 0;
padding: 1px;
border-width: 1px;
border-radius: 6px;
}
.creator-name-box input {
margin-bottom: -1px;
}
}

View file

@ -1 +0,0 @@
@import "noteEditor";

View file

@ -1 +0,0 @@
@import "noteEditor";

View file

@ -1 +0,0 @@
@import "noteEditor";

View file

@ -1 +0,0 @@
@import "notesBox";

View file

@ -1 +0,0 @@
@import "notesBox";

View file

@ -1 +0,0 @@
@import "notesBox";

View file

@ -1,2 +0,0 @@
@import "quickSearchTextbox";
@import "mac/quickSearchTextbox";

View file

@ -1,2 +0,0 @@
@import "quickSearchTextbox";
@import "linux/quickSearchTextbox";

View file

@ -1,2 +0,0 @@
@import "quickSearchTextbox";
@import "win/quickSearchTextbox";

View file

@ -1 +0,0 @@
@import "relatedBox";

View file

@ -1 +0,0 @@
@import "relatedBox";

View file

@ -1 +0,0 @@
@import "relatedBox";

View file

@ -1 +0,0 @@
@import "tagsBox";

View file

@ -1 +0,0 @@
@import "tagsBox";

View file

@ -1 +0,0 @@
@import "tagsBox";

View file

@ -1,4 +1,4 @@
@import "zotero-react-client";
@import "zotero";
//
// MacOS specific
@ -14,3 +14,9 @@
@import "mac/virtualized-table";
@import "mac/collection-tree";
@import "mac/item-tree";
// Elements
@import "mac/elements/attachmentBox";
@import "mac/elements/itemBox";
@import "mac/elements/quickSearchTextbox";

View file

@ -1,4 +1,4 @@
@import "zotero-react-client";
@import "zotero";
//
// Linux specific
@ -13,3 +13,9 @@
@import "linux/virtualized-table";
@import "linux/item-tree";
@import "linux/collection-tree";
@import "linux/feedSettings";
// Elements
@import "linux/elements/itemBox";
@import "linux/elements/quickSearchTextbox";

View file

@ -1,4 +1,4 @@
@import "zotero-react-client";
@import "zotero";
//
// Windows specific
@ -9,3 +9,8 @@
@import "win/tag-selector";
@import "win/item-tree";
@import "win/virtualized-table";
// Elements
@import "win/elements/itemBox";
@import "win/elements/quickSearchTextbox";

View file

@ -1 +0,0 @@
@import "zoteroSearch";

View file

@ -1 +0,0 @@
@import "zoteroSearch";

View file

@ -1 +0,0 @@
@import "zoteroSearch";