CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 01:49:54 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui revamp 3.5

Browse Source 
finished dropdown, might need a bit more
This commit is contained in:
Guy Sandler 2026-02-25 14:57:31 -08:00
parent 0bc995301f
commit a13374c23f
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
html/popup.html
View File

@ -900,17 +900,15 @@
<button class="big-button back-btn" data-i18n="back">Back</button> <button class="big-button back-btn" data-i18n="back">Back</button>
</div> </div>
<div class="option-container"> <div class="option-container">
<h3 class="header-small"> <h3 class="header-small" id="fontsDropdown" style="cursor: pointer;">
Dashboard Font Dashboard Font
<!-- <button id="quick-fonts-dropdown-trigger" style="background:none;"> --> <img src="../icon/dropdownArrow.svg" width="16px" height="16px">
<svg src="../icon/dropdownArrow.svg" width="100px" height="100px"></svg>
<!-- </button> -->
</h3> </h3>
<div id="quick-fonts"></div> <div id="quick-fonts"></div>
<div style="margin-top:10px;" class="custom-font"> <div style="margin-top:10px;" class="custom-font">
<h3 class="header-small">Custom Font</h3> <h3 class="header-small">Custom Fonts</h3>
<p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family=" <p>You can use a custom font from Google fonts here. Make sure to enter only the bold part after "?family="
</p> </p>
</div> </div>

2
icon/dropdownArrow.svg
View File

@ -1,6 +1,6 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="1.6"> <svg fill="white" width="800px" height="800px" viewBox="-6.5 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="1.6">
<g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <title>dropdown</title> <path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"/> </g> <g id="SVGRepo_iconCarrier"> <title>dropdown</title> <path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"/> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 697 B

After

Width:  |  Height:  |  Size: 695 B

13
js/popup.js
View File

@ -748,6 +748,19 @@ function setup() {
document.querySelector("#customBackgroundLink").value = ""; document.querySelector("#customBackgroundLink").value = "";
sendFromPopup("updateBackground"); sendFromPopup("updateBackground");
}); });
document.getElementById("fontsDropdown").addEventListener("click", (e) => {
const el = document.getElementById("quick-fonts");
const el2 = document.getElementsByClassName("custom-font")[0];
if (el.style.display === "none") {
el.style.display = "flex";
el2.style.display = "block";
} else {
el.style.display = "none";
el2.style.display = "none";
}
});
} }
function applyGPAPreset(bounds) { function applyGPAPreset(bounds) {