diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html index 766188c9a16266acf296a9696e5d05bdb37191e8..1a6cebbac061cfbe257a0cdd90a97fa87a0496b0 100644 --- a/src/app/components/creator/room-creator-page/room-creator-page.component.html +++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html @@ -13,6 +13,9 @@ <h3> {{ 'room-page.session-id' | translate}}: {{ room.shortId.slice(0, 4) }} {{ room.shortId.slice(4, 8) }} </h3> + <button id="copy" mat-icon-button (click)="copyShortId()"> + <mat-icon class="copy" matTooltip="{{ 'room-page.copy-session-id' | translate}}">cloud_download</mat-icon> + </button> </mat-card-subtitle> </mat-card-header> <span class="fill-remaining-space"></span> diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss index 18d0e65a3293d3e262caecf1ba713ffc09bfea29..53229158df2d9b02ad0e4fc64c4a3883ec7719c8 100644 --- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss +++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss @@ -36,9 +36,9 @@ mat-card-content > :first-child { } .corner-icon { - font-size: 50px; - height: 50px; - width: 50px; + font-size: 40px; + height: 40px; + width: 40px; line-height: 100%; } @@ -79,7 +79,7 @@ h2 { h3 { font-size: larger; color: var(--on-surface)!important; - margin: 3% 0 3% 0; + margin: 5% 5% 0 0; } h4 { @@ -98,7 +98,7 @@ mat-card-title { } mat-card-subtitle { - height: 20%; + height: 30%; } mat-grid-tile { @@ -111,3 +111,14 @@ mat-expansion-panel { min-width: 200px; hyphens: auto; } + +#copy { + width: 24px; + height: 24px; +} + +.copy { + font-size: 24px; + color: var(--secondary); + line-height: 100%; +} diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.ts b/src/app/components/creator/room-creator-page/room-creator-page.component.ts index 8a3a86881d3b7e121459714a7a67069998f309a0..48d50edc276da94ecac89509986666ef440218ca 100644 --- a/src/app/components/creator/room-creator-page/room-creator-page.component.ts +++ b/src/app/components/creator/room-creator-page/room-creator-page.component.ts @@ -129,5 +129,22 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni }); dialogRef.componentInstance.roomId = this.room.id; } + + copyShortId(): void { + const selBox = document.createElement('textarea'); + selBox.style.position = 'fixed'; + selBox.style.left = '0'; + selBox.style.top = '0'; + selBox.style.opacity = '0'; + selBox.value = this.room.shortId; + document.body.appendChild(selBox); + selBox.focus(); + selBox.select(); + document.execCommand('copy'); + document.body.removeChild(selBox); + this.translateService.get('room-page.session-id-copied').subscribe(msg => { + this.notification.show(msg, '', { duration: 2000 }); + }); + } } diff --git a/src/assets/i18n/creator/de.json b/src/assets/i18n/creator/de.json index 394f416cb9fa93c4555a29135030e82aecbef59a..8ccf0cbd96c54f5b0ad8d6b2f68893f1b01baf4d 100644 --- a/src/assets/i18n/creator/de.json +++ b/src/assets/i18n/creator/de.json @@ -38,7 +38,9 @@ "comments-deleted": "Alle Fragen wurden gelöscht.", "export-comments": "Fragen exportieren", "room-not-found": "Session wurde nicht gefunden :(", - "session-id": "Session-ID" + "session-id": "ID", + "copy-session-id": "Session-ID kopieren", + "session-id-copied": "Session-ID wurde in die Zwischenablage kopiert." }, "content": { "content": "Frage", diff --git a/src/assets/i18n/creator/en.json b/src/assets/i18n/creator/en.json index 57e8ef0acdc8726ddd503a4d93f333566036169b..1a8a539f0fc217a7df3c7e3229bfe35fb11a3dae 100644 --- a/src/assets/i18n/creator/en.json +++ b/src/assets/i18n/creator/en.json @@ -38,7 +38,9 @@ "comments-deleted": "All questions have been deleted.", "export-comments": "Export questions", "room-not-found": "Session not found :(", - "session-id": "Session ID" + "session-id": "ID", + "copy-session-id": "Copy Session-ID", + "session-id-copied": "Session-ID was copied to the clipboard." }, "content": { "content": "Content",