From 53874110b18619eb9f7608d67678e58db2d7bf7d Mon Sep 17 00:00:00 2001 From: Vlad Gerasimov Date: Sun, 3 Aug 2025 11:36:00 +0400 Subject: [PATCH] style(overlay): update recording overlay design and positioning --- index.html | 25 ++++++++------ public/icon/recording.png | Bin 1461 -> 0 bytes public/icon/transcribing.png | Bin 1559 -> 0 bytes public/tauri.svg | 6 ---- public/vite.svg | 1 - src-tauri/resources/handy.png | Bin 0 -> 768 bytes src-tauri/resources/recording.png | Bin 0 -> 678 bytes src-tauri/resources/transcribing.png | Bin 0 -> 756 bytes src-tauri/src/utils.rs | 14 +++----- src/overlay/RecordingOverlay.css | 27 ++++++++------- src/overlay/RecordingOverlay.tsx | 49 ++++++++++++++------------- src/overlay/index.html | 8 +++++ 12 files changed, 65 insertions(+), 65 deletions(-) delete mode 100644 public/icon/recording.png delete mode 100644 public/icon/transcribing.png delete mode 100644 public/tauri.svg delete mode 100644 public/vite.svg create mode 100644 src-tauri/resources/handy.png create mode 100644 src-tauri/resources/recording.png create mode 100644 src-tauri/resources/transcribing.png 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 8839e844fea9cf30b70a0e8be6ef414d3e43e8dd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1461 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 - - - - - 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 0000000000000000000000000000000000000000..7a1e4767703fba0230a31f35204b8447c97f0d2e GIT binary patch literal 768 zcmV+b1ONPqP)u2$2k=BDTMgE7`2YAp?nL#>e^HU^teG`+38v>4GrhbmJ#Pyjgp zjQ{tj5(3N@3lrJ_Ee$lVToKU%6?}Zvk|RJ9kwr|RP{s`n2J4Un8xC+w2a*7a4??>w z2D{o05C*$H9LS434H}e4)=m!GF4j(QO`&x6Sm@?hwx>{p5Tl8c`>YHNj4l^}Q$L26 zN<~6bOVML_3|1zRlgoM(eSQ>*1}|Ji_6opJ^sot6bveQuz=oKP^@zt^>@%%#UHAAH zQz~M6?vp*ofEHEn_ z_Qu299P4$oSP_|!*K7J-$2$hm?^_LY|f7lw8LaMN3{zO?ncK*-FdFTxDowCn)=*LI1^Fh~}%8 zouJImDCnn;ZEUT+dkTI~$L~m(K~Lfrm3EXiLnZUq4lJd;qLQXGhf3a1$_J_~Q$1LZ yddm%6=rwM$)Rqp+v-0>4d!-(oQu{*VySsl7z$jmRZsz6y00000000abW%=J06>4Q-~YdWFc8mRZ|@)=uaGdHARusXpPvx#P*9Mc&ySCw$=B;V z0005SNkl4K6e^GY1JrZm1Z;*zSORdR>7E?S-;()5GYy5AqUOOkJfjKDahXn=e_lfyE_ zYpBGslE+uEC<>B`<(l$xRgFla>Z{!viUYI_j=81e{9Qv+(sNF-akl2wp@dd$kPS`G zu^D8WKUW^Xn@iY*Z!m&XG-s{*M)sFlHok`=n2B1k{4h=lJ0fGRKj|62;O*%ukCzA@ zaWOr?>?hediQswH^ehPlf;4boME2+;lpSzhWuPp5=IVt;g4IC^pPr0 zlAaQS+Ml#OH(^b literal 0 HcmV?d00001 diff --git a/src-tauri/resources/transcribing.png b/src-tauri/resources/transcribing.png new file mode 100644 index 0000000000000000000000000000000000000000..4456ceb54d8fe5c024b82d7589d5f19bfd2e4fe3 GIT binary patch literal 756 zcmVSRy`J&1Bp~?53 z$N!(t`Ju`9p~(54$@`6$@-(p zM$Ytw0000abW%=J01z-BkKg~FAdi2~@4rwGV1OVX?{F|c&v1~SpRbTmpRlj5wX8&H z0006LNklXc&@)UiQNOVwb}Q2~37a zFE9Tyv)PzZF8j8%xUsvpTweE%r+t#w8HX8XmYLSvudl3w@XJgq_VTuMLqx$s=-jT< z&jN4_iOxZ&Tp20}0PKM#%@Jwtsl)>aF}6svr;;OpA;u1AuBgD^Mh^B{>6(20E4Ggd zPSd02vaO3th$`Ng{y&x)au3m#2KZiR=^B50$eJ?%H^0#WU@7AnkmH10Q?VQx3t*fN zaE{->a0FmYwuNNHHr!j8WIg~(^#ZdTXWQu{lgi{`B(-c82$}ktYo`V`2dRW`jUJ$J zxC_&@hBTf=WyD&l#%Zn)JU#7?ObLEUyL*3W4yP;)Fez3b4@RrObQ9lg4HY-L?^pDLX^ zt(l*>VB$9vnXjp3a*qJ}rca3vRVBxtT2b=!d#l-&w?1!R{n(vuWjqj`-{w~zq{`2y_W$?PI`tKX?9ew+$%iN zJW>g(J$DbJd7vU6?=bHWI*(M=-G7jGeZQ^bXqgXGCcAc24a-cc28$; { 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; }