jbc.lol
unoffical wafrn mirror
wafrn.net
atproto
social-network
activitypub
1<mat-expansion-panel>
2 <mat-expansion-panel-header>
3 <mat-panel-title>{{ data[settingKey].translationKey | translate }}</mat-panel-title>
4 </mat-expansion-panel-header>
5 <p class="mb-0 setting-description">{{ data[settingKey].translationDescriptionKey! | translate }}</p>
6 <div cdkDropList class="flex flex-column drag-drop-list" (cdkDropListDropped)="dropItem($event)">
7 @for (item of itemList; track item) {
8 <div
9 class="flex align-items-center justify-content-between gap-4 drag-drop-list-item"
10 [class.list-item-disabled]="!item.enabled"
11 cdkDrag
12 >
13 <div class="flex gap-2">
14 <div cdkDragHandle class="drag-handle">
15 <div class="drag-touch-target"></div>
16 <fa-icon class="drag-drop-item-drag-indicator" [icon]="barsIcon" [fixedWidth]="true" size="lg"></fa-icon>
17 </div>
18 <div class="flex gap-1">
19 @let entry = keyToEntry(item.value);
20 @if (entry) {
21 @if (entry.icon) {
22 <fa-icon class="drag-drop-item-icon" [icon]="entry.icon" [fixedWidth]="true"></fa-icon>
23 }
24 @if (entry.translationKey) {
25 {{ entry.translationKey | translate }}
26 }
27 } @else {
28 {{ item.value }}
29 }
30 </div>
31 </div>
32 <mat-checkbox (click)="toggleItem($index)" [checked]="item.enabled"></mat-checkbox>
33 </div>
34 }
35 </div>
36 <div class="py-2">
37 <button mat-flat-button class="setting-button" (click)="resetList()">
38 <fa-icon [icon]="defaultIcon" [fixedWidth]="true" size="sm"></fa-icon>
39 {{ 'common.default' | translate }}
40 </button>
41 </div>
42</mat-expansion-panel>