From 1c94dd9e194fbf96fa2447673380841a25d1fdab Mon Sep 17 00:00:00 2001 From: Jonas Braus Date: Thu, 5 Nov 2026 19:49:26 +0100 Subject: [PATCH] animation --- src-tauri/src/data.rs | 6 ++++++ src/index.html | 17 ++++++++++------- src/main.js | 43 ++++++++++++++++++++++++++++++++++++++++++ src/styles_default.css | 19 ++++++++++++++++++- 4 files changed, 77 insertions(+), 8 deletions(-) diff --git a/src-tauri/src/data.rs b/src-tauri/src/data.rs index e29e2f0..17bac03 100644 --- a/src-tauri/src/data.rs +++ b/src-tauri/src/data.rs @@ -49,5 +49,11 @@ pub fn get_notes_list(search: &str) -> Vec { notes.push(_note); } + return notes; } + +#[tauri::command] +fn create_note() { + +} diff --git a/src/index.html b/src/index.html index 8bbd54d..f19f532 100644 --- a/src/index.html +++ b/src/index.html @@ -37,17 +37,18 @@
-
+
+
-
- - +
+ +

-
+
-
+
-
+
+ +
diff --git a/src/main.js b/src/main.js index 4cd5081..9637851 100644 --- a/src/main.js +++ b/src/main.js @@ -9,6 +9,7 @@ document.querySelector("#minimize-window").addEventListener("click", () => appWi document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize()); document.querySelector("#close-window").addEventListener("click", () => appWindow.close()); +let menuBarToggled = false; let greetInputEl; let greetMsgEl; @@ -19,6 +20,48 @@ window.addEventListener('contextmenu', (e) => { }); +function toggle_menu() { + let leftColumn = document.querySelector("#left-column"); + let toggleSearch = document.querySelector("#toggle-search"); + let searchBar = document.querySelector("#search_bar"); + let leftColumnDivider = document.querySelector("#left-column-divider"); + let notesListParent = document.querySelector(".notes-list-parent"); + let leftBarIcon = document.querySelector("#toggle-left-bar-icon"); + let toolBar = document.querySelector(".toolbar"); + + if (!menuBarToggled) { + notesListParent.style.transition = ''; + toggleSearch.style.transition = ''; + leftColumn.style.minWidth = '4rem'; + leftColumn.style.width = '4rem'; + leftBarIcon.style.rotate = '90deg'; + leftBarIcon.style.fill = 'var(--color-accent)' + toggleSearch.style.opacity = '0%'; + searchBar.style.display = 'none'; + leftColumnDivider.style.display = 'none'; + notesListParent.style.opacity = '0%'; + toolBar.style.borderBottomLeftRadius = '20px'; + toolBar.style.borderBottomRightRadius = '20px'; + } else { + notesListParent.style.transition = '0.25s opacity ease 0.2s'; + toggleSearch.style.transition = '0.25s opacity ease 0.2s'; + leftBarIcon.style.fill = 'var(--color-icon)' + leftBarIcon.style.rotate = '270deg'; + leftColumn.style.minWidth = '15rem'; + toggleSearch.style.display = 'inline-block'; + searchBar.style.display = 'flex'; + leftColumnDivider.style.display = 'block'; + leftColumn.style.width = '40%'; + toggleSearch.style.opacity = '100%'; + notesListParent.style.display = 'block'; + notesListParent.style.opacity = '100%'; + toolBar.style.borderBottomLeftRadius = '0'; + toolBar.style.borderBottomRightRadius = '10px'; + } + + menuBarToggled = !menuBarToggled; +} + function toggle_search() { document.querySelector("#search_input").value = ""; diff --git a/src/styles_default.css b/src/styles_default.css index fbfbb72..01db205 100644 --- a/src/styles_default.css +++ b/src/styles_default.css @@ -148,7 +148,6 @@ input[type="text"] { color: var(--color-text); outline: none; padding: 0.5rem 1rem; - } input:focus { @@ -177,12 +176,17 @@ input:focus { flex-direction: column; } +#left-column { + transition: width 0.2s ease, min-width 0.2s ease; +} + .grid-container-vertical { background-color: var(--color-surface); width: 100%; } .toolbar { + position: relative; display: flex; flex-direction: column; align-items: stretch; @@ -190,6 +194,19 @@ input:focus { user-select: none; -webkit-user-select: none; border-bottom-right-radius: 10px; + transition: 0.2s border-bottom-left-radius ease; +} + +.toolbar-action { + position: absolute; + background-color: var(--color-surface); + mask: radial-gradient(ellipse 100% 100% at 100% 100%, transparent 100%, #000 100%) bottom right; + mask-repeat: no-repeat; + width: 1rem; + height: 1rem; + top: 0; + right: 0; + transform: translateX(100%); } .toolbar div {