Klectr/KRadio
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

(feat): hide native title bar and impliment custom titlebar

Browse Source
This commit is contained in:
Triston Armstrong 2024-04-04 23:24:34 -05:00
parent cfc8aabd15
commit df52705fd2
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
6 changed files with 362 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -7,6 +7,62 @@
</head> </head>
<body> <body>
<div data-tauri-drag-region class="titlebar">
<div class="titlebar-button" id="titlebar-close">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-circle-x"
>
<circle cx="12" cy="12" r="10" />
<path d="m15 9-6 6" />
<path d="m9 9 6 6" />
</svg>
</div>
<div class="titlebar-button" id="titlebar-minimize">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-circle-minus"
>
<circle cx="12" cy="12" r="10" />
<path d="M8 12h8" />
</svg>
</div>
<div class="titlebar-button" id="titlebar-maximize">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-circle-plus"
>
<circle cx="12" cy="12" r="10" />
<path d="M8 12h8" />
<path d="M12 8v8" />
</svg>
</div>
</div>
<div id="root" /> <div id="root" />
<script type="module" src="/src/main.ts" defer></script> <script type="module" src="/src/main.ts" defer></script>
</body> </body>

433
src-tauri/Cargo.lock generated
View File

File diff suppressed because it is too large Load Diff

3
src-tauri/Cargo.toml
View File

@ -11,9 +11,10 @@ edition = "2021"
tauri-build = { version = "1", features = [] } tauri-build = { version = "1", features = [] }
[dependencies] [dependencies]
tauri = { version = "1", features = [ "fs-read-file", "fs-create-dir", "fs-exists", "fs-write-file", "path-all", "shell-open"] } tauri = { version = "1", features = [ "macos-private-api", "window-unmaximize", "window-show", "window-minimize", "window-hide", "window-start-dragging", "window-maximize", "window-unminimize", "window-close", "fs-read-file", "fs-create-dir", "fs-exists", "fs-write-file", "path-all", "shell-open"] }
serde = { version = "1", features = ["derive"] } serde = { version = "1", features = ["derive"] }
serde_json = "1" serde_json = "1"
window-vibrancy = "0.4.0"
[features] [features]
# This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!! # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!

22
src-tauri/src/main.rs
View File

@ -1,15 +1,25 @@
// Prevents additional console window on Windows in release, DO NOT REMOVE!! // Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command use tauri::Manager;
#[tauri::command] use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
fn greet(name: &str) -> String {
format!("Hello, {}! You've been greeted from Rust!", name)
}
fn main() { fn main() {
tauri::Builder::default() tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet]) .setup(|app| {
let window = app.get_window("main").unwrap();
#[cfg(target_os = "macos")]
apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, Some(16.0))
.expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
#[cfg(target_os = "windows")]
apply_blur(&window, Some((18, 18, 18, 125)))
.expect("Unsupported platform! 'apply_blur' is only supported on Windows");
Ok(())
})
// .invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!()) .run(tauri::generate_context!())
.expect("error while running tauri application"); .expect("error while running tauri application");
} }

19
src-tauri/tauri.conf.json
View File

@ -18,7 +18,15 @@
"open": true "open": true
}, },
"window": { "window": {
"all": false "all": false,
"close": true,
"hide": true,
"show": true,
"maximize": true,
"minimize": true,
"unmaximize": true,
"unminimize": true,
"startDragging": true
}, },
"fs": { "fs": {
"all": false, "all": false,
@ -32,13 +40,16 @@
"all": true "all": true
} }
}, },
"macOSPrivateApi": true,
"windows": [ "windows": [
{ {
"title": "KlectrRadio", "title": "KlectrRadio",
"width": 300, "width": 1200,
"height": 600, "height": 600,
"decorations": true, "decorations": false,
"resizable": true "resizable": true,
"min-width": 800,
"min-height": 600
} }
], ],
"security": { "security": {

35
src/styles.css
View File

@ -9,10 +9,43 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
/* background-color: #000022dd; */
@apply bg-gray-100 mt-6; @apply bg-gray-100 mt-6;
} }
html,
body {
margin: 0 !important;
}
body {
@apply flex flex-col;
}
.paper { .paper {
@apply bg-white rounded-lg; @apply bg-white rounded-lg;
} }
.titlebar {
height: 20px;
user-select: none;
display: flex;
justify-content: flex-start;
gap: 8px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 10px;
}
.titlebar-button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
}
.titlebar-button:hover {
border-radius: 100%;
background: #5bbec3;
cursor: pointer;
}