mirror of
https://github.com/moparisthebest/mail
synced 2024-11-15 13:45:08 -05:00
9d68b6475c
* dynamically resize iframe based on content * scroll on complete read-view instead of just iframe-content * open writer when email address is clicked in iframe * convert tabs to spaces in read-directive file * Scale html mails to viewport only from the outside * Delete release branch before each release in aws_release.sh script * Make read-controls in read view always visible
184 lines
9.7 KiB
HTML
184 lines
9.7 KiB
HTML
<div class="read" ng-controller="ReadCtrl"
|
|
ng-class="{
|
|
'read--no-attachments': !state.mailList.selected.attachments || state.mailList.selected.attachments.length === 0,
|
|
'read--stripped': !notStripped
|
|
}">
|
|
|
|
<div class="read__folder-toolbar">
|
|
<div class="toolbar">
|
|
<a class="toolbar__label" href="#" wo-touch="$event.preventDefault(); close()">
|
|
<svg><use xlink:href="#icon-back" /><title>Back</title></svg>
|
|
{{state.nav.currentFolder.wellknown ? state.nav.currentFolder.type : state.nav.currentFolder.name}}
|
|
</a>
|
|
</div>
|
|
</div><!--/read__folder-toolbar-->
|
|
|
|
<div class="read__controls">
|
|
<span class="u-hidden-lg" ng-controller="ActionBarCtrl">
|
|
<button wo-touch="flagMessage(state.mailList.selected, !state.mailList.selected.flagged)" class="btn-icon-light" title="{{state.mailList.selected.flagged ? 'Remove Star' : 'Add Star'}}">
|
|
<svg ng-show="state.mailList.selected.flagged"><use xlink:href="#icon-star_filled" /><title>Starred</title></svg>
|
|
<svg ng-show="!state.mailList.selected.flagged"><use xlink:href="#icon-star" /><title>Not Starred</title></svg>
|
|
</button>
|
|
<button class="btn-icon-light" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center">
|
|
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
|
|
</button>
|
|
<button wo-touch="deleteMessage(state.mailList.selected)" class="btn-icon-light" title="Delete mail">
|
|
<svg><use xlink:href="#icon-delete" /><title>Delete mail</title></svg>
|
|
</button>
|
|
<button class="btn-icon-light" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center">
|
|
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
|
|
</button>
|
|
<button wo-touch="state.writer.write()" class="btn-icon-light" title="New mail">
|
|
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
|
|
</button>
|
|
</span>
|
|
|
|
<span class="u-visible-lg">
|
|
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected)" title="Reply"><svg><use xlink:href="#icon-reply_light" /></svg></button>
|
|
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected, true)" title="Reply All"><svg><use xlink:href="#icon-reply_all_light" /></svg></button>
|
|
<button class="btn-icon-light" wo-touch="state.writer.write(state.mailList.selected, null, true)" title="Forward"><svg><use xlink:href="#icon-forward_light" /></svg></button>
|
|
</span>
|
|
</div><!--/read__controls-->
|
|
|
|
<!-- working spinner -->
|
|
<div class="read__working"
|
|
ng-if="state.mailList.selected && state.mailList.selected.html === undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
|
|
<div>
|
|
<span class="spinner"></span>
|
|
<strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
|
|
</div>
|
|
</div><!--/read__working-->
|
|
|
|
<div class="read__content"
|
|
ng-show="state.mailList.selected && (!state.mailList.selected.encrypted && (state.mailList.selected.body || state.mailList.selected.html)) || (state.mailList.selected.encrypted && state.mailList.selected.decrypted)">
|
|
<header class="read__header">
|
|
<div class="read__controls__dummy"></div>
|
|
|
|
<h2 class="read__subject" wo-touch="notStripped = !notStripped">
|
|
<button ng-hide="notStripped" class="btn-icon-very-light">
|
|
<svg><use xlink:href="#icon-dropdown" /><title>More</title></svg>
|
|
</button>
|
|
<button ng-show="notStripped" class="btn-icon-very-light">
|
|
<svg><use xlink:href="#icon-dropup" /><title>Less</title></svg>
|
|
</button>
|
|
|
|
{{state.mailList.selected.subject ? state.mailList.selected.subject : 'No subject'}}
|
|
</h2>
|
|
<h2 class="read__subject-md" wo-touch="close()">
|
|
<svg><use xlink:href="#icon-back" /><title>Back</title></svg>
|
|
{{state.mailList.selected.subject ? state.mailList.selected.subject : 'No subject'}}
|
|
</h2>
|
|
<time class="read__time">{{state.mailList.selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</time>
|
|
|
|
<div class="read__addresses">
|
|
<div class="mail-addresses">
|
|
<label>From:</label>
|
|
<span ng-repeat="u in state.mailList.selected.from">
|
|
<span class="label" ng-class="{'label--invalid': u.secure === false, 'label--invalid-clickable': u.secure === false}" ng-mouseover="getKeyId(u.address)" wo-touch="invite(u)" wo-tooltip="#fingerprint-info">
|
|
{{u.name || u.address}}
|
|
<svg ng-show="u.secure === false"><use xlink:href="#icon-add_contact" /></svg>
|
|
</span>
|
|
<span class="mail-addresses__stripped"></span>
|
|
</span>
|
|
</div>
|
|
<div class="mail-addresses">
|
|
<label>To:</label>
|
|
<span ng-repeat="u in state.mailList.selected.to">
|
|
<span class="label" ng-class="{'label--invalid': u.secure === false, 'label--invalid-clickable': u.secure === false}" ng-mouseover="getKeyId(u.address)" wo-touch="invite(u)" wo-tooltip="#fingerprint-info">
|
|
{{u.name || u.address}}
|
|
<svg ng-show="u.secure === false"><use xlink:href="#icon-add_contact" /></svg>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="mail-addresses" ng-show="state.mailList.selected.cc && state.mailList.selected.cc.length > 0">
|
|
<label>Cc:</label>
|
|
<span ng-repeat="u in state.mailList.selected.cc">
|
|
<span class="label" ng-class="{'label--invalid': u.secure === false, 'label--invalid-clickable': u.secure === false}" ng-mouseover="getKeyId(u.address)" wo-touch="invite(u)" wo-tooltip="#fingerprint-info">
|
|
{{u.name || u.address}}
|
|
<svg ng-show="u.secure === false"><use xlink:href="#icon-add_contact" /></svg>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div><!--/read__addresses-->
|
|
|
|
<ul class="attachments" ng-show="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
|
|
<li ng-repeat="attachment in state.mailList.selected.attachments"
|
|
wo-touch="download(attachment)">
|
|
<span ng-if="attachment.busy" class="spinner"></span>
|
|
<svg ng-hide="attachment.busy"><use xlink:href="#icon-attachment" /></svg>
|
|
{{attachment.filename}}
|
|
</li>
|
|
</ul>
|
|
</header><!--/read__header-->
|
|
|
|
<p class="read__signature-status"
|
|
ng-show="(state.mailList.selected.body || state.mailList.selected.html) && state.mailList.selected.signed && !state.mailList.selected.signaturesValid">
|
|
Invalid PGP signature. This message could have been tampered with.
|
|
</p>
|
|
|
|
<div class="read__display-images" ng-show="state.mailList.selected.html && showImageButton">
|
|
<button class="btn btn--light" wo-touch="displayImages()">Display images</button>
|
|
</div>
|
|
|
|
<div class="read__body">
|
|
<!-- Render html body in sandboxed iframe -->
|
|
<iframe sandbox="allow-popups allow-scripts" src="tpl/read-sandbox.html" scrolling="no" frame-load></iframe>
|
|
</div>
|
|
</div><!--/read__content-->
|
|
|
|
<div class="read__action-toolbar" ng-controller="ActionBarCtrl">
|
|
<div class="toolbar">
|
|
<ul class="toolbar__actions">
|
|
<li>
|
|
<button wo-touch="flagMessage(state.mailList.selected, !state.mailList.selected.flagged)" class="btn-icon-light" title="{{state.mailList.selected.flagged ? 'Remove Star' : 'Add Star'}}">
|
|
<svg ng-show="state.mailList.selected.flagged"><use xlink:href="#icon-star_filled" /><title>Starred</title></svg>
|
|
<svg ng-show="!state.mailList.selected.flagged"><use xlink:href="#icon-star" /><title>Not Starred</title></svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="btn-icon-light" title="Move mail" wo-dropdown="#read-dropdown-folder" wo-dropdown-position="center up">
|
|
<svg><use xlink:href="#icon-folder" /><title>Move mail</title></svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button wo-touch="deleteMessage(state.mailList.selected)" class="btn-icon-light" title="Delete mail">
|
|
<svg><use xlink:href="#icon-delete" /><title>Delete mail</title></svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="btn-icon-light" title="Reply to" wo-dropdown="#read-reply-selection" wo-dropdown-position="center up">
|
|
<svg><use xlink:href="#icon-reply_light" /><title>Reply to</title></svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button wo-touch="state.writer.write()" class="btn-icon-light" title="New mail">
|
|
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div><!--/read__action-toolbar-->
|
|
|
|
<!-- tooltips -->
|
|
<div id="fingerprint-info" class="tooltip">
|
|
<div class="tooltip__arrow"></div>
|
|
<div class="tooltip__content">{{keyId}}</div>
|
|
</div>
|
|
|
|
<!-- dropdowns -->
|
|
<ul id="read-reply-selection" class="dropdown">
|
|
<li><button wo-touch="state.writer.write(state.mailList.selected)"><svg><use xlink:href="#icon-reply_light" /></svg> Reply</button></li>
|
|
<li><button wo-touch="state.writer.write(state.mailList.selected, true)"><svg><use xlink:href="#icon-reply_all_light" /></svg> Reply All</button></li>
|
|
<li><button wo-touch="state.writer.write(state.mailList.selected, null, true)"><svg><use xlink:href="#icon-forward_light" /></svg> Forward</button></li>
|
|
</ul><!--/dropdown-->
|
|
|
|
<ul id="read-dropdown-folder" class="dropdown" ng-controller="ActionBarCtrl">
|
|
<li ng-repeat="folder in account.folders">
|
|
<button wo-touch="moveMessage(state.mailList.selected, folder)">
|
|
<svg><use xlink:href="#icon-folder" /></svg>
|
|
{{folder.wellknown ? folder.type : folder.name}}
|
|
</button>
|
|
</li>
|
|
</ul><!--/dropdown-->
|
|
|
|
</div><!--/read--> |