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

Right pane (item-pane) can be collapsed

Browse source 
This belongs to issue #509 and was asked several times in the forum.

 * Add attribute `collapse="after"` to the splitter and add a grippy element.
 * To remember its state after restart I copied `zotero-persist="state"`.
 * Handle zotero-items-splitter the same as zotero-collections-splitter in zotero-platform/mac/overlay.css
 * Change min-width to 250px for #zotero-item-pane in zotero/overlay.css.
 * Update the function `updateToolbarPosition` in zotero/zoteroPane.js:
   * The width of the items-toolbar is corrected if the left pane is collapsed (and the icons are grouped on the left margin together).
   * If the right pane is collapsed, then the items-toolbar is made flexible while making the item-toolbar unflexible. As a result the search box and locate icon are flushed right to the other icons.
This commit is contained in:
Philipp Zumstein 2015-01-04 12:47:41 +01:00
parent 3792e94c10
commit d5b4c31575
4 changed files with 52 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
chrome/content/zotero-platform/mac/overlay.css
View file

@ -255,7 +255,7 @@
background-color: #8b8b8b !important;
}
#zotero-collections-splitter[state=collapsed]
#zotero-collections-splitter[state=collapsed], #zotero-items-splitter[state=collapsed]
{
border-right: 1px;
border-color: #A5A5A5;
@ -267,7 +267,7 @@
padding: 0;
}
#zotero-collections-splitter[state=collapsed] > grippy
#zotero-collections-splitter[state=collapsed] > grippy, #zotero-items-splitter[state=collapsed] > grippy
{
-moz-appearance: none;
background-image: url("chrome://zotero/skin/mac/vgrippy.png");
@ -297,7 +297,7 @@
height: 8px;
}
#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover
#zotero-tags-splitter > grippy:hover, #zotero-collections-splitter > grippy:hover, #zotero-items-splitter > grippy:hover
{
background-color:transparent;
}

55
chrome/content/zotero/zoteroPane.js
View file

@ -4100,18 +4100,51 @@ var ZoteroPane = new function()
*/
this.updateToolbarPosition = function() {
if(document.getElementById("zotero-pane-stack").hidden) return;
const PANES = ["collections", "items"];
for each(var paneName in PANES) {
var pane = document.getElementById("zotero-"+paneName+"-pane");
var splitter = document.getElementById("zotero-"+paneName+"-splitter");
var toolbar = document.getElementById("zotero-"+paneName+"-toolbar");
var paneComputedStyle = window.getComputedStyle(pane, null);
var splitterComputedStyle = window.getComputedStyle(splitter, null);
toolbar.style.width = paneComputedStyle.getPropertyValue("width");
toolbar.style.marginRight = splitterComputedStyle.getPropertyValue("width");
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);
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');
itemsToolbar.setAttribute("flex", "1");
itemToolbar.setAttribute("flex", "0");
} else {
itemsToolbar.style.width = itemsToolbarWidthNumber + "px";
itemsToolbar.setAttribute("flex", "0");
itemToolbar.setAttribute("flex", "1");
}
}
/**

6
chrome/content/zotero/zoteroPane.xul
View file

@ -538,9 +538,11 @@
</deck>
</vbox>
<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest"
<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" zotero-persist="state"
onmousemove="ZoteroPane_Local.updateToolbarPosition()"
oncommand="ZoteroPane_Local.updateToolbarPosition()"/>
oncommand="ZoteroPane_Local.updateToolbarPosition()">
<grippy id="zotero-items-grippy"/>
</splitter>
<!-- itemPane.xul -->
<vbox id="zotero-item-pane"/>

2
chrome/skin/default/zotero/overlay.css
View file

@ -222,7 +222,7 @@
#zotero-item-pane
{
width: 338px;
min-width: 338px;
min-width: 250px;
}
#zotero-pane .toolbar