feat: improve tray window layout

hcavarsan · Dec 8, 2023 · 759f1e8 · 759f1e8
1 parent 73ee0fb
commit 759f1e8
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 165 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ kftray is a tray application developed with Tauri, Rust, React, Vite, and Chakra
 </p>
 
 <p align="center">
-! <img src="img/play2.gif" alt="kftray logo" width="800"/>
+! <img src="img/play3.gif" alt="kftray logo" width="800"/>
 </p>
 
 <h5 align="center">

diff --git a/dist/index.html b/dist/index.html
@@ -5,10 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tauri + React + TS</title>
-    <script type="module" crossorigin src="/assets/index-9937ec75.js"></script>
+    <script type="module" crossorigin src="/assets/index-a8e01424.js"></script>
+    <link rel="stylesheet" href="/assets/index-7cb5edcd.css">
   </head>
 
-  <body>
+  <body class="arrow">
     <div id="root"></div>
 
   </body>

diff --git a/img/play2.gif → img/play3.gif b/img/play2.gif → img/play3.gif
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>Tauri + React + TS</title>
   </head>
 
-  <body>
+  <body class="arrow">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -29,59 +29,59 @@ fn main() {
         })
         .plugin(tauri_plugin_positioner::init())
         .system_tray(SystemTray::new().with_menu(system_tray_menu))
