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 {
height: 40px;
width: fit-content;
min-width: 160px;
display: flex;
gap: 12px;
width: 160px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding-left: 6px;
padding-right: 6px;
@ -13,6 +12,23 @@
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 {
display: flex;
align-items: end;

94
src/overlay/RecordingOverlay.tsx
View file

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