commit a1bed8b5ad2fe8c8bafb9b6b063f9c581fa4c110
parent 20a3f97bdef6dd98db1191bc0cdf7be2786b1e86
Author: Dan Stillman <dstillman@zotero.org>
Date: Thu, 26 Feb 2015 23:50:12 -0500
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
Diffstat:
7 files changed, 92 insertions(+), 110 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,72 +0,0 @@
-<?xml version="1.0"?>
-
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="16px" height="16px">
- <defs>
- <style type="text/css"><![CDATA[
- polygon {
- stroke: #000;
- }
-
- /* Linux */
- #s1 {
- stop-color: #899199;
- }
- #s2 {
- stop-color: #7f868d;
- }
-
- /* Mac OS X (except Aqua on Snow Leopard) */
- @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
- polygon {
- stroke: #4d4d4d;
- }
- #s1 {
- stop-color: #4d4d4d;
- }
- #s2 {
- stop-color: #4d4d4d;
- }
- }
-
- /* Windows Classic & Luna */
- @media (-moz-windows-theme) {
- #s1 {
- stop-color: #899198;
- }
- #s2 {
- stop-color: #737b82;
- }
- }
-
- /* Windows Aero */
- @media (-moz-windows-theme: aero), (-moz-windows-theme: aero-lite) {
- #s1 {
- stop-color: #85919e;
- }
- #s2 {
- stop-color: #68717d;
- }
- }
- ]]></style>
- <linearGradient x1="0" y1="2" x2="0" y2="30" gradientUnits="userSpaceOnUse" id="lg">
- <stop id="s1" offset="0" />
- <stop id="s2" offset="1" />
- </linearGradient>
- <filter color-interpolation-filters="sRGB" id="f">
- <feGaussianBlur result="r8" stdDeviation="0.5" />
- <feOffset result="r11" dy="0.5" dx="0" />
- <feComposite in2="r11" operator="in" in="SourceGraphic" result="r6" />
- <feFlood flood-color="#000" flood-opacity="0.75" in="r6" result="r10" />
- <feBlend in2="r10" mode="normal" in="r6" result="r12" />
- <feComposite in2="SourceGraphic" operator="in" result="fbSourceGraphic" />
- <feColorMatrix values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" in="fbSourceGraphic" result="fbSourceGraphicAlpha" />
- <feFlood in="fbSourceGraphic" result="flood" flood-color="#fff" flood-opacity="0.5" />
- <feComposite in2="fbSourceGraphic" operator="in" in="flood" result="c1" />
- <feGaussianBlur result="blur" stdDeviation="1.5 0.01" />
- <feOffset result="offset" dy="1.5" dx="0" />
- <feComposite in2="offset" operator="over" in="fbSourceGraphic" result="c2" />
- </filter>
- </defs>
- <polygon points="2.867,1 13.133,1 13.133,5.667 7.533,11.267 13.133,11.267
- 13.133,15 2.867,15 2.867,11.267 9.399,4.733 2.867,4.733" style="fill: url(#lg); stroke-width: 0.2; stroke-miterlimit: 4; filter: url(#f);" />
-</svg>
diff --git 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),