-        .on_system_tray_event(|app, event| {
+		.on_system_tray_event(|app, event| {
             tauri_plugin_positioner::on_tray_event(app, &event);
             match event {
-                SystemTrayEvent::LeftClick { .. } => {
-                    if let Some(window) = app.get_window("main") {
-                        let _ = window.move_window(Position::TrayCenter);
-                        match window.is_visible() {
-                            Ok(true) => {
-                                if let Err(e) = window.hide() {
-                                    println!("Failed to hide window: {}", e);
-                                }
-                            }
-                            Ok(false) => {
-                                if let Err(e) = window.show() {
-                                    println!("Failed to show window: {}", e);
-                                }
-                                if let Err(e) = window.set_focus() {
-                                    println!("Failed to set focus: {}", e);
-                                }
-                            }
-                            Err(e) => {
-                                println!("Failed to check window visibility: {}", e);
-                            }
-                        }
+                SystemTrayEvent::LeftClick {
+                    position: _,
+                    size: _,
+                    ..
+                } => {
+                    let window = app.get_window("main").unwrap();
+                    let _ = window.move_window(Position::TrayCenter);
+
+                    if window.is_visible().unwrap() {
+                        window.hide().unwrap();
+                    } else {
+                        window.show().unwrap();
+                        window.set_focus().unwrap();
                     }
                 }
-                SystemTrayEvent::RightClick { .. } => {
+                SystemTrayEvent::RightClick {
+                    position: _,
+                    size: _,
+                    ..
+                } => {
                     println!("system tray received a right click");
                 }
-                SystemTrayEvent::DoubleClick { .. } => {
+                SystemTrayEvent::DoubleClick {
+                    position: _,
+                    size: _,
+                    ..
+                } => {
                     println!("system tray received a double click");
                 }
                 SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
                     "quit" => {
                         std::process::exit(0);
                     }
                     "hide" => {
-                        if let Some(window) = app.get_window("main") {
-                            let _ = window.hide();
-                        }
+                        let window = app.get_window("main").unwrap();
+                        window.hide().unwrap();
                     }
                     _ => {}
                 },
                 _ => {}
             }
         })
-        .on_window_event(|event| {
-            if let tauri::WindowEvent::Focused(is_focused) = event.event() {
+        .on_window_event(|event| match event.event() {
+            tauri::WindowEvent::Focused(is_focused) => {
                 // detect click outside of the focused window and hide the app
                 if !is_focused {
-                    let _ = event.window().hide();
+                    event.window().hide().unwrap();
                 }
             }
+            _ => {}
         })
         .invoke_handler(tauri::generate_handler![
 			kubeforward::port_forward::start_port_forward,

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -71,7 +71,7 @@
 		  "focus": false,
 		  "transparent": true,
 		  "skipTaskbar": true,
-		  "alwaysOnTop": false
+		  "alwaysOnTop": true
 		}
 	  ],
 	  "systemTray": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -277,22 +277,24 @@ const stopPortForwarding = async () => {
 	const textColor = useColorModeValue("gray.100", "gray.100")
 
 	return (
-		<Center h="100vh" bg="dark.700" margin="0">
+		<Center h="90vh" margin="0" borderRadius="20px" >
 			{" "}
 			{/* Setting the height to 100vh ensures it takes the full viewport height */}
 			<VStack
-				spacing={2}
-				position="relative" // Changed from "absolute" to "relative" for alignment
+			p={4}
+			    shadow='md'
+			    margin="0"
+				position="absolute" // Changed from "absolute" to "relative" for alignment
 				width="95%"
 				height="95%"
-				maxWidth="700px"
-				maxHeight="600px" // Adjust this value to change the maximum height
-				p={5} // Add some padding
+				maxWidth="600px"
+				maxHeight="500px" // Adjust this value to change the maximum height
 				bg={cardBg} // Add a background to the card for better visibility
-				borderRadius="md" // Optional: add slight rounding of corners
-				boxShadow="md" // Optional: some shadow for depth
+				borderRadius="20px" // Optional: add slight rounding of corners
+				mb={10}
+
 			>
-				<Heading as="h1" size="lg" color="white" mb={2} marginTop={2}>
+				<Heading as="h1" size="lg" color="white" mb={1} marginTop={2}>
 					<Image borderRadius="full" boxSize="100px" src={logo} />
 				</Heading>
 				<Center>
@@ -455,8 +457,8 @@ const stopPortForwarding = async () => {
 				aria-label="Quit application"
 				variant="solid"
 				position="fixed"
-				top={7}
-				right={6}
+				top={5}
+				right={7}
 				onClick={quitApp}
 				isRound={false}
 				size="xs"

diff --git a/src/assets/style.css b/src/assets/style.css
@@ -2,90 +2,7 @@ body {
 	margin: 0;
   }
 
-  :root {
-	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-	font-size: 16px;
-	line-height: 24px;
-	font-weight: 400;
-
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-  }
-
-  .container {
-	margin: 0;
-	padding-top: 2vh;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	text-align: center;
-  }
-
-  .logo {
-	height: 6em;
-	padding: 1.5em;
-	will-change: filter;
-	transition: 0.75s;
-  }
-
-  .logo.tauri:hover {
-	filter: drop-shadow(0 0 2em #24c8db);
-  }
-
-  .row {
-	display: flex;
-	justify-content: center;
-  }
-
-  a {
-	font-weight: 500;
-	color: #646cff;
-	text-decoration: inherit;
-  }
-
-  a:hover {
-	color: #535bf2;
-  }
-
-  h1 {
-	text-align: center;
-  }
-
-  input,
-  button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	color: #0f0f0f;
-	background-color: #ffffff;
-	transition: border-color 0.25s;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-  }
-
-  button {
-	cursor: pointer;
-  }
-
-  button:hover {
-	border-color: #396cd8;
-  }
-
-  input,
-  button {
-	outline: none;
-  }
-
-  #greet-input {
-	margin-right: 5px;
-  }
-
-  .arrow {
+.arrow {
 	position: relative;
 	padding: 12px 0;
   }
@@ -96,28 +13,10 @@ body {
 	width: 0;
 	border-width: 0 8px 12px 8px;
 	border-style: solid;
-	border-color: transparent transparent #2f2f2f transparent;
+	border-color: transparent transparent #1A202C transparent;
 	position: absolute;
 	top: 0px;
 	left: 50%;
 	transform: translateX(-50%);
   }
 
-  @media (prefers-color-scheme: dark) {
-	.container {
-	  border-radius: 7px;
-	  padding: 10px;
-	  color: #f6f6f6;
-	  background-color: #2f2f2f;
-	}
-
-	a:hover {
-	  color: #24c8db;
-	}
-
-	input,
-	button {
-	  color: #ffffff;
-	  background-color: #0f0f0f98;
-	}
-  }
diff --git a/src/assets/theme.tsx b/src/assets/theme.tsx
@@ -2,23 +2,20 @@
 import { extendTheme, ThemeConfig } from "@chakra-ui/react";
 
 const config: ThemeConfig = {
-	initialColorMode: 'dark',
-	useSystemColorMode: false,
-  };
+  initialColorMode: 'dark',
+  useSystemColorMode: false,
+};
 
-
-  const theme = extendTheme({
-	config,
-	colors: {
-	  dark: {
-		700: "#2D3748", // A dark gray background color
-	  },
-	  purple: {
-		// Purple variations
-		500: "#805AD5",
-		600: "#6B46C1",
-	  },
-	},
+const theme = extendTheme({
+  config,
+  styles: {
+    global: {
+      body: {
+        margin: 0,
+        backgroundColor: "transparent",
+      },
+    },
+  },
 });
 
 export default theme;
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import { ChakraProvider } from '@chakra-ui/react'
 import theme from './assets/theme'; // Make sure this theme import path is correct
+import './assets/style.css';
 import { attachConsole } from 'tauri-plugin-log-api'
 if (import.meta.env.DEV) {
 	attachConsole()