From a1bed8b5ad2fe8c8bafb9b6b063f9c581fa4c110 Mon Sep 17 00:00:00 2001 From: Dan Stillman Date: Thu, 26 Feb 2015 23:50:12 -0500 Subject: [PATCH] More icon tweaks - New dedicated Zotero button, available in the Customize palette - Remove "16px" Z SVG and just render "32px" one at the smaller size (there's a slight difference at the edges, but we should probably redo it anyway so that dark lines reach all the way to the bottom) - Change "Open Zotero" back to just "Zotero", since 1) it's for closing too, 2) it can also just bring Standalone to the front, and 3) "Open Zotero" looks weird and inconsistent in the menu panel next to things like "Preferences" - For now, show single large Z for combo buttons in customization palette with "Zotero (Combo)", though we can probably do something better. - Fix some HiDPI bugs when moving items between areas Still need a layout for the panel for the combo buttons --- .../content/zotero-platform/mac/overlay.css | 13 ++- .../content/zotero-platform/win/overlay.css | 1 + chrome/content/zotero/browser.js | 14 ++-- chrome/content/zotero/icon.js | 79 +++++++++++++++---- chrome/content/zotero/overlay.js | 2 +- .../zotero/zotero-z-16px-australis.svg | 72 ----------------- chrome/skin/default/zotero/zotero.css | 21 +++-- 7 files changed, 92 insertions(+), 110 deletions(-) delete mode 100644 chrome/skin/default/zotero/zotero-z-16px-australis.svg diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index bac52ea0b..ee9a7839d 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -80,14 +80,13 @@ border-left: 1px solid transparent; } -@media (min-resolution: 1.5dppx) { - /* Necessary in Fx36 to keep 2x icon from being rendered at full size */ - #zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, - #zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { - width: 16px; - } +/* Necessary in Fx36 to keep 32px icons from being rendered at full size */ +#zotero-toolbar-main-button[cui-areatype="toolbar"] > .toolbarbutton-icon, +#zotero-toolbar-main-button-single[cui-areatype="toolbar"] > .toolbarbutton-icon, +#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon, +#zotero-toolbar-save-button-single[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon { + width: 16px; } - /* End toolbar icons */ #zotero-splitter diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css index c3281aeeb..e309c6baf 100644 --- a/chrome/content/zotero-platform/win/overlay.css +++ b/chrome/content/zotero-platform/win/overlay.css @@ -6,6 +6,7 @@ } #zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { + width: 28px; margin-left: 2px; margin-right: -1px; padding-left: 5px !important; diff --git a/chrome/content/zotero/browser.js b/chrome/content/zotero/browser.js index 91910f94f..80c0248be 100644 --- a/chrome/content/zotero/browser.js +++ b/chrome/content/zotero/browser.js @@ -426,23 +426,23 @@ var Zotero_Browser = new function() { * thereof of the current page */ function updateStatus() { + if (!Zotero_Browser.tabbrowser) return; var tab = _getTabObject(Zotero_Browser.tabbrowser.selectedBrowser); Components.utils.import("resource:///modules/CustomizableUI.jsm"); var buttons = getSaveButtons(); if (buttons.length) { let state = tab.getCaptureState(); - let icon = tab.getCaptureIcon(); let tooltiptext = tab.getCaptureTooltip(); for (let { button, placement } of buttons) { - button.image = icon; + let inToolbar = placement.area == CustomizableUI.AREA_NAVBAR; + button.image = tab.getCaptureIcon(Zotero.hiDPI || !inToolbar); button.tooltipText = tooltiptext; if (state == tab.CAPTURE_STATE_TRANSLATABLE) { button.classList.add('translate'); // Show guidance panel if necessary - - if (placement.area == 'nav-bar') { + if (inToolbar) { button.addEventListener("load", function() { document.getElementById("zotero-status-image-guidance").show(); }); @@ -545,7 +545,7 @@ var Zotero_Browser = new function() { }), true); } else { - let webPageIcon = tab.getCaptureIcon(); + let webPageIcon = tab.getCaptureIcon(Zotero.hiDPI); let automaticSnapshots = Zotero.Prefs.get('automaticSnapshots'); let snapshotEvent = { shiftKey: !automaticSnapshots @@ -896,8 +896,8 @@ Zotero_Browser.Tab.prototype.getCaptureState = function () { * returns the URL of the image representing the translator to be called on the * current page, or false if the page cannot be scraped */ -Zotero_Browser.Tab.prototype.getCaptureIcon = function() { - var suffix = Zotero.hiRes ? "@2x" : ""; +Zotero_Browser.Tab.prototype.getCaptureIcon = function (hiDPI) { + var suffix = hiDPI ? "@2x" : ""; switch (this.getCaptureState()) { case this.CAPTURE_STATE_TRANSLATABLE: diff --git a/chrome/content/zotero/icon.js b/chrome/content/zotero/icon.js index 8e1f4fa00..1d8ee090a 100644 --- a/chrome/content/zotero/icon.js +++ b/chrome/content/zotero/icon.js @@ -50,6 +50,21 @@ CustomizableUI.addListener({ null, Zotero.getString(property, shortcut) ); } + else if (id == getSingleID('save')) { + Zotero_Browser.updateStatus(); + } + }, + + onWidgetRemoved: function (id, area) { + if (id == comboButtonsID) { + var item = document.getElementById(id); + updateItemForArea(item, null); + } + // Clear dynamic image from save icon and revert to CSS + else if (id == getSingleID('save')) { + let button = document.getElementById(id); + button.image = ""; + } }, // Save icon in panel isn't in DOM until menu is shown once and therefore isn't updated @@ -57,13 +72,13 @@ CustomizableUI.addListener({ // doesn't remain disabled onAreaNodeRegistered: function (area, node) { if (area == CustomizableUI.AREA_PANEL) { - var placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-buttons") + var placement = CustomizableUI.getPlacementOfWidget(comboButtonsID) var update = false; if (placement && placement.area == CustomizableUI.AREA_PANEL) { update = true; } else { - placement = CustomizableUI.getPlacementOfWidget("zotero-toolbar-save-button-single"); + placement = CustomizableUI.getPlacementOfWidget(getSingleID('save')); if (placement && placement.area == CustomizableUI.AREA_PANEL) { update = true; } @@ -75,12 +90,11 @@ CustomizableUI.addListener({ } }) - // Create the combo buttons, which go in the toolbar by default CustomizableUI.createWidget({ id: comboButtonsID, type: 'custom', - label: 'zotero', + label: 'Zotero', tooltiptext: "Zotero", defaultArea: CustomizableUI.AREA_NAVBAR, onBuild: function (document) { @@ -88,11 +102,10 @@ CustomizableUI.createWidget({ var item = document.createElementNS(kNSXUL, "toolbaritem"); item.setAttribute("id", comboButtonsID); + item.setAttribute("label", "Zotero (Combo)"); // TODO: localize // Set this as an attribute in addition to the property to make sure we can style correctly. item.setAttribute("removable", "true"); item.classList.add("chromeclass-toolbar-additional"); - item.classList.add("toolbaritem-combined-buttons"); - item.classList.add("panel-wide-item"); ['main', 'save'].map(button => { return { @@ -124,10 +137,20 @@ CustomizableUI.createWidget({ } }); +// Create the independent Z button, which isn't shown by default +CustomizableUI.createWidget({ + id: getSingleID('main'), + label: Zotero.clientName, + tooltiptext: getTooltipText('main'), + defaultArea: false, + onCommand: function (event) { + ZoteroOverlay.toggleDisplay(); + } +}); // Create the independent save button, which isn't shown by default CustomizableUI.createWidget({ - id: getID('save') + '-single', + id: getSingleID('save'), label: Zotero.getString('ingester.saveToZotero'), tooltiptext: getTooltipText('save'), defaultArea: false, @@ -155,6 +178,10 @@ function getID(button) { } } +function getSingleID(button) { + return getID(button) + '-single'; +} + function getCommand(button) { switch (button) { case 'main': @@ -170,7 +197,7 @@ function getTooltipText(button) { switch (button) { case 'main': if (Zotero && Zotero.initialized) { - text = Zotero.getString('general.open', Zotero.clientName); + text = Zotero.clientName; let key = Zotero.Keys.getKeyForCommand('openZotero'); if (key) { // Add RLE mark in RTL mode to make shortcut render the right way @@ -210,17 +237,35 @@ function getTooltipText(button) { /** * Set various attributes that allow treeitem and subelements to be styled properly + * in the different areas */ function updateItemForArea(item, area) { - var areaType = CustomizableUI.getAreaType(area); - var inPanel = area == CustomizableUI.AREA_PANEL; - var classes = inPanel ? "panel-combined-button" : "toolbarbutton-1 toolbarbutton-combined"; - item.setAttribute("cui-areatype", areaType); - var buttons = item.getElementsByTagName('toolbarbutton'); - for (let i = 0; i < buttons.length; i++) { - let button = buttons[i]; - button.setAttribute("class", classes); - button.setAttribute("cui-areatype", areaType); + if (area) { + var areaType = CustomizableUI.getAreaType(area); + var inPanel = area == CustomizableUI.AREA_PANEL; + var classes = inPanel ? "panel-combined-button" : "toolbarbutton-1 toolbarbutton-combined"; + item.setAttribute("cui-areatype", areaType); + item.classList.add("toolbaritem-combined-buttons"); + if (inPanel) { + item.classList.add("panel-wide-item"); + } + var buttons = item.getElementsByTagName('toolbarbutton'); + for (let i = 0; i < buttons.length; i++) { + let button = buttons[i]; + button.setAttribute("class", classes); + button.setAttribute("cui-areatype", areaType); + } + } + // In customization palette pretend it's a single icon + else { + item.classList.remove("toolbaritem-combined-buttons"); + item.classList.remove("panel-wide-item"); + var buttons = item.getElementsByTagName('toolbarbutton'); + for (let i = 0; i < buttons.length; i++) { + let button = buttons[i]; + button.setAttribute("class", "toolbarbutton-1"); + button.removeAttribute("cui-areatype"); + } } } diff --git a/chrome/content/zotero/overlay.js b/chrome/content/zotero/overlay.js index 95c168cef..43241c667 100644 --- a/chrome/content/zotero/overlay.js +++ b/chrome/content/zotero/overlay.js @@ -71,7 +71,7 @@ var ZoteroOverlay = new function() observerService.addObserver(zoteroObserver, "browser-delayed-startup-finished", false); // Set a flag for hi-res displays - Zotero.hiRes = window.devicePixelRatio > 1; + Zotero.hiDPI = window.devicePixelRatio > 1; // Clear old Zotero icon pref var prefBranch = Components.classes["@mozilla.org/preferences-service;1"] diff --git a/chrome/skin/default/zotero/zotero-z-16px-australis.svg b/chrome/skin/default/zotero/zotero-z-16px-australis.svg deleted file mode 100644 index ecda7b839..000000000 --- a/chrome/skin/default/zotero/zotero-z-16px-australis.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css index aca635093..39aef879a 100644 --- a/chrome/skin/default/zotero/zotero.css +++ b/chrome/skin/default/zotero/zotero.css @@ -26,12 +26,8 @@ * Toolbar icons * */ -#zotero-toolbar-main-button { - list-style-image: url("chrome://zotero/skin/zotero-z-16px-australis.svg"); -} - -#zotero-toolbar-main-button[cui-areatype="menu-panel"], -toolbarpaletteitem[place="palette"] #zotero-toolbar-main-button { +#zotero-toolbar-main-button, +#zotero-toolbar-main-button-single { list-style-image: url("chrome://zotero/skin/zotero-z-32px-australis.svg"); } @@ -54,6 +50,19 @@ toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single { } } +/* Show single icon for combo buttons in palette */ +toolbarpaletteitem[place="palette"] #zotero-toolbar-main-button { + list-style-image: url("chrome://zotero/skin/zotero-z-32px-australis.svg"); +} +toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons separator, +toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons #zotero-toolbar-save-button { + display:none; +} + +toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single { + padding: 3px 1px; +} + /* Show webpage icon in gray when no translators */ #zotero-toolbar-save-button:not(.translate), #zotero-toolbar-save-button-single:not(.translate),