Skip to content

Commit 92576fa

Browse files
shadowbasbas080
shadowbas
authored and
bas080
committed
feat(a11y-table): Define a standalone table component
Add table to the app component. Add support for th and td templating Finalize drag and drop Fix height diff between rows Fix reactive model of table fixup! Fix reactive model of table fixup! fixup! Fix reactive model of table fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! fixup! Fix reactive model of table fixup! fixup! fixup! fixup! fixup! fixup! Fix reactive model of table Fix the ctrl shift and meta key issue fixup! Fix the ctrl shift and meta key issue Resize idea and mapOverIndexes craziness fixup! Resize idea and mapOverIndexes craziness fixup! fixup! Resize idea and mapOverIndexes craziness Add flagged column Use BehaviorSubject to update firstRowHeight This removes the error where it complains about a property change after render. Enrich rows also when rows change Use SelectionModel and remove checkbox select logic from table Prevent checkbox toggle after checked is set Fix smaller screen layout Do not deselect for certain actions. Fix bulk action when no item is checked Revert the directive resizer changes Add resizable columns - Setup a sane default for column widths. - Convert absolute columns widths to relative ones. https://codepen.io/Neizan/pen/ExajoJe fixup! Add resizable columns fixup! fixup! Add resizable columns fixup! fixup! fixup! Add resizable columns fixup! fixup! fixup! fixup! Add resizable columns Add some sane column width defaults Enable ordering of columns on th click Reset column width on dblclick fixup! Reset column width on dblclick Show skeleton when scrolling fast fixup! Show skeleton when scrolling fast Fix issue where last selected is set to first item on scroll Figure out how to reset column widths on switching routes fixup! Figure out how to reset column widths on switching routes Recompute column width on window resize Fix issues that caused build to fail Fix freezing caused by too many row height checks fixup! fixup! Figure out how to reset column widths on switching routes Small typing changes in app.component.ts helpers WIP: Fix memory issue and use message display abstraction Fix date and from columns values Make row deselect when selected row clicked Fix the damn scroll issue finally with trackBy Improve resize button style Add answered and folder column and fixed message data fn Disable canvastable dopaint fixup! Disable canvastable dopaint fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Disable canvastable dopaint Fix build issue fixup! Fix build issue fixup! fixup! Fix build issue fixup! fixup! fixup! Fix build issue Scroll selected message into view This solves the issue where the bottom drawer overlaps selected message. Set column px width on user column resize Fix multi action buttons Remove no direction from sort button cycle Prevent mat-icon from increasing tbody height Have messages underneath mail viewer and on scroll down or on window resize Reduce font size of table Get threaded view working similar to production Rename accessible table to virtual scroll table Remove event listener and binding from skeleton version of message row Move common human bytes logic to own module and reuse Remove resize listener from resize button The reason being that the resize button is not aware of the larger window that resizes. fixup! Remove resize listener from resize button fixup! fixup! Remove resize listener from resize button Add horizontalResize event to resize observer directive Use this event instead to reset column widths.
1 parent bbe1cc1 commit 92576fa

31 files changed

+7776
-1643
lines changed

‎src/app/app.component.html‎

Lines changed: 250 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
fixedTopGap="0"
77
id="sideMenu"
88
appResizable>
9-
<mat-nav-list dense>
9+
<mat-nav-list dense>
1010
<app-sidenav-menu (closeMenu)="sidemenu.close()"></app-sidenav-menu>
1111

