danvics/Handy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Clean up the overlays CSS.

Browse source
This commit is contained in:
CJ Pais 2025-08-01 16:03:04 -07:00
parent cb1caf763c
commit a97d861f41
2 changed files with 71 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/overlay/RecordingOverlay.css
View file

@ -1,9 +1,8 @@
.recording-overlay { .recording-overlay {
height: 40px; height: 40px;
width: fit-content; width: 160px;
min-width: 160px; display: grid;
display: flex; grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center; align-items: center;
padding-left: 6px; padding-left: 6px;
padding-right: 6px; padding-right: 6px;
@ -13,6 +12,23 @@
transition: opacity 300ms ease-out; transition: opacity 300ms ease-out;
} }
.overlay-left {
display: flex;
align-items: center;
}
.overlay-middle {
display: flex;
align-items: center;
justify-content: center;
}
.overlay-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.bars-container { .bars-container {
display: flex; display: flex;
align-items: end; align-items: end;

94
src/overlay/RecordingOverlay.tsx
View file

@ -63,49 +63,57 @@ const RecordingOverlay: React.FC = () => {
return ( return (
<div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}> <div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
<img <div className="overlay-left">
width="28" <img
height="28" width="28"
src={getIconPath()} height="28"
alt={getIconAlt()} src={getIconPath()}
style={{}} alt={getIconAlt()}
/> style={{}}
{state === "recording" && ( />
<div className="bars-container"> </div>
{levels.map((v, i) => (
<div <div className="overlay-middle">
key={i} {state === "recording" && (
className="bar" <div className="bars-container">
style={{ {levels.map((v, i) => (
height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual <div
transition: "height 60ms ease-out", key={i}
opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility className="bar"
}} style={{
/> height: `${4 + Math.pow(v, 0.7) * 32}px`, // Slight curve for better visual
))} transition: "height 60ms ease-out",
</div> opacity: Math.max(0.4, v * 1.7), // Minimum opacity for visibility
)} }}
{state === "recording" && ( />
<div ))}
className="cancel-button" </div>
onClick={() => { )}
invoke("cancel_operation"); {state === "transcribing" && (
}} <div className="transcribing-text">Transcribing...</div>
> )}
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"> </div>
<path
d="M9 3L3 9M3 3L9 9" <div className="overlay-right">
stroke="white" {state === "recording" && (
strokeWidth="2" <div
strokeLinecap="round" className="cancel-button"
strokeLinejoin="round" onClick={() => {
/> invoke("cancel_operation");
</svg> }}
</div> >
)} <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
{state === "transcribing" && ( <path
<div className="transcribing-text">Transcribing...</div> d="M9 3L3 9M3 3L9 9"
)} stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
)}
</div>
</div> </div>
); );
}; };