added status badges to Send

src/app/send/send.component.html

@@ -43,14 +43,39 @@
                 [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">
+                                <span appStopClick class="text-badge" *ngIf="s.disabled">
+                                    {{'disabled' | i18n}}
+                                </span>
+                                <ng-container >
+                                    <i class="fa fa-key" appStopProp title="{{'password' | i18n}}" aria-hidden="true"></i>
+                                    <span class="sr-only">{{'password' | i18n}}</span>
+                                </ng-container>
+                                <ng-container >
+                                    <i class="fa fa-ban" appStopProp title="{{'maxAccessCountReached' | i18n}}"
+                                        aria-hidden="true"></i>
+                                    <span class="sr-only">{{'maxAccessCountReached' | i18n}}</span>
+                                </ng-container>
+                                <ng-container >
+                                    <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 >
+                                    <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,43 @@
         }
     }
 }
+
+.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');
+                }
+
+                .text-badge {
+                    padding-left: 2px;
+                    margin-right: 3px;
+                    font-size: $font-size-small;
+                    border-radius: 3px;
+                    @include themify($themes) {
+                        background-color: themed('mutedColorBackground');
+                    }
+                }
+            }
+        }
+
+        .item-details {
+            font-size: $font-size-small;
+            @include themify($themes) {
+                color: themed('mutedColor');
+            }
+        }
+    }
+}

src/scss/variables.scss

@@ -66,6 +66,7 @@ $themes: (
         headingButtonHoverColor: $gray-light,
         labelColor: $gray-light,
         mutedColor: $text-muted,
+        mutedColorBackground: lighten($text-muted, 35%),
         totpStrokeColor: $brand-primary,
         boxRowButtonColor: $brand-primary,
         boxRowButtonHoverColor: darken($brand-primary, 10%),
@@ -117,6 +118,7 @@ $themes: (
         headingButtonHoverColor: #ffffff,
         labelColor: #a3a3a3,
         mutedColor: #a3a3a3,
+        mutedColorBackground: darken(#a3a3a3, 35%),
         totpStrokeColor: #cacaca,
         boxRowButtonColor: #cacaca,
         boxRowButtonHoverColor: #ffffff,
@@ -168,6 +170,7 @@ $themes: (
         headingButtonHoverColor: $nord6,
         labelColor: $nord4,
         mutedColor: $nord4,
+        mutedColorBackground: darken($nord4, 35%),
         totpStrokeColor: $nord4,
         boxRowButtonColor: $nord4,
         boxRowButtonHoverColor: $nord6,