From 00a96c2bd424bdf305e7087bd1f97e4ec2adb367 Mon Sep 17 00:00:00 2001
From: Fabian Trampusch <fabian.trampusch@freenet.de>
Date: Mon, 25 Mar 2019 14:05:05 +0100
Subject: [PATCH] feat: add roster list header

---
 .../ngx-chat/src/lib/components/chat.component.ts    |  1 +
 .../roster-list/roster-list.component.html           | 12 ++++++++----
 .../roster-list/roster-list.component.less           |  5 +++++
 .../ngx-chat/src/lib/core/translations.ts            |  1 +
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts b/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
index c15f93b9..aa81a965 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
@@ -72,6 +72,7 @@ export class ChatComponent implements OnInit, OnChanges {
     rosterState = 'hidden';
 
     private defaultTranslations: Translations = {
+        'chat': 'Chat',
         'contacts': 'Contacts',
         'contactRequestIn': 'Incoming contact requests',
         'contactRequestOut': 'Outgoing contact requests',
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.html b/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.html
index 3a1de909..f0b56dbf 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.html
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.html
@@ -5,8 +5,12 @@
 
 <div class="roster-list" [@rosterVisibility]="rosterState" [attr.data-ngx-chat-state]="chatService.state$ | async">
 
+    <div class="roster-header">
+        {{ chatService.translations.chat }}
+    </div>
+
     <ng-container *ngIf="(contacts | async).length > 0">
-        <div class="roster-header">{{chatService.translations.contacts}}</div>
+        <div class="roster-group-header">{{chatService.translations.contacts}}</div>
 
         <div class="contact-list-wrapper">
 
@@ -19,7 +23,7 @@
     </ng-container>
 
     <ng-container *ngIf="(contactRequestsReceived$ | async).length > 0">
-        <div class="roster-header">{{chatService.translations.contactRequestIn}}</div>
+        <div class="roster-group-header">{{chatService.translations.contactRequestIn}}</div>
         <div class="contact-list-wrapper">
 
             <ngx-chat-roster-contact *ngFor="let contact of (contactRequestsReceived$ | async)"
@@ -31,7 +35,7 @@
     </ng-container>
 
     <ng-container *ngIf="(contactRequestsSent$ | async).length > 0">
-        <div class="roster-header">{{chatService.translations.contactRequestOut}}</div>
+        <div class="roster-group-header">{{chatService.translations.contactRequestOut}}</div>
         <div class="contact-list-wrapper">
 
             <ngx-chat-roster-contact *ngFor="let contact of (contactRequestsSent$ | async)"
@@ -43,7 +47,7 @@
     </ng-container>
 
     <ng-container *ngIf="(contactsUnaffiliated$ | async).length > 0">
-        <div class="roster-header">{{chatService.translations.contactsUnaffiliated}}</div>
+        <div class="roster-group-header">{{chatService.translations.contactsUnaffiliated}}</div>
         <div class="contact-list-wrapper">
 
             <ng-container *ngFor="let contact of (contactsUnaffiliated$ | async)">
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.less b/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.less
index 75bb126e..5146838c 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.less
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/roster-list/roster-list.component.less
@@ -26,6 +26,11 @@
   flex-direction: column;
 
   .roster-header {
+    text-align: center;
+    margin-bottom: 1em;
+  }
+
+  .roster-group-header {
     border-bottom: 1px solid @general-border-color;
     padding-bottom: 0.5em;
   }
diff --git a/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts b/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
index c8b80ebc..68e2e7d8 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
@@ -1,4 +1,5 @@
 export interface Translations {
+    chat: string;
     contacts: string;
     contactRequestIn: string;
     contactRequestOut: string;