diff --git a/src/app/components/shared/room-list/room-list.component.html b/src/app/components/shared/room-list/room-list.component.html index 2c15e6f3f3b58c78f2fb08a9edf34adbfa70e09f..69152025448c1438d23590b8cc7707e5d7073152 100644 --- a/src/app/components/shared/room-list/room-list.component.html +++ b/src/app/components/shared/room-list/room-list.component.html @@ -30,7 +30,8 @@ <th mat-header-cell *matHeaderCellDef style="width: 35%"> {{ 'room-list.panel-session-name' | translate }} </th> - <td mat-cell *matCellDef="let room"> + <td mat-cell class="clickable" *matCellDef="let room" + routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}"> <span matBadge="{{room.commentCount > 0 && deviceType === 'desktop' ? room.commentCount : null}}" matBadgeOverlap="false"> {{ room.name }} </span> @@ -42,7 +43,8 @@ <th mat-header-cell *matHeaderCellDef style="width: 30%"> {{ 'room-list.panel-session-id' | translate }} </th> - <td mat-cell *matCellDef="let room"> + <td mat-cell class="clickable" *matCellDef="let room" + routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}"> {{ room.shortId.slice(0,4) }} {{ room.shortId.slice(4,8) }} </td> </ng-container> @@ -52,7 +54,8 @@ <th mat-header-cell *matHeaderCellDef style="width: 15%"> {{ 'room-list.panel-user-role' | translate }} </th> - <td mat-cell *matCellDef="let room" [ngSwitch]="room.role"> + <td mat-cell class="clickable" *matCellDef="let room" [ngSwitch]="room.role" + routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}"> <mat-icon mat-list-icon *ngSwitchCase="creatorRole" title="{{ 'room-list.creator-role' | translate }}"> record_voice_over @@ -75,18 +78,15 @@ </th> <td mat-cell *matCellDef="let room" style="text-align: end" attr.aria-labelledby="empty"> - <button *ngIf="room.role < 3" mat-flat-button type="button" - name="{{ 'room-list.panel-remove-button' | translate }}" - (click)="removeFromHistory(room)"> - <mat-icon>delete_forever</mat-icon> - </button> - <button mat-flat-button type="button" - attr.aria-labelledby="{{ 'joinButtonLabel' + room.shortId | translate }}" - name="{{ 'room-list.panel-join-button' | translate }}" - routerLink="/{{ roleToString((room.role)) }}/room/{{ room.shortId }}" - (click)="setCurrentRoom(room.shortId)"> - <mat-icon>input</mat-icon> + <button mat-icon-button *ngIf="room.role < 3" [matMenuTriggerFor]="moreActions"> + <mat-icon>more_vert</mat-icon> + </button> + <mat-menu #moreActions="matMenu" xPosition="before"> + <button mat-menu-item (click)="removeFromHistory(room)"> + <mat-icon class="delete">delete_forever</mat-icon> + <span class="delete-text"> {{ 'room-list.panel-remove-button' | translate}}</span> </button> + </mat-menu> <div class="visually-hidden"> <div id="{{ 'joinButtonLabel' + room.shortId | translate }}"> {{ 'room-list.join-message-template' | translate:{ diff --git a/src/app/components/shared/room-list/room-list.component.scss b/src/app/components/shared/room-list/room-list.component.scss index 362fd6de1e07059b726cb507531c636b721ee16b..6db16f2b43a7a09dfa15d0b4003e4f1d736a1491 100644 --- a/src/app/components/shared/room-list/room-list.component.scss +++ b/src/app/components/shared/room-list/room-list.component.scss @@ -1,7 +1,5 @@ button { - background-color: var(--secondary); - color: var(--on-secondary); - transform: scale(0.9); + color: var(--secondary); } .filterWrapper { @@ -15,6 +13,9 @@ button { table, th, tr, td { background-color: var(--primary-variant) !important; color: var(--on-surface)!important; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; } th { @@ -75,3 +76,16 @@ th { .fill-space { height: 20px; } + +.delete { + color: var(--red); + margin-right: 10px; +} + +.delete-text { + color: black; +} + +.clickable { + cursor: pointer; +} diff --git a/src/app/components/shared/room-list/room-list.component.ts b/src/app/components/shared/room-list/room-list.component.ts index a4be5685011a46aa0f29c8779dc77200ac2b1959..94bc98a171a1281955cbd4998e73692618dd9fc1 100644 --- a/src/app/components/shared/room-list/room-list.component.ts +++ b/src/app/components/shared/room-list/room-list.component.ts @@ -63,7 +63,13 @@ export class RoomListComponent implements OnInit, OnDestroy { } getRooms(): void { - this.roomService.getParticipantRooms().subscribe(rooms => this.updateRoomList(rooms)); + this.roomService.getParticipantRooms().subscribe(rooms => { + if (rooms && rooms.length > 0) { + this.updateRoomList(rooms); + } else { + this.displayedColumns.splice(-1, 1); + } + }); this.roomService.getCreatorRooms().subscribe(rooms => this.updateRoomList(rooms)); } diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json index 59405df1d09fdc88623c0ec25cf94b1cd62c4b8c..fd6374cef566127a99e72c0c0e2c02d425ebf6fe 100644 --- a/src/assets/i18n/home/de.json +++ b/src/assets/i18n/home/de.json @@ -206,7 +206,7 @@ "moderator-role": "Moderator", "no-room-history": "Du hast bisher an keiner Sitzung teilgenommen.", "panel-join-button": "", - "panel-remove-button": "Besuchte Sitzung aus der Liste entfernen", + "panel-remove-button": "Sitzung aus der Liste entfernen", "panel-session-id": "Code", "panel-session-name": "Sitzung", "panel-user-role": "Rolle", diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json index a061b815245534bda506c335aab75b84c59d0cc4..2fa0867ce49b27e5f12d24491ec428f119c09203 100644 --- a/src/assets/i18n/home/en.json +++ b/src/assets/i18n/home/en.json @@ -207,7 +207,7 @@ "moderator-role": "Moderator", "no-room-history": "You haven't joined any sessions yet.", "panel-join-button": "", - "panel-remove-button": "Delete the session from your room history.", + "panel-remove-button": "Remove session from list", "panel-session-id": "Key", "panel-session-name": "Session", "panel-user-role": "Role",