Improved inline attachments visibility to prevent questions

This commit is contained in:
the-djmaze 2022-10-03 17:48:46 +02:00
parent aa357af4c5
commit 02eb5ad4e8
4 changed files with 17 additions and 19 deletions

View file

@ -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) + ')'
: '';
}
/**

View file

@ -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;

View file

@ -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');

View file

@ -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() ? '☑' : '☐',