1212
<mat-menu #settingsMenu="matMenu" xPosition="before">
@@ -189,7 +189,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
189189
<button mat-icon-button (click)="sidemenu.toggle();" matTooltip="Toggle folder pane" id="toggleFolderPaneIcon">
190190
<mat-icon svgIcon="menu"></mat-icon>
191191
</button>
192-
192+
193193
<ng-container *ngIf="!hasChildRouterOutlet">
194194
<div id="offerLocalIndex" *ngIf="offerInitialLocalIndex; else searchBar">
195195
<p *ngIf="!mobileQuery.matches">
@@ -239,12 +239,12 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
239239
</button>
240240
</mat-form-field>
241241
</ng-template>
242-
242+
243243
<button mat-icon-button (click)="updateViewMode('conversations')" *ngIf="!searchtextfieldfocused && viewmode==='singleconversation'"
244244
matTooltip="Back to conversations list">
245245
<mat-icon svgIcon="arrow-left"></mat-icon>
246246
</button>
247-
247+
248248
<!-- Message action menu for regular screens -->
249249
<div *ngIf="!mobileQuery.matches && !hasChildRouterOutlet && showSelectOperations" class="messageListActionButtonsRight" #toolbarListButtonContainer>
250250
<button *ngIf="morelistbuttonindex>0" mat-icon-button matTooltip="Move selected message(s) to folder" (click)="moveToFolder()">
@@ -283,7 +283,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
283283
<button *ngIf="morelistbuttonindex < 7" [matMenuTriggerFor]="moreMailListActionsMenu" mat-icon-button matTooltip="More message actions">
284284
<mat-icon svgIcon="dots-vertical"></mat-icon>
285285
</button>
286-
286+
287287
<!-- Message action overflow items for regular screens -->
288288
<mat-menu #moreMailListActionsMenu="matMenu">
289289
<button *ngIf="morelistbuttonindex<1" mat-menu-item (click)="moveToFolder()">
@@ -327,7 +327,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
327327
</button>
328328
</mat-menu>
329329
</div>
330-
330+
331331
<mat-menu #tableViewOptionsMenu="matMenu">
332332
<mat-list>
333333
<mat-list-item>
@@ -368,7 +368,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
368368
Unread only
369369
</mat-checkbox>
370370
</mat-list-item>
371-
371+
372372
<mat-list-item *ngIf="!mobileQuery.matches">
373373
<mat-checkbox [(ngModel)]="keepMessagePaneOpen"
374374
matLine
@@ -407,9 +407,239 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
407407
</app-multiple-search-fields-input>
408408

