list styling for people

src/app/organizations/manage/collections.component.html

@@ -17,7 +17,7 @@
     <table class="table table-hover table-list" *ngIf="searchedCollections.length">
         <tbody>
             <tr *ngFor="let c of searchedCollections">
-                <td class="normal-lh">
+                <td>
                     <a href="#" appStopClick (click)="edit(c)">{{c.name}}</a>
                 </td>
                 <td class="table-list-options">

src/app/organizations/manage/groups.component.html

@@ -17,7 +17,7 @@
     <table class="table table-hover table-list" *ngIf="searchedGroups.length">
         <tbody>
             <tr *ngFor="let g of searchedGroups">
-                <td class="normal-lh">
+                <td>
                     <a href="#" appStopClick (click)="edit(g)">{{g.name}}</a>
                 </td>
                 <td class="table-list-options">

src/app/organizations/manage/people.component.html

@@ -1,7 +1,20 @@
 <div class="page-header d-flex">
     <h1>{{'people' | i18n}}</h1>
     <div class="ml-auto d-flex">
-        <div>
+        <div class="btn-group btn-group-toggle btn-group-sm" data-toggle="buttons">
+            <label class="btn btn-outline-secondary active">
+                <input type="radio" name="options" id="option1" autocomplete="off" checked> {{'all' | i18n}}
+            </label>
+            <label class="btn btn-outline-secondary">
+                <input type="radio" name="options" id="option3" autocomplete="off"> {{'invited' | i18n}}
+                <span class="badge badge-pill badge-info">4</span>
+            </label>
+            <label class="btn btn-outline-secondary">
+                <input type="radio" name="options" id="option2" autocomplete="off"> {{'accepted' | i18n}}
+                <span class="badge badge-pill badge-warning">4</span>
+            </label>
+        </div>
+        <div class="ml-3">
             <label class="sr-only" for="search">{{'search' | i18n}}</label>
             <input type="search" class="form-control form-control-sm" id="search" placeholder="{{'search' | i18n}}" [(ngModel)]="searchText">
         </div>
@@ -20,10 +33,17 @@
                 <td width="30">
                     <app-avatar [data]="u.name || u.email" width="25" height="25" [circle]="true" [fontSize]="14"></app-avatar>
                 </td>
-                <td class="normal-lh">
+                <td>
                     <a href="#" appStopClick (click)="edit(u)">{{u.email}}</a>
+                    <span class="badge badge-secondary" *ngIf="u.status === organizationUserStatusType.Invited">{{'invited' | i18n}}</span>
+                    <span class="badge badge-warning" *ngIf="u.status === organizationUserStatusType.Accepted">{{'accepted' | i18n}}</span>
                     <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                 </td>
+                <td>
+                    <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
+                    <span *ngIf="u.type === organizationUserType.Admin">{{'admin' | i18n}}</span>
+                    <span *ngIf="u.type === organizationUserType.User">{{'user' | i18n}}</span>
+                </td>
                 <td class="table-list-options">
                     <div class="dropdown" appListDropdown>
                         <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/app/organizations/manage/people.component.ts

@@ -9,6 +9,9 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
 
 import { OrganizationUserUserDetailsResponse } from 'jslib/models/response/organizationUserResponse';
 
+import { OrganizationUserStatusType } from 'jslib/enums/organizationUserStatusType';
+import { OrganizationUserType } from 'jslib/enums/organizationUserType';
+
 import { Utils } from 'jslib/misc/utils';
 
 @Component({
@@ -20,6 +23,8 @@ export class PeopleComponent implements OnInit {
     organizationId: string;
     users: OrganizationUserUserDetailsResponse[];
     searchText: string;
+    organizationUserType = OrganizationUserType;
+    organizationUserStatusType = OrganizationUserStatusType;
 
     constructor(private apiService: ApiService, private route: ActivatedRoute,
         private i18nService: I18nService) { }

src/app/settings/domain-rules.component.html

@@ -33,7 +33,7 @@
     <table class="table table-hover table-list" *ngIf="!loading && global.length > 0">
         <tbody>
             <tr *ngFor="let d of global">
-                <td class="normal-lh" [ngClass]="{'table-list-strike': d.excluded}">{{d.domains}}</td>
+                <td [ngClass]="{'table-list-strike': d.excluded}">{{d.domains}}</td>
                 <td class="table-list-options">
                     <div class="dropdown" appListDropdown>
                         <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

src/app/vault/ciphers.component.html

@@ -8,7 +8,7 @@
                 <td (click)="checkCipher(c)" class="table-list-icon">
                     <app-vault-icon [cipher]="c"></app-vault-icon>
                 </td>
-                <td (click)="checkCipher(c)">
+                <td (click)="checkCipher(c)" class="reduced-lh">
                     <a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
                     <i class="fa fa-share-alt" appStopProp *ngIf="!organization && c.organizationId" title="{{'shared' | i18n}}"></i>
                     <i class="fa fa-paperclip" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>

src/locales/en/messages.json

@@ -1711,5 +1711,26 @@
   },
   "search": {
     "message": "Search"
+  },
+  "invited": {
+    "message": "Invited"
+  },
+  "accepted": {
+    "message": "Accepted"
+  },
+  "confirmed": {
+    "message": "Confirmed"
+  },
+  "owner": {
+    "message": "Owner"
+  },
+  "admin": {
+    "message": "Admin"
+  },
+  "user": {
+    "message": "User"
+  },
+  "all": {
+    "message": "All"
   }
 }

src/scss/styles.scss

@@ -211,7 +211,7 @@ input, select, textarea {
     @include border-radius($modal-content-border-radius);
 }
 
-label:not(.form-check-label) {
+label:not(.form-check-label):not(.btn) {
     font-weight: bold;
 }
 
@@ -275,7 +275,7 @@ label:not(.form-check-label) {
     td {
         vertical-align: middle;
         
-        &:not(.normal-lh) {
+        &.reduced-lh {
             line-height: 1;
         }