diff --git a/index.html b/index.html index 7aab9a0..57bb847 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,17 @@ - - - - - handy - - -
- - - + + + + handy + + + +
+ + + + \ No newline at end of file diff --git a/public/icon/recording.png b/public/icon/recording.png deleted file mode 100644 index 8839e84..0000000 Binary files a/public/icon/recording.png and /dev/null differ diff --git a/public/icon/transcribing.png b/public/icon/transcribing.png deleted file mode 100644 index bb6fb25..0000000 Binary files a/public/icon/transcribing.png and /dev/null differ diff --git a/public/tauri.svg b/public/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/public/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src-tauri/resources/handy.png b/src-tauri/resources/handy.png new file mode 100644 index 0000000..7a1e476 Binary files /dev/null and b/src-tauri/resources/handy.png differ diff --git a/src-tauri/resources/recording.png b/src-tauri/resources/recording.png new file mode 100644 index 0000000..e3ced15 Binary files /dev/null and b/src-tauri/resources/recording.png differ diff --git a/src-tauri/resources/transcribing.png b/src-tauri/resources/transcribing.png new file mode 100644 index 0000000..4456ceb Binary files /dev/null and b/src-tauri/resources/transcribing.png differ diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs index 4c377f8..0c09739 100644 --- a/src-tauri/src/utils.rs +++ b/src-tauri/src/utils.rs @@ -344,24 +344,18 @@ pub fn create_recording_overlay(app_handle: &AppHandle) { if let Ok(monitors) = app_handle.primary_monitor() { if let Some(monitor) = monitors { const OVERLAY_WIDTH: f64 = 172.0; - const OVERLAY_HEIGHT: f64 = 40.0; - - // Platform-specific bottom offset - #[cfg(target_os = "windows")] - const OVERLAY_BOTTOM_OFFSET: f64 = 46.0; - #[cfg(any(target_os = "macos", target_os = "linux"))] - const OVERLAY_BOTTOM_OFFSET: f64 = 12.0; + const OVERLAY_HEIGHT: f64 = 36.0; + const OVERLAY_TOP_OFFSET: f64 = 46.0; let work_area = monitor.work_area(); let scale = monitor.scale_factor(); let work_area_width = work_area.size.width as f64 / scale; - let work_area_height = work_area.size.height as f64 / scale; let work_area_x = work_area.position.x as f64 / scale; let work_area_y = work_area.position.y as f64 / scale; - // Position at bottom center of work area + // Position at top center of work area let x = work_area_x + (work_area_width - OVERLAY_WIDTH) / 2.0; - let y = work_area_y + work_area_height - OVERLAY_BOTTOM_OFFSET; + let y = work_area_y + OVERLAY_TOP_OFFSET; match WebviewWindowBuilder::new( app_handle, diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css index 8d35514..0ea8c90 100644 --- a/src/overlay/RecordingOverlay.css +++ b/src/overlay/RecordingOverlay.css @@ -1,15 +1,15 @@ .recording-overlay { - height: 40px; - width: 160px; + height: 36px; + width: 172px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; - padding-left: 6px; - padding-right: 6px; - background: #DA5893DD; - border-radius: 24px; + padding: 6px; + background: #000000cc; + border-radius: 18px; opacity: 0; transition: opacity 300ms ease-out; + box-sizing: border-box; } .overlay-left { @@ -35,13 +35,14 @@ justify-content: center; gap: 3px; padding-bottom: 0px; - height: 28px; + height: 24px; + overflow: hidden; } .bar { width: 6px; background: #FFE5EE; - max-height: 28px; + max-height: 20px; border-radius: 2px; transition: height 80ms linear; min-height: 4px; @@ -53,7 +54,7 @@ .transcribing-text { color: white; - font-size: 14px; + font-size: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; animation: transcribing-pulse 1.5s infinite ease-in-out; @@ -70,10 +71,10 @@ } .cancel-button { - width: 28px; - height: 28px; + width: 24px; + height: 24px; border-radius: 50%; - background: white; + background: transparent; display: flex; align-items: center; justify-content: center; @@ -85,7 +86,7 @@ } .cancel-button:hover { - background: #FFDCEC; + background: #FAA2CA33; transform: scale(1.05); } diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx index af5037c..39faefa 100644 --- a/src/overlay/RecordingOverlay.tsx +++ b/src/overlay/RecordingOverlay.tsx @@ -51,26 +51,35 @@ const RecordingOverlay: React.FC = () => { setupEventListeners(); }, []); - const getIconPath = () => { - return state === "recording" - ? "/icon/recording.png" - : "/icon/transcribing.png"; + const getIcon = () => { + if (state === "recording") { + return ( + + + + + + ); + } else { + return ( + + + + + + + + + + ); + } }; - const getIconAlt = () => { - return state === "recording" ? "Recording Icon" : "Transcribing Icon"; - }; return (
- {getIconAlt()} + {getIcon()}
@@ -81,7 +90,7 @@ const RecordingOverlay: React.FC = () => { key={i} className="bar" style={{ - height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual + height: `${Math.min(20, 4 + Math.pow(v, 0.7) * 16)}px`, // Cap at 20px max height transition: "height 60ms ease-out", opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility }} @@ -102,15 +111,7 @@ const RecordingOverlay: React.FC = () => { invoke("cancel_operation"); }} > - - - +
)}
diff --git a/src/overlay/index.html b/src/overlay/index.html index 08db593..ef2c670 100644 --- a/src/overlay/index.html +++ b/src/overlay/index.html @@ -9,6 +9,14 @@ margin: 0; padding: 0; background: transparent; + overflow: hidden; + width: 100%; + height: 100%; + } + #root { + width: 100%; + height: 100%; + overflow: hidden; }