suzanne.soy/zotero
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a second horizontal layout to Zotero for small screens (#1010)

Browse Source
This commit is contained in:
LinuxMercedes 2016-05-27 19:57:29 -05:00 committed by Dan Stillman
parent e573ad886f
commit 6bff554976
9 changed files with 308 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
chrome/content/zotero-platform/mac/overlay.css
View File

@ -302,20 +302,44 @@
-moz-appearance: none;
-moz-border-start: none !important;
-moz-border-end: none !important;
background-color: #8b8b8b !important;
}
#zotero-collections-splitter, #zotero-items-splitter[orient=horizontal]
{
max-width: 1px !important;
min-width: 1px !important;
width: 1px !important;
background-color: #8b8b8b !important;
}
#zotero-items-splitter[orient=vertical]
{
max-height: 1px !important;
min-height: 1px !important;
height: 1px !important;
}
#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed] {
border: 0 solid #d6d6d6 !important;
padding: 0;
}
#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed][orient=horizontal]
{
background-image: url("chrome://zotero/skin/mac/vsplitter.png");
background-repeat: repeat-y;
max-width: 8px !important;
min-width: 8px !important;
width: 8px !important;
background-image: url("chrome://zotero/skin/mac/vsplitter.png");
background-repeat: repeat-y;
padding: 0;
}
#zotero-items-splitter[state=collapsed][orient=vertical]
{
background-image: url("chrome://zotero/skin/mac/hsplitter.png");
background-repeat: repeat-x;
max-height: 8px !important;
min-height: 8px !important;
height: 8px !important;
}
#zotero-collections-splitter[state=collapsed] {

2
chrome/content/zotero/itemPane.xul
View File

@ -32,7 +32,7 @@
<script src="include.js"/>
<script src="itemPane.js" type="application/javascript;version=1.8"/>
<vbox id="zotero-item-pane" zotero-persist="width">
<vbox id="zotero-item-pane" zotero-persist="width height" flex="1">
<!-- Trash -->
<hbox id="zotero-item-pane-top-buttons-trash" class="zotero-item-pane-top-buttons" hidden="true">
<button id="zotero-item-restore-button" label="&zotero.items.menu.restoreToLibrary;"

11
chrome/content/zotero/preferences/preferences_general.xul
View File

@ -32,6 +32,7 @@
<preferences id="zotero-prefpane-general-preferences">
<preference id="pref-fontSize" name="extensions.zotero.fontSize" type="string"/>
<preference id="pref-layout" name="extensions.zotero.layout" type="string"/>
<preference id="pref-automaticScraperUpdates" name="extensions.zotero.automaticScraperUpdates" type="bool"/>
<preference id="pref-reportTranslationFailure" name="extensions.zotero.reportTranslationFailure" type="bool"/>
<preference id="pref-automaticSnapshots" name="extensions.zotero.automaticSnapshots" type="bool"/>
@ -56,6 +57,16 @@
</columns>
<rows id="zotero-prefpane-general-rows">
<row>
<hbox align="center">
<label value="&zotero.preferences.layout;" control="layout"/>
</hbox>
<radiogroup id="layout" orient="horizontal" align="center" preference="pref-layout">
<radio id="horizontal" label="&zotero.preferences.layout.standard;" value="standard"/>
<radio id="vertical" label="&zotero.preferences.layout.stacked;" value="stacked"/>
</radiogroup>
</row>
<row>
<hbox align="center">
<label value="&zotero.preferences.fontSize;" control="fontSize"/>

3
chrome/content/zotero/xpcom/zotero.js
View File

