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
This commit is contained in:
Dan Stillman
parent
20a3f97bde
commit
a1bed8b5ad
7 changed files with 92 additions and 110 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue