mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use redesign loading icon for sync spinner

Browse source
This commit is contained in:
windingwind 2023-12-19 16:26:52 +08:00 committed by Dan Stillman
parent 55415607bb
commit db5863fa0a
11 changed files with 79 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
chrome/content/zotero/integration/insertNoteDialog.xhtml
View file

@ -60,9 +60,7 @@
type="content"
remote="false"
maychangeremoteness="false"/>
<vbox class="citation-dialog spinner" style="visibility: hidden">
<image class="zotero-spinner-16"/>
</vbox>
<image class="citation-dialog spinner zotero-spinner-16"/>
</hbox>
</hbox>
<html:progress class="citation-dialog progress-meter" max="100"/>

4
chrome/content/zotero/integration/quickFormat.js
View file

@ -1353,7 +1353,7 @@ var Zotero_QuickFormat = new function () {
function _resetSearchTimer() {
// Show spinner
var spinner = document.querySelector('.citation-dialog.spinner');
spinner.style.visibility = '';
spinner.setAttribute("status", "animate");
// Cancel current search if active
if (_searchPromise && _searchPromise.isPending()) {
_searchPromise.cancel();
@ -1364,7 +1364,7 @@ var Zotero_QuickFormat = new function () {
.then(() => {
inputIsPristine = false;
_searchPromise = null;
spinner.style.visibility = 'hidden';
spinner.removeAttribute("status");
});
}

4
chrome/content/zotero/integration/quickFormat.xhtml
View file

@ -75,9 +75,7 @@
remote="false"
maychangeremoteness="false"/>
<vbox class="citation-dialog spinner" style="visibility: hidden">
<image class="zotero-spinner-16"/>
</vbox>
<image class="citation-dialog spinner zotero-spinner-16"/>
</hbox>
</hbox>
<html:progress class="citation-dialog progress-meter" max="100"/>

4
chrome/content/zotero/zoteroPane.js
View file

@ -2777,9 +2777,9 @@ var ZoteroPane = new function()
return;
}
var spinner = document.getElementById('zotero-tb-search-spinner');
spinner.style.display = 'inline';
spinner.setAttribute("status", "animate");
yield this.itemsView.setFilter('search', searchVal);
spinner.style.display = 'none';
spinner.removeAttribute("status");
if (runAdvanced) {
this.clearItemsPaneMessage();
}

2
chrome/content/zotero/zoteroPane.xhtml
View file

@ -1054,7 +1054,7 @@
<toolbarbutton id="zotero-tb-note-add" class="zotero-tb-button" tooltiptext="&zotero.toolbar.newNote;" oncommand="ZoteroPane_Local.newNote(event.shiftKey);"/>
<spacer flex="1"/>
<image id="zotero-tb-search-spinner" class="zotero-spinner-14" style="display: none"/>
<image id="zotero-tb-search-spinner" class="zotero-spinner-16"/>
<quick-search-textbox id="zotero-tb-search" timeout="250"
onkeydown="ZoteroPane_Local.handleSearchKeypress(this, event)"
oninput="ZoteroPane_Local.handleSearchInput(this, event)"

21
chrome/skin/default/zotero/16/dark/loading.svg Normal file
View file

@ -0,0 +1,21 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_468_18109)">
<path d="M7 3V1C7 1 7 0 8 0C9 0 9 1 9 1V3C9 3 9 4 8 4C7 4 7 3 7 3Z" fill="white"/>
<path d="M4.63004 4.10005L3.63004 2.37005C3.63004 2.37005 3.13004 1.50005 4.00004 1.00005C4.87004 0.500047 5.37004 1.37005 5.37004 1.37005L6.37004 3.10005C6.37004 3.10005 6.87004 3.97005 6.00004 4.47005C5.13004 5.04005 4.63004 4.10005 4.63004 4.10005Z" fill="white" fill-opacity="0.93"/>
<path d="M3.09993 6.37004L1.36993 5.37004C1.36993 5.37004 0.499925 4.87004 0.999925 4.00004C1.49993 3.13004 2.36993 3.63004 2.36993 3.63004L4.09993 4.63004C4.09993 4.63004 4.96992 5.13004 4.46993 6.00004C3.96993 6.87004 3.09993 6.37004 3.09993 6.37004Z" fill="white" fill-opacity="0.86"/>
<path d="M3 9H1C1 9 0 9 0 8C0 7 1 7 1 7H3C3 7 4 7 4 8C4 9 3 9 3 9Z" fill="white" fill-opacity="0.79"/>
<path d="M4.09993 11.37L2.36993 12.37C2.36993 12.37 1.49993 12.87 0.999925 12C0.499925 11.13 1.36993 10.63 1.36993 10.63L3.09993 9.63004C3.09993 9.63004 3.96993 9.13004 4.46993 10C4.96992 10.87 4.09993 11.37 4.09993 11.37Z" fill="white" fill-opacity="0.72"/>
<path d="M3.63004 13.5599L4.63004 11.8299C4.63004 11.8299 5.13004 10.9599 6.00004 11.4599C6.87004 11.9599 6.37004 12.8299 6.37004 12.8299L5.37004 14.5599C5.37004 14.5599 4.87004 15.4299 4.00004 14.9299C3.13004 14.4299 3.63004 13.5599 3.63004 13.5599Z" fill="white" fill-opacity="0.65"/>
<path d="M7 15V13C7 13 7 12 8 12C9 12 9 13 9 13V15C9 15 9 16 8 16C7 16 7 15 7 15Z" fill="white" fill-opacity="0.58"/>
<path d="M10.63 14.5599L9.63004 12.8299C9.63004 12.8299 9.13004 11.9599 10 11.4599C10.87 10.9599 11.37 11.8299 11.37 11.8299L12.37 13.5599C12.37 13.5599 12.87 14.4299 12 14.9299C11.13 15.4299 10.63 14.5599 10.63 14.5599Z" fill="white" fill-opacity="0.51"/>
<path d="M13.5599 12.37L11.8299 11.37C11.8299 11.37 10.9599 10.87 11.4599 10C11.9599 9.13004 12.8299 9.63004 12.8299 9.63004L14.5599 10.63C14.5599 10.63 15.4299 11.13 14.9299 12C14.4299 12.87 13.5599 12.37 13.5599 12.37Z" fill="white" fill-opacity="0.44"/>
<path d="M15 9H13C13 9 12 9 12 8C12 7 13 7 13 7H15C15 7 16 7 16 8C16 9 15 9 15 9Z" fill="white" fill-opacity="0.37"/>
<path d="M14.5599 5.37004L12.8299 6.37004C12.8299 6.37004 11.9599 6.87004 11.4599 6.00004C10.9599 5.13004 11.8299 4.63004 11.8299 4.63004L13.5599 3.63004C13.5599 3.63004 14.4299 3.13004 14.9299 4.00004C15.4299 4.87004 14.5599 5.37004 14.5599 5.37004Z" fill="white" fill-opacity="0.3"/>
<path d="M9.64004 3.10002L10.62 1.44002C10.62 1.44002 11.12 0.566024 11.99 1.07002C12.86 1.57002 12.36 2.44002 12.36 2.44002L11.36 4.17002C11.36 4.17002 10.86 5.04002 9.99003 4.54002C9.12003 4.04002 9.62003 3.17002 9.62003 3.17002L9.64004 3.10002Z" fill="white" fill-opacity="0.23"/>
</g>
<defs>
<clipPath id="clip0_468_18109">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

21
chrome/skin/default/zotero/16/light/loading.svg Normal file
View file

@ -0,0 +1,21 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_468_18122)">
<path d="M7 3V1C7 1 7 0 8 0C9 0 9 1 9 1V3C9 3 9 4 8 4C7 4 7 3 7 3Z" fill="black"/>
<path d="M4.63004 4.09993L3.63004 2.36993C3.63004 2.36993 3.13004 1.49993 4.00004 0.999925C4.87004 0.499925 5.37004 1.36993 5.37004 1.36993L6.37004 3.09993C6.37004 3.09993 6.87004 3.96993 6.00004 4.46993C5.13004 5.03993 4.63004 4.09993 4.63004 4.09993Z" fill="black" fill-opacity="0.93"/>
<path d="M3.09993 6.37004L1.36993 5.37004C1.36993 5.37004 0.499925 4.87004 0.999925 4.00004C1.49993 3.13004 2.36993 3.63004 2.36993 3.63004L4.09993 4.63004C4.09993 4.63004 4.96992 5.13004 4.46993 6.00004C3.96993 6.87004 3.09993 6.37004 3.09993 6.37004Z" fill="black" fill-opacity="0.86"/>
<path d="M3 9H1C1 9 0 9 0 8C0 7 1 7 1 7H3C3 7 4 7 4 8C4 9 3 9 3 9Z" fill="black" fill-opacity="0.79"/>
<path d="M4.09993 11.37L2.36993 12.37C2.36993 12.37 1.49993 12.87 0.999925 12C0.499925 11.13 1.36993 10.63 1.36993 10.63L3.09993 9.63004C3.09993 9.63004 3.96993 9.13004 4.46993 10C4.96992 10.87 4.09993 11.37 4.09993 11.37Z" fill="black" fill-opacity="0.72"/>
<path d="M3.63004 13.5599L4.63004 11.8299C4.63004 11.8299 5.13004 10.9599 6.00004 11.4599C6.87004 11.9599 6.37004 12.8299 6.37004 12.8299L5.37004 14.5599C5.37004 14.5599 4.87004 15.4299 4.00004 14.9299C3.13004 14.4299 3.63004 13.5599 3.63004 13.5599Z" fill="black" fill-opacity="0.65"/>
<path d="M7 15V13C7 13 7 12 8 12C9 12 9 13 9 13V15C9 15 9 16 8 16C7 16 7 15 7 15Z" fill="black" fill-opacity="0.58"/>
<path d="M10.63 14.5599L9.63004 12.8299C9.63004 12.8299 9.13004 11.9599 10 11.4599C10.87 10.9599 11.37 11.8299 11.37 11.8299L12.37 13.5599C12.37 13.5599 12.87 14.4299 12 14.9299C11.13 15.4299 10.63 14.5599 10.63 14.5599Z" fill="black" fill-opacity="0.51"/>
<path d="M13.5599 12.37L11.8299 11.37C11.8299 11.37 10.9599 10.87 11.4599 10C11.9599 9.13004 12.8299 9.63004 12.8299 9.63004L14.5599 10.63C14.5599 10.63 15.4299 11.13 14.9299 12C14.4299 12.87 13.5599 12.37 13.5599 12.37Z" fill="black" fill-opacity="0.44"/>
<path d="M15 9H13C13 9 12 9 12 8C12 7 13 7 13 7H15C15 7 16 7 16 8C16 9 15 9 15 9Z" fill="black" fill-opacity="0.37"/>
<path d="M14.5599 5.37004L12.8299 6.37004C12.8299 6.37004 11.9599 6.87004 11.4599 6.00004C10.9599 5.13004 11.8299 4.63004 11.8299 4.63004L13.5599 3.63004C13.5599 3.63004 14.4299 3.13004 14.9299 4.00004C15.4299 4.87004 14.5599 5.37004 14.5599 5.37004Z" fill="black" fill-opacity="0.3"/>
<path d="M9.64004 3.0999L10.62 1.4399C10.62 1.4399 11.12 0.565902 11.99 1.0699C12.86 1.5699 12.36 2.4399 12.36 2.4399L11.36 4.1699C11.36 4.1699 10.86 5.0399 9.99003 4.5399C9.12003 4.0399 9.62003 3.1699 9.62003 3.1699L9.64004 3.0999Z" fill="black" fill-opacity="0.23"/>
</g>
<defs>
<clipPath id="clip0_468_18122">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
chrome/skin/default/zotero/zotero.css
View file

@ -209,19 +209,6 @@ zoterosearch .menulist-icon {
align-items: center;
}
.zotero-spinner-14 {
list-style-image: url(chrome://zotero/skin/spinner-14px.png);
height: 14px;
width: 14px;
margin-right: 2px;
}
.zotero-spinner-16 {
list-style-image: url(chrome://zotero/skin/spinner-16px.png);
height: 16px;
width: 16px;
}
#zotero-edit-bibliography-dialog #item-list .listcell-icon {
max-width: 16px;
}
@ -236,6 +223,4 @@ zoterosearch .menulist-icon {
@media (min-resolution: 1.25dppx) {
.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-14 { list-style-image: url(chrome://zotero/skin/spinner-14px@2x.png); }
.zotero-spinner-16 { list-style-image: url(chrome://zotero/skin/spinner-16px@2x.png); }
}

1
scss/_zotero.scss
View file

@ -40,6 +40,7 @@
@import "components/publications-dialog";
@import "components/rtfScan.scss";
@import "components/search";
@import "components/spinner";
@import "components/syncButtonTooltip";
@import "components/tabBar";
@import "components/tagSelector";

25
scss/components/_spinner.scss Normal file
View file

@ -0,0 +1,25 @@
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.zotero-spinner-16 {
width: 16px;
height: 16px;
fill: var(--fill-secondary);
@include focus-states using ($color) {
@include svgicon("loading", $color, "16");
}
-moz-context-properties: fill, fill-opacity;
animation: none;
display: none;
&[status=animate] {
display: inline;
animation: rotating 0.5s steps(12) infinite;
}
}

4
scss/elements/_quickSearchTextbox.scss
View file

@ -62,3 +62,7 @@ quick-search-textbox {
height: 28px;
z-index: 1;
}
#zotero-tb-search-spinner {
margin: 0 8px;
}