Broadcast UI + softcoding

src/app/chat-page/chat-page.component.html

@@ -20,7 +20,24 @@
 
         <div *ngIf="selectedSegment === 'messages'">
             <ul class="chat-list">
-                <li *ngFor="let chat of chatList; let i = index" (click)="openChat(i)">
+                <li *ngFor="let chat of chatList; let i = index" (click)="openPersonalChat(i)">
+                    <img src="{{ chat.user.imgUrl }}">
+                    <div class="content">
+                        <label> {{ chat.user.name }} </label>
+                        <p>
+                            {{ chat.conversation[chat.conversation.length - 1].message }}
+                        </p>
+                    </div>
+                    <div class="time-stamp">
+                        {{ getFormattedDate() }}
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div *ngIf="selectedSegment === 'broadcasts'">
+            <ul class="chat-list">
+                <li *ngFor="let chat of broadCastList; let i = index" (click)="openBroadcastChat(i)">
                     <img src="{{ chat.user.imgUrl }}">
                     <div class="content">
                         <label> {{ chat.user.name }} </label>

src/app/chat-page/chat-page.component.scss

@@ -76,7 +76,7 @@
     background-color: white;
     overflow: auto;
     height: calc(100vh - 140px);
-    padding: 20px 5%;
+    padding: 10px 5%;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
 }
@@ -101,7 +101,7 @@
         }
 
         .content {
-            max-width: calc(100% - 100px);
+            max-width: calc(100% - 140px);
             flex-grow: 1;
         }
 

src/app/chat-page/chat-page.component.ts

@@ -93,6 +93,21 @@ export class ChatPageComponent implements OnInit {
         }]
     }];
 
+    broadCastList = [{
+        user: {
+            id: 0,
+            name: '10th Standard Channel',
+            imgUrl: 'https://lh3.googleusercontent.com/9vppS4or0GIIqIdxU7vrMFbHMOOhO3FgFWPN1WYUH4xXd9GwFvZzeCGYrhezckELzAM'
+        },
+        conversation: [{
+            message: 'Hi Students, Hope your all are doing well. You will have special classes tomorrow by DK sir @4.30PM. \n Followed by Quiz. ATB!',
+            user: 0
+        }, {
+            message: 'Hi Students, I have uploaded a question in the forum. Please take a look!',
+            user: 0
+        }]
+    }]
+
 	constructor(
         private location: Location
     ) { }
@@ -104,10 +119,14 @@ export class ChatPageComponent implements OnInit {
         this.location.back();
     }
 
-    openChat(index: number) {
+    openPersonalChat(index: number) {
         this.selectedChat = this.chatList[index];
     }
 
+    openBroadcastChat(index: number) {
+        this.selectedChat = this.broadCastList[index];
+    }
+
     getChatEvent(e: boolean) {
         if (e) {
             this.selectedChat = null;

src/app/chat-page/chat-window/chat-window.component.scss

@@ -45,7 +45,7 @@ ul {
     padding: 0 5%;
 
     li {
-        width: 45%;
+        width: 55%;
     }
 
     .message {