fix svg icons not showing with a cursed workaround
Tauri really doesn't like importing svg modules in ts
This commit is contained in:
parent
1c0ac3b219
commit
a40578ea30
|
@ -36,7 +36,8 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="searchbar-container">
|
<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...">
|
<input type="text" name="note-search" id="note-searchbar" placeholder="Search...">
|
||||||
</div>
|
</div>
|
||||||
<div class="note-sidebar-container" id="note-sidebar-container">
|
<div class="note-sidebar-container" id="note-sidebar-container">
|
||||||
|
|
31
src/main.ts
31
src/main.ts
|
@ -186,12 +186,17 @@ window.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
|
||||||
// sidebar reverse toggle
|
// sidebar reverse toggle
|
||||||
|
|
||||||
let reverseIconEl = document.querySelector('#reverse-icon') as HTMLImageElement | null;
|
let reverseIconAscEl = document.querySelector('#reverse-icon-asc') as HTMLImageElement | null;
|
||||||
if (reverseIconEl) {
|
let reverseIconDescEl = document.querySelector('#reverse-icon-desc') as HTMLImageElement | null;
|
||||||
reverseIconEl.src = reversed ? 'src/assets/sort-from-bottom-to-top.svg' : 'src/assets/sort-from-top-to-bottom.svg';
|
if (reverseIconAscEl && reverseIconDescEl) {
|
||||||
reverseIconEl.addEventListener("click", () => {
|
reverseIconDescEl.style.display = "none";
|
||||||
toggleReverse(reverseIconEl as HTMLImageElement);
|
|
||||||
})
|
const toggle = () => {
|
||||||
|
toggleReverse(reverseIconAscEl as HTMLImageElement, reverseIconDescEl as HTMLImageElement);
|
||||||
|
};
|
||||||
|
|
||||||
|
reverseIconAscEl.addEventListener("click", toggle);
|
||||||
|
reverseIconDescEl.addEventListener("click", toggle);
|
||||||
}
|
}
|
||||||
|
|
||||||
// auto-save timer
|
// auto-save timer
|
||||||
|
@ -560,13 +565,17 @@ async function refreshSidebarAndOpenLatestNote() {
|
||||||
openNote(latestNote);
|
openNote(latestNote);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleReverse(reverseIconEl: HTMLImageElement | null) {
|
function toggleReverse(reverseIconAscEl: HTMLImageElement | null, reverseIconDescEl: HTMLImageElement | null) {
|
||||||
reversed = !reversed;
|
reversed = !reversed;
|
||||||
|
|
||||||
if (reverseIconEl) {
|
if (reverseIconAscEl && reverseIconDescEl) {
|
||||||
reversed ? reverseIconEl.src = 'src/assets/sort-from-bottom-to-top.svg' : reverseIconEl.src = 'src/assets/sort-from-top-to-bottom.svg';
|
if (reverseIconAscEl.style.display !== 'none') {
|
||||||
} else {
|
reverseIconAscEl.style.display = 'none';
|
||||||
console.error("failed to get reverseIconEl");
|
reverseIconDescEl.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
reverseIconAscEl.style.display = 'block';
|
||||||
|
reverseIconDescEl.style.display = 'none';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
showNotes();
|
showNotes();
|
||||||
|
|
|
@ -211,7 +211,23 @@ button {
|
||||||
text-overflow: ellipsis;
|
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;
|
width: 1.5em;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue