From 97ec5eabf7c559b4d77b15427cef098d200d736e Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 20 Feb 2022 23:46:13 +0800
Subject: [PATCH] feat: change window style
---
src-tauri/src/utils/resolve.rs | 47 ++++++++++++++++--------
src/assets/styles/layout.scss | 10 ++++-
src/components/layout/layout-traffic.tsx | 2 +-
src/components/setting/setting-verge.tsx | 4 +-
src/pages/_layout.tsx | 12 ++++--
5 files changed, 51 insertions(+), 24 deletions(-)
diff --git a/src-tauri/src/utils/resolve.rs b/src-tauri/src/utils/resolve.rs
index 10aa7c9..d6b959d 100644
--- a/src-tauri/src/utils/resolve.rs
+++ b/src-tauri/src/utils/resolve.rs
@@ -1,24 +1,10 @@
use super::{init, server};
use crate::{core::Profiles, states};
use tauri::{App, AppHandle, Manager};
-use tauri_plugin_shadows::Shadows;
/// handle something when start app
pub fn resolve_setup(app: &App) {
- // set shadow when window decorations
- let window = app.get_window("main").unwrap();
- window.set_shadow(true);
-
- // enable system blur
- use tauri_plugin_vibrancy::Vibrancy;
- #[cfg(target_os = "windows")]
- window.apply_blur();
- #[cfg(target_os = "macos")]
- {
- use tauri_plugin_vibrancy::MacOSVibrancy;
- #[allow(deprecated)]
- window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
- }
+ resolve_window(app);
// setup a simple http server for singleton
server::embed_server(&app.handle());
@@ -58,3 +44,34 @@ pub fn resolve_reset(app_handle: &AppHandle) {
verge.reset_sysproxy();
}
+
+/// customize the window theme
+fn resolve_window(app: &App) {
+ let window = app.get_window("main").unwrap();
+
+ #[cfg(target_os = "windows")]
+ {
+ use tauri_plugin_shadows::Shadows;
+ use tauri_plugin_vibrancy::Vibrancy;
+
+ window.set_decorations(false).unwrap();
+ window.set_shadow(true);
+ window.apply_blur();
+ }
+
+ #[cfg(target_os = "macos")]
+ {
+ use tauri::LogicalSize;
+ use tauri::Size::Logical;
+ window.set_decorations(true).unwrap();
+ window
+ .set_size(Logical(LogicalSize {
+ width: 800.0,
+ height: 610.0,
+ }))
+ .unwrap();
+ // use tauri_plugin_vibrancy::MacOSVibrancy;
+ // #[allow(deprecated)]
+ // window.apply_vibrancy(MacOSVibrancy::AppearanceBased);
+ }
+}
diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
index 6b20b9f..e75887f 100644
--- a/src/assets/styles/layout.scss
+++ b/src/assets/styles/layout.scss
@@ -20,8 +20,8 @@
position: relative;
flex: 0 1 180px;
width: 100%;
- max-width: 180px;
- max-height: 180px;
+ max-width: 168px;
+ max-height: 168px;
margin: 0 auto;
padding: 0 8px;
text-align: center;
@@ -79,3 +79,9 @@
}
}
}
+
+.macos.layout {
+ .layout__right .the-content {
+ top: 0;
+ }
+}
diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index e7a7efb..c1d1c49 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -54,7 +54,7 @@ const LayoutTraffic = () => {
};
return (
- <Box data-windrag width="110px" position="relative" onClick={toggleStyle}>
+ <Box width="110px" position="relative" onClick={toggleStyle}>
{trafficGraph && (
<canvas
ref={canvasRef}
diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx
index d71d55b..8a5470f 100644
--- a/src/components/setting/setting-verge.tsx
+++ b/src/components/setting/setting-verge.tsx
@@ -39,8 +39,8 @@ const SettingVerge = ({ onError }: Props) => {
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
- onGuard={(c) =>
- patchVergeConfig({ theme_mode: c ? "dark" : "light" })
+ onGuard={(e) =>
+ patchVergeConfig({ theme_mode: e ? "dark" : "light" })
}
>
<PaletteSwitch edge="end" />
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 777ab54..e54b4f4 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -13,6 +13,8 @@ import LayoutControl from "../components/layout/layout-control";
import LayoutTraffic from "../components/layout/layout-traffic";
import UpdateButton from "../components/layout/update-button";
+const isMacos = navigator.userAgent.includes("Mac OS X");
+
const Layout = () => {
const { mutate } = useSWRConfig();
const { data } = useSWR("getVergeConfig", getVergeConfig);
@@ -67,7 +69,7 @@ const Layout = () => {
<Paper
square
elevation={0}
- className="layout"
+ className={`${isMacos ? "macos " : ""}layout`}
onPointerDown={onDragging}
sx={[
(theme) => ({
@@ -96,9 +98,11 @@ const Layout = () => {
</div>
<div className="layout__right" data-windrag>
- <div className="the-bar">
- <LayoutControl />
- </div>
+ {!isMacos && (
+ <div className="the-bar">
+ <LayoutControl />
+ </div>
+ )}
<div className="the-content">
<Routes>
--
GitLab