commit 5b2af4845b86bc677864bc3c9350117db2db03cc parent 2b01a097c743cf1c7801a168f079150019abf638 Author: Dan Stillman <dstillman@zotero.org> Date: Tue, 17 Oct 2017 20:36:49 -0400 Toolbar button and icon overhaul - New 2x toolbar button shapes and other icons from @johanneskrtek -- this HiDPI-ifies basically all graphics other than a few remaining item type icons - Use the Mac search dropmarker for all menu buttons, since it's wider and more pleasant. Reduce menu button padding slightly to compensate. - Better toolbar button state for inactive window and pressed state - Fix dropmarker overlap in tag selector icon Closes #347, Better/retina-style OS X toolbar icons Closes #1339, Create new button PNGs for macOS Diffstat:
36 files changed, 133 insertions(+), 61 deletions(-)
diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css @@ -107,22 +107,37 @@ margin-left: 7px; } -@media (min-resolution: 1.5dppx) { - #zotero-pane .toolbarbutton-icon { - max-width: 28px; - } - - #zotero-tb-sync-stop .toolbarbutton-icon, - #zotero-tb-sync-error .toolbarbutton-icon { - width: 16px; - } +#zotero-tb-sync-stop .toolbarbutton-icon, +#zotero-tb-sync-error .toolbarbutton-icon { + width: 16px; } -.zotero-tb-button, .zotero-tb-button:first-child, .zotero-tb-button:last-child { +.zotero-tb-button > .toolbarbutton-icon { + max-width: 31px; +} + +.zotero-tb-button, +.zotero-tb-button:first-child, +.zotero-tb-button:last-child { -moz-margin-start: 0 !important; -moz-margin-end: 3px !important; -moz-padding-end: 10px !important; - background: url("chrome://zotero/skin/mac/menubutton-end.png") right center no-repeat; + background: url("chrome://zotero/skin/mac/menubutton-end.png") right center/auto 24px no-repeat; +} + +.zotero-tb-button[type=menu] { + -moz-padding-end: 8px !important; +} + +.zotero-tb-button > .toolbarbutton-icon { + background: url("chrome://zotero/skin/mac/menubutton-start.png") left center/auto 24px no-repeat; + padding: 4px 4px 4px 11px; +} + +/* For menu buttons, decrease left padding by 1px */ +.zotero-tb-button[type=menu] > .toolbarbutton-icon { + -moz-padding-start: 9px; + max-width: 29px; } #zotero-collections-toolbar { @@ -130,12 +145,23 @@ } .zotero-tb-button:-moz-window-inactive { - opacity: 0.7; + opacity: 0.5; +} + +.zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon { + background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window.png") left center/auto 24px no-repeat; +} + +/* Use a darker background when inactive so the button itself doesn't get too dark at 50% */ +.zotero-tb-button:-moz-window-inactive, +.zotero-tb-button:-moz-window-inactive:first-child, +.zotero-tb-button:-moz-window-inactive:last-child { + background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window.png") right center/auto 24px no-repeat; } .zotero-tb-button[open="true"], .zotero-tb-button:not([disabled="true"]):hover:active { - background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center no-repeat; + background: url("chrome://zotero/skin/mac/menubutton-end-pressed.png") right center/auto 24px no-repeat; } .zotero-tb-button > menupopup { @@ -143,17 +169,9 @@ margin-top: -4px; } -.zotero-tb-button > .toolbarbutton-icon { - /*-moz-binding: url('chrome://zotero-platform/content/zoterotbbutton.xml#zotero-tb-button');*/ - background: url("chrome://zotero/skin/mac/menubutton-start.png") left center no-repeat; - padding: 5px 1px 5px 11px; -} - -#zotero-tb-search-menu-button -{ - margin: -6px -2px -6px -16px; - padding: 6px 2px 6px 14px; - list-style-image: url("chrome://zotero/skin/mac/searchbar-dropmarker.png"); +#zotero-tb-search-menu-button { + margin: -6px 0 -6px -16px; + padding: 6px 0 6px 15px; } #zotero-tb-sync > .toolbarbutton-icon { @@ -168,7 +186,7 @@ .zotero-tb-button[open="true"] > .toolbarbutton-icon, .zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon { - background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center no-repeat; + background: url("chrome://zotero/skin/mac/menubutton-start-pressed.png") left center/auto 24px no-repeat; } .zotero-tb-button > .toolbarbutton-text { @@ -460,16 +478,6 @@ treechildren::-moz-tree-image { list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add.png'); } -@media (min-resolution: 1.5dppx) { - #zotero-tb-advanced-search { - list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png'); - } - - #zotero-tb-note-add { - list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png'); - } -} - #zotero-tb-actions-menu { list-style-image: url('chrome://zotero/skin/mac/cog.png'); @@ -483,4 +491,17 @@ treechildren::-moz-tree-image { #zotero-collectionmenu > .menuitem-iconic > .menu-iconic-left, #zotero-itemmenu > .menuitem-iconic > .menu-iconic-left, #zotero-collectionmenu > .menu-iconic > .menu-iconic-left, #zotero-itemmenu > .menu-iconic > .menu-iconic-left { display: none; -} -\ No newline at end of file +} + + +/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */ +@media (min-resolution: 1.5dppx) { + .zotero-tb-button,.zotero-tb-button:first-child,.zotero-tb-button:last-child { background: url("chrome://zotero/skin/mac/menubutton-end@2x.png") right center/auto 24px no-repeat; } + .zotero-tb-button > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start@2x.png") left center/auto 24px no-repeat; } + .zotero-tb-button:-moz-window-inactive > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start-inactive-window@2x.png") left center/auto 24px no-repeat; } + .zotero-tb-button:-moz-window-inactive,.zotero-tb-button:-moz-window-inactive:first-child,.zotero-tb-button:-moz-window-inactive:last-child { background: url("chrome://zotero/skin/mac/menubutton-end-inactive-window@2x.png") right center/auto 24px no-repeat; } + .zotero-tb-button[open="true"],.zotero-tb-button:not([disabled="true"]):hover:active { background: url("chrome://zotero/skin/mac/menubutton-end-pressed@2x.png") right center/auto 24px no-repeat; } + .zotero-tb-button[open="true"] > .toolbarbutton-icon,.zotero-tb-button:not([disabled="true"]):hover:active > .toolbarbutton-icon { background: url("chrome://zotero/skin/mac/menubutton-start-pressed@2x.png") left center/auto 24px no-repeat; } + #zotero-tb-advanced-search { list-style-image: url('chrome://zotero/skin/mac/toolbar-advanced-search@2x.png'); } + #zotero-tb-note-add { list-style-image: url('chrome://zotero/skin/mac/toolbar-note-add@2x.png'); } +} diff --git a/chrome/content/zotero-platform/win/overlay.css b/chrome/content/zotero-platform/win/overlay.css @@ -188,23 +188,15 @@ toolbar:not([id="nav-bar"]) #zotero-toolbar-buttons separator { #zotero-tb-search-menu-button { margin: 0 -1px 0 -4px; + padding: 5px 0 5px 5px; border: 0; background: transparent; - /* Mozilla file copied from chrome://browser/skin/mainwindow-dropdown-arrow.png - for availability in Standalone */ - list-style-image: url("chrome://zotero/skin/win/mainwindow-dropdown-arrow.png"); - -moz-image-region: rect(0, 13px, 11px, 0); } #zotero-tb-search-menu-button .button-menu-dropmarker { display: none; } -#zotero-tb-search-menu-button:hover:active, -#zotero-tb-search-menu-button[open="true"] { - -moz-image-region: rect(0, 26px, 11px, 13px); -} - #zotero-tb-search .textbox-search-icon { visibility: hidden; } diff --git a/chrome/content/zotero/bindings/itembox.xml b/chrome/content/zotero/bindings/itembox.xml @@ -933,7 +933,7 @@ // Switch to single-field mode if (fieldMode == 1) { - button.style.backgroundImage = 'url("chrome://zotero/skin/textfield-dual.png")'; + button.style.backgroundImage = `url("chrome://zotero/skin/textfield-dual${Zotero.hiDPISuffix}.png")`; button.setAttribute('tooltiptext', Zotero.getString('pane.item.switchFieldMode.two')); lastName.setAttribute('fieldMode', '1'); button.setAttribute('onclick', "document.getBindingParent(this).switchCreatorMode(Zotero.getAncestorByTagName(this, 'row'), 0, false, true)"); @@ -966,7 +966,7 @@ } // Switch to two-field mode else { - button.style.backgroundImage = 'url("chrome://zotero/skin/textfield-single.png")'; + button.style.backgroundImage = `url("chrome://zotero/skin/textfield-single${Zotero.hiDPISuffix}.png")`; button.setAttribute('tooltiptext', Zotero.getString('pane.item.switchFieldMode.one')); lastName.setAttribute('fieldMode', '0'); button.setAttribute('onclick', "document.getBindingParent(this).switchCreatorMode(Zotero.getAncestorByTagName(this, 'row'), 1, false, true)"); diff --git a/chrome/content/zotero/bindings/tagselector.xml b/chrome/content/zotero/bindings/tagselector.xml @@ -1169,8 +1169,10 @@ oncommand="document.getBindingParent(this).handleKeyPress(); event.stopPropagation()" onkeypress="if (event.keyCode == event.DOM_VK_ESCAPE) { document.getBindingParent(this).handleKeyPress(true); }" tabindex="-1"/> - <toolbarbutton id="view-settings-menu" tooltiptext="&zotero.toolbar.actions.label;" - image="chrome://zotero/skin/tag-selector-menu.png" type="menu"> + <toolbarbutton + id="view-settings-menu" + tooltiptext="&zotero.toolbar.actions.label;" + type="menu"> <menupopup id="view-settings-popup" onpopupshowing="document.getBindingParent(this)._updateDeleteAutomaticMenuOption()" onpopupshown="/* diff --git a/chrome/content/zotero/zoteroPane.xul b/chrome/content/zotero/zoteroPane.xul @@ -552,7 +552,6 @@ id="zotero-items-column-hasAttachment" default-in="default" disabled-in="feed" class="treecol-image" label="&zotero.tabs.attachments.label;" - src="chrome://zotero/skin/attach-small.png" fixed="true" zotero-persist="ordinal hidden sortActive sortDirection"/> <splitter class="tree-splitter"/> diff --git a/chrome/skin/default/zotero/arrow-dn@2x.png b/chrome/skin/default/zotero/arrow-dn@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/arrow_rotate_animated@2x.png b/chrome/skin/default/zotero/arrow_rotate_animated@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/arrow_rotate_static@2x.png b/chrome/skin/default/zotero/arrow_rotate_static@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/attach-small@2x.png b/chrome/skin/default/zotero/attach-small@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/bindings/tagselector.css b/chrome/skin/default/zotero/bindings/tagselector.css @@ -84,7 +84,17 @@ toolbarbutton.zotero-clicky height:1em; } -#view-settings-menu .toolbarbutton-menu-dropmarker -{ - margin-left: -12px !important; -} -\ No newline at end of file +#view-settings-menu { + list-style-image: url(chrome://zotero/skin/tag-selector-menu.png); +} + +#view-settings-menu .toolbarbutton-icon { + width: 16px; + margin-right: 12px; /* leave room for dropmarker */ +} + + +/* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */ +@media (min-resolution: 1.5dppx) { + #view-settings-menu { list-style-image: url(chrome://zotero/skin/tag-selector-menu@2x.png); } +} diff --git a/chrome/skin/default/zotero/firefox/columnpicker@2x.gif b/chrome/skin/default/zotero/firefox/columnpicker@2x.gif Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end-inactive-window.png b/chrome/skin/default/zotero/mac/menubutton-end-inactive-window.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end-inactive-window@2x.png b/chrome/skin/default/zotero/mac/menubutton-end-inactive-window@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end-pressed.png b/chrome/skin/default/zotero/mac/menubutton-end-pressed.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end-pressed@2x.png b/chrome/skin/default/zotero/mac/menubutton-end-pressed@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end.png b/chrome/skin/default/zotero/mac/menubutton-end.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-end@2x.png b/chrome/skin/default/zotero/mac/menubutton-end@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-mid-pressed.png b/chrome/skin/default/zotero/mac/menubutton-mid-pressed.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start-inactive-window.png b/chrome/skin/default/zotero/mac/menubutton-start-inactive-window.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start-inactive-window@2x.png b/chrome/skin/default/zotero/mac/menubutton-start-inactive-window@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start-pressed.png b/chrome/skin/default/zotero/mac/menubutton-start-pressed.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start-pressed@2x.png b/chrome/skin/default/zotero/mac/menubutton-start-pressed@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start.png b/chrome/skin/default/zotero/mac/menubutton-start.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/menubutton-start@2x.png b/chrome/skin/default/zotero/mac/menubutton-start@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/minus-active@2x.png b/chrome/skin/default/zotero/minus-active@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/minus@2x.png b/chrome/skin/default/zotero/minus@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css @@ -62,6 +62,29 @@ min-width: 21px; } +#zotero-items-column-hasAttachment { + list-style-image: url(chrome://zotero/skin/attach-small.png); +} + +#zotero-items-column-hasAttachment .treecol-icon { + width: 13px; +} + +#zotero-items-column-numNotes { + list-style-image: url(chrome://zotero/skin/treeitem-note-small.png); +} + +#zotero-items-column-numNotes .treecol-icon { + width: 12px; +} + +@media (min-resolution: 1.5dppx) { + .tree-columnpicker-icon { + list-style-image: url(chrome://zotero/skin/firefox/columnpicker@2x.gif); + width: 14px; + } +} + #zotero-items-column-numNotes { text-align: center; } @@ -324,6 +347,19 @@ margin-right: 2px; } +.zotero-tb-button:hover:active { + mix-blend-mode: multiply; +} + +.toolbarbutton-menu-dropmarker { + padding-inline-start: 0; + list-style-image: url('chrome://zotero/skin/searchbar-dropmarker.png'); +} + +.toolbarbutton-menu-dropmarker .dropmarker-icon { + width: 7px; +} + .zotero-tb-button[type="panel"] > dropmarker { display: none; } @@ -643,13 +679,17 @@ width: 172px; } -#zotero-tb-search-menu-button -{ +#zotero-tb-search-menu-button { margin: 0; padding: 0; -moz-appearance: none; min-width: 0; cursor: default; + list-style-image: url("chrome://zotero/skin/searchbar-dropmarker.png"); +} + +#zotero-tb-search-menu-button .button-icon { + width: 7px; } #zotero-splitter @@ -719,17 +759,22 @@ /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */ @media (min-resolution: 1.5dppx) { + #zotero-items-column-hasAttachment { list-style-image: url(chrome://zotero/skin/attach-small@2x.png); } + #zotero-items-column-numNotes { list-style-image: url(chrome://zotero/skin/treeitem-note-small@2x.png); } + .toolbarbutton-menu-dropmarker { list-style-image: url('chrome://zotero/skin/searchbar-dropmarker@2x.png'); } #zotero-tb-collection-add { list-style-image: url('chrome://zotero/skin/toolbar-collection-add@2x.png'); } .zotero-menuitem-new-feed { list-style-image: url('chrome://zotero/skin/toolbar-feed-add@2x.png'); } #zotero-tb-library-add-menu { list-style-image: url('chrome://zotero/skin/library_add@2x.png'); } #zotero-tb-actions-menu { list-style-image: url('chrome://zotero/skin/cog@2x.png'); } #zotero-tb-add { list-style-image: url('chrome://zotero/skin/toolbar-item-add@2x.png'); } + #zotero-tb-lookup { list-style-image: url('chrome://zotero/skin/toolbar-lookup@2x.png'); } #zotero-tb-attachment-add { list-style-image: url('chrome://zotero/skin/attach@2x.png'); } #zotero-tb-note-add { list-style-image: url('chrome://zotero/skin/toolbar-note-add@2x.png'); } #zotero-menuitem-note { list-style-image: url('chrome://zotero/skin/treeitem-note@2x.png'); } .zotero-menuitem-new-saved-search { list-style-image: url('chrome://zotero/skin/treesource-search@2x.png'); } .zotero-menuitem-show-duplicates { list-style-image: url('chrome://zotero/skin/treesource-duplicates@2x.png'); } .zotero-menuitem-show-unfiled { list-style-image: url('chrome://zotero/skin/treesource-unfiled@2x.png'); } + .zotero-menuitem-sync { list-style-image: url(chrome://zotero/skin/arrow_rotate_static@2x.png); } .zotero-menuitem-new-collection { list-style-image: url('chrome://zotero/skin/toolbar-collection-add@2x.png'); } .zotero-menuitem-edit-collection { list-style-image: url('chrome://zotero/skin/toolbar-collection-edit@2x.png'); } .zotero-menuitem-edit-feed { list-style-image: url('chrome://zotero/skin/toolbar-feed-edit@2x.png'); } @@ -745,7 +790,10 @@ .zotero-menuitem-create-report { list-style-image: url('chrome://zotero/skin/treeitem-report@2x.png'); } #zotero-tb-advanced-search { list-style-image: url('chrome://zotero/skin/toolbar-advanced-search@2x.png'); } #zotero-tb-locate { list-style-image: url('chrome://zotero/skin/toolbar-go-arrow@2x.png'); } - #zotero-tb-sync-stop { list-style-image: url(chrome://zotero/skin/control_stop_blue@2x.png); margin-right: 0; } + #zotero-tb-sync-stop { list-style-image: url(chrome://zotero/skin/control_stop_blue@2x.png); } #zotero-tb-sync-error { list-style-image: url(chrome://zotero/skin/error@2x.png); } #zotero-tb-sync-error[state=warning] { list-style-image: url(chrome://zotero/skin/warning@2x.png); } + #zotero-tb-sync { list-style-image: url(chrome://zotero/skin/arrow_rotate_static@2x.png); } + #zotero-tb-sync[status=animate] { list-style-image: url(chrome://zotero/skin/arrow_rotate_animated@2x.png); } + #zotero-tb-search-menu-button { list-style-image: url("chrome://zotero/skin/searchbar-dropmarker@2x.png"); } } diff --git a/chrome/skin/default/zotero/plus-active@2x.png b/chrome/skin/default/zotero/plus-active@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/plus@2x.png b/chrome/skin/default/zotero/plus@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/mac/searchbar-dropmarker.png b/chrome/skin/default/zotero/searchbar-dropmarker.png Binary files differ. diff --git a/chrome/skin/default/zotero/searchbar-dropmarker@2x.png b/chrome/skin/default/zotero/searchbar-dropmarker@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/textfield-dual@2x.png b/chrome/skin/default/zotero/textfield-dual@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/textfield-single@2x.png b/chrome/skin/default/zotero/textfield-single@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/toolbar-lookup@2x.png b/chrome/skin/default/zotero/toolbar-lookup@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/treeitem-note-small@2x.png b/chrome/skin/default/zotero/treeitem-note-small@2x.png Binary files differ. diff --git a/chrome/skin/default/zotero/zotero.css b/chrome/skin/default/zotero/zotero.css @@ -465,8 +465,10 @@ label.zotero-text-link { /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */ @media (min-resolution: 1.5dppx) { #zotero-toolbar-save-button,#zotero-toolbar-save-button-single { list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.png"); } - #zotero-toolbar-save-button[cui-areatype="menu-panel"],#zotero-toolbar-save-button-single[cui-areatype="menu-panel"],toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button,toolbarpaletteitem[place="palette"] #zotero-toolbar-save-button-single { list-style-image: url("chrome://zotero/skin/treeitem-webpage@2x.png"); } + .zotero-clicky-minus { background-image: url('chrome://zotero/skin/minus@2x.png') !important; } + .zotero-clicky-plus { background-image: url('chrome://zotero/skin/plus@2x.png') !important; } + .zotero-clicky-minus:not([disabled=true]):active { background-image: url('chrome://zotero/skin/minus-active@2x.png') !important; } + .zotero-clicky-plus:not([disabled=true]):active { background-image: url('chrome://zotero/skin/plus-active@2x.png') !important; } .zotero-scrape-popup-library { list-style-image: url('chrome://zotero/skin/treesource-library@2x.png'); } .zotero-scrape-popup-collection { list-style-image: url('chrome://zotero/skin/treesource-collection@2x.png'); } - .zotero-spinner { list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png); height: 14px; width: 14px; margin-right: 2px; } }
