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

fx-compat: Lay out preferences window with flexbox (#3073)

Browse source
This commit is contained in:
Abe Jellinek 2023-04-10 15:37:50 -04:00 • committed by GitHub
parent 80c2f233d4
commit 6a85dd2c5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 108 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chrome/content/zotero/preferences/preferences.js
View file

@ -212,7 +212,7 @@ var Zotero_Preferences = {
this.navigation.append(listItem);
let container = document.createXULElement('vbox');
let container = document.createElement('div');
container.hidden = true;
this.helpContainer.before(container);

28
chrome/content/zotero/preferences/preferences.xhtml
View file

@ -49,9 +49,7 @@
windowtype="zotero:pref"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
style="display: flex;"
width="800"
height="600">
style="display: flex;">
<script>
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
@ -79,28 +77,28 @@
<key id="key_find" modifiers="accel" key="F" oncommand="document.getElementById('prefs-search').focus()"/>
</keyset>
<hbox id="prefs-outer-container" flex="1">
<html:div id="prefs-outer-container">
<richlistbox id="prefs-navigation"></richlistbox>
<vbox id="prefs-inner-container" flex="1">
<hbox id="prefs-search-container" align="center">
<hbox flex="1" pack="start" align="center">
<html:div id="prefs-inner-container">
<html:div id="prefs-search-container">
<html:div id="prefs-subpane-back-button-container">
<button
id="prefs-subpane-back-button"
label="‹"
aria-label="&zotero.pdfReader.back;"
hidden="true"/>
</hbox>
</html:div>
<search-textbox id="prefs-search" placeholder="&zotero.lookup.button.search;" timeout="1"/>
</hbox>
<vbox id="prefs-content" flex="1">
<hbox id="prefs-help-container" pack="end">
</html:div>
<html:div id="prefs-content">
<html:div id="prefs-help-container">
<button
oncommand="Zotero_Preferences.openHelpLink()"
label="&zotero.preferences.helpButton.label;"
class="help-button"
align="end"/>
</hbox>
</vbox>
</vbox>
</hbox>
</html:div>
</html:div>
</html:div>
</html:div>
</window>

2
chrome/content/zotero/preferences/preferences_advanced.js
View file

@ -833,7 +833,7 @@ Zotero_Preferences.Keys = {
init: function () {
for (let label of document.querySelectorAll('#zotero-keys-grid .modifier')) {
// Display the appropriate modifier keys for the platform
label.value = Zotero.isMac ? Zotero.getString('general.keys.cmdShift') : Zotero.getString('general.keys.ctrlShift');
label.textContent = Zotero.isMac ? Zotero.getString('general.keys.cmdShift') : Zotero.getString('general.keys.ctrlShift');
}
var textboxes = document.querySelectorAll('#zotero-keys-grid input');

54
chrome/content/zotero/preferences/preferences_advanced.xhtml
View file

@ -30,11 +30,11 @@
<groupbox id="zotero-prefpane-advanced-miscellaneous">
<label><html:h2>&zotero.preferences.miscellaneous;</html:h2></label>
<hbox align="center">
<html:div class="pref-row">
<checkbox label="&zotero.preferences.autoUpdate;" preference="extensions.zotero.automaticScraperUpdates" native="true"/>
<button id="updateButton" style="margin-top:0" label="&zotero.preferences.updateNow;"
oncommand="Zotero_Preferences.Advanced.updateTranslators()"/>
</hbox>
</html:div>
<checkbox label="&zotero.preferences.reportTranslationFailure;" preference="extensions.zotero.reportTranslationFailure" native="true"/>
</groupbox>
@ -116,47 +116,47 @@
</groupbox>
</vbox>
<vbox class="main-section" id="zotero-prefpane-advanced-keys-tab">
<html:div class="main-section" id="zotero-prefpane-advanced-keys-tab">
<html:h1>&zotero.preferences.advanced.keys;</html:h1>
<html:div id="zotero-keys-grid">
<label value="&zotero.preferences.keys.newItem;" control="textbox-newItem"/>
<label class="modifier"/>
<html:label for="textbox-newItem">&zotero.preferences.keys.newItem;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-newItem" maxlength="1" size="1" preference="extensions.zotero.keys.newItem"/>
<label value="&zotero.preferences.keys.newNote;" control="textbox-newNote"/>
<label class="modifier"/>
<html:label for="textbox-newNote">&zotero.preferences.keys.newNote;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-newNote" maxlength="1" size="1" preference="extensions.zotero.keys.newNote"/>
<label value="&zotero.preferences.keys.focusLibrariesPane;" control="textbox-library"/>
<label class="modifier"/>
<html:label for="textbox-library">&zotero.preferences.keys.focusLibrariesPane;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-library" maxlength="1" size="1" preference="extensions.zotero.keys.library"/>
<label value="&zotero.preferences.keys.quicksearch;" control="textbox-quicksearch"/>
<label class="modifier"/>
<html:label for="textbox-quicksearch">&zotero.preferences.keys.quicksearch;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-quicksearch" maxlength="1" size="1" preference="extensions.zotero.keys.quicksearch"/>
<label value="&zotero.preferences.keys.copySelectedItemCitationsToClipboard;" control="textbox-copySelectedItemCitationsToClipboard"/>
<label class="modifier"/>
<html:label for="textbox-copySelectedItemCitationsToClipboard">&zotero.preferences.keys.copySelectedItemCitationsToClipboard;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-copySelectedItemCitationsToClipboard" maxlength="1" size="1"
preference="extensions.zotero.keys.copySelectedItemCitationsToClipboard"
oninput="if (Zotero_Preferences.Export) { Zotero_Preferences.Export.updateQuickCopyInstructions(); }"/>
<label value="&zotero.preferences.keys.copySelectedItemsToClipboard;" control="textbox-copySelectedItemsToClipboard"/>
<label class="modifier"/>
<html:label for="textbox-copySelectedItemsToClipboard">&zotero.preferences.keys.copySelectedItemsToClipboard;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-copySelectedItemsToClipboard" maxlength="1" size="1"
preference="extensions.zotero.keys.copySelectedItemsToClipboard"
oninput="if (Zotero_Preferences.Export) { Zotero_Preferences.Export.updateQuickCopyInstructions(); }"/>
<label value="&zotero.preferences.keys.toggleAllRead;" control="textbox-toggleAllRead"/>
<label class="modifier"/>
<html:label for="textbox-toggleAllRead">&zotero.preferences.keys.toggleAllRead;</html:label>
<html:label class="modifier"/>
<html:input type="text" id="textbox-toggleAllRead" maxlength="1" size="1" preference="extensions.zotero.keys.toggleAllRead"/>
</html:div>
<label class="statusLine" value="&zotero.preferences.keys.changesTakeEffect;"/>
<separator/>
</vbox>
<separator/>
</html:div>
<vbox class="main-section" id="zotero-prefpane-advanced-feeds-tab">
<html:h1>&zotero.preferences.feeds;</html:h1>
@ -215,19 +215,19 @@
<separator/>
<hbox align="center">
<label value="&zotero.preferences.fulltext.textMaxLength;"/>
<html:div class="pref-row">
<html:label>&zotero.preferences.fulltext.textMaxLength;</html:label>
<html:input type="text" size="10" preference="extensions.zotero.fulltext.textMaxLength"/>
<label value="(&zotero.preferences.default; 500000)"/>
</hbox>
<html:label>(&zotero.preferences.default; 500000)</html:label>
</html:div>
<separator class="thin"/>
<hbox align="center">
<label value="&zotero.preferences.fulltext.pdfMaxPages;"/>
<html:div class="pref-row">
<html:label>&zotero.preferences.fulltext.pdfMaxPages;</html:label>
<html:input type="text" size="5" preference="extensions.zotero.fulltext.pdfMaxPages"/>
<label value="(&zotero.preferences.default; 100)"/>
</hbox>
<html:label>(&zotero.preferences.default; 100)</html:label>
</html:div>
</groupbox>
<groupbox id="fulltext-stats">

2
chrome/content/zotero/preferences/preferences_export.xhtml
View file

@ -86,7 +86,7 @@
<separator/>
<label value="&zotero.preferences.quickCopy.siteEditor.setings;" control="quickCopy-siteSettings"/>
<hbox class="virtualized-table-container" flex="1" height="120px">
<hbox class="virtualized-table-container" flex="1">
<html:div id="quickCopy-siteSettings"/>
</hbox>
<separator class="thin"/>

75
chrome/skin/default/zotero/preferences.css
View file

@ -1,15 +1,49 @@
#prefs-content {
#zotero-prefs {
width: 800px;
height: 600px;
min-width: 800px;
min-height: 600px;
overflow-y: scroll;
}
#prefs-outer-container {
display: flex;
flex-direction: row;
min-width: 0;
min-height: 0;
-moz-box-flex: 1;
}
#prefs-inner-container {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
#prefs-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: scroll;
padding-bottom: 10px;
}
#prefs-content > * {
display: flex;
flex-direction: column;
margin: 5px 15px;
max-width: 800px;
}
#prefs-content > [hidden] {
display: none;
}
#prefs-search-container {
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
min-height: 40px;
padding-inline-end: 8px;
}
@ -20,6 +54,7 @@
#prefs-navigation {
width: 180px;
flex-shrink: 0;
appearance: none;
background: transparent;
margin: 6px;
@ -52,6 +87,10 @@
border-top: 1px solid lightgray;
}
#prefs-subpane-back-button-container {
flex: 1;
}
#prefs-subpane-back-button {
appearance: none;
font-size: 32px;
@ -70,6 +109,11 @@
color: SelectedItem;
}
#prefs-help-container {
display: flex;
align-items: end;
}
h1 {
margin: 0 0 4px 0;
font-size: 1.3em;
@ -151,6 +195,12 @@ window[windowtype="zotero:pref"] {
min-width: 600px;
}
label {
/* Apply XUL label styles to all labels */
margin-block: 1px 2px;
margin-inline: 6px 5px;
}
description, label, checkbox {
max-width: 630px;
}
@ -201,6 +251,15 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
-moz-box-pack: end; /* Right-justify left column */
}
.pref-row {
display: flex;
align-items: center;
}
button {
flex-shrink: 0;
}
/* General pane */
#zotero-prefpane-general .statusLine {
margin-inline-start: .75em;
@ -408,12 +467,8 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
font-size: 12px;
}
#quickCopy-siteSettings-rows::-moz-tree-cell(quickCopy-copyAsHTML) {
/*
DEBUG: possible to center checkmark here instead of with spaces?
Tried text-align, -moz-box-align, and -moz-box-pack
*/
#zotero-prefpane-export .virtualized-table-container {
height: 120px;
}
#zotero-quickCopy-format
@ -453,7 +508,7 @@ description label[class=zotero-text-link], label[class=zotero-text-link]
/* Shortcut Keys pane */
#zotero-prefpane-advanced-keys-tab input
{
margin-inline-start: -1px;
margin-inline-start: 0;
}
/* Advanced pane */