mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-04 15:41:37 +00:00
410 lines
20 KiB
HTML
410 lines
20 KiB
HTML
<div class="flex flex-col flex-auto overflow-y-auto lg:overflow-hidden bg-card dark:bg-default">
|
|
|
|
<ng-container *ngIf="mail; else selectMailToRead">
|
|
|
|
<!-- Header -->
|
|
<div class="z-10 relative flex flex-col flex-0 w-full border-b">
|
|
|
|
<!-- Toolbar -->
|
|
<div class="flex items-center min-h-16 px-4 md:px-6 border-b bg-gray-50 dark:bg-transparent">
|
|
|
|
<!-- Back button -->
|
|
<a
|
|
class="lg:hidden md:-ml-2"
|
|
mat-icon-button
|
|
[routerLink]="['./']">
|
|
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
|
|
</a>
|
|
|
|
<!-- Toggle labels button & menu -->
|
|
<button
|
|
class="ml-auto"
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="toggleLabelMenu">
|
|
<mat-icon [svgIcon]="'heroicons_outline:tag'"></mat-icon>
|
|
</button>
|
|
<mat-menu #toggleLabelMenu="matMenu">
|
|
<ng-container *ngFor="let label of labels; trackBy: trackByFn">
|
|
<div mat-menu-item>
|
|
<mat-checkbox
|
|
(change)="toggleLabel(label)"
|
|
[color]="'primary'"
|
|
[checked]="mail.labels.includes(label.id)"
|
|
[disableRipple]="true">
|
|
{{label.title}}
|
|
</mat-checkbox>
|
|
</div>
|
|
</ng-container>
|
|
</mat-menu>
|
|
|
|
<!-- Toggle important button -->
|
|
<button
|
|
class="ml-2"
|
|
mat-icon-button
|
|
(click)="toggleImportant()">
|
|
<mat-icon
|
|
[ngClass]="{'text-red-600 dark:text-red-500': mail.important}"
|
|
[svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
|
|
</button>
|
|
|
|
<!-- Toggle starred button -->
|
|
<button
|
|
class="ml-2"
|
|
mat-icon-button
|
|
(click)="toggleStar()">
|
|
<mat-icon
|
|
[ngClass]="{'text-orange-500 dark:text-red-400': mail.starred}"
|
|
[svgIcon]="'heroicons_outline:star'"></mat-icon>
|
|
</button>
|
|
|
|
<!-- Other actions button & menu -->
|
|
<button
|
|
class="ml-2"
|
|
mat-icon-button
|
|
[matMenuTriggerFor]="mailMenu">
|
|
<mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
|
|
</button>
|
|
<mat-menu #mailMenu="matMenu">
|
|
<!-- Mark as read / unread -->
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="mail.unread"
|
|
(click)="toggleUnread(false)">
|
|
<mat-icon [svgIcon]="'heroicons_outline:mail-open'"></mat-icon>
|
|
<span>Mark as read</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="!mail.unread"
|
|
(click)="toggleUnread(true)">
|
|
<mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon>
|
|
<span>Mark as unread</span>
|
|
</button>
|
|
<!-- Marks as spam / not span-->
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getCurrentFolder() !== 'spam' && getCurrentFolder() !== 'drafts'"
|
|
(click)="moveToFolder('spam')">
|
|
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
|
|
<span>Spam</span>
|
|
</button>
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getCurrentFolder() === 'spam'"
|
|
(click)="moveToFolder('inbox')">
|
|
<mat-icon [svgIcon]="'heroicons_outline:exclamation'"></mat-icon>
|
|
<span>Not spam</span>
|
|
</button>
|
|
<!-- Delete -->
|
|
<button
|
|
mat-menu-item
|
|
*ngIf="getCurrentFolder() !== 'trash'"
|
|
(click)="moveToFolder('trash')">
|
|
<mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
|
|
<span>Delete</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
|
|
<!-- Subject and Labels -->
|
|
<div class="flex flex-wrap items-center py-5 px-6">
|
|
<!-- Subject -->
|
|
<div class="flex flex-auto my-1 mr-4 text-2xl">{{mail.subject}}</div>
|
|
<!-- Labels -->
|
|
<ng-container *ngIf="mail.labels && mail.labels.length > 0">
|
|
<div class="flex flex-wrap items-center justify-start -mx-1">
|
|
<ng-container *ngFor="let label of (mail.labels | fuseFindByKey:'id':labels)">
|
|
<div
|
|
class="m-1 py-0.5 px-2.5 rounded-full text-sm font-medium whitespace-nowrap"
|
|
[ngClass]="labelColors[label.color].combined">
|
|
{{label.title}}
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Threads -->
|
|
<div
|
|
class="flex flex-col flex-auto flex-shrink-0 lg:flex-shrink p-3 lg:overflow-y-auto bg-gray-100 dark:bg-transparent"
|
|
fuseScrollReset>
|
|
|
|
<!-- Thread -->
|
|
<div class="flex flex-col flex-0 w-full shadow rounded-2xl overflow-hidden bg-card dark:bg-black dark:bg-opacity-10">
|
|
|
|
<div class="flex flex-col py-8 px-6">
|
|
|
|
<!-- Header -->
|
|
<div class="flex items-center w-full">
|
|
|
|
<!-- Sender avatar -->
|
|
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
|
|
<img
|
|
class="w-full h-full"
|
|
[src]="mail.from.avatar"
|
|
alt="User avatar">
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="ml-4 min-w-0">
|
|
|
|
<!-- From -->
|
|
<div class="font-semibold truncate">{{mail.from.contact.split('<')[0].trim()}}</div>
|
|
|
|
<!-- To -->
|
|
<div class="flex items-center mt-0.5 leading-5">
|
|
<div>to</div>
|
|
<div class="ml-1 font-semibold">me</div>
|
|
<ng-container *ngIf="(mail.ccCount + mail.bccCount) > 0">
|
|
<div>
|
|
<span class="ml-1">and</span>
|
|
<span class="ml-1 font-semibold">{{mail.ccCount + mail.bccCount}}</span>
|
|
<span
|
|
class="ml-1 font-semibold"
|
|
[ngPlural]="(mail.ccCount + mail.bccCount)">
|
|
<ng-template ngPluralCase="=1">other</ng-template>
|
|
<ng-template ngPluralCase="other">others</ng-template>
|
|
</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!-- Info details panel button -->
|
|
<button
|
|
class="w-5 h-5 min-h-5 ml-1"
|
|
mat-icon-button
|
|
(click)="openInfoDetailsPanel()"
|
|
#infoDetailsPanelOrigin>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
|
|
</button>
|
|
|
|
<!-- Info details panel -->
|
|
<ng-template #infoDetailsPanel>
|
|
<div class="flex flex-col py-4 px-6 w-full max-w-160 space-y-1.5 border text-md rounded shadow-md overflow-auto bg-card">
|
|
<!-- From -->
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">from:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.from.contact}}</div>
|
|
</div>
|
|
<!-- To -->
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">to:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.to}}</div>
|
|
</div>
|
|
<!-- Cc -->
|
|
<ng-container *ngIf="mail.cc">
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">cc:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.cc.join(',\n')}}</div>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Bbc -->
|
|
<ng-container *ngIf="mail.bcc">
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">bcc:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.bcc.join(',\n')}}</div>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Date -->
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">date:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.date | date:'EEEE, MMMM d, y - hh:mm a'}}</div>
|
|
</div>
|
|
<!-- Subject -->
|
|
<div class="flex">
|
|
<div class="min-w-14 font-medium text-right">subject:</div>
|
|
<div class="pl-2 whitespace-pre-wrap">{{mail.subject}}</div>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div
|
|
class="flex mt-8 whitespace-pre-line leading-relaxed"
|
|
[innerHTML]="mail.content">
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<ng-container *ngIf="mail.attachments && mail.attachments.length > 0">
|
|
<div class="flex flex-col w-full">
|
|
<!-- Title -->
|
|
<div class="flex items-center mt-12">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
|
<div class="ml-2 font-semibold">{{mail.attachments.length}} Attachments</div>
|
|
</div>
|
|
|
|
<!-- Files -->
|
|
<div class="flex flex-wrap -m-3 mt-3">
|
|
<ng-container *ngFor="let attachment of mail.attachments">
|
|
<div class="flex items-center m-3">
|
|
<!-- Preview -->
|
|
<img
|
|
class="w-10 h-10 rounded-md overflow-hidden"
|
|
*ngIf="attachment.type.startsWith('image/')"
|
|
[src]="'assets/images/apps/mailbox/' + attachment.preview">
|
|
<div
|
|
class="flex items-center justify-center w-10 h-10 rounded-md overflow-hidden bg-primary-100"
|
|
*ngIf="attachment.type.startsWith('application/')">
|
|
<div class="flex items-center justify-center text-sm font-semibold text-primary-500-800">
|
|
{{attachment.type.split('/')[1].trim().toUpperCase()}}
|
|
</div>
|
|
</div>
|
|
<!-- File info -->
|
|
<div class="ml-3">
|
|
<div
|
|
class="text-md font-medium truncate"
|
|
[title]="attachment.name">
|
|
{{attachment.name}}
|
|
</div>
|
|
<div
|
|
class="text-sm font-medium truncate text-secondary"
|
|
[title]="attachment.size">
|
|
{{attachment.size / 1000 | number:'1.0-2'}} KB
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex w-full p-6 border-t bg-gray-50 dark:bg-transparent">
|
|
|
|
<!-- Buttons -->
|
|
<ng-container *ngIf="!replyFormActive">
|
|
<div class="flex flex-wrap w-full -m-2">
|
|
<!-- Reply -->
|
|
<button
|
|
class="m-2"
|
|
mat-stroked-button
|
|
[color]="'primary'"
|
|
(click)="reply()">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
|
|
<span class="ml-2">Reply</span>
|
|
</button>
|
|
<!-- Reply all -->
|
|
<button
|
|
class="m-2"
|
|
mat-stroked-button
|
|
[color]="'primary'"
|
|
(click)="replyAll()">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:reply'"></mat-icon>
|
|
<span class="ml-2">Reply All</span>
|
|
</button>
|
|
<!-- Forward -->
|
|
<button
|
|
class="m-2"
|
|
mat-stroked-button
|
|
[color]="'primary'"
|
|
(click)="forward()">
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[color]="'primary'"
|
|
[svgIcon]="'heroicons_solid:chevron-double-right'"></mat-icon>
|
|
<span class="ml-2">Forward</span>
|
|
</button>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!-- Reply form -->
|
|
<ng-container *ngIf="replyFormActive">
|
|
<div
|
|
class="flex flex-col w-full"
|
|
#replyForm>
|
|
|
|
<mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
|
|
<textarea
|
|
class="textarea"
|
|
matInput
|
|
[placeholder]="'Type your reply here'"
|
|
[rows]="4"></textarea>
|
|
</mat-form-field>
|
|
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6">
|
|
<div class="-ml-2">
|
|
<!-- Attach file -->
|
|
<button mat-icon-button>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:paper-clip'"></mat-icon>
|
|
</button>
|
|
<!-- Insert link -->
|
|
<button mat-icon-button>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:link'"></mat-icon>
|
|
</button>
|
|
<!-- Insert emoji -->
|
|
<button mat-icon-button>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
|
|
</button>
|
|
<!-- Insert image -->
|
|
<button mat-icon-button>
|
|
<mat-icon
|
|
class="icon-size-5"
|
|
[svgIcon]="'heroicons_solid:photograph'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-4 sm:mt-0">
|
|
<!-- Discard -->
|
|
<button
|
|
class="order-last sm:order-first ml-3 sm:ml-0"
|
|
mat-button
|
|
(click)="discard()">
|
|
Discard
|
|
</button>
|
|
<!-- Send -->
|
|
<button
|
|
class="sm:ml-3"
|
|
mat-flat-button
|
|
[color]="'primary'"
|
|
(click)="send()">
|
|
Send
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-container>
|
|
|
|
<!-- Select mail to read template -->
|
|
<ng-template #selectMailToRead>
|
|
|
|
<div class="flex flex-col flex-auto items-center justify-center bg-gray-100 dark:bg-transparent">
|
|
<mat-icon
|
|
class="icon-size-24"
|
|
[svgIcon]="'iconsmind:mailbox_empty'"></mat-icon>
|
|
<div class="mt-4 text-2xl font-semibold tracking-tight text-secondary">Select a mail to read</div>
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</div>
|