From b5238c7c934385958cfd0c8ad5cb5c9ff638b0b5 Mon Sep 17 00:00:00 2001 From: catto Date: Sun, 5 May 2024 22:57:40 +0200 Subject: [PATCH] more styling --- index.html | 2 +- src-tauri/tauri.conf.json | 2 +- src/assets/sort-from-bottom-to-top.svg | 7 ++++++ src/assets/sort-from-top-to-bottom.svg | 7 ++++++ src/assets/tauri.svg | 6 ----- src/assets/typescript.svg | 25 ------------------- src/assets/vite.svg | 1 - src/main.ts | 26 ++++++++++++-------- src/styles.css | 33 ++++++++++++++++++++++++-- 9 files changed, 63 insertions(+), 46 deletions(-) create mode 100644 src/assets/sort-from-bottom-to-top.svg create mode 100644 src/assets/sort-from-top-to-bottom.svg delete mode 100644 src/assets/tauri.svg delete mode 100644 src/assets/typescript.svg delete mode 100644 src/assets/vite.svg diff --git a/index.html b/index.html index 3a94c00..54b4c7c 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@
- Reverse +
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 12d3014..a08f223 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -8,7 +8,7 @@ }, "package": { "productName": "snotes-deck", - "version": "0.0.10" + "version": "0.0.11" }, "tauri": { "allowlist": { diff --git a/src/assets/sort-from-bottom-to-top.svg b/src/assets/sort-from-bottom-to-top.svg new file mode 100644 index 0000000..71101d5 --- /dev/null +++ b/src/assets/sort-from-bottom-to-top.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/sort-from-top-to-bottom.svg b/src/assets/sort-from-top-to-bottom.svg new file mode 100644 index 0000000..77fbd17 --- /dev/null +++ b/src/assets/sort-from-top-to-bottom.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/tauri.svg b/src/assets/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/src/assets/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/assets/typescript.svg b/src/assets/typescript.svg deleted file mode 100644 index 30a5edd..0000000 --- a/src/assets/typescript.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - diff --git a/src/assets/vite.svg b/src/assets/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/src/assets/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 02c9bd5..cfe7297 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,7 +12,6 @@ let createNoteTagEl: HTMLInputElement | null; let searchbarEl: HTMLInputElement | null; let noteSidebarContainerEl: HTMLDivElement | null; -let noteSidebarReverseCheckboxEl: HTMLInputElement | null; let searchbarContents = ""; let noteArray: Note[] = [] @@ -186,12 +185,12 @@ window.addEventListener("DOMContentLoaded", async () => { }) // sidebar reverse toggle - noteSidebarReverseCheckboxEl = document.querySelector('#reverse-toggle'); - if (noteSidebarReverseCheckboxEl) { - console.log(noteSidebarReverseCheckboxEl.value); - noteSidebarReverseCheckboxEl.addEventListener("click", (e: Event) => { - const target = e.target as HTMLInputElement - toggleReverse(target.checked); + + 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", (e: Event) => { + toggleReverse(reverseIconEl as HTMLImageElement); }) } @@ -338,7 +337,7 @@ function fillNoteSidebar(noteArray: Note[], reverse: boolean) { const tagSpan: HTMLSpanElement = document.createElement('span'); tagSpan.classList.add('sidebar-note-tag'); - tagSpan.textContent = note.tag as string; + tagSpan.textContent = note.tag.length > 9 ? note.tag.substring(0, 11) + ".." : note.tag as string; noteEl.appendChild(idSpan); @@ -561,8 +560,15 @@ async function refreshSidebarAndOpenLatestNote() { openNote(latestNote); } -function toggleReverse(val: boolean) { - reversed = val; +function toggleReverse(reverseIconEl: 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"); + } + showNotes(); } diff --git a/src/styles.css b/src/styles.css index 78e4436..0f2cfaf 100644 --- a/src/styles.css +++ b/src/styles.css @@ -48,6 +48,8 @@ width: 100%; height: 100%; + border-radius: 15px; + display: flex; flex-direction: column; justify-content: flex-end; @@ -162,6 +164,8 @@ button { background-color: #0f0f0f; width: 35%; padding: 0 20px; + + border-radius: 15px; } .note-sidebar-container { @@ -181,20 +185,42 @@ button { } .sidebar-note-id { - margin-right: 10px; + margin-right: 30px; font-weight: bold; } .sidebar-note-content { flex-grow: 1; overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; + + text-align: left; } .sidebar-note-tag { margin-left: 10px; padding: 2px 6px; border-radius: 4px; + + flex-shrink: 0; + flex-grow: 0; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#reverse-icon { + width: 1.5em; + height: 1.5em; + + color: white; + + cursor: pointer; + + margin-right: 1.5em; + margin-left: -0.8em; } /* CONTEXT MENU */ @@ -228,7 +254,10 @@ button { /* Searchbar */ .searchbar-container { - margin: 0.5em; + margin: 0.8em 0.5em 0.5em 0.5em; + + display: flex; + align-items: center; } #note-searchbar {