409409
<div [hidden]="hasChildRouterOutlet">
410-
<div id="canvasTableContainerArea" [ngStyle]="{'bottom.px': canvasTableBtmOffset}">
411-
<canvastablecontainer [canvastableselectlistener]="this" (sortToggled)="updateSearch(true)"></canvastablecontainer>
412-
</div>
410+
411+
<div
412+
appResizeObserver
413+
(horizontalResize)="onTableResize()"
414+
id="canvasTableContainerArea"
415+
[ngStyle]="{'bottom.px': canvasTableBtmOffset}">
416+
417+
<canvastablecontainer
418+
[canvastableselectlistener]="this"
419+
(sortToggled)="updateSearch(true)">
420+
</canvastablecontainer>
421+
422+
<app-virtual-scroll-table
423+
[scrollToIndex]="scrollToIndex"
424+
*ngIf="rows.length"
425+
class="messages-table"
426+
427+
(renderedRangeChange)="onRenderedRangeChange($event)"
428+
[items]="rows">
429+
430+
<ng-template #thead>
431+
<thead>
432+
<th
433+
class="checkbox-cell">
434+
<mat-checkbox
435+
(change)="onAllCheckboxChange($event)"
436+
[indeterminate]="rowsSelectionModel.hasValue() && !allItemsSelected"
437+
[checked]="rowsSelectionModel.hasValue()"
438+
></mat-checkbox>
439+
</th>
440+
<th
441+
style="width: 10ch;"
442+
[ngStyle]="{ width: widths.date + 'px' }">
443+
<app-sort-button
444+
[data]="2"
445+
[(order)]="orderSelectionModel.selected">
446+
Date
447+
</app-sort-button>
448+
<app-resizable-button [(width)]="widths.date"/>
449+
</th>
450+
<th
451+
style="width: 10%"
452+
[ngStyle]="{ width: widths.from + 'px' }">
453+
<app-sort-button
454+
[data]="0"
455+
[(order)]="orderSelectionModel.selected">
456+
{{
457+
selectedFolder !== messagelistservice.sentFolderName ? "From" : "To"
458+
}}
459+
</app-sort-button>
460+
<app-resizable-button [(width)]="widths.from"/>
461+
</th>
462+
463+
<th
464+
style="width: 50%"
465+
[ngStyle]="{ width: widths.subject + 'px' }">
466+
<app-sort-button
467+
[data]="1"
468+
[(order)]="orderSelectionModel.selected">
469+
Subject
470+
</app-sort-button>
471+
<app-resizable-button [(width)]="widths.subject"/>
472+
</th>
473+
<th
474+
*ngIf="viewmode === 'conversations'"
475+
style="width: 10%"
476+
>
477+
Count
478+
<app-resizable-button [(width)]="widths.count"/>
479+
</th>
480+
<th
481+
style="width: 8ch"
482+
[ngStyle]="{ width: widths.size + 'px' }">
483+
<app-sort-button
484+
[data]="3"
485+
[(order)]="orderSelectionModel.selected">
486+
Size
487+
</app-sort-button>
488+
<app-resizable-button [(width)]="widths.size"/>
489+
</th>
490+
<th
491+
*ngIf="displayFolderColumn"
492+
style="width: 8ch"
493+
[ngStyle]="{ width: widths.folder + 'px'}">
494+
<!-- Sort does not work for folders -->
495+
<app-sort-button
496+
[data]="folder"
497+
[(order)]="orderSelectionModel.selected"
498+
>
499+
Folder
500+
</app-sort-button>
501+
<app-resizable-button [(width)]="widths.folder"/>
502+
</th>
503+
<th><span class="sr-only">Attachments</span></th>
504+
<th><span class="sr-only">Answered</span></th>
505+
<th><span class="sr-only">Flagged</span></th>
506+
</thead>
507+
</ng-template>
508+
509+
<ng-template #tbody let-item let-index="index">
510+
<!-- Show a skeleton if is loading -->
511+
<tbody
512+
*ngIf="!item.loaded"
513+
[ngClass]="{
514+
focussed: lastCheckedIndex === index,
515+
selected: rowSelectionModel.isSelected(item),
516+
checked: rowsSelectionModel.isSelected(item)
517+
}"
518+
>
519+
<tr>
520+
<td class="checkbox-cell">
521+
<mat-checkbox
522+
tabindex="-1">
523+
</mat-checkbox>
524+
</td>
525+
<td>
526+
<span class="skeleton-bone"></span>
527+
</td>
528+
529+
<td>
530+
<span class="skeleton-bone"></span>
531+
</td>
532+
533+
<td class="subject text-primary">
534+
<span class="skeleton-bone"></span>
535+
</td>
536+
<td class="sm-hidden">
537+
<span class="skeleton-bone"></span>
538+
</td>
539+
<td class="sm-hidden"></td>
540+
<td class="sm-hidden"></td>
541+
</tr>
542+
<tr class="sm-hidden" *ngIf="canvastable.showContentTextPreview">
543+
<td><!--offset --></td>
544+
<td colspan="3">
545+
<span class="skeleton-bone"></span>
546+
</td>
547+
<td colspan="3"></td>
548+
</tr>
549+
</tbody>
550+
<tbody
551+
*ngIf="item.loaded"
552+
tabindex="0"
553+
role="button"
554+
(click)="onRowClick($event, item, index)"
555+
(keydown)="onRowKeydown($event, item, index)"
556+
(dragstart)="onMessagesDragStart($event, item)"
557+
draggable="true"
558+
[ngClass]="{
559+
focussed: lastCheckedIndex === item,
560+
selected: rowSelectionModel.isSelected(item),
561+
checked: rowsSelectionModel.isSelected(item)
562+
}"
563+
>
564+
<tr>
565+
<td class="checkbox-cell">
566+
<mat-checkbox
567+
(click)="onCheckboxClick($event, item, index)"
568+
[checked]="rowsSelectionModel.isSelected(item)"
569+
tabindex="-1">
570+
</mat-checkbox>
571+
</td>
572+
<td>
573+
{{item.messageDate}}
574+
</td>
575+
576+
<td
577+
[ngClass]="{
578+
'bold': !item.seen
579+
}"
580+
581+
class="text-primary">
582+
{{item.from}}
583+
</td>
584+
585+
<td class="subject text-primary"
586+
[ngClass]="{
587+
bold: !item.seen
588+
}">
589+
{{item.subject}}
590+
</td>
591+
<td
592+
*ngIf="viewmode === 'conversations'"
593+
>
594+
{{item.count}}
595+
</td>
596+
<td class="sm-hidden">
597+
{{item.size | humanBytes}}
598+
</td>
599+
<td
600+
*ngIf="displayFolderColumn"
601+
>
602+
{{item.folder}}
603+
</td>
604+
<td class="sm-hidden">
605+
<mat-icon
606+
style="transform: rotate(90deg);"
607+
*ngIf="item.attachment"
608+
aria-label="Has attachments"
609+
mat-list-icon
610+
svgIcon="attachment">
611+
</mat-icon>
612+
</td>
613+
<td class="sm-hidden">
614+
<mat-icon
615+
*ngIf="item.answered"
616+
aria-label="answered"
617+
mat-list-icon
618+
svgIcon="reply">
619+
</mat-icon>
620+
</td>
621+
<td class="sm-hidden">
622+
<mat-icon
623+
*ngIf="item.flagged"
624+
aria-label="Flagged"
625+
mat-list-icon
626+
svgIcon="flag">
627+
</mat-icon>
628+
</td>
629+
</tr>
630+
<tr class="sm-hidden" *ngIf="canvastable.showContentTextPreview">
631+
<td><!--offset --></td>
632+
<td colspan="3">
633+
<span class="preview">{{item.plaintext}} </span>
634+
</td>
635+
<td aria-hidden colspan="4"></td>
636+
<td aria-hidden *ngIf="displayFolderColumn"></td>
637+
<td aria-hidden *ngIf="viewmode === 'conversations'"></td>
638+
</tr>
639+
</tbody>
640+
</ng-template>
641+
</app-virtual-scroll-table>
642+
</div>
413643

414644
<single-mail-viewer #singlemailviewer *ngIf="!mailViewerOnRightSide"
415645
[adjustableHeight]="true"
@@ -449,7 +679,7 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
449679
<mat-icon svgIcon="alert-octagon-outline"></mat-icon>
450680
</button>
451681
</div>
452-
682+
453683
<!-- Message action floating submenu for mobile screens -->
454684
<div class="contextToolButtonsMobile" *ngIf="mobileQuery.matches && !hasChildRouterOutlet && showSelectOperations && showSelectMarkOpMenu">
455685
<button mat-fab matTooltip="Mark unread" matTooltipPosition="left" (click)="setReadStatus(false)">
@@ -469,11 +699,20 @@ <h3 class="noMessageSelectedNotification">No Message Selected</h3>
469699
</button>
470700
</div>
471701
<router-outlet (activate)="childRouteActivated(true)" (deactivate)="childRouteActivated(false)"></router-outlet>
702+
472703
</mat-sidenav-container>
473704

705+
<app-follows-mouse *ngIf="dragEvent">
706+
<mat-card>
707+
<mat-icon>mail</mat-icon> Moving {{rowsSelectionModel.selected.length}}
708+
</mat-card>
709+
</app-follows-mouse>
710+
474711
<!-- This will cause an error in dev mode with the async pipe, should not be present however in production -->
475712
<div style="position: absolute; bottom: 2px; right: 2px; z-index: 10000;"
476713
*ngIf="progressService.httpRequestInProgress | async"
477714
>
478715
<mat-spinner diameter="20" ></mat-spinner>
479716
</div>
717+
718+

0 commit comments

Comments
 (0)