From 806e7eb97815a1e43e092178a3df45ed97bf05a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Tue, 22 Jan 2019 16:13:42 +0100
Subject: [PATCH] Replace text-buttons with icons
---
.../room-creator-page.component.html | 32 +++++++++----------
.../room-creator-page.component.scss | 6 ++++
2 files changed, 22 insertions(+), 16 deletions(-)
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 ecaa61752..f4d4a3e2f 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
@@ -2,7 +2,7 @@
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room">
- <mat-card-header>
+ <mat-card-header fxLayoutAlign="center">
<mat-card-title>
<h3 class="subheading-2">{{ room.name }}</h3>
</mat-card-title>
@@ -13,7 +13,7 @@
</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
- <mat-card-content>
+ <mat-card-content fxLayoutAlign="center">
<p>
{{ room.description }}
</p>
@@ -21,39 +21,39 @@
<mat-divider></mat-divider>
<mat-grid-list cols="3" rowHeight="2:1">
<mat-grid-tile colspan="1" rowspan="1">
- <button mat-button color="primary" background-color="accent"
+ <button mat-icon-button color="primary" background-color="accent"
routerLink="/creator/room/{{ room.shortId }}/create-content">
- {{ 'room-page.create-content' | translate }}
+ <mat-icon>note_add</mat-icon>
</button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-button color="primary"
+ <button mat-icon-button color="primary"
routerLink="/creator/room/{{ room.shortId }}/comments">
- {{ 'room-page.comments' | translate }}
+ <mat-icon>question_answer</mat-icon>
</button>
</mat-grid-tile>
<mat-grid-tile>
- <button mat-button color="primary"
- routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
- {{ 'room-page.live-feedback' | translate }}
+ <button mat-icon-button *ngIf="!modify" (click)="showEditDialog()" color="accent">
+ <mat-icon>create</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="3" rowHeight="2:1">
- <mat-grid-tile>
- <button mat-button color="primary"
+ <mat-grid-tile>
+ <button mat-icon-button color="primary"
routerLink="/creator/room/{{ room.shortId }}/statistics">
- {{ 'room-page.answer-statistics' | translate }}
+ <mat-icon>insert_chart</mat-icon>
</button>
- </mat-grid-tile>
+ </mat-grid-tile>
<mat-grid-tile>
- <button mat-button *ngIf="!modify" (click)="showEditDialog()" color="primary">
- {{ 'room-page.edit-room' | translate }}
+ <button mat-icon-button color="primary"
+ routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
+ <mat-icon>thumbs_up_down</mat-icon>
</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button color="warn" (click)="openDeletionRoomDialog()">
- {{ 'room-page.delete-room' | translate }}
+ <mat-icon>delete_forever</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
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 cee43eb10..18e598c54 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
@@ -11,3 +11,9 @@ button {
margin: 5px;
width: 30%;
}
+
+.mat-icon{
+ height:100% !important;
+ width:100% !important;
+ font-size:48px !important;
+}
--
GitLab