add arrow

keleorange · Mar 19, 2023 · 1d291be · 1d291be
1 parent 342902a
commit 1d291be
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,8 @@
     <title>GPTInstant</title>
   </head>
 
-  <body class="arrow" style="height: 100vh">
+  <body style="height: 100vh">
+    <div class="arrow"></div>
     <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
@@ -1,7 +1,7 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
-use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, CustomMenuItem};
+use tauri::{Manager, SystemTray, SystemTrayEvent, SystemTrayMenu, CustomMenuItem, ActivationPolicy};
 use tauri_plugin_positioner::{Position, WindowExt};
 
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
@@ -13,7 +13,13 @@ fn greet(name: &str) -> String {
 fn main() {
     let quit = CustomMenuItem::new("quit".to_string(), "Quit").accelerator("Cmd+Q");
     let system_tray_menu = SystemTrayMenu::new().add_item(quit);
+
     tauri::Builder::default()
+        .setup(|app| {
+            // hide dock icon
+            app.set_activation_policy(ActivationPolicy::Accessory);
+            Ok(())
+        })
         .plugin(tauri_plugin_positioner::init())
         .system_tray(SystemTray::new().with_menu(system_tray_menu))
         .on_system_tray_event(|app, event| {

diff --git a/src/App.tsx b/src/App.tsx
@@ -119,7 +119,7 @@ function App() {
   }
 
   return (
-    <div className="h-screen select-none flex flex-col container mx-auto font-sans p-2 bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
+    <div style={{height: 'calc(100vh - 12px)'}} className="select-none flex flex-col container mx-auto font-sans p-2 bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
       <Header onClearSession={handleClearSession} onSetting={handleSetting}/>
       <div className="container flex-1 overflow-auto">
       <div className="flex flex-col mt-5 select-text selection:bg-fuchsia-300 selection:text-white">

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -20,7 +20,9 @@ export function Header({ onClearSession, onSetting }: IProps) {
 
     const ref = useRef<HTMLDivElement>(null);
 
-    useClickOutside(ref, () => {
+    useClickOutside(ref, (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
         if(showSetting) {
             setShowSetting(false);
         }

diff --git a/src/components/Setting.tsx b/src/components/Setting.tsx
@@ -35,20 +35,22 @@ export function Setting({onClose}: IProps) {
         onClose();
     }
 
+
+
     return (
-        <div id="staticModal" data-modal-backdrop="static" tabIndex={-1} aria-hidden="true" className="fixed top-20 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full">
-            <div className="relative p-3 transform overflow-hidden rounded-lg bg-slate-500 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+        <div id="staticModal" data-modal-backdrop="static" tabIndex={-1} aria-hidden="true" className="absolute top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:h-full">
+            <div className="relative mt-12 p-3 transform overflow-hidden rounded-lg bg-slate-500 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="mb-2">
                     <label htmlFor="API_KEY" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">API 密钥</label>
-                    <input onChange={handleKeyChange} value={store.API_KEY} type="text" id="API_KEY" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="sk_xxxxxxxxxxxx" required/>
+                    <input onChange={handleKeyChange} value={store.API_KEY} type="text" id="API_KEY" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="sk-xxxxxxxxxxxx" required/>
                 </div>
                 <div className="mb-2">
                     <label htmlFor="API_PROXY" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">API 代理</label>
                     <input onChange={handleProxyChange} value={store.API_PROXY} type="text" id="API_PROXY" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="https://openai.com" required/>
                 </div>
                 <div className="mb-2">
                     <label htmlFor="MODEL" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">模型</label>
-                    <select id="MODEL" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    <select id="MODEL" className="bg-gray-50 border outline-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                         <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
                     </select>                
                 </div>

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,9 +1,9 @@
 import React from "react";
 
-export const useClickOutside = (ref: React.RefObject<HTMLDivElement>, callback: () => void) => {
+export const useClickOutside = (ref: React.RefObject<HTMLDivElement>, callback: (e: any) => void) => {
     const handleClick = (e: any) => {
       if (ref.current && !ref.current.contains(e.target)) {
-        callback();
+        callback(e);
       }
     };
     React.useEffect(() => {

diff --git a/src/styles.css b/src/styles.css
@@ -1,3 +1,39 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.arrow {
+    position: relative;
+    padding: 6px 0;
+}
+
+.arrow:before {
+    position: absolute;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 16px;
+    height: 8px;
+    background: rgb(30 41 59);
+    clip-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
+    content: "";
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.arrow:after {
+    content: "";
+    position: absolute;
+    width: 8.970562748477143px;
+    height: 8.970562748477143px;
+    bottom: 0;
+    inset-inline: 0;
+    margin: auto;
+    border-radius: 0 0 2px 0;
+    transform: translateY(50%) rotate(-135deg);
+    box-shadow: 2px 2px 5px rgb(0 0 0 / 5%);
+    z-index: 0;
+    background: 0 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+