catto
/
snotes-deck
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -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">

29
src/main.ts
View File

@ -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') {
reverseIconAscEl.style.display = 'none';
reverseIconDescEl.style.display = 'block';
} else { } else {
console.error("failed to get reverseIconEl"); reverseIconAscEl.style.display = 'block';
reverseIconDescEl.style.display = 'none';
}
} }
showNotes(); showNotes();

18
src/styles.css
View File

@ -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;