mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-28 18:41:34 +08:00
Improved inline attachments visibility to prevent questions
This commit is contained in:
parent
aa357af4c5
commit
02eb5ad4e8
4 changed files with 17 additions and 19 deletions
|
@ -20,7 +20,6 @@ export class AttachmentModel extends AbstractModel {
|
|||
this.fileName = '';
|
||||
this.fileNameExt = '';
|
||||
this.fileType = FileType.Unknown;
|
||||
this.friendlySize = '';
|
||||
this.isThumbnail = false;
|
||||
this.cid = '';
|
||||
this.contentLocation = '';
|
||||
|
@ -29,6 +28,7 @@ export class AttachmentModel extends AbstractModel {
|
|||
this.uid = '';
|
||||
this.url = '';
|
||||
this.mimeIndex = '';
|
||||
this.estimatedSize = 0;
|
||||
this.framed = false;
|
||||
|
||||
this.addObservables({
|
||||
|
@ -45,14 +45,16 @@ export class AttachmentModel extends AbstractModel {
|
|||
static reviveFromJson(json) {
|
||||
const attachment = super.reviveFromJson(json);
|
||||
if (attachment) {
|
||||
attachment.friendlySize = FileInfo.friendlySize(json.EstimatedSize);
|
||||
|
||||
attachment.fileNameExt = FileInfo.getExtension(attachment.fileName);
|
||||
attachment.fileType = FileInfo.getType(attachment.fileNameExt, attachment.mimeType);
|
||||
}
|
||||
return attachment;
|
||||
}
|
||||
|
||||
friendlySize() {
|
||||
return FileInfo.friendlySize(this.estimatedSize) + (this.isLinked() ? ' 🔗' : '');
|
||||
}
|
||||
|
||||
contentId() {
|
||||
return this.cid.replace(/^<+|>+$/g, '');
|
||||
}
|
||||
|
@ -85,13 +87,6 @@ export class AttachmentModel extends AbstractModel {
|
|||
return FileType.Audio === this.fileType && 'wav' === this.fileNameExt;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean}
|
||||
*/
|
||||
hasThumbnail() {
|
||||
return this.isThumbnail;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean}
|
||||
*/
|
||||
|
@ -142,7 +137,10 @@ export class AttachmentModel extends AbstractModel {
|
|||
* @returns {string}
|
||||
*/
|
||||
linkThumbnailPreviewStyle() {
|
||||
return this.hasThumbnail() ? 'background:url(' + serverRequestRaw('ViewThumbnail', this.download) + ')' : '';
|
||||
// return (this.isThumbnail && !this.isLinked())
|
||||
return this.isThumbnail
|
||||
? 'background:url(' + serverRequestRaw('ViewThumbnail', this.download) + ')'
|
||||
: '';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -6,9 +6,9 @@
|
|||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
line-height: 24px;
|
||||
line-height: 20px;
|
||||
margin: 5px;
|
||||
min-height: 50px;
|
||||
min-height: 48px;
|
||||
max-width: 200px;
|
||||
min-width: 60px;
|
||||
overflow: hidden;
|
||||
|
@ -33,8 +33,8 @@
|
|||
|
||||
.attachmentIconParent {
|
||||
position: absolute;
|
||||
height: 56px;
|
||||
width: 60px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -65,7 +65,7 @@
|
|||
.attachmentNameParent {
|
||||
border-left: 1px solid #ddd;
|
||||
cursor: pointer;
|
||||
margin-left: 60px;
|
||||
margin-left: 48px;
|
||||
min-width: 90px;
|
||||
padding: 4px 4px 3px 6px;
|
||||
position: relative;
|
||||
|
|
|
@ -212,7 +212,7 @@ trait Raw
|
|||
{
|
||||
if ($bThumbnail)
|
||||
{
|
||||
$oImage = static::loadImage($rResource, $bDetectImageOrientation, 60);
|
||||
$oImage = static::loadImage($rResource, $bDetectImageOrientation, 48);
|
||||
\header('Content-Disposition: inline; '.
|
||||
\trim(\MailSo\Base\Utils::EncodeHeaderUtf8AttributeValue('filename', $sFileName.'_thumb60x60.png')));
|
||||
$oImage->show('png');
|
||||
|
|
|
@ -231,7 +231,7 @@
|
|||
<i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
|
||||
<div class="showPreview">
|
||||
<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
|
||||
<i class="iconMain" data-bind="css: iconClass()"></i>
|
||||
<i class="iconMain" data-bind="visible: !isThumbnail, css: iconClass()"></i>
|
||||
<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
|
||||
<div class="iconPreview fontastic">👁</div>
|
||||
</a>
|
||||
|
@ -243,7 +243,7 @@
|
|||
</div>
|
||||
<div class="attachmentNameParent">
|
||||
<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="attachmentName" data-bind="text: fileName"></div>
|
||||
<div class="attachmentSize" data-bind="text: friendlySize"></div>
|
||||
<div class="attachmentSize" data-bind="text: friendlySize()"></div>
|
||||
</div>
|
||||
<div class="checkboxAttachment fontastic"
|
||||
data-bind="visible: download, text: checked() ? '☑' : '☐',
|
||||
|
|
Loading…
Reference in a new issue