From 4bd1d51afc8b1e21fa8bda4f75485df117566763 Mon Sep 17 00:00:00 2001
From: Lukas Kimpel <lukas.kimpel@mni.thm.de>
Date: Thu, 8 Mar 2018 23:39:56 +0100
Subject: [PATCH] Refactor participant room component (view) Add some more demo
room data Use Material's Card for room view Add some more buttons Add some
simple stylings
---
.../participant-room.component.html | 53 +++++++++++--------
.../participant-room.component.scss | 7 +++
.../participant-room.component.ts | 10 +++-
3 files changed, 48 insertions(+), 22 deletions(-)
diff --git a/src/app/participant-room/participant-room.component.html b/src/app/participant-room/participant-room.component.html
index 3eb6bc5a5..a77376131 100644
--- a/src/app/participant-room/participant-room.component.html
+++ b/src/app/participant-room/participant-room.component.html
@@ -1,23 +1,34 @@
-<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <div fxLayoutGap="20px">
- <mat-list fxLayout="column" fxLayoutGap="10px" fxLayoutAlign="center">
- <mat-list-item>Room: {{roomId}}</mat-list-item>
- <mat-list-item>
- <button mat-fab color="primary" routerLink="/room/{{roomId}}/create-comment">
- <mat-icon>question_answer</mat-icon>
- </button>
- <button mat-fab color="primary">
- <mat-icon>feedback</mat-icon>
- </button>
- </mat-list-item>
- <mat-list-item>
- <button mat-raised-button color="primary">Contents</button>
- </mat-list-item>
- <mat-list-item>
- <button mat-raised-button color="primary">Comments</button>
- </mat-list-item>
- </mat-list>
- </div>
- </div>
+ <mat-card>
+ <mat-card-header>
+ <mat-card-title><h3 class="subheading-2">{{ roomName }}</h3></mat-card-title>
+ <mat-card-subtitle>{{ roomId }}</mat-card-subtitle>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <mat-card-content>
+ <p>
+ {{ roomDescription }}
+ </p>
+ </mat-card-content>
+ <mat-divider></mat-divider>
+ <mat-card-actions>
+ <button mat-icon-button color="primary" matTooltip="Ask something" routerLink="/room/{{roomId}}/create-comment">
+ <mat-icon>question_answer</mat-icon>
+ </button>
+ <button mat-icon-button color="primary" matTooltip="Give feedback">
+ <mat-icon>feedback</mat-icon>
+ </button>
+ <button mat-button color="primary" matTooltip="Join question round">
+ Questions
+ </button>
+ <button mat-button color="primary" matTooltip="See room comments">
+ Comments
+ </button>
+ <button mat-button color="primary" matTooltip="Start personal question round">
+ Learn
+ </button>
+ </mat-card-actions>
+ </mat-card>
+ </div>
</div>
diff --git a/src/app/participant-room/participant-room.component.scss b/src/app/participant-room/participant-room.component.scss
index e69de29bb..edaeaf744 100644
--- a/src/app/participant-room/participant-room.component.scss
+++ b/src/app/participant-room/participant-room.component.scss
@@ -0,0 +1,7 @@
+mat-card {
+ max-width: 800px;
+}
+
+mat-card-content>:first-child {
+ margin-top: 16px;
+}
diff --git a/src/app/participant-room/participant-room.component.ts b/src/app/participant-room/participant-room.component.ts
index 6e5404f51..1409939fd 100644
--- a/src/app/participant-room/participant-room.component.ts
+++ b/src/app/participant-room/participant-room.component.ts
@@ -6,7 +6,15 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./participant-room.component.scss']
})
export class ParticipantRoomComponent implements OnInit {
- roomId = '1';
+
+ roomId = '12 34 56 78';
+ roomName = 'Test Room';
+ roomDescription = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ' +
+ 'magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea ' +
+ 'takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod ' +
+ 'tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea ' +
+ 'rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
constructor() {
}
--
GitLab