Fix docs.rs svg icons

This commit is contained in:
Folyd 2024-10-16 11:35:08 +08:00
parent 5ed224d361
commit a09c271b55
3 changed files with 13 additions and 23 deletions

View file

@ -139,7 +139,7 @@ document.addEventListener("DOMContentLoaded", async () => {
advisoryMenu.innerHTML = `<a href="https://rustsec.org/${advisories.length > 0 ? `packages/${crateName}.html` : ""}" advisoryMenu.innerHTML = `<a href="https://rustsec.org/${advisories.length > 0 ? `packages/${crateName}.html` : ""}"
class="pure-menu-link" target="_blank"> class="pure-menu-link" target="_blank">
<span class="fa-svg" aria-hidden="true" style="height:13px;width:13px;display:inline-block;vertical-align:middle;">${SVG_SHEILD}</span> <span class="fa fa-solid fa-svg fa-shield" aria-hidden="true" style="height:13px;width:13px;display:inline-block;vertical-align:middle;"></span>
<span class="title">Security ${advisories.length}</span> <span class="title">Security ${advisories.length}</span>
</a> </a>
<div class="pure-menu-children rse-dropdown-content" role="menu"> <div class="pure-menu-children rse-dropdown-content" role="menu">
@ -281,12 +281,12 @@ function insertAddToExtensionElement(state) {
} else { } else {
let svgIcon = document.querySelector(".add-to-extension .fa-svg"); let svgIcon = document.querySelector(".add-to-extension .fa-svg");
if (svgIcon) { if (svgIcon) {
svgIcon.innerHTML = SVG_SPINNER; svgIcon.className = "fa fa-solid fa-svg fa-spinner";
} }
injectScripts("script/lib.js", "script/add-search-index.js"); injectScripts("script/lib.js", "script/add-search-index.js");
} }
}; };
let content, iconAttributes, iconFile; let content, iconColor, iconClass;
if (state === "latest") { if (state === "latest") {
content = `<p> content = `<p>
You already added this crate (v${installedVersion}). Click again to remove it. You already added this crate (v${installedVersion}). Click again to remove it.
@ -294,28 +294,26 @@ function insertAddToExtensionElement(state) {
<span id="rse-here" style="text-decoration: underline; cursor: pointer">here</span> <span id="rse-here" style="text-decoration: underline; cursor: pointer">here</span>
to manage all your indexed crates. to manage all your indexed crates.
</p>`; </p>`;
iconAttributes = `class="fa-svg" style="color:green"`; iconColor = "green";
iconFile = SVG_CHECK_CIRCLE; iconClass = "fa-check-circle";
} else if (state === "outdated") { } else if (state === "outdated") {
content = `<p>You current version v${installedVersion} is outdated. Click to update to the v${crateVersion}.</p>`; content = `<p>You current version v${installedVersion} is outdated. Click to update to the v${crateVersion}.</p>`;
iconAttributes = `class="fa-svg" style="color:#e57300"`; iconColor = "#e57300";
iconFile = SVG_ARROW_UP_CIRCLE; iconClass = "fa-circle-arrow-up";
} else if (state === "error") { } else if (state === "error") {
// The error case: the user fail to install the crate. // The error case: the user fail to install the crate.
content = `<p>Oops! Some error happened. You can try again. <br><br>Or check the console and file an issue to report the error.</p>`; content = `<p>Oops! Some error happened. You can try again. <br><br>Or check the console and file an issue to report the error.</p>`;
iconAttributes = `class="fa-svg" style="color:#e62f07"`; iconColor = "#e62f07";
iconFile = SVG_ERROR; iconClass = "fa-error";
} else { } else {
// The default case: need-to-install. // The default case: need-to-install.
content = `<p>Add this crate to Rust Search Extension then you can search it in the address bar.</p>`; content = `<p>Add this crate to Rust Search Extension then you can search it in the address bar.</p>`;
iconAttributes = `class="fa-svg" style="color:#121212"`; iconColor = "#121212";
iconFile = SVG_PLUS_CIRCLE; iconClass = "fa-plus-circle";
} }
li.innerHTML = `<div class="add-to-extension" li.innerHTML = `<div class="add-to-extension"
aria-label="Add to Rust Search Extension"> aria-label="Add to Rust Search Extension">
<span style="height:13px;width:13px;display:inline-block;vertical-align:middle;" ${iconAttributes}> <span style="color:${iconColor};height:13px;width:13px;display:inline-block;vertical-align:middle;" class="fa fa-solid fa-svg ${iconClass}"></span>
${iconFile}
</span>
<span class="title"> to Rust Search Extension</span> <span class="title"> to Rust Search Extension</span>
</div> </div>
<div class="pure-menu-children" role="menu"> <div class="pure-menu-children" role="menu">

View file

@ -1,8 +0,0 @@
// Those SVG files download from https://fontawesome.com/download
const SVG_ARROW_UP_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"/></svg>`;
const SVG_CHECK_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/></svg>`;
const SVG_FLAG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z"/></svg>`;
const SVG_PLUS_CIRCLE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg>`;
const SVG_ERROR = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>`;
const SVG_SHEILD = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M240 0c4.6 0 9.2 1 13.4 2.9L441.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C41.3 420.7 .5 239.2 0 140c-.1-26.2 16.3-47.9 38.3-57.2L226.7 2.9C230.8 1 235.4 0 240 0z"/></svg>`;
const SVG_SPINNER = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>`;

View file

@ -43,7 +43,7 @@ json
.setOptionsUi('manage/index.html') .setOptionsUi('manage/index.html')
.addContentScript( .addContentScript(
matches=['*://docs.rs/*'], matches=['*://docs.rs/*'],
js=['content-script-bundle.js'] + utils.js_files('script', ['lib', 'docs-rs', 'svgs', 'rust-src-navigate', 'semver']), js=['content-script-bundle.js'] + utils.js_files('script', ['lib', 'docs-rs', 'rust-src-navigate', 'semver']),
css=['script/docs-rs.css', 'script/details-toggle.css'], css=['script/docs-rs.css', 'script/details-toggle.css'],
) )
.addContentScript( .addContentScript(