From d5b4c31575fa7d31d490accbdeb09bedb624d5b9 Mon Sep 17 00:00:00 2001 From: Philipp Zumstein Date: Sun, 4 Jan 2015 12:47:41 +0100 Subject: [PATCH] Right pane (item-pane) can be collapsed 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. --- .../content/zotero-platform/mac/overlay.css | 6 +- chrome/content/zotero/zoteroPane.js | 55 +++++++++++++++---- chrome/content/zotero/zoteroPane.xul | 6 +- chrome/skin/default/zotero/overlay.css | 2 +- 4 files changed, 52 insertions(+), 17 deletions(-) diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index a021651ab7..6d0d9eeeef 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -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; } diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index 359e6780db..6324910349 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -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"); + } + } /** diff --git a/chrome/content/zotero/zoteroPane.xul b/chrome/content/zotero/zoteroPane.xul index 0ad63fe3c2..603c2f4bd4 100644 --- a/chrome/content/zotero/zoteroPane.xul +++ b/chrome/content/zotero/zoteroPane.xul @@ -538,9 +538,11 @@ - + oncommand="ZoteroPane_Local.updateToolbarPosition()"> + + diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css index 633bd16288..0a4a66c5c4 100644 --- a/chrome/skin/default/zotero/overlay.css +++ b/chrome/skin/default/zotero/overlay.css @@ -222,7 +222,7 @@ #zotero-item-pane { width: 338px; - min-width: 338px; + min-width: 250px; } #zotero-pane .toolbar