mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-07 00:17:03 +03:00
364 lines
19 KiB
HTML
364 lines
19 KiB
HTML
<div id="rl-sub-right">
|
||
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': messageFocused}">
|
||
<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
|
||
<div class="messageButtons btn-toolbar">
|
||
<div class="btn-group" data-bind="tooltip: 'GLOBAL/CLOSE'">
|
||
<a class="btn buttonClose" data-bind="command: closeMessageCommand">
|
||
<i class="fontastic">✖</i>
|
||
</a>
|
||
</div>
|
||
<div class="btn-group" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
|
||
<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
|
||
<i class="fontastic icon-white">🖉</i>
|
||
</a>
|
||
</div>
|
||
<div class="btn-group">
|
||
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'GLOBAL/TO_ARCHIVE'">
|
||
<i class="icon-archive"></i>
|
||
</a>
|
||
<a class="btn button-spam fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'GLOBAL/SPAM'">⚠</a>
|
||
<a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'GLOBAL/NOT_SPAM'">
|
||
<i class="icon-check-mark-circle-two"></i>
|
||
</a>
|
||
<a class="btn button-delete fontastic" data-bind="command: deleteCommand, tooltip: 'GLOBAL/DELETE'">🗑</a>
|
||
</div>
|
||
<div class="btn-group">
|
||
<a class="btn btn-thin buttonUp" data-bind="command: goUpCommand">
|
||
<i class="icon-left-middle"></i>
|
||
</a>
|
||
<a class="btn btn-thin buttonDown" data-bind="command: goDownCommand">
|
||
<i class="icon-right-middle"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="b-content b-message-view-wrapper">
|
||
<div style="height: 100%">
|
||
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
|
||
<div class="backdrop-message-wrp">
|
||
<div class="backdrop-message">
|
||
<i class="fontastic" style="padding: 0 7px; font-size: 24px; width: 24px; line-height: 24px;">📁</i>
|
||
<span style="vertical-align: middle; padding: 0 7px" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages()">
|
||
<span data-bind="text: printableCheckedMessageCount()"></span>
|
||
<i class="icon-mail"></i>
|
||
</div>
|
||
|
||
<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages(), text: messageError()">
|
||
</div>
|
||
|
||
<div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
|
||
</div>
|
||
|
||
<div class="message-fixed-button-toolbar" data-bind="visible: message">
|
||
<div class="btn-group" style="margin-right: -11px;">
|
||
<a class="btn btn-thin-2 btn-transparent buttonReply"
|
||
data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
|
||
<i class="fontastic">←</i>
|
||
</a>
|
||
<a class="btn btn-thin-2 btn-transparent buttonReplyAll"
|
||
data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
|
||
<i class="fontastic">↞</i>
|
||
</a>
|
||
<a class="btn btn-thin-2 btn-transparent buttonForward"
|
||
data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
|
||
<i class="fontastic">→</i>
|
||
</a>
|
||
<div class="btn-group" data-bind="registerBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions" style="display: inline-block">
|
||
<a class="btn btn-thin-2 btn-transparent dropdown-toggle" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand">
|
||
<span data-bind="visible: !allowComposer" class="fontastic">⋮</span>
|
||
<span data-bind="visible: allowComposer" class="caret"></span>
|
||
</a>
|
||
<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
|
||
<div data-bind="visible: allowComposer && !isDraftFolder()">
|
||
<li class="e-item" role="presentation">
|
||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
|
||
<i class="fontastic">←</i>
|
||
<span data-i18n="MESSAGE/BUTTON_REPLY"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
|
||
<i class="fontastic">↞</i>
|
||
<span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
|
||
<i class="fontastic">→</i>
|
||
<span data-i18n="MESSAGE/BUTTON_FORWARD"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
|
||
<i class="fontastic">🖉</i>
|
||
<span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
|
||
<i class="fontastic">→</i>
|
||
<span data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
|
||
</a>
|
||
</li>
|
||
</div>
|
||
<div data-bind="visible: allowMessageListActions && usePreviewPane()" class="dividerbar">
|
||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
|
||
<i class="icon-archive"></i>
|
||
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
|
||
<i class="fontastic">⚠</i>
|
||
<span data-i18n="GLOBAL/SPAM"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: notSpamCommand">
|
||
<i class="icon-check-mark-circle-two"></i>
|
||
<span data-i18n="GLOBAL/NOT_SPAM"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
|
||
<i class="fontastic">🗑</i>
|
||
<span data-i18n="GLOBAL/DELETE"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewUnsubscribeLink }">
|
||
<i class="fontastic">✖</i>
|
||
<span data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></span>
|
||
</a>
|
||
</li>
|
||
</div>
|
||
<div data-bind="visible: allowMessageActions" class="dividerbar">
|
||
<li class="e-item" role="presentation">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
|
||
<i class="fontastic">🖨</i>
|
||
<span data-i18n="MESSAGE/MENU_PRINT"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
|
||
<i class="icon-popup"></i>
|
||
<span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item dividerbar" role="presentation">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }">
|
||
<i class="icon-file-code"></i>
|
||
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
|
||
</a>
|
||
</li>
|
||
<li class="e-item" role="presentation">
|
||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }">
|
||
<i class="icon-download"></i>
|
||
<span data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
|
||
</a>
|
||
</li>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-group hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
|
||
<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
|
||
<i class="fontastic icon-white">🖉</i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-bind="visible: message">
|
||
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
|
||
<div class="subjectParent">
|
||
<button class="close" data-bind="command: closeMessageCommand" style="margin-top: -2px;">×</button>
|
||
<span class="infoParent g-ui-user-select-none" data-bind="click: function() { showFullInfo(!showFullInfo()); }">
|
||
<i class="icon-info" style="padding-top: 1px;"></i>
|
||
</span>
|
||
<span class="flagParent g-ui-user-select-none">
|
||
<i class="icon-star-empty flagOff" data-bind="css: {'icon-star flagOn': viewIsFlagged, 'icon-star-empty flagOff': !viewIsFlagged()}" style="padding-top: 2px;"></i>
|
||
</span>
|
||
<b style="color: red; margin-right: 5px" data-bind="visible: viewIsImportant">!</b>
|
||
<span class="subject" data-bind="text: viewSubject, title: viewSubject, event: { 'dblclick': toggleFullScreen }"></span>
|
||
<span class="i18n emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span>
|
||
</div>
|
||
<div>
|
||
<div style="overflow: hidden;">
|
||
<div class="informationShort" data-bind="event: { 'dblclick': toggleFullScreen }">
|
||
<span>
|
||
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
|
||
<span data-bind="visible: viewFromDkimVisibility">
|
||
|
||
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
|
||
</span>
|
||
</span>
|
||
<span data-bind="visible: 0 < viewTimeStamp()">
|
||
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
|
||
</span>
|
||
</div>
|
||
<div class="informationShortWrp">
|
||
<div class="informationShort" data-bind="visible: viewTo, event: { 'dblclick': toggleFullScreen }">
|
||
<span>
|
||
<span class="i18n uiLabel labelTo" data-i18n="GLOBAL/TO"
|
||
></span>: <span class="to" data-bind="text: viewTo"></span>
|
||
</span>
|
||
</div>
|
||
<div class="informationShort" data-bind="visible: viewCc, event: { 'dblclick': toggleFullScreen }">
|
||
<span>
|
||
<span class="i18n uiLabel labelTo" data-i18n="GLOBAL/CC"
|
||
></span>: <span class="to" data-bind="text: viewCc"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="informationFull" data-bind="visible: showFullInfo()">
|
||
<table>
|
||
<tr data-bind="visible: '' !== viewFrom()">
|
||
<td><span class="i18n uiLabel" data-i18n="GLOBAL/FROM"></span></td>
|
||
<td>
|
||
<span class="pull-right size" data-bind="text: viewSize"></span>
|
||
<span class="from uiLabelValue" data-bind="text: viewFrom, title: viewFrom"></span>
|
||
</td>
|
||
</tr>
|
||
<tr data-bind="visible: '' !== viewTo()">
|
||
<td><span class="i18n uiLabel" data-i18n="GLOBAL/TO"></span></td>
|
||
<td><span class="to uiLabelValue" data-bind="text: viewTo, title: viewTo"></span></td>
|
||
</tr>
|
||
<tr data-bind="visible: '' !== viewCc()">
|
||
<td><span class="i18n uiLabel" data-i18n="GLOBAL/CC"></span></td>
|
||
<td><span class="cc uiLabelValue" data-bind="text: viewCc, title: viewCc"></span></td>
|
||
</tr>
|
||
<tr data-bind="visible: '' !== viewBcc()">
|
||
<td><span class="i18n uiLabel" data-i18n="GLOBAL/BCC"></span></td>
|
||
<td><span class="bcc uiLabelValue" data-bind="text: viewBcc, title: viewBcc"></span></td>
|
||
</tr>
|
||
<tr data-bind="visible: '' !== viewReplyTo()">
|
||
<td><span class="i18n uiLabel" data-i18n="GLOBAL/REPLY_TO"></span></td>
|
||
<td><span class="replyTo uiLabelValue" data-bind="text: viewReplyTo, title: viewReplyTo"></span></td>
|
||
</tr>
|
||
<tr data-bind="visible: 0 < viewTimeStamp()">
|
||
<td><span class="i18n uiLabel" data-i18n="MESSAGE/LABEL_DATE"></span></td>
|
||
<td>
|
||
<time class="date uiLabelValue" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>
|
||
|
||
(<time class="date uiLabelValue" data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>)
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
|
||
<div class="content" tabindex="0" data-bind="hasfocus: messageDomFocused, css: { 'focused': messageDomFocused },
|
||
style: {'background-color': messageLoadingThrottle() ? '' : bodyBackgroundColor()}">
|
||
|
||
<div class="content-wrapper">
|
||
|
||
<div>
|
||
<span class="buttonFull" data-bind="click: fullScreen">
|
||
<i class="icon-arrows-out"></i>
|
||
</span>
|
||
<span class="buttonUnFull" data-bind="click: unFullScreen">
|
||
<i class="icon-arrows-in"></i>
|
||
</span>
|
||
|
||
<div class="line-loading e-strip-animation" data-bind="visible: messageLoadingThrottle()"></div>
|
||
|
||
<div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()">
|
||
<span class="i18n text" data-i18n="GLOBAL/LOADING"></span><span class="textLoadingAnimationD1">.</span><span class="textLoadingAnimationD2">.</span><span class="textLoadingAnimationD3">.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="g-ui-min-height-300 content-content" data-bind="visible: !messageLoadingThrottle()">
|
||
<div class="bodySubHeader">
|
||
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: function() { showImages(message()); }">
|
||
<i class="fontastic">🖼</i>
|
||
<span class="i18n text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
|
||
</div>
|
||
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: function() { readReceipt(message()); }">
|
||
<i class="icon-mail"></i>
|
||
<span class="i18n text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span>
|
||
</div>
|
||
<div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(),
|
||
css: {'selection-mode' : showAttachmnetControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}">
|
||
<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
|
||
<li class="attachmentItem clearfix" draggable="true"
|
||
data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
|
||
<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
|
||
<div class="hidePreview">
|
||
<div class="iconMain">
|
||
<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
|
||
<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText()"></i>
|
||
</div>
|
||
</div>
|
||
<div class="showPreview">
|
||
<a data-bind="click: $root.attachmentPreview, css: {'attachmentImagePreview': isImage(), 'visible': !isLinked}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
|
||
<div class="iconMain">
|
||
<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
|
||
<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText()"></i>
|
||
</div>
|
||
<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
|
||
<div class="iconPreview">
|
||
<i class="attachmentIcon fontastic show-hover">👁</i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="showPreplay">
|
||
<div class="iconMain">
|
||
<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
|
||
</div>
|
||
<div class="iconPreview">
|
||
<i class="attachmentIcon fontastic show-hover">▶</i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="attachmentNameParent">
|
||
<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
|
||
<span class="attachmentName" data-bind="text: fileName"></span>
|
||
</div>
|
||
<div>
|
||
<span class="attachmentSize" data-bind="text: friendlySize"></span>
|
||
</div>
|
||
</div>
|
||
<div class="checkboxAttachment fontastic"
|
||
data-bind="text: checked() ? '☑' : '☐',
|
||
click: function () { checked(!checked()); return false }"></div>
|
||
</li>
|
||
</ul>
|
||
<i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }">⚙</i>
|
||
</div>
|
||
|
||
<div class="attachmentsControls"
|
||
data-bind="visible: showAttachmnetControls() && message() && message().attachments().hasVisible()">
|
||
|
||
<span data-bind="visible: downloadAsZipAllowed">
|
||
<i class="fontastic iconcolor-red" data-bind="visible: downloadAsZipError">✖</i>
|
||
<i class="icon-file-zip" data-bind="visible: !downloadAsZipError(),
|
||
css: {'icon-file-zip': !downloadAsZipLoading(), 'icon-spinner': downloadAsZipLoading()}"></i>
|
||
<span class="g-ui-link" data-bind="click: downloadAsZip">
|
||
<span data-i18n="MESSAGE/LINK_DOWNLOAD_AS_ZIP"></span>
|
||
</span>
|
||
</span>
|
||
|
||
<button type="button" class="close" style="margin-right: 5px;"
|
||
data-bind="click: function () { showAttachmnetControls(false); showAttachmnetControlsState(false); }">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bodyText g-ui-min-height-300"
|
||
data-bind="initDom: messagesBodiesDom"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|