@ -2328,6 +2328,9 @@ Zotero.Prefs = new function(){
Zotero.Schema.stopRepositoryTimer();
}
}],
[ "layout", function(val) {
Zotero.getActiveZoteroPane().updateLayout();
}],
[ "note.fontSize", function(val) {
if (val < 6) {
Zotero.Prefs.set('note.fontSize', 11);

65
chrome/content/zotero/zoteroPane.js
View File

@ -93,6 +93,7 @@ var ZoteroPane = new function()
var zp = document.getElementById('zotero-pane');
Zotero.setFontSize(zp);
ZoteroPane_Local.updateLayout();
ZoteroPane_Local.updateToolbarPosition();
window.addEventListener("resize", ZoteroPane_Local.updateToolbarPosition, false);
window.setTimeout(ZoteroPane_Local.updateToolbarPosition, 0);
@ -375,6 +376,7 @@ var ZoteroPane = new function()
_madeVisible = true;
this.unserializePersist();
this.updateLayout();
this.updateToolbarPosition();
this.updateTagSelectorSize();
@ -4579,6 +4581,23 @@ var ZoteroPane = new function()
if(browserWindow.ZoteroOverlay) browserWindow.ZoteroOverlay.toggleTab();
}
/**
* Sets the layout to either a three-vertical-pane layout and a layout where itemsPane is above itemPane
*/
this.updateLayout = function() {
var layoutSwitcher = document.getElementById("zotero-layout-switcher");
var itemsSplitter = document.getElementById("zotero-items-splitter");
if(Zotero.Prefs.get("layout") === "stacked") { // itemsPane above itemPane
layoutSwitcher.setAttribute("orient", "vertical");
itemsSplitter.setAttribute("orient", "vertical");
} else { // three-vertical-pane
layoutSwitcher.setAttribute("orient", "horizontal");
itemsSplitter.setAttribute("orient", "horizontal");
}
this.updateToolbarPosition();
}
/**
* Shows the Zotero pane, making it visible if it is not and switching to the appropriate tab
* if necessary.
@ -4607,7 +4626,7 @@ var ZoteroPane = new function()
var elValues = serializedValues[id];
for(var attr in elValues) {
// TEMP: For now, ignore persisted collapsed state for item pane splitter
if (el.id == 'zotero-items-splitter') continue;
if (el.id == 'zotero-items-splitter' && attr == 'state') continue;
// And don't restore to min-width if splitter was collapsed
if (el.id == 'zotero-item-pane' && attr == 'width' && elValues[attr] == 250
&& 'zotero-items-splitter' in serializedValues
@ -4650,48 +4669,32 @@ var ZoteroPane = new function()
* Moves around the toolbar when the user moves around the pane
*/
this.updateToolbarPosition = function() {
if(document.getElementById("zotero-pane-stack").hidden) return;
var paneStack = document.getElementById("zotero-pane-stack");
if(paneStack.hidden) return;
var stackedLayout = Zotero.Prefs.get("layout") === "stacked";
var collectionsPane = document.getElementById("zotero-collections-pane");
var collectionsToolbar = document.getElementById("zotero-collections-toolbar");
var collectionsSplitter = document.getElementById("zotero-collections-splitter");
var itemsPane = document.getElementById("zotero-items-pane");
var itemsToolbar = document.getElementById("zotero-items-toolbar");
var itemsSplitter = document.getElementById("zotero-items-splitter");
var itemPane = document.getElementById("zotero-item-pane");
var itemToolbar = document.getElementById("zotero-item-toolbar");
var collectionsPaneComputedStyle = window.getComputedStyle(collectionsPane, null);
var collectionsSplitterComputedStyle = window.getComputedStyle(collectionsSplitter, null);
var itemsPaneComputedStyle = window.getComputedStyle(itemsPane, null);
var itemsSplitterComputedStyle = window.getComputedStyle(itemsSplitter, null);
var itemPaneComputedStyle = window.getComputedStyle(itemPane, null);
collectionsToolbar.style.width = collectionsPane.boxObject.width + 'px';
var collectionsPaneWidth = collectionsPaneComputedStyle.getPropertyValue("width");
var collectionsSplitterWidth = collectionsSplitterComputedStyle.getPropertyValue("width");
var itemsPaneWidth = itemsPaneComputedStyle.getPropertyValue("width");
var itemsSplitterWidth = itemsSplitterComputedStyle.getPropertyValue("width");
var itemPaneWidth = itemPaneComputedStyle.getPropertyValue("width");
collectionsToolbar.style.width = collectionsPaneWidth;
collectionsToolbar.style.marginRight = collectionsSplitterWidth;
itemsToolbar.style.marginRight = itemsSplitterWidth;
var itemsToolbarWidthNumber = parseInt(itemsPaneWidth, 10);
if (collectionsPane.collapsed) {
var collectionsToolbarComputedStyle = window.getComputedStyle(collectionsToolbar, null);
var collectionsToolbarWidth = collectionsToolbarComputedStyle.getPropertyValue("width");// real width (nonzero) after the new definition
itemsToolbarWidthNumber = itemsToolbarWidthNumber-parseInt(collectionsToolbarWidth, 10);
}
if (itemPane.collapsed) {
// Then the itemsToolbar and itemToolbar share the same space, and it seems best to use some flex attribute from right (because there might be other icons appearing or vanishing).
itemsToolbar.style.removeProperty('width');
if (stackedLayout || itemPane.collapsed) {
// The itemsToolbar and itemToolbar share the same space, and it seems best to use some flex attribute from right (because there might be other icons appearing or vanishing).
itemsToolbar.setAttribute("flex", "1");
itemToolbar.setAttribute("flex", "0");
} else {
itemsToolbar.style.width = itemsToolbarWidthNumber + "px";
var itemsToolbarWidth = itemsPane.boxObject.width;
if (collectionsPane.collapsed) {
itemsToolbarWidth -= collectionsToolbar.boxObject.width;
}
itemsToolbar.style.width = itemsToolbarWidth + "px";
itemsToolbar.setAttribute("flex", "0");
itemToolbar.setAttribute("flex", "1");
}

7
chrome/content/zotero/zoteroPane.xul
View File

@ -248,6 +248,7 @@
</tooltip>
</toolbarbutton>
<toolbarseparator id="zotero-fullscreen-close-separator" class="standalone-no-display"/>
<toolbarbutton id="zotero-tb-fullscreen" tooltiptext="&zotero.toolbar.tab.tooltip;" oncommand="ZoteroPane_Local.toggleTab();" class="zotero-tb-button standalone-no-display"/>
<toolbarbutton id="zotero-close-button" class="tabs-closebutton close-icon standalone-no-display" oncommand="ZoteroOverlay.toggleDisplay()"/>
</hbox>
@ -357,7 +358,8 @@
<grippy id="zotero-collections-grippy"/>
</splitter>
<vbox id="zotero-items-pane" zotero-persist="width" flex="1">
<box id="zotero-layout-switcher" orient="horizontal" zotero-persist="orient" flex="1">
<vbox id="zotero-items-pane" zotero-persist="width height" flex="1">
<deck id="zotero-items-pane-content" selectedIndex="0" flex="1">
<!-- Key navigation is handled by listener in itemTreeView.js -->
<tree
@ -561,7 +563,7 @@
</deck>
</vbox>
<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" zotero-persist="state"
<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" orient="horizontal" zotero-persist="state orient"
onmousemove="ZoteroPane_Local.updateToolbarPosition()"
oncommand="ZoteroPane_Local.updateToolbarPosition()">
<grippy id="zotero-items-grippy"/>
@ -569,6 +571,7 @@
<!-- itemPane.xul -->
<vbox id="zotero-item-pane"/>
</box>
</hbox>
</vbox>

3
chrome/locale/en-US/zotero/preferences.dtd
View File

@ -12,6 +12,9 @@
<!ENTITY zotero.preferences.showIn.browserPane "Browser pane">
<!ENTITY zotero.preferences.showIn.separateTab "Separate tab">
<!ENTITY zotero.preferences.showIn.appTab "App tab">
<!ENTITY zotero.preferences.layout "Layout:">
<!ENTITY zotero.preferences.layout.standard "Standard">
<!ENTITY zotero.preferences.layout.stacked "Stacked">
<!ENTITY zotero.preferences.fontSize "Font size:">
<!ENTITY zotero.preferences.fontSize.small "Small">
<!ENTITY zotero.preferences.fontSize.medium "Medium">

11
chrome/skin/default/zotero/overlay.css
View File

@ -224,6 +224,7 @@
#zotero-items-pane
{
min-width: 290px;
min-height: 150px;
}
/* Used for intro text for My Publications */
@ -249,6 +250,11 @@
min-width: 250px;
}
#zotero-layout-switcher
{
min-width: 560px;
}
#zotero-pane .toolbar
{
height: 32px !important; /* Hard-code this to fix toolbar icon compression on Linux */
@ -263,9 +269,14 @@
}
#zotero-collections-toolbar {
margin-right: 10px; /* Set to width of splitter for visual aesthetics */
padding-left: 2px;
}
#zotero-items-toolbar {
margin-right: 10px;
}
.zotero-tb-button {
padding-left: 5px;
padding-right: 5px;

1
defaults/preferences/zotero.js
View File

@ -36,6 +36,7 @@ pref("extensions.zotero.downloadAssociatedFiles",true);
pref("extensions.zotero.reportTranslationFailure",true);
pref("extensions.zotero.automaticTags",true);
pref("extensions.zotero.fontSize", "1.0");
pref("extensions.zotero.layout", "standard");
pref("extensions.zotero.recursiveCollections", false);
pref("extensions.zotero.attachmentRenameFormatString", '{%c - }{%y - }{%t{50}}');
pref("extensions.zotero.capitalizeTitles", false);