User List UI Component

[snicki13]

This is an UI only PR.

---

Part of #55

[mxsph]

Looks good so far 👍 However, I still have three comments:

• If you set yourself to invisible it leads to an overflow of the container which in turn leads to a scrollbar being displayed.
  

• I would change the icons (possibly the icons from the mockup). Also, I would add tooltips here to describe what the icons do.
  

• I would also make these changes to fix overflow errors when a username is very long:

diff --git a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss
index 9c71898..afb1c22 100644
--- a/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss
+++ b/web-gui/src/app/page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component.scss
@@ -4,7 +4,7 @@
   align-items: center;
   min-width: 132px;
   max-width: 200px;
-  height: 38px;
+  min-height: 38px;
   .user-avatar {
     height: 32px;
     margin-right: 5px;
@@ -20,6 +20,7 @@
     }
     .user-name {
       font-size: 16.4px;
+      word-wrap: break-word;
     }
   }
 }

[snicki13]

I added the tooltips and hid the overflow.
However:

• Your suggested change has no effect
• I will keep the icons as they are right now, because the focus of these icons is to call or join the user. The icons form the mockup shift the focus to the conference in my opinion.

btw.: I know, that the component structure is somewhat crazy right now. Refactoring will definitely happen.

[snicki13]

We can discuss the icons at the next meeting :)