diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json index 4cdbf49..f21856e 100644 --- a/src-tauri/capabilities/default.json +++ b/src-tauri/capabilities/default.json @@ -5,6 +5,10 @@ "windows": ["main"], "permissions": [ "core:default", + "core:window:allow-close", + "core:window:allow-minimize", + "core:window:allow-toggle-maximize", + "core:window:allow-start-dragging", "opener:default" ] } diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index b4fbe88..cb73653 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -15,7 +15,8 @@ "height": 600, "minWidth": 800, "minHeight": 500, - "decorations": true + "decorations": false, + "transparent": true } ], "security": { diff --git a/src/index.html b/src/index.html index d1cb497..76d9480 100644 --- a/src/index.html +++ b/src/index.html @@ -5,23 +5,48 @@ - Tauri App + Notes +
+
+
+ + + Notes + Personal notebook + +
+
+ + + +
+
-
+
-

Notes

+

+
\ No newline at end of file diff --git a/src/main.js b/src/main.js index b84ef84..cbe7620 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,13 @@ const { invoke } = window.__TAURI__.core; +const appWindow = window.__TAURI__.window.getCurrentWindow(); + +document.querySelector(".titlebar-drag").addEventListener("mousedown", (event) => { + if (event.button === 0) appWindow.startDragging(); +}); + +document.querySelector("#minimize-window").addEventListener("click", () => appWindow.minimize()); +document.querySelector("#maximize-window").addEventListener("click", () => appWindow.toggleMaximize()); +document.querySelector("#close-window").addEventListener("click", () => appWindow.close()); let greetInputEl; let greetMsgEl; @@ -9,25 +18,11 @@ window.addEventListener('contextmenu', (e) => { e.preventDefault(); }); -let search_state = false; function toggle_search() { + document.querySelector("#search_input").value = ""; - let search_bar = document.querySelector("#search_bar"); - let search_icon = document.querySelector("#search_icon"); - let search_quit_icon = document.querySelector("#search_quit_icon"); - - if (search_state) { - search_bar.style.display = 'flex'; - search_quit_icon.style.display = 'block'; - search_icon.style.display = 'none'; - } else { - search_bar.style.display = 'none'; - search_quit_icon.style.display = 'none'; - search_icon.style.display = 'block'; - } - - search_state = !search_state; + get_notes_list(); } function on_search_input() { diff --git a/src/styles_default.css b/src/styles_default.css index c884779..f572ba8 100644 --- a/src/styles_default.css +++ b/src/styles_default.css @@ -2,7 +2,7 @@ --color-page: #1d1d20; --color-surface: #2e2e32; --color-control: #424246; - --color-hover: #2f2f2f; + --color-hover: #0001; --color-text: #aaa; --color-icon: #808080; --color-accent: #59a9ff; @@ -10,7 +10,7 @@ } body { - background-color: var(--color-page); + background-color: transparent; padding: 0px; margin: 0; width: 100vw; @@ -18,6 +18,121 @@ body { overflow: hidden; } +.app-shell { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + box-sizing: border-box; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 10px; + background-color: var(--color-page); +} + +.window-titlebar { + position: relative; + display: flex; + align-items: center; + height: 48px; + min-height: 48px; + background-color: var(--color-surface); + /* border-bottom: 1px solid #3a3a3a; */ + user-select: none; + -webkit-user-select: none; +} + +.titlebar-drag { + display: flex; + align-items: center; + align-self: stretch; + flex: 1; + min-width: 0; + gap: 0.65rem; + padding-left: 1rem; +} + +.app-mark { + display: grid; + place-items: center; + width: 28px; + height: 28px; + flex: 0 0 28px; + border-radius: 7px; + background: var(--color-accent); + fill: var(--color-on-accent); +} + +.titlebar-copy { + display: flex; + flex-direction: column; + gap: 1px; +} + +.titlebar-title, +.titlebar-caption { + font-family: sans-serif; + user-select: none; + -webkit-user-select: none; + pointer-events: none; +} + +.titlebar-title { + color: #f6f5f4; + font-size: 0.82rem; + font-weight: 650; +} + +.titlebar-caption { + color: var(--color-icon); + font-size: 0.68rem; +} + +.window-controls { + display: flex; + align-items: center; + gap: 0.15rem; + padding: 0 0.55rem; + z-index: 1; +} + +.window-control { + display: grid; + place-items: center; + width: 34px; + height: 32px; + padding: 0; + border: 0; + border-radius: 6px; + background: transparent; + color: #c0bfbc; + cursor: pointer; +} + +.window-control svg { + width: 14px; + height: 14px; + fill: none; + stroke: currentColor; + stroke-width: 1.25; + stroke-linecap: round; + stroke-linejoin: round; +} + +.window-control:hover { + background: #454545; + color: #fff; +} + +.window-control:active { + background: #515151; +} + +.close-control:hover { + background: #c01c28; + color: #fff; +} + p { color: var(--color-text); font-family: sans-serif; @@ -49,8 +164,9 @@ input:focus { flex-direction: row; justify-content: stretch; align-items: stretch; - height: 100%; - width: 100vw; + flex: 1; + min-height: 0; + width: 100%; overflow: hidden; } @@ -87,7 +203,8 @@ input:focus { align-items: center; justify-content: center; border-radius: 10px; - padding: 0.2rem; + padding: 0.6rem; + transition: background-color 0.1s ease; } @@ -106,7 +223,7 @@ input:focus { } .button:hover { - background-color: var(--color-hover); + background-color: color-mix(in srgb, var(--color-hover) 85%, black 15%); cursor: pointer; } @@ -139,6 +256,7 @@ input:focus { flex-direction: column; justify-content: space-between; align-items: stretch; + transition: background-color 0.1s ease; } @@ -151,6 +269,10 @@ input:focus { cursor: pointer; } +.notes-list div div:hover { + background-color: transparent; +} + .notes-list-parent::-webkit-scrollbar { width: 6px; }