fix: titlebar on windows

This commit is contained in:
2024-09-02 08:26:10 +07:00
parent 529a410fe9
commit c1ce6f716e
6 changed files with 95 additions and 73 deletions

View File

@@ -26,6 +26,7 @@
"core:window:allow-set-size", "core:window:allow-set-size",
"core:window:allow-set-focus", "core:window:allow-set-focus",
"core:window:allow-start-dragging", "core:window:allow-start-dragging",
"core:window:allow-toggle-maximize",
"decorum:allow-show-snap-overlay", "decorum:allow-show-snap-overlay",
"prevent-default:default", "prevent-default:default",
"updater:default", "updater:default",

View File

@@ -73,10 +73,6 @@ fn main() {
let handle = app.handle(); let handle = app.handle();
let main_window = app.get_webview_window("main").unwrap(); let main_window = app.get_webview_window("main").unwrap();
// Open devtools
#[cfg(debug_assertions)]
main_window.open_devtools();
// Set custom decoration // Set custom decoration
#[cfg(target_os = "windows")] #[cfg(target_os = "windows")]
main_window.create_overlay_titlebar().unwrap(); main_window.create_overlay_titlebar().unwrap();
@@ -85,7 +81,7 @@ fn main() {
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
main_window.set_traffic_lights_inset(12.0, 18.0).unwrap(); main_window.set_traffic_lights_inset(12.0, 18.0).unwrap();
// Workaround for reset traffic light when window resized // Workaround for reset traffic light when theme changed
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
let win_ = main_window.clone(); let win_ = main_window.clone();
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
@@ -165,9 +161,8 @@ fn main() {
Ok(()) Ok(())
}) })
.enable_macos_default_menu(false) .plugin(prevent_default())
.plugin(tauri_plugin_fs::init()) .plugin(tauri_plugin_fs::init())
.plugin(tauri_plugin_prevent_default::init())
.plugin(tauri_plugin_process::init()) .plugin(tauri_plugin_process::init())
.plugin(tauri_plugin_updater::Builder::new().build()) .plugin(tauri_plugin_updater::Builder::new().build())
.plugin(tauri_plugin_os::init()) .plugin(tauri_plugin_os::init())
@@ -179,3 +174,17 @@ fn main() {
.run(tauri::generate_context!()) .run(tauri::generate_context!())
.expect("error while running tauri application"); .expect("error while running tauri application");
} }
#[cfg(debug_assertions)]
fn prevent_default() -> tauri::plugin::TauriPlugin<tauri::Wry> {
use tauri_plugin_prevent_default::Flags;
tauri_plugin_prevent_default::Builder::new()
.with_flags(Flags::all().difference(Flags::CONTEXT_MENU))
.build()
}
#[cfg(not(debug_assertions))]
fn prevent_default() -> tauri::plugin::TauriPlugin<tauri::Wry> {
tauri_plugin_prevent_default::Builder::new().build()
}

View File

@@ -3,98 +3,106 @@
@tailwind utilities; @tailwind utilities;
@layer utilities { @layer utilities {
.break-message { .break-message {
word-break: break-word; word-break: break-word;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
} }
html { html {
font-size: 14px; font-size: 14px;
} }
a { a {
@apply cursor-default no-underline !important; @apply cursor-default no-underline !important;
} }
button { button {
@apply cursor-default focus:outline-none; @apply cursor-default focus:outline-none;
} }
input::-ms-reveal, input::-ms-reveal,
input::-ms-clear { input::-ms-clear {
display: none; display: none;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
line-height: normal; line-height: normal;
}
div[data-tauri-decorum-tb] {
@apply h-12 !important;
}
button.decorum-tb-btn {
@apply h-12 !important;
} }
.spinner-leaf { .spinner-leaf {
position: absolute; position: absolute;
top: 0; top: 0;
left: calc(50% - 12.5% / 2); left: calc(50% - 12.5% / 2);
width: 12.5%; width: 12.5%;
height: 100%; height: 100%;
animation: spinner-leaf-fade 800ms linear infinite; animation: spinner-leaf-fade 800ms linear infinite;
&::before { &::before {
content: ""; content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 30%; height: 30%;
background-color: currentColor; background-color: currentColor;
@apply rounded; @apply rounded;
} }
&:where(:nth-child(1)) { &:where(:nth-child(1)) {
transform: rotate(0deg); transform: rotate(0deg);
animation-delay: -800ms; animation-delay: -800ms;
} }
&:where(:nth-child(2)) { &:where(:nth-child(2)) {
transform: rotate(45deg); transform: rotate(45deg);
animation-delay: -700ms; animation-delay: -700ms;
} }
&:where(:nth-child(3)) { &:where(:nth-child(3)) {
transform: rotate(90deg); transform: rotate(90deg);
animation-delay: -600ms; animation-delay: -600ms;
} }
&:where(:nth-child(4)) { &:where(:nth-child(4)) {
transform: rotate(135deg); transform: rotate(135deg);
animation-delay: -500ms; animation-delay: -500ms;
} }
&:where(:nth-child(5)) { &:where(:nth-child(5)) {
transform: rotate(180deg); transform: rotate(180deg);
animation-delay: -400ms; animation-delay: -400ms;
} }
&:where(:nth-child(6)) { &:where(:nth-child(6)) {
transform: rotate(225deg); transform: rotate(225deg);
animation-delay: -300ms; animation-delay: -300ms;
} }
&:where(:nth-child(7)) { &:where(:nth-child(7)) {
transform: rotate(270deg); transform: rotate(270deg);
animation-delay: -200ms; animation-delay: -200ms;
} }
&:where(:nth-child(8)) { &:where(:nth-child(8)) {
transform: rotate(315deg); transform: rotate(315deg);
animation-delay: -100ms; animation-delay: -100ms;
} }
} }
@keyframes spinner-leaf-fade { @keyframes spinner-leaf-fade {
from { from {
opacity: 1; opacity: 1;
} }
to { to {
opacity: 0.25; opacity: 0.25;
} }
} }

View File

@@ -46,13 +46,17 @@ function Screen() {
function Header() { function Header() {
const { account, id } = Route.useParams(); const { account, id } = Route.useParams();
const { platform } = Route.useRouteContext();
return ( return (
<div <div
data-tauri-drag-region data-tauri-drag-region
className="h-12 shrink-0 flex items-center justify-between px-3.5 border-b border-neutral-100 dark:border-neutral-800" className={cn(
"h-12 shrink-0 flex items-center justify-between border-b border-neutral-100 dark:border-neutral-800",
platform === "windows" ? "pl-3.5 pr-[150px]" : "px-3.5"
)}
> >
<div> <div className="z-[200]">
<div className="flex -space-x-1 overflow-hidden"> <div className="flex -space-x-1 overflow-hidden">
<User.Provider pubkey={account}> <User.Provider pubkey={account}>
<User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900"> <User.Root className="size-8 rounded-full inline-block ring-2 ring-white dark:ring-neutral-900">

View File

@@ -57,7 +57,7 @@ function Header() {
<div <div
data-tauri-drag-region data-tauri-drag-region
className={cn( className={cn(
"shrink-0 h-12 flex items-center justify-between", "z-[200] shrink-0 h-12 flex items-center justify-between",
platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5", platform === "macos" ? "pl-[78px] pr-3.5" : "px-3.5",
)} )}
> >

View File

@@ -59,7 +59,7 @@ function Screen() {
if (res.status === "ok") { if (res.status === "ok") {
navigate({ navigate({
to: "/$account/chats", to: "/$account/chats/new",
params: { account: res.data }, params: { account: res.data },
replace: true, replace: true,
}); });