Merge pull request #735 from bitwarden/SendBadges

Send badges

src/app/send/send.component.html

@@ -43,14 +43,40 @@
                 [infiniteScrollContainer]="'#items .content'" [fromRoot]="true" (scrolled)="loadMore()">
                 <a *ngFor="let s of filteredSends" appStopClick (click)="selectSend(s.id)"
                     href="#" title="{{'viewItem' | i18n}}" (contextmenu)="viewSendMenu(s)"
-                    [ngClass]="{'active': s.id === sendId}">
-                    <div class="icon" aria-hidden="true">
+                    [ngClass]="{'active': s.id === sendId}" class="flex-list-item">
+                    <div class="item-icon" aria-hidden="true">
                         <i class="fa fa-fw fa-lg" [ngClass]="s.type == 0 ? 'fa-file-o' : 'fa-file-text-o'"></i>
                     </div>
-                    <span class="text">
-                        {{s.name}}
-                    </span>
-                    <span class="detail">{{s.deletionDate | date}}</span>
+                    <div class="item-content">
+                        <div class="item-title">
+                            {{s.name}}
+                            <span class="title-badges">
+                                <ng-container *ngIf="s.disabled">
+                                    <i class="fa fa-warning" appStopProp title="{{'disabled' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'disabled' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="s.password">
+                                    <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'password' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="s.maxAccessCountReached">
+                                    <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
+                                        aria-hidden="true"></i>
+                                    <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="s.expired">
+                                    <i class="fa fa-clock-o" appStopProp title="{{'expired' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'expired' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="s.pendingDelete">
+                                    <i class="fa fa-trash" appStopProp title="{{'pendingDeletion' | i18n}}"
+                                        aria-hidden="true"></i>
+                                    <span class="sr-only">{{'pendingDeletion' | i18n}}</span>
+                                </ng-container>
+                            </span>
+                        </div>
+                        <span class="item-details">{{s.deletionDate | date}}</span>
+                    </div>
                 </a>
             </div>
             <div class="no-items" *ngIf="!filteredSends.length">

src/locales/en/messages.json

@@ -1638,5 +1638,17 @@
   },
   "copyLink": {
     "message": "Copy link"
+  },
+  "disabled": {
+    "message": "Disabled"
+  },
+  "maxAccessCountReached": {
+    "message": "Max access count reached"
+  },
+  "expired": {
+    "message": "Expired"
+  },
+  "pendingDeletion": {
+    "message": "Pending deletion"
   }
 }

src/scss/list.scss

@@ -101,3 +101,33 @@
         }
     }
 }
+
+.list > a.flex-list-item {
+    display: flex;
+    align-items: center;
+
+    .item-icon {
+        margin-left: -5px;
+        margin-right: 4px;
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+
+    .item-content {
+        .item-title {
+            .title-badges {
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
+            }
+        }
+
+        .item-details {
+            font-size: $font-size-small;
+            @include themify($themes) {
+                color: themed('mutedColor');
+            }
+        }
+    }
+}