fix svg icons not showing with a cursed workaround

Tauri really doesn't like importing svg modules in ts
This commit is contained in:
catto 2024-05-09 13:53:41 +02:00
parent 1c0ac3b219
commit a40578ea30
3 changed files with 39 additions and 13 deletions

View File

@ -36,7 +36,8 @@
<div class="container">
<div class="sidebar">
<div class="searchbar-container">
<img id="reverse-icon" src="path/to/first.svg">
<img id="reverse-icon-asc" src="./src/assets/sort-from-bottom-to-top.svg">
<img id="reverse-icon-desc" src="./src/assets/sort-from-top-to-bottom.svg">
<input type="text" name="note-search" id="note-searchbar" placeholder="Search...">
</div>
<div class="note-sidebar-container" id="note-sidebar-container">

View File

@ -186,12 +186,17 @@ window.addEventListener("DOMContentLoaded", async () => {
// sidebar reverse toggle
let reverseIconEl = document.querySelector('#reverse-icon') as HTMLImageElement | null;
if (reverseIconEl) {
reverseIconEl.src = reversed ? 'src/assets/sort-from-bottom-to-top.svg' : 'src/assets/sort-from-top-to-bottom.svg';
reverseIconEl.addEventListener("click", () => {
toggleReverse(reverseIconEl as HTMLImageElement);
})
let reverseIconAscEl = document.querySelector('#reverse-icon-asc') as HTMLImageElement | null;
let reverseIconDescEl = document.querySelector('#reverse-icon-desc') as HTMLImageElement | null;
if (reverseIconAscEl && reverseIconDescEl) {
reverseIconDescEl.style.display = "none";
const toggle = () => {
toggleReverse(reverseIconAscEl as HTMLImageElement, reverseIconDescEl as HTMLImageElement);
};
reverseIconAscEl.addEventListener("click", toggle);
reverseIconDescEl.addEventListener("click", toggle);
}
// auto-save timer
@ -560,13 +565,17 @@ async function refreshSidebarAndOpenLatestNote() {
openNote(latestNote);
}
function toggleReverse(reverseIconEl: HTMLImageElement | null) {
function toggleReverse(reverseIconAscEl: HTMLImageElement | null, reverseIconDescEl: HTMLImageElement | null) {
reversed = !reversed;
if (reverseIconEl) {
reversed ? reverseIconEl.src = 'src/assets/sort-from-bottom-to-top.svg' : reverseIconEl.src = 'src/assets/sort-from-top-to-bottom.svg';
} else {
console.error("failed to get reverseIconEl");
if (reverseIconAscEl && reverseIconDescEl) {
if (reverseIconAscEl.style.display !== 'none') {
reverseIconAscEl.style.display = 'none';
reverseIconDescEl.style.display = 'block';
} else {
reverseIconAscEl.style.display = 'block';
reverseIconDescEl.style.display = 'none';
}
}
showNotes();

View File

@ -211,7 +211,23 @@ button {
text-overflow: ellipsis;
}
#reverse-icon {
#reverse-icon-asc {
display: blocK;
width: 1.5em;
height: 1.5em;
color: white;
cursor: pointer;
margin-right: 1.5em;
margin-left: -0.8em;
}
#reverse-icon-desc {
display: none;
width: 1.5em;
height: 1.5em;