style(channel-list-item): improve layout and styling for channel list item component

This commit is contained in:
4gray committed 2024-12-25 21:04:13 +01:00
1 parent b9b5ac7df9
commit 1da10c8adf
1 file changed
+35 -36
@@ -13,43 +13,42 @@ import { TranslateModule } from '@ngx-translate/core';
selector: 'app-channel-list-item',
styleUrls: ['./channel-list-item.component.scss'],
template: `<mat-list-item
cdkDrag
[cdkDragDisabled]="!isDraggable"
cdkDragPreviewContainer="parent"
[class.active]="selected"
(click)="clicked.emit()"
data-test-id="channel-item"
cdkDrag
[cdkDragDisabled]="!isDraggable"
cdkDragPreviewContainer="parent"
[class.active]="selected"
(click)="clicked.emit()"
data-test-id="channel-item"
>
<mat-icon
*ngIf="isDraggable"
matListItemIcon
cdkDragHandle
class="drag-icon"
>drag_indicator</mat-icon
>
<mat-icon
*ngIf="isDraggable"
matListItemIcon
cdkDragHandle
class="drag-icon"
>drag_indicator</mat-icon
>
<img
matListItemAvatar
class="channel-logo"
*ngIf="logo"
[src]="logo"
width="48"
onerror="this.style.display='none'"
/>
<p matListItemTitle class="channel-name">
{{ name }}
</p>
<button
*ngIf="showFavoriteButton"
mat-icon-button
matListItemMeta
color="primary"
[matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
(click)="favoriteToggled.emit($event)"
>
<mat-icon color="accent">star</mat-icon>
</button>
</mat-list-item>
<!-- <mat-divider /> -->`,
<img
matListItemMeta
class="channel-logo"
*ngIf="logo"
[src]="logo"
width="42"
onerror="this.style.display='none'"
/>
<p matListItemTitle class="channel-name">
{{ name }}
</p>
<button
*ngIf="showFavoriteButton"
mat-icon-button
matListItemMeta
color="primary"
[matTooltip]="'CHANNELS.REMOVE_FAVORITE' | translate"
(click)="favoriteToggled.emit($event)"
>
<mat-icon color="accent">star</mat-icon>
</button>
</mat-list-item>`,
imports: [
CommonModule,
DragDropModule,