feat: add roster list header

pazznetwork · Mar 25, 2019 · 00a96c2 · 00a96c2
1 parent b9af244
commit 00a96c2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,5 @@
 export interface Translations {
+    chat: string;
     contacts: string;
     contactRequestIn: string;
     contactRequestOut: string;