mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix more Z6/Z7 inconsistencies in Advanced Search

Browse source 
- Prevent row height from changing when switching between text input conditions
  and menulist conditions
   - Replace some of (far from all of) the XUL layout with flexbox
- Restore groupbox appearance
   - A little retro? We probably want some kind of border like we used to have
- Replace some duplicate IDs with classes for styling
This commit is contained in:
Abe Jellinek 2023-08-24 11:14:59 -04:00
parent 075457be45
commit 6cd44f19fe
2 changed files with 62 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
chrome/content/zotero/elements/zoteroSearch.js
View file

@ -221,28 +221,27 @@
class ZoteroSearchCondition extends XULElementBase { class ZoteroSearchCondition extends XULElementBase {
content = MozXULElement.parseXULToFragment(` content = MozXULElement.parseXULToFragment(`
<xul:hbox id="search-condition" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" <html:div class="search-condition">
flex="1"> <popupset id="condition-tooltips"/>
<xul:popupset id="condition-tooltips"/>
<xul:menulist id="conditionsmenu" oncommand="this.closest('zoterosearchcondition').onConditionSelected(event.target.value); event.stopPropagation()" native="true"> <menulist id="conditionsmenu" oncommand="this.closest('zoterosearchcondition').onConditionSelected(event.target.value); event.stopPropagation()" native="true">
<xul:menupopup onpopupshown="this.closest('zoterosearchcondition').revealSelectedCondition()"> <menupopup onpopupshown="this.closest('zoterosearchcondition').revealSelectedCondition()">
<xul:menu id="more-conditions-menu" label="&zotero.general.more;"> <menu id="more-conditions-menu" label="&zotero.general.more;">
<xul:menupopup/> <menupopup/>
</xul:menu> </menu>
</xul:menupopup> </menupopup>
</xul:menulist> </menulist>
<xul:menulist id="operatorsmenu" oncommand="this.closest('zoterosearchcondition').onOperatorSelected(); event.stopPropagation()" native="true"> <menulist id="operatorsmenu" oncommand="this.closest('zoterosearchcondition').onOperatorSelected(); event.stopPropagation()" native="true">
<xul:menupopup/> <menupopup/>
</xul:menulist> </menulist>
<xul:zoterosearchtextbox id="valuefield" flex="1"/> <zoterosearchtextbox id="valuefield" class="valuefield"/>
<xul:menulist id="valuemenu" flex="1" hidden="true" native="true"> <menulist id="valuemenu" class="valuemenu" hidden="true" native="true">
<xul:menupopup/> <menupopup/>
</xul:menulist> </menulist>
<xul:zoterosearchagefield id="value-date-age" hidden="true" flex="1"/> <zoterosearchagefield id="value-date-age" class="value-date-age" hidden="true"/>
<xul:label id="remove" class="zotero-clicky zotero-clicky-minus" value="-" onclick="this.closest('zoterosearchcondition').onRemoveClicked(event)"/> <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)"/> <label id="add" class="zotero-clicky zotero-clicky-plus" value="+" onclick="this.closest('zoterosearchcondition').onAddClicked(event)"/>
</xul:hbox> </html:div>
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']); `, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
init() { init() {
@ -904,34 +903,32 @@
class ZoteroSearchAgeField extends XULElementBase { class ZoteroSearchAgeField extends XULElementBase {
content = MozXULElement.parseXULToFragment(` content = MozXULElement.parseXULToFragment(`
<xul:hbox id="search-in-the-last" flex="1" <html:div class="search-in-the-last">
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" <html:input class="input"/>
xmlns:html="http://www.w3.org/1999/xhtml"> <menulist class="age-list" native="true">
<html:input id="input" style="-moz-box-flex: 1"/> <menupopup>
<xul:menulist id="age-list" native="true"> <menuitem label="&zotero.search.date.units.days;" value="days" selected="true"/>
<xul:menupopup flex="1"> <menuitem label="&zotero.search.date.units.months;" value="months"/>
<xul:menuitem label="&zotero.search.date.units.days;" value="days" selected="true"/> <menuitem label="&zotero.search.date.units.years;" value="years"/>
<xul:menuitem label="&zotero.search.date.units.months;" value="months"/> </menupopup>
<xul:menuitem label="&zotero.search.date.units.years;" value="years"/> </menulist>
</xul:menupopup> </html:div>
</xul:menulist>
</xul:hbox>
`, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']); `, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']);
get value() { get value() {
var input = this.querySelector('#input'); var input = this.querySelector('.input');
var menulist = this.querySelector('#age-list'); var menulist = this.querySelector('.age-list');
return input.value + ' ' return input.value + ' '
+ menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value'); + menulist.firstChild.childNodes[menulist.selectedIndex].getAttribute('value');
} }
set value(val) { set value(val) {
var input = this.querySelector('#input'); var input = this.querySelector('.input');
var [num, units] = val.split(' '); var [num, units] = val.split(' ');
input.setAttribute('value', num); input.setAttribute('value', num);
var menulist = this.querySelector('#age-list'); var menulist = this.querySelector('.age-list');
var menupopup = menulist.firstChild; var menupopup = menulist.firstChild;
var selectThis = 0; var selectThis = 0;

29
scss/elements/_zoteroSearch.scss
View file

@ -6,6 +6,11 @@ zoterosearch {
groupbox { groupbox {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
& > #conditions {
-moz-appearance: groupbox;
padding: 6px;
}
} }
caption { caption {
@ -22,6 +27,20 @@ zoterosearch {
margin-right: .5em; margin-right: .5em;
} }
input {
margin-block: 0;
}
.search-condition {
-moz-box-flex: 1;
display: flex;
align-items: center;
.valuefield, .valuemenu, .value-date-age {
flex: 1;
}
}
#operatorsmenu { #operatorsmenu {
width: 15em; width: 15em;
} }
@ -50,8 +69,14 @@ zoterosearch {
align-self: center; align-self: center;
} }
#search-in-the-last input .search-in-the-last {
{ -moz-box-flex: 1;
display: flex;
align-items: center;
.input {
min-width: 3em; min-width: 3em;
flex: 1;
}
} }
} }