From e8c22ba953ea6008d8fdffa765a0d2dfac8cf422 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Sun, 10 Nov 2024 21:53:17 +0100 Subject: [PATCH 1/6] first glassy theme draft --- src-tauri/Cargo.lock | 1 + src-tauri/Cargo.toml | 1 + src-tauri/src/main.rs | 21 ++++++++++++- src-tauri/tauri.conf.json | 3 +- src/app.css | 40 +++++++++++++++++++++++++ src/lib/components/StatsBar.svelte | 6 ++-- src/lib/components/ThemeSwitcher.svelte | 2 +- src/lib/stores/index.ts | 9 ++++++ src/lib/styles/index.ts | 27 +++++++++++++++++ 9 files changed, 103 insertions(+), 7 deletions(-) diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index f4374d4..448c51d 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -1644,6 +1644,7 @@ dependencies = [ "tauri", "tauri-build", "tauri-plugin-shell", + "window-vibrancy", ] [[package]] diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 5e132ce..80c7e02 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -14,6 +14,7 @@ serde = { version = "1.0", features = ["derive"] } tauri = { version = "2", features = [] } sysinfo = "0.29.0" tauri-plugin-shell = "2" +window-vibrancy = "0.5.2" [features] default = [ "custom-protocol" ] diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 8ab9031..4b6e79c 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -7,7 +7,11 @@ use sysinfo::{ CpuExt, Disk, DiskExt, NetworkExt, NetworksExt, PidExt, ProcessExt, ProcessStatus, System, SystemExt, }; -use tauri::State; +use tauri::{Manager, State}; + +use window_vibrancy::apply_vibrancy; +#[cfg(target_os = "windows")] +use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState}; struct AppState { sys: Mutex, @@ -297,6 +301,21 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result .dashboard-stats { - background: var(--base); padding: 0.5rem; - border-radius: 8px; overflow-x: auto; } @@ -195,10 +193,10 @@ .stat-panel { flex: 1; min-width: 0; - background: var(--mantle); + background-color: var(--mantle); border-radius: 6px; padding: 0.75rem; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */ display: flex; flex-direction: column; } diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte index 56f638d..c94b912 100644 --- a/src/lib/components/ThemeSwitcher.svelte +++ b/src/lib/components/ThemeSwitcher.svelte @@ -13,7 +13,7 @@ const themeGroups = [ { label: "Dark", - themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"], + themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"], }, { label: "Light", diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts index 3e14eab..6087dbb 100644 --- a/src/lib/stores/index.ts +++ b/src/lib/stores/index.ts @@ -23,6 +23,8 @@ function createThemeStore() { if (theme) { if (typeof window !== "undefined") { localStorage.setItem("theme", themeName); + // Add this line to set the data-theme attribute + document.documentElement.setAttribute("data-theme", themeName); } set(theme); applyTheme(theme); @@ -32,6 +34,13 @@ function createThemeStore() { const storedTheme = typeof window !== "undefined" ? localStorage.getItem("theme") : null; const theme = (storedTheme && themes[storedTheme]) || defaultTheme; + if (typeof window !== "undefined") { + // Add this line to set the data-theme attribute on init + document.documentElement.setAttribute( + "data-theme", + storedTheme || "catppuccin", + ); + } applyTheme(theme); }, }; diff --git a/src/lib/styles/index.ts b/src/lib/styles/index.ts index 36cfa70..5d28bb9 100644 --- a/src/lib/styles/index.ts +++ b/src/lib/styles/index.ts @@ -540,4 +540,31 @@ export const themes: Record = { teal: "#55FFFF", // Another cyan }, }, + glassy: { + name: "glassy", + label: "Glassy", + colors: { + base: "#1e1e2e", + mantle: "#181825", + crust: "#11111b", + text: "#cdd6f4", + subtext0: "#a6adc8", + subtext1: "#bac2de", + surface0: "#313244", + surface1: "#45475a", + surface2: "#585b70", + overlay0: "#6c7086", + overlay1: "#7f849c", + blue: "#89b4fa", + lavender: "#b4befe", + sapphire: "#74c7ec", + sky: "#89dceb", + red: "#f38ba8", + maroon: "#eba0ac", + peach: "#fab387", + yellow: "#f9e2af", + green: "#a6e3a1", + teal: "#94e2d5", + }, + }, }; From 60793b983410f20ccf996d6fde34a6ff4d2c700d Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Sun, 10 Nov 2024 23:04:28 +0100 Subject: [PATCH 2/6] glassy: first transparent theme --- src-tauri/Cargo.toml | 2 +- src-tauri/src/main.rs | 33 +++++++++------- src-tauri/tauri.conf.json | 2 + src/app.css | 50 ++++++++++++++++--------- src/lib/components/ThemeSwitcher.svelte | 6 ++- 5 files changed, 60 insertions(+), 33 deletions(-) diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 80c7e02..6adeeca 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -11,7 +11,7 @@ tauri-build = { version = "2", features = [] } [dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } -tauri = { version = "2", features = [] } +tauri = { version = "2", features = ["macos-private-api"] } sysinfo = "0.29.0" tauri-plugin-shell = "2" window-vibrancy = "0.5.2" diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 4b6e79c..6d36873 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -9,9 +9,7 @@ use sysinfo::{ }; use tauri::{Manager, State}; -use window_vibrancy::apply_vibrancy; -#[cfg(target_os = "windows")] -use window_vibrancy::{apply_acrylic, apply_blur, NSVisualEffectMaterial, NSVisualEffectState}; +use window_vibrancy::{apply_acrylic, apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState}; struct AppState { sys: Mutex, @@ -299,21 +297,28 @@ async fn kill_process(pid: u32, state: State<'_, AppState>) -> Result Result<(), Box> { + apply_acrylic(window, Some((0, 0, 25, 125)))?; + Ok(()) +} + +#[cfg(not(target_os = "windows"))] +fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box> { + apply_vibrancy( + window, + NSVisualEffectMaterial::HudWindow, + Some(NSVisualEffectState::Active), + None, + )?; + Ok(()) +} + fn main() { tauri::Builder::default() .setup(|app| { let window = app.get_webview_window("main").unwrap(); - - #[cfg(target_os = "windows")] - { - // You can choose either blur or acrylic effect - apply_acrylic(&window, Some((0, 0, 25, 125))).expect("Failed to apply blur effect"); - - // Or use acrylic effect (Windows 10/11) - // apply_acrylic(&window, Some((18, 18, 18, 125))) - // .expect("Failed to apply acrylic effect"); - } - + setup_window_effects(&window).expect("Failed to apply window effects"); Ok(()) }) .plugin(tauri_plugin_shell::init()) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 369f0cf..22f791f 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -32,9 +32,11 @@ "identifier": "com.neohtop.dev", "plugins": {}, "app": { + "macOSPrivateApi": true, "windows": [ { "fullscreen": false, + "theme":"Dark", "height": 900, "resizable": true, "title": "NeoHtop", diff --git a/src/app.css b/src/app.css index 223680a..c2b80ce 100644 --- a/src/app.css +++ b/src/app.css @@ -65,42 +65,58 @@ body { background: var(--mantle); } + +/* Glassy theme */ + [data-theme="glassy"] body { background: transparent !important; } -[data-theme="glassy"] .title-bar { - position: relative; - background: rgba(24, 24, 37, 0.5) !important; - z-index: 10; -} - [data-theme="glassy"] .toolbar { position: relative; background: rgba(24, 24, 37, 0.5) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 9; } -[data-theme="glassy"] .process-table { - position: relative; - background: rgba(24, 24, 37, 0.5) !important; - z-index: 8; -} - [data-theme="glassy"] .stat-panel { - background: rgba(24, 24, 37, 0.5) !important; + background: rgba(24, 24, 37, 0.2) !important; z-index: 100; } -[data-theme="glassy"] th { - background: rgba(24, 24, 37, 0.5) !important; +[data-theme="glassy"] .panel-header { + border-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="glassy"] .col-actions { background: rgba(24, 24, 37, 0.2) !important; + border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important; + border-left: 1px solid rgba(232, 232, 232, 0.1) !important; +} + +[data-theme="glassy"] .search-input, +[data-theme="glassy"] .btn-toggle, +[data-theme="glassy"] .btn-action, +[data-theme="glassy"] .info-button, +[data-theme="glassy"] .btn-page, +[data-theme="glassy"] .theme-button, +[data-theme="glassy"] .usage-pill, +[data-theme="glassy"] .bar-container, +[data-theme="glassy"] .select-input { + background: rgba(24, 24, 37, 0.2) !important; + z-index: 100; } -[data-theme="glassy"] .process-table tr:hover td { - background: rgba(24, 24, 37, 0.55) !important; +[data-theme="glassy"] tr.pinned, +[data-theme="glassy"] tr:hover { + background: rgba(24, 24, 37, 0.3) !important; } +[data-theme="glassy"] th { + background: rgba(24, 24, 37, 0.5) !important; +} + +[data-theme="glassy"] td { + border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important; + background: rgba(24, 24, 37, 0.2) !important; +} \ No newline at end of file diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte index c94b912..d33237b 100644 --- a/src/lib/components/ThemeSwitcher.svelte +++ b/src/lib/components/ThemeSwitcher.svelte @@ -13,7 +13,7 @@ const themeGroups = [ { label: "Dark", - themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight", "glassy"], + themes: ["catppuccin", "dracula", "monokaiPro", "tokyoNight"], }, { label: "Light", @@ -45,6 +45,10 @@ label: "Accessibility", themes: ["highContrast"], }, + { + label: "Glassy", + themes: ["glassy"], + }, ]; From ea9ae41f496794c406bea2c367e8749fb4d2517e Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Sun, 10 Nov 2024 23:07:46 +0100 Subject: [PATCH 3/6] fix formatting --- src/app.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index c2b80ce..47d085f 100644 --- a/src/app.css +++ b/src/app.css @@ -65,7 +65,6 @@ body { background: var(--mantle); } - /* Glassy theme */ [data-theme="glassy"] body { @@ -119,4 +118,4 @@ body { [data-theme="glassy"] td { border-bottom: 1px solid rgba(232, 232, 232, 0.1) !important; background: rgba(24, 24, 37, 0.2) !important; -} \ No newline at end of file +} From 9c7b1f00c4f19188c06d73dbd01cb583799606d2 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Sun, 10 Nov 2024 23:55:15 +0100 Subject: [PATCH 4/6] blur only work on windows and mac --- src-tauri/src/main.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 6d36873..3af6dc0 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -303,7 +303,7 @@ fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box Result<(), Box> { apply_vibrancy( window, From 5460ad3b3b35aebfd40cb83b82f0cec02a06c952 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Mon, 11 Nov 2024 00:02:33 +0100 Subject: [PATCH 5/6] blur only work on windows and mac --- src-tauri/src/main.rs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 3af6dc0..00a2122 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -314,6 +314,12 @@ fn setup_window_effects(window: &tauri::WebviewWindow) -> Result<(), Box Result<(), Box> { + // No-op for other platforms + Ok(()) +} + fn main() { tauri::Builder::default() .setup(|app| { From faa5b842314a30caaa35b837fbc62677ad3a5939 Mon Sep 17 00:00:00 2001 From: Abdenasser Date: Mon, 11 Nov 2024 00:25:37 +0100 Subject: [PATCH 6/6] glassy theme to only show up for windows and macos --- package-lock.json | 14 ++++- package.json | 1 + src-tauri/Cargo.lock | 78 +++++++++++++++++++++++++ src-tauri/Cargo.toml | 1 + src-tauri/src/main.rs | 7 ++- src-tauri/tauri.conf.json | 6 +- src/lib/components/ThemeSwitcher.svelte | 13 +++-- 7 files changed, 111 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e6af88..af21504 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,18 @@ { "name": "macos-task-manager", - "version": "1.0.9", + "version": "1.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "macos-task-manager", - "version": "1.0.9", + "version": "1.1.0", "license": "MIT", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@tauri-apps/api": "^2.0.3", + "@tauri-apps/plugin-os": "^2.0.0", "@tauri-apps/plugin-shell": "^2.0.1", "simple-icons": "^13.15.0", "svelte-fa": "^4.0.3" @@ -1067,6 +1068,15 @@ "node": ">= 10" } }, + "node_modules/@tauri-apps/plugin-os": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-os/-/plugin-os-2.0.0.tgz", + "integrity": "sha512-M7hG/nNyQYTJxVG/UhTKhp9mpXriwWzrs9mqDreB8mIgqA3ek5nHLdwRZJWhkKjZrnDT4v9CpA9BhYeplTlAiA==", + "license": "MIT OR Apache-2.0", + "dependencies": { + "@tauri-apps/api": "^2.0.0" + } + }, "node_modules/@tauri-apps/plugin-shell": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-shell/-/plugin-shell-2.0.1.tgz", diff --git a/package.json b/package.json index 2310f6a..7706692 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0", "@tauri-apps/api": "^2.0.3", + "@tauri-apps/plugin-os": "^2.0.0", "@tauri-apps/plugin-shell": "^2.0.1", "simple-icons": "^13.15.0", "svelte-fa": "^4.0.3" diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 448c51d..85cc2b5 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -723,6 +723,16 @@ dependencies = [ "typeid", ] +[[package]] +name = "errno" +version = "0.3.9" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "534c5cf6194dfab3db3242765c03bbe257cf92f22b38f6bc0c58d59108a820ba" +dependencies = [ + "libc", + "windows-sys 0.52.0", +] + [[package]] name = "fdeflate" version = "0.3.6" @@ -1003,6 +1013,16 @@ dependencies = [ "version_check", ] +[[package]] +name = "gethostname" +version = "0.5.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "dc3655aa6818d65bc620d6911f05aa7b6aeb596291e1e9f79e52df85583d1e30" +dependencies = [ + "rustix", + "windows-targets 0.52.6", +] + [[package]] name = "getrandom" version = "0.1.16" @@ -1612,6 +1632,12 @@ dependencies = [ "libc", ] +[[package]] +name = "linux-raw-sys" +version = "0.4.14" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "78b3ae25bc7c8c38cec158d1f2757ee79e9b3740fbc7ccf0e59e4b08d793fa89" + [[package]] name = "lock_api" version = "0.4.12" @@ -1643,6 +1669,7 @@ dependencies = [ "sysinfo", "tauri", "tauri-build", + "tauri-plugin-os", "tauri-plugin-shell", "window-vibrancy", ] @@ -2085,6 +2112,17 @@ version = "0.2.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d" +[[package]] +name = "os_info" +version = "3.8.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ae99c7fa6dd38c7cafe1ec085e804f8f555a2f8659b0dbe03f1f9963a9b51092" +dependencies = [ + "log", + "serde", + "windows-sys 0.52.0", +] + [[package]] name = "os_pipe" version = "1.2.1" @@ -2639,6 +2677,19 @@ dependencies = [ "semver", ] +[[package]] +name = "rustix" +version = "0.38.40" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "99e4ea3e1cdc4b559b8e5650f9c8e5998e3e5c1343b4eaf034565f32318d63c0" +dependencies = [ + "bitflags 2.6.0", + "errno", + "libc", + "linux-raw-sys", + "windows-sys 0.52.0", +] + [[package]] name = "ryu" version = "1.0.18" @@ -3056,6 +3107,15 @@ dependencies = [ "futures-core", ] +[[package]] +name = "sys-locale" +version = "0.3.2" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8eab9a99a024a169fe8a903cf9d4a3b3601109bcc13bd9e3c6fff259138626c4" +dependencies = [ + "libc", +] + [[package]] name = "sysinfo" version = "0.29.11" @@ -3270,6 +3330,24 @@ dependencies = [ "walkdir", ] +[[package]] +name = "tauri-plugin-os" +version = "2.0.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "fbc5f23a86f37687c7f4fecfdc706b279087bc44f7a46702f7307ff1551ee03a" +dependencies = [ + "gethostname", + "log", + "os_info", + "serde", + "serde_json", + "serialize-to-javascript", + "sys-locale", + "tauri", + "tauri-plugin", + "thiserror 1.0.65", +] + [[package]] name = "tauri-plugin-shell" version = "2.0.2" diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 6adeeca..000e8b5 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -14,6 +14,7 @@ serde = { version = "1.0", features = ["derive"] } tauri = { version = "2", features = ["macos-private-api"] } sysinfo = "0.29.0" tauri-plugin-shell = "2" +tauri-plugin-os = "2" window-vibrancy = "0.5.2" [features] diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 00a2122..25e7131 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -8,8 +8,10 @@ use sysinfo::{ SystemExt, }; use tauri::{Manager, State}; - -use window_vibrancy::{apply_acrylic, apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState}; +#[cfg(target_os = "windows")] +use window_vibrancy::apply_acrylic; +#[cfg(target_os = "macos")] +use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState}; struct AppState { sys: Mutex, @@ -328,6 +330,7 @@ fn main() { Ok(()) }) .plugin(tauri_plugin_shell::init()) + .plugin(tauri_plugin_os::init()) .manage(AppState::new()) .invoke_handler(tauri::generate_handler![get_processes, kill_process]) .run(tauri::generate_context!()) diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 22f791f..087fd4e 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -30,7 +30,11 @@ "mainBinaryName": "NeoHtop", "version": "1.1.0", "identifier": "com.neohtop.dev", - "plugins": {}, + "plugins": { + "os": { + "all": true + } + }, "app": { "macOSPrivateApi": true, "windows": [ diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte index d33237b..6c26e79 100644 --- a/src/lib/components/ThemeSwitcher.svelte +++ b/src/lib/components/ThemeSwitcher.svelte @@ -7,6 +7,7 @@ faChevronDown, faChevronRight, } from "@fortawesome/free-solid-svg-icons"; + import { platform } from "@tauri-apps/plugin-os"; let showMenu = false; @@ -45,10 +46,14 @@ label: "Accessibility", themes: ["highContrast"], }, - { - label: "Glassy", - themes: ["glassy"], - }, + ...(platform() === "windows" || platform() === "macos" + ? [ + { + label: "Glassy", + themes: ["glassy"], + }, + ] + : []), ];