WIP: Added attachmentListSimple for #672

This is not optional yet and off.
This commit is contained in:
the-djmaze 2022-11-15 12:45:08 +01:00
parent 4a0a6c80fc
commit 58e9ebc37b
4 changed files with 35 additions and 5 deletions

View file

@ -120,3 +120,22 @@
cursor: pointer; cursor: pointer;
} }
} }
.attachmentListSimple {
margin: 0;
.attachmentItem {
min-height: 1em;
border: 1px solid var(--border-color);
padding: 0 2px;
}
.attachmentName {
margin:0;
}
.checkboxAttachment {
position: initial;
margin-left:.5em;
}
}

View file

@ -95,7 +95,6 @@ html.rl-no-preview-pane {
} }
.messageTags { .messageTags {
margin-top: 6px;
align-items: baseline; align-items: baseline;
display: flex; display: flex;
} }
@ -128,7 +127,6 @@ html.rl-no-preview-pane {
display: flex; display: flex;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin-bottom: 8px;
} }
.subject { .subject {
@ -148,7 +146,7 @@ html.rl-no-preview-pane {
} }
.informationShort { .informationShort {
margin: 4px 40px 0 0; margin: 0 40px 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

View file

@ -98,6 +98,7 @@ export class MailMessageView extends AbstractViewRight {
downloadAsZipLoading: false, downloadAsZipLoading: false,
showFullInfo: '1' === Local.get(ClientSideKeyNameMessageHeaderFullInfo), showFullInfo: '1' === Local.get(ClientSideKeyNameMessageHeaderFullInfo),
moreDropdownTrigger: false, moreDropdownTrigger: false,
attachmentListSimple: false,
// viewer // viewer
viewFromShort: '', viewFromShort: '',
@ -281,7 +282,7 @@ export class MailMessageView extends AbstractViewRight {
} }
} }
el = eqs(event, '.attachmentsPlace .attachmentItem .attachmentNameParent'); el = eqs(event, '.attachmentsPlace .attachmentName');
if (el) { if (el) {
const attachment = ko.dataFor(el); const attachment = ko.dataFor(el);
if (attachment?.linkDownload()) { if (attachment?.linkDownload()) {

View file

@ -232,6 +232,7 @@
<div class="readReceipt" data-bind="visible: !isDraftOrSentFolder() && message().readReceipt() && !message().isReadReceipt(), click: readReceipt" <div class="readReceipt" data-bind="visible: !isDraftOrSentFolder() && message().readReceipt() && !message().isReadReceipt(), click: readReceipt"
data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div> data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div>
<div class="attachmentsPlace" data-bind="visible: message().hasAttachments(), css: {'selection-mode' : showAttachmentControls}"> <div class="attachmentsPlace" data-bind="visible: message().hasAttachments(), css: {'selection-mode' : showAttachmentControls}">
<!-- ko ifnot: attachmentListSimple -->
<ul class="attachmentList" data-bind="foreach: message().listAttachments()"> <ul class="attachmentList" data-bind="foreach: message().listAttachments()">
<li class="attachmentItem" draggable="true" <li class="attachmentItem" draggable="true"
data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}"> data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
@ -250,7 +251,7 @@
</div> </div>
</div> </div>
<div class="attachmentNameParent"> <div class="attachmentNameParent">
<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="attachmentName" data-bind="text: fileName"></div> <div 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>
<div class="checkboxAttachment fontastic" <div class="checkboxAttachment fontastic"
@ -258,6 +259,17 @@
click: function () { checked(!checked()); return false }"></div> click: function () { checked(!checked()); return false }"></div>
</li> </li>
</ul> </ul>
<!-- /ko -->
<!-- ko if: attachmentListSimple -->
<ul class="attachmentListSimple" data-bind="foreach: message().listAttachments()">
<li class="attachmentItem" data-bind="attr: { 'title': fileName }, css: {'checked': checked}">
<span class="attachmentName" data-bind="text: fileName"></span>
<i class="checkboxAttachment fontastic"
data-bind="visible: download, text: checked() ? '☑' : '☐',
click: function () { checked(!checked()); return false }"></i>
</li>
</ul>
<!-- /ko -->
<i class="fontastic controls-handle" data-bind="visible: allowAttachmentControls(), click: toggleAttachmentControls"></i> <i class="fontastic controls-handle" data-bind="visible: allowAttachmentControls(), click: toggleAttachmentControls"></i>
</div> </div>