Fix #773, Zotero combo icons dispersed under more tools

And fix save button hover height on Windows, which somehow got out of
whack again.

Might need further tweaking on Linux

Need to find a better way to do these buttons...
This commit is contained in:
Dan Stillman 2015-06-29 05:59:19 -04:00
parent ddf3ff9ba9
commit 1d6483e68a
5 changed files with 166 additions and 51 deletions

View file

@ -40,8 +40,9 @@
padding-right: 1px; padding-right: 1px;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button, /* Recreate standard hover effect (except in overflow list) */
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: var(--toolbarbutton-hover-bordercolor) !important; border-color: var(--toolbarbutton-hover-bordercolor) !important;
@ -50,36 +51,40 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker::before {
background: none; background: none;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
border-right: 1px solid transparent; border-right: 1px solid transparent;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker {
border-left: 1px solid transparent; border-left: 1px solid transparent;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > .toolbarbutton-menubutton-dropmarker {
background: inherit; background: inherit;
} }
#zotero-toolbar-save-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker:hover { #zotero-toolbar-save-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker:hover {
background: var(--toolbarbutton-hover-background); background: var(--toolbarbutton-hover-background);
} }
#zotero-toolbar-main-button[cui-areatype="toolbar"] { #zotero-toolbar-main-button[cui-areatype="toolbar"] {
border-right: 1px solid transparent; border-right: 1px solid transparent;
} }
#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover { #zotero-toolbar-save-button[cui-areatype="toolbar"]:not([overflowedItem=true]):hover {
border-left: 0 solid transparent; border-left: 0 solid transparent;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button {
border-left: 1px solid transparent; border-left: 1px solid transparent;
} }
#zotero-toolbar-buttons[overflowedItem=true] {
margin-left: 3px !important;
}
/* Necessary in Fx36 to keep 32px icons from being rendered at full size */ /* 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[cui-areatype="toolbar"] > .toolbarbutton-icon,
#zotero-toolbar-main-button-single[cui-areatype="toolbar"] > .toolbarbutton-icon, #zotero-toolbar-main-button-single[cui-areatype="toolbar"] > .toolbarbutton-icon,

View file

@ -70,31 +70,53 @@
box-shadow: var(--toolbarbutton-combined-boxshadow); box-shadow: var(--toolbarbutton-combined-boxshadow);
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-main-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .dropmarker-icon {
border-color: var(--toolbarbutton-hover-bordercolor) !important; border-color: var(--toolbarbutton-hover-bordercolor) !important;
} }
#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover:not(:active) > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not(:active) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
#zotero-toolbar-save-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
background: inherit; background: inherit;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover:not(:active) > .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button > .toolbarbutton-menubutton-button:hover:not(:active) > .toolbarbutton-icon,
/* This selector doesn't work, so the dropmarker doesn't get a hover effect. :hover doesn't seem /* This selector doesn't work, so the dropmarker doesn't get a hover effect. :hover doesn't seem
to have an effect on either part of the dropmarker */ to have an effect on either part of the dropmarker */
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker:hover > .dropmarker-icon {
background: var(--toolbarbutton-hover-background) !important; background: var(--toolbarbutton-hover-background) !important;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
background: var(--toolbarbutton-active-background); background: var(--toolbarbutton-active-background);
border-color: var(--toolbarbutton-active-bordercolor); border-color: var(--toolbarbutton-active-bordercolor);
box-shadow: var(--toolbarbutton-active-boxshadow); box-shadow: var(--toolbarbutton-active-boxshadow);
transition-duration: 10ms; transition-duration: 10ms;
} }
/* Alterations for overflow panel */
#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-icon {
width: 16px;
}
#zotero-toolbar-buttons[overflowedItem=true] {
margin-left: 0px !important;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button {
padding-left: 0;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-icon {
width: 26px;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-icon {
margin-left: 1px;
padding-right: 0 !important;
}
/* End toolbar buttons */ /* End toolbar buttons */

View file

@ -5,19 +5,10 @@
width: 32px; width: 32px;
} }
#zotero-toolbar-save-button-single[cui-areatype="toolbar"] .toolbarbutton-icon { #zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon {
width: 30px;
}
#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon,
#zotero-toolbar-save-button[cui-areatype="toolbar"] .toolbarbutton-icon {
width: 28px; width: 28px;
} }
#zotero-toolbar-main-button[cui-areatype="toolbar"] {
margin-right: -1px !important;
}
#zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon { #zotero-toolbar-main-button[cui-areatype="toolbar"] .toolbarbutton-icon {
margin-left: 2px; margin-left: 2px;
margin-right: -1px; margin-right: -1px;
@ -51,26 +42,25 @@
margin-bottom: 11px; margin-bottom: 11px;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > separator,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > separator, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button:not([disabled]) > .toolbarbutton-menubutton-dropmarker::before {
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) > .toolbarbutton-menubutton-dropmarker::before {
display: none; display: none;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-main-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button:not([disabled]) .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button:not([disabled]) .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button:not([disabled]) .dropmarker-icon {
border-color: var(--toolbarbutton-hover-bordercolor) !important; border-color: var(--toolbarbutton-hover-bordercolor) !important;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-main-button:not(:active) .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-main-button:not(:active) .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover:not([disabled]) > #zotero-toolbar-save-button:not(:active) .dropmarker-icon {
background: var(--toolbarbutton-hover-background); background: var(--toolbarbutton-hover-background);
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"]:hover > #zotero-toolbar-save-button .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]):hover > #zotero-toolbar-save-button .dropmarker-icon {
box-shadow: none; box-shadow: none;
} }
@ -78,34 +68,56 @@
There are two hover effects: when the toolbaritem is hovered over, and when the button is hovered over. There are two hover effects: when the toolbaritem is hovered over, and when the button is hovered over.
This applies the latter (and may not be right on different versions of Windows). This applies the latter (and may not be right on different versions of Windows).
*/ */
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-main-button:hover:not(:active):not([disabled]) > .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-main-button:hover:not(:active):not([disabled]) > .toolbarbutton-icon,
/* /*
The dropmarker doesn't honor :hover, so instead of showing the hover effect for each segment individually, do the The dropmarker doesn't honor :hover, so instead of showing the hover effect for each segment individually, do the
menu-button parts together, which at least looks like a choice. menu-button parts together, which at least looks like a choice.
*/ */
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover .toolbarbutton-menubutton-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover .toolbarbutton-menubutton-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not(:active):not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not(:active):not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
background-color: hsla(210,48%,96%,.75) !important; background-color: hsla(210,48%,96%,.75) !important;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-main-button:hover > .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-main-button:hover > .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4) !important; border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4) !important;
box-shadow: 0 0 1px hsla(210,54%,20%,.03), box-shadow: 0 0 1px hsla(210,54%,20%,.03),
0 0 2px hsla(210,54%,20%,.1) !important; 0 0 2px hsla(210,54%,20%,.1) !important;
} }
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon, #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover:active:not([open]):not([disabled]) .toolbarbutton-menubutton-button .toolbarbutton-icon,
#zotero-toolbar-buttons[cui-areatype="toolbar"] > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon { #zotero-toolbar-buttons[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zotero-toolbar-save-button:hover[open]:not([disabled]) .toolbarbutton-menubutton-dropmarker .dropmarker-icon {
background: var(--toolbarbutton-active-background); background: var(--toolbarbutton-active-background) !important;
border-color: var(--toolbarbutton-active-bordercolor); border-color: var(--toolbarbutton-active-bordercolor) !important;
box-shadow: var(--toolbarbutton-active-boxshadow); box-shadow: var(--toolbarbutton-active-boxshadow) !important;
transition-duration: 10ms; transition-duration: 10ms;
} }
#zotero-toolbar-save-button[cui-areatype="toolbar"] > menupopup { #zotero-toolbar-save-button[cui-areatype="toolbar"] > menupopup {
margin-top: -5px; margin-top: -5px;
} }
/* Alterations for overflow panel */
#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-icon {
width: 16px;
}
#zotero-toolbar-buttons[overflowedItem=true] {
margin-left: 0px !important;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button {
padding-left: 0;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-icon {
width: 26px;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button .toolbarbutton-icon {
margin-left: 1px;
padding-right: 0 !important;
}
/* End toolbar buttons */ /* End toolbar buttons */
@media (min-resolution: 1.5dppx) { @media (min-resolution: 1.5dppx) {

View file

@ -71,6 +71,18 @@ CustomizableUI.addListener({
} }
}, },
onWidgetOverflow: function (node, container) {
if (node.id == comboButtonsID) {
node.classList.add("toolbarbutton-1");
}
},
onWidgetUnderflow: function (node, container) {
if (node.id == comboButtonsID) {
node.classList.remove("toolbarbutton-1");
}
},
onWidgetRemoved: function (id, area) { onWidgetRemoved: function (id, area) {
if (id == comboButtonsID) { if (id == comboButtonsID) {
var item = document.getElementById(id); var item = document.getElementById(id);
@ -135,7 +147,11 @@ CustomizableUI.createWidget({
item.appendChild(document.createElementNS(kNSXUL, "separator")); item.appendChild(document.createElementNS(kNSXUL, "separator"));
} }
let button = document.createElementNS(kNSXUL, "toolbarbutton"); let button = document.createElementNS(kNSXUL, "toolbarbutton");
if (attribs.name == 'save') { if (attribs.name == 'main') {
button.setAttribute('label', Zotero.clientName);
}
else if (attribs.name == 'save') {
button.setAttribute('label', Zotero.getString('ingester.saveToZotero'));
button.setAttribute('disabled', 'true'); button.setAttribute('disabled', 'true');
button.setAttribute('type', 'menu-button'); button.setAttribute('type', 'menu-button');
let menupopup = document.createElementNS(kNSXUL, "menupopup"); let menupopup = document.createElementNS(kNSXUL, "menupopup");

View file

@ -52,6 +52,66 @@ toolbarpaletteitem[place="palette"] #zotero-toolbar-buttons #zotero-toolbar-save
display:none; display:none;
} }
/* Alterations for overflow panel */
#zotero-toolbar-main-button-single[overflowedItem=true] .toolbarbutton-text,
#zotero-toolbar-save-button-single[overflowedItem=true] .toolbarbutton-text {
margin-left: 2px !important;
}
#zotero-toolbar-buttons[overflowedItem=true] {
margin: 6px 4px;
max-height: 36px;
}
#zotero-toolbar-buttons[overflowedItem=true]:not(:hover) {
border: 1px solid transparent;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button .toolbarbutton-text {
display: none;
margin-left: 1px;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button {
min-width: unset;
max-width: 30px;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-main-button:hover {
background: unset;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button::before {
content: "";
display: -moz-box;
width: 1px;
height: 18px;
-moz-margin-end: 0px;
background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
background-clip: padding-box;
background-position: center;
background-repeat: no-repeat;
background-size: 1px 18px;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button {
max-width: unset;
margin: 0 0 0 -1px !important;
background: unset;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button toolbarbutton {
margin-left: 8px;
}
#zotero-toolbar-buttons[overflowedItem=true] #zotero-toolbar-save-button > .toolbarbutton-menubutton-dropmarker,
#zotero-toolbar-save-button-single[overflowedItem=true] > .toolbarbutton-menubutton-dropmarker {
padding-left: 3px;
padding-right: 6px;
}
/* Show webpage icon in gray when no translators */ /* Show webpage icon in gray when no translators */
#zotero-toolbar-save-button:not(.translate), #zotero-toolbar-save-button:not(.translate),
#zotero-toolbar-save-button-single:not(.translate), #zotero-toolbar-save-button-single:not(.translate),