Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile breakpoint detection to chat for responsive behavior and fullscreen prompt control

Browse Source
This commit is contained in:
akastijn 2026-07-19 18:57:19 +02:00
parent 7138487912
commit 660fd4eb9c
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/pages/altitude/chat/chat.component.ts
View File

@ -7,6 +7,7 @@ import {FullSizeComponent} from '@shared-components/full-size/full-size.componen
import {ChatBoxComponent} from '@pages/altitude/chat/components/chat/chat-box.component'; import {ChatBoxComponent} from '@pages/altitude/chat/components/chat/chat-box.component';
import {ServerListComponent} from '@pages/altitude/chat/components/server-list/server-list.component'; import {ServerListComponent} from '@pages/altitude/chat/components/server-list/server-list.component';
import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component'; import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
@Component({ @Component({
selector: 'app-chat', selector: 'app-chat',
@ -27,14 +28,21 @@ export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
protected readonly messages = this.chatService.messages; protected readonly messages = this.chatService.messages;
protected readonly servers = this.chatService.servers; protected readonly servers = this.chatService.servers;
protected readonly selectedServer = this.chatService.selectedServer; protected readonly selectedServer = this.chatService.selectedServer;
protected readonly showFullscreenPrompt = signal(true); protected readonly showFullscreenPrompt = signal(false);
protected readonly isMobile = signal(false);
constructor(private interaction: MiniMessageInteractionService) { constructor(private interaction: MiniMessageInteractionService, private breakpointObserver: BreakpointObserver) {
interaction.clicks$.subscribe(({action, value}) => { interaction.clicks$.subscribe(({action, value}) => {
if (action === 'run_command') { if (action === 'run_command') {
alert(value); alert(value);
} }
}); });
this.breakpointObserver
.observe([Breakpoints.Handset])
.subscribe(result => {
this.isMobile.set(result.matches);
this.showFullscreenPrompt.set(this.isMobile());
});
} }
public onSelectedServerChange(server: string) { public onSelectedServerChange(server: string) {