myxelium/Toju
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 2 Releases 20 Wiki Activity

Rework design part 1

Browse Source
This commit is contained in:
SocksOnHead
2026-04-01 19:31:00 +02:00
parent fed270d28d
commit 65b9419869
15 changed files with 324 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.html
View File

@@ -1,12 +1,11 @@
@if (showFloatingControls()) {
<!-- Centered relative to rooms-side-panel (w-80 = 320px, so right-40 = 160px from right edge = center) -->
<div class="fixed bottom-4 right-40 translate-x-1/2 z-50 bg-card border border-border rounded-xl shadow-lg">
<div class="p-2 flex items-center gap-2">
<div class="fixed bottom-4 right-4 z-50 border border-border bg-card shadow-lg">
<div class="flex items-center gap-2 p-2">
<!-- Back to server button -->
<button
(click)="navigateToServer()"
type="button"
class="flex items-center gap-1.5 px-2 py-1 bg-primary/10 hover:bg-primary/20 text-primary rounded-lg transition-colors"
class="flex items-center gap-1.5 rounded-md bg-secondary px-2 py-1 text-foreground transition-colors hover:bg-secondary/80"
title="Back to {{ voiceSession()?.serverName }}"
>
<ng-icon
@@ -20,7 +19,7 @@
alt=""
/>
} @else {
<div class="w-5 h-5 rounded bg-primary/20 flex items-center justify-center text-[10px] font-semibold">
<div class="flex h-5 w-5 items-center justify-center rounded-sm bg-muted text-[10px] font-semibold">
{{ voiceSession()?.serverName?.charAt(0)?.toUpperCase() || '?' }}
</div>
}
@@ -33,7 +32,7 @@
</div>
<!-- Divider -->
<div class="w-px h-6 bg-border"></div>
<div class="h-6 w-px bg-border"></div>
<!-- Voice controls -->
<div class="flex items-center gap-1">
@@ -81,7 +80,7 @@
<button
(click)="disconnect()"
type="button"
class="w-7 h-7 inline-flex items-center justify-center bg-destructive text-destructive-foreground rounded-lg hover:bg-destructive/90 transition-colors"
class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
title="Disconnect"
>
<ng-icon

30
toju-app/src/app/domains/voice-session/feature/floating-voice-controls/floating-voice-controls.component.ts
View File

@@ -219,57 +219,57 @@ export class FloatingVoiceControlsComponent implements OnInit {
/** Return the CSS classes for the compact control button based on active state. */
getCompactButtonClass(isActive: boolean): string {
const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
const base = 'inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors';
if (isActive) {
return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
}
return base + ' bg-secondary text-foreground hover:bg-secondary/80';
return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
}
/** Return the CSS classes for the compact screen-share button. */
getCompactScreenShareClass(): string {
const base = 'w-7 h-7 inline-flex items-center justify-center rounded-lg transition-colors';
const base = 'inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors';
if (this.isScreenSharing()) {
return base + ' bg-primary/20 text-primary hover:bg-primary/30';
return base + ' border-primary/20 bg-primary/10 text-primary hover:bg-primary/15';
}
return base + ' bg-secondary text-foreground hover:bg-secondary/80';
return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
}
/** Return the CSS classes for the mute toggle button. */
getMuteButtonClass(): string {
const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';
if (this.isMuted()) {
return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
}
return base + ' bg-secondary text-foreground hover:bg-secondary/80';
return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
}
/** Return the CSS classes for the deafen toggle button. */
getDeafenButtonClass(): string {
const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';
if (this.isDeafened()) {
return base + ' bg-destructive/20 text-destructive hover:bg-destructive/30';
return base + ' border-destructive/30 bg-destructive/10 text-destructive hover:bg-destructive/15';
}
return base + ' bg-secondary text-foreground hover:bg-secondary/80';
return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
}
/** Return the CSS classes for the screen-share toggle button. */
getScreenShareButtonClass(): string {
const base = 'w-10 h-10 inline-flex items-center justify-center rounded-full transition-colors';
const base = 'inline-flex h-10 w-10 items-center justify-center rounded-md border transition-colors';
if (this.isScreenSharing()) {
return base + ' bg-primary/20 text-primary hover:bg-primary/30';
return base + ' border-primary/20 bg-primary/10 text-primary hover:bg-primary/15';
}
return base + ' bg-secondary text-foreground hover:bg-secondary/80';
return base + ' border-border bg-card text-foreground hover:bg-secondary/70';
}
private syncScreenShareSettings(): void {