Skip to content

Commit

Permalink
Rollup merge of #96704 - GuillaumeGomez:rotation-animation, r=jsha
Browse files Browse the repository at this point in the history
Add rotation animation on settings button when loading

As discussed, I added an animation when the settings JS file is loading (I voluntarily made the timeout at the end of the `settings.js` super long so we can see what the animation looks like):

https://user-images.githubusercontent.com/3050060/166693243-816a08b7-5e39-4142-acd3-686ad9950d8e.mp4

r? ````@jsha````
  • Loading branch information
compiler-errors authored May 6, 2022
2 parents ef949da + 13b45aa commit 292eefe
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 0 deletions.
12 changes: 12 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -1401,6 +1401,18 @@ pre.rust {
cursor: pointer;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#settings-menu.rotate img {
animation: rotating 2s linear infinite;
}

#help-button {
font-family: "Fira Sans", Arial, sans-serif;
text-align: center;
Expand Down
1 change: 1 addition & 0 deletions src/librustdoc/html/static/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ function loadCss(cssFileName) {
}

getSettingsButton().onclick = event => {
addClass(getSettingsButton(), "rotate");
event.preventDefault();
loadScript(window.settingsJS);
};
Expand Down
1 change: 1 addition & 0 deletions src/librustdoc/html/static/js/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -274,5 +274,6 @@
if (!isSettingsPage) {
switchDisplayedElement(settingsMenu);
}
removeClass(getSettingsButton(), "rotate");
}, 0);
})();

0 comments on commit 292eefe

Please sign in to comment.