fix(messagelist): implement inline previews for native messagelist

runbox · Apr 20, 2021 · 63ef200 · 63ef200
1 parent 933f80e
commit 63ef200
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/src/app/messagelist/nativemessagelist.component.html b/src/app/messagelist/nativemessagelist.component.html
@@ -25,6 +25,12 @@
                 <span class="note" *ngIf="row.unread"><em>UNREAD</em></span>
             </div>
         </div>
+        <div class="contentPreview" *ngIf="inlinePreviews">
+            <span *ngIf="row.contentPreview; else noPreview"> {{ row.contentPreview }} </span>
+            <ng-template #noPreview>
+                <span class="noPreview"> Preview not available </span>
+            </ng-template>
+        </div>
     </button>
     <button mat-stroked-button class="pagingButton" *ngIf="remaining > 0" (click)="scrollDown()">
         Show next {{ rowsDisplayed }} messages

diff --git a/src/app/messagelist/nativemessagelist.component.scss b/src/app/messagelist/nativemessagelist.component.scss
@@ -23,6 +23,16 @@
     }
 }
 
+.contentPreview {
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .noPreview {
+        font-style: italic;
+        color: #bbb;
+    }
+}
+
 .indicatorsRow {
     display: flex;
     justify-content: flex-end;

diff --git a/src/app/messagelist/nativemessagelist.component.ts b/src/app/messagelist/nativemessagelist.component.ts
@@ -17,7 +17,7 @@
 // along with Runbox 7. If not, see <https://www.gnu.org/licenses/>.
 // ---------- END RUNBOX LICENSE ----------
 
-import { Component, EventEmitter, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges } from '@angular/core';
 
 import { MessageListComponent, RowSelection } from './messagelistcomponent';
 import { MessageDisplay } from '../common/messagedisplay';
@@ -32,14 +32,15 @@ interface Message {
     subject: string;
     unread: boolean;
     count: number;
+    contentPreview?: string;
 }
 
 @Component({
     selector: 'app-nativemessagelist',
     templateUrl: 'nativemessagelist.component.html',
     styleUrls: ['nativemessagelist.component.scss'],
 })
-export class NativeMessageListComponent implements MessageListComponent {
+export class NativeMessageListComponent implements MessageListComponent, OnChanges {
     @Input() inlinePreviews = false;
 
     sortColumn = 2;
@@ -62,6 +63,10 @@ export class NativeMessageListComponent implements MessageListComponent {
     columnNames: string[];
     columnsByName: Map<string, number>;
 
+    ngOnChanges(): void {
+        this.detectChanges();
+    }
+
     detectChanges(): void {
         if (!this.rows) {
             return;
@@ -76,11 +81,15 @@ export class NativeMessageListComponent implements MessageListComponent {
         let retry = false;
 
         for (let i = this.offset; i < this.upto; i++) {
+            let contentPreview: string;
             const row = this.columns.map(c => {
                 let value = c.getValue(i);
                 if (c.getFormattedValue) {
                     value = c.getFormattedValue(value);
                 }
+                if (c.getContentPreviewText && this.inlinePreviews) {
+                    contentPreview = c.getContentPreviewText(i);
+                }
                 return value;
             });
             if (row[this.columnsByName['Count']] === 'RETRY') {
@@ -93,6 +102,7 @@ export class NativeMessageListComponent implements MessageListComponent {
                 date:    row[this.columnsByName['Date']],
                 count:   row[this.columnsByName['Count']],
                 unread:  this.rows.getRowSeen(i),
+                contentPreview,
             });
         }
         this.remaining = this.rowCount - this.upto;