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

Improve gradient-colored name parsing in ChannelListComponent and add scroll support in the channel list UI.

Browse Source
This commit is contained in:
akastijn 2026-08-01 22:20:39 +02:00
parent 73ea715b01
commit 6a52d27c09
4 changed files with 31 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -93,3 +93,4 @@ liquibase*.properties
node node
.env .env
virtual_view/*

34
frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html
View File

@ -1,26 +1,28 @@
<div class="channel-list"> <div class="channel-list">
<p>Channels</p> <p>Channels</p>
@for (group of groupedChannels(); track group.type) { <div class="scroll">
<p class="channel-group-title" (click)="toggleGroup(group.type)"> @for (group of groupedChannels(); track group.type) {
{{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }} <p class="channel-group-title" (click)="toggleGroup(group.type)">
</p> {{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }}
@if (!collapsedGroups().has(group.type)) { </p>
@for (channel of group.channels; track channel.name) { @if (!collapsedGroups().has(group.type)) {
<div class="channel indented" @for (channel of group.channels; track channel.name) {
[class.selected]="selectedChannel()?.name === channel.name && selectedChannel()?.type === channel.type" <div class="channel indented"
(click)="selectedChannelChange.emit(channel)"> [class.selected]="selectedChannel()?.name === channel.name && selectedChannel()?.type === channel.type"
(click)="selectedChannelChange.emit(channel)">
<span class="channel-name"> <span class="channel-name">
@for (segment of parseColoredName(getDisplayName(channel)); track $index) { @for (segment of parseColoredName(getDisplayName(channel)); track $index) {
<span [style.color]="segment.color">{{ segment.text }}</span> <span [style.color]="segment.color">{{ segment.text }}</span>
} }
</span> </span>
@if (channel.unreadMessages > 0) { @if (channel.unreadMessages > 0) {
<div class="notification"> <div class="notification">
<svg-circle></svg-circle> <svg-circle></svg-circle>
</div> </div>
} }
</div> </div>
}
} }
} }
} </div>
</div> </div>

4
frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss
View File

@ -45,3 +45,7 @@
user-select: none; user-select: none;
} }
} }
.scroll {
overflow: scroll;
}

9
frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts
View File

@ -69,7 +69,7 @@ export class ChannelListComponent {
} }
protected parseColoredName(name: string): ColoredNameSegment[] { protected parseColoredName(name: string): ColoredNameSegment[] {
const markerRegex = /\{#([0-9a-fA-F]{6})([<>]?)}/g; const markerRegex = /\{#([0-9a-fA-F]{6})(<>|[<>]?)}/g;
const segments: ColoredNameSegment[] = []; const segments: ColoredNameSegment[] = [];
let currentColor: string | undefined; let currentColor: string | undefined;
let gradientStartColor: string | undefined; let gradientStartColor: string | undefined;
@ -94,6 +94,13 @@ export class ChannelListComponent {
currentColor = markerColor; currentColor = markerColor;
gradientStartColor = undefined; gradientStartColor = undefined;
gradientStartSegmentIndex = undefined; gradientStartSegmentIndex = undefined;
} else if (markerType === '<>') {
if (gradientStartColor !== undefined && gradientStartSegmentIndex !== undefined) {
this.applyGradient(segments, gradientStartSegmentIndex, gradientStartColor, markerColor);
}
currentColor = markerColor;
gradientStartColor = markerColor;
gradientStartSegmentIndex = segments.length;
} else { } else {
currentColor = markerColor; currentColor = markerColor;
gradientStartColor = undefined; gradientStartColor = undefined;