mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 15:45:55 +08:00
Fix some MailMessageView styling
This commit is contained in:
the-djmaze
parent
70e32e0905
commit
f01c6bce4b
|
|
@ -78,7 +78,6 @@
|
||||||
position: initial;
|
position: initial;
|
||||||
}
|
}
|
||||||
.messageView,
|
.messageView,
|
||||||
.messageView .b-content,
|
|
||||||
.messageView .b-message,
|
.messageView .b-message,
|
||||||
#messageItem,
|
#messageItem,
|
||||||
#messageItem .b-text-part {
|
#messageItem .b-text-part {
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
|
||||||
|
|
||||||
#V-MailMessageView {
|
#V-MailMessageView {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50px;
|
top: 0;
|
||||||
bottom: 13px;
|
bottom: 13px;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
|
|
@ -5,25 +5,26 @@ html.rl-no-preview-pane {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#V-MailMessageView.focused .messageView {
|
#V-MailMessageView .top-toolbar {
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
color: #fff;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
html.rl-no-preview-pane #V-MailMessageView .top-toolbar {
|
||||||
|
padding-left: 1px;
|
||||||
|
}
|
||||||
|
html:not(.rl-mobile):not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageView {
|
.messageView {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid var(--border-color, #aaa);
|
border: 1px solid var(--border-color, #aaa);
|
||||||
border-radius: var(--border-radius, 5px);
|
border-radius: var(--border-radius, 5px);
|
||||||
height: 100%;
|
height: calc(100% - 50px);
|
||||||
|
position: relative;
|
||||||
.toolbar {
|
|
||||||
position: absolute;
|
|
||||||
top: -50px;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 30px;
|
|
||||||
padding: 10px 0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.priorityHigh .subject::before {
|
.priorityHigh .subject::before {
|
||||||
content: '! '; /*❗*/
|
content: '! '; /*❗*/
|
||||||
|
|
@ -31,10 +32,6 @@ html.rl-no-preview-pane {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-content {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-message {
|
.b-message {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -141,10 +138,6 @@ html.rl-no-preview-pane {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageButtons {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.informationShort {
|
.informationShort {
|
||||||
margin: 0 56px 0 0;
|
margin: 0 56px 0 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -240,6 +233,11 @@ html.rl-no-preview-pane {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#V-MailMessageView.focused .messageView {
|
||||||
|
border-color: #9d9d9d;
|
||||||
|
box-shadow: var(--smMainShadow);
|
||||||
|
}
|
||||||
|
|
||||||
#messageItem {
|
#messageItem {
|
||||||
|
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
@ -443,31 +441,12 @@ html.rl-no-preview-pane {
|
||||||
}
|
}
|
||||||
|
|
||||||
html.rl-no-preview-pane .messageView {
|
html.rl-no-preview-pane .messageView {
|
||||||
|
border: 1px solid var(--border-color, #aaa);
|
||||||
.toolbar {
|
box-shadow: var(--smMainShadow);
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b-content {
|
|
||||||
top: 50px;
|
|
||||||
left: 0;
|
|
||||||
bottom: @rlBottomMargin;
|
|
||||||
right: @rlBottomMargin;
|
|
||||||
border: 1px solid var(--border-color, #aaa);
|
|
||||||
box-shadow: var(--smMainShadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
|
|
||||||
.top-toolbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.rl-bottom-preview-pane .messageView {
|
html.rl-bottom-preview-pane .messageView {
|
||||||
.b-content {
|
height: 100%;
|
||||||
bottom: @rlBottomMargin;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html.rl-fullscreen {
|
html.rl-fullscreen {
|
||||||
|
|
@ -476,20 +455,11 @@ html.rl-fullscreen {
|
||||||
#V-MailMessageList,
|
#V-MailMessageList,
|
||||||
#V-SettingsPane,
|
#V-SettingsPane,
|
||||||
#V-SystemDropDown,
|
#V-SystemDropDown,
|
||||||
#V-MailMessageView .messageView .toolbar {
|
#V-MailMessageView .top-toolbar {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageView {
|
.messageView {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messageView .b-content {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
|
|
||||||
@rlLeftWidth: 200px;
|
@rlLeftWidth: 200px;
|
||||||
@rlLowMargin: 8px;
|
@rlLowMargin: 8px;
|
||||||
@rlBottomMargin: 5px;
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--rlLeftWidth: 200px;
|
|
||||||
--smDialogShrink: 20px;
|
--smDialogShrink: 20px;
|
||||||
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.rl-mobile {
|
.rl-mobile {
|
||||||
/* For Firefox */
|
/* For Firefox */
|
||||||
--smDialogShrink: 50px;
|
--smDialogShrink: 25px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,305 +1,301 @@
|
||||||
<div class="messageView">
|
<div class="top-toolbar g-ui-user-select-none btn-toolbar">
|
||||||
<div class="toolbar top-toolbar g-ui-user-select-none">
|
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
|
||||||
<div class="messageButtons btn-toolbar">
|
<a class="btn buttonClose fontastic" data-bind="click: closeMessage">✖</a>
|
||||||
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
|
|
||||||
<a class="btn buttonClose fontastic" data-bind="click: closeMessage">✖</a>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT">
|
|
||||||
<a class="btn btn-success buttonEdit fontastic" data-bind="command: editCommand">🖉</a>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<a class="btn fontastic" data-bind="visible: archiveAllowed, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
|
|
||||||
<a class="btn fontastic" data-bind="visible: canMarkAsSpam , command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
|
|
||||||
<a class="btn" data-bind="visible: isSpamFolder, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
|
|
||||||
<i class="icon-check-mark-circle-two"></i>
|
|
||||||
</a>
|
|
||||||
<a class="btn fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a>
|
|
||||||
<a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="b-content">
|
<div class="btn-group" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT">
|
||||||
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
|
<a class="btn btn-success buttonEdit fontastic" data-bind="command: editCommand">🖉</a>
|
||||||
<div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div>
|
</div>
|
||||||
</div>
|
<div class="btn-group">
|
||||||
<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages(), text: printableCheckedMessageCount()"></div>
|
<a class="btn fontastic" data-bind="visible: archiveAllowed, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
|
||||||
|
<a class="btn fontastic" data-bind="visible: canMarkAsSpam , command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
|
||||||
|
<a class="btn" data-bind="visible: isSpamFolder, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
|
||||||
|
<i class="icon-check-mark-circle-two"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a>
|
||||||
|
<a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="b-content messageView">
|
||||||
|
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
|
||||||
|
<div class="backdrop-message" data-icon="📁" data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></div>
|
||||||
|
</div>
|
||||||
|
<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages(), text: printableCheckedMessageCount()"></div>
|
||||||
|
|
||||||
<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages(), text: messageError()">
|
<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>
|
||||||
|
|
||||||
|
<!-- ko if: message -->
|
||||||
|
<div class="b-message" data-bind="i18nUpdate: message, css: message().lineAsCss(0)">
|
||||||
|
<div class="message-fixed-button-toolbar">
|
||||||
|
<a class="btn btn-success buttonEdit fontastic hide-mobile" data-bind="visible: isDraftFolder(), command: editCommand">🖉</a>
|
||||||
|
<div class="btn-group" style="margin-right: -8px; display: inline;">
|
||||||
|
<span data-bind="visible: canBeRepliedOrForwarded">
|
||||||
|
<a class="btn btn-thin btn-transparent buttonReply fontastic"
|
||||||
|
data-bind="visible: 1 == msgDefaultAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
|
||||||
|
<a class="btn btn-thin btn-transparent buttonReplyAll fontastic"
|
||||||
|
data-bind="visible: 2 == msgDefaultAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
|
||||||
|
</span>
|
||||||
|
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
||||||
|
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="more-view-dropdown-id" href="#" tabindex="-1">☰</a>
|
||||||
|
<menu class="dropdown-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
|
||||||
|
<div data-bind="visible: !isDraftFolder()">
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: replyCommand" data-icon="←" data-i18n="MESSAGE/BUTTON_REPLY"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: replyAllCommand" data-icon="↞" data-i18n="MESSAGE/BUTTON_REPLY_ALL"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: forwardCommand" data-icon="→" data-i18n="MESSAGE/BUTTON_FORWARD"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand" data-icon="⥅" data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand" data-icon="🖉" data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<div class="dividerbar">
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: setUnseen" data-icon=" " data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: archiveAllowed">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: archiveCommand" data-icon="🗄" data-i18n="GLOBAL/TO_ARCHIVE"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: canMarkAsSpam">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: spamCommand" data-icon="⚠" data-i18n="GLOBAL/SPAM"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: isSpamFolder">
|
||||||
|
<a 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 role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: deleteCommand" data-icon="🗑" data-i18n="GLOBAL/DELETE"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="command: deleteWithoutMoveCommand" data-icon="🗑" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></a>
|
||||||
|
</li>
|
||||||
|
<li class="dividerbar" role="presentation" data-bind="visible: firstUnsubsribeLink">
|
||||||
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: firstUnsubsribeLink }" data-icon="✖" data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<div data-bind="with: message" class="dividerbar">
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: printMessage" data-icon="🖨" data-i18n="MESSAGE/MENU_PRINT"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: $root.toggleFullScreen">
|
||||||
|
<i data-bind="css: { 'icon-arrows-out': !$root.fullScreenMode(), 'icon-arrows-in': $root.fullScreenMode }"></i>
|
||||||
|
<span data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: popupMessage" data-icon="⧉" data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: html() && !isHtml()">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: viewHtml" data-icon="👁" data-i18n="MESSAGE/HTML_VIEW"></a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation" data-bind="visible: isHtml()">
|
||||||
|
<a href="#" tabindex="-1" data-bind="click: viewPlain" data-icon="👁" data-i18n="MESSAGE/PLAIN_VIEW"></a>
|
||||||
|
</li>
|
||||||
|
<li class="dividerbar" role="presentation">
|
||||||
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewRaw() }">
|
||||||
|
<i class="icon-file-code"></i>
|
||||||
|
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li role="presentation">
|
||||||
|
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: downloadLink() }" data-icon="📥" data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
|
<div class="messageItemHeader">
|
||||||
|
<div class="subjectParent">
|
||||||
|
<span class="infoParent g-ui-user-select-none fontastic" data-bind="click: toggleFullInfo">ℹ</span>
|
||||||
|
<span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: message().isFlagged() ? '★' : '☆', css: {'flagOn': message().isFlagged(), 'flagOff': !message().isFlagged()}"></span>
|
||||||
|
<span class="subject" data-bind="text: message().subject"></span>
|
||||||
|
<a href="#" class="close" data-bind="click: closeMessage" style="margin-top: -8px;">×</a>
|
||||||
|
</div>
|
||||||
|
<div class="informationShort" data-bind="hidden: showFullInfo">
|
||||||
|
<span class="from" data-bind="html: viewFromShort, title: message().from"></span>
|
||||||
|
<i data-bind="visible: viewFromDkimVisibility, css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
|
||||||
|
</div>
|
||||||
|
<div class="informationFull" data-bind="visible: showFullInfo, with: message">
|
||||||
|
<table>
|
||||||
|
<tr data-bind="visible: from.length">
|
||||||
|
<td data-i18n="GLOBAL/FROM"></td>
|
||||||
|
<td><span data-bind="text: from"></span>
|
||||||
|
<i data-bind="visible: $parent.viewFromDkimVisibility, css: $parent.viewFromDkimStatusIconClass, title: $parent.viewFromDkimStatusTitle"></i>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: to.length">
|
||||||
|
<td data-i18n="GLOBAL/TO"></td>
|
||||||
|
<td data-bind="text: to"></td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: cc.length">
|
||||||
|
<td data-i18n="GLOBAL/CC"></td>
|
||||||
|
<td data-bind="text: cc"></td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: bcc.length">
|
||||||
|
<td data-i18n="GLOBAL/BCC"></td>
|
||||||
|
<td data-bind="text: bcc"></td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: replyTo.length">
|
||||||
|
<td data-i18n="GLOBAL/REPLY_TO"></td>
|
||||||
|
<td data-bind="text: replyTo"></td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: dateTimeStampInUTC">
|
||||||
|
<td data-i18n="MESSAGE/LABEL_DATE"></td>
|
||||||
|
<td>
|
||||||
|
<time data-moment-format="FULL" data-bind="moment: dateTimeStampInUTC"></time>
|
||||||
|
|
||||||
|
(<time data-moment-format="FROMNOW" data-bind="moment: dateTimeStampInUTC"></time>)
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: spamResult">
|
||||||
|
<td data-i18n="GLOBAL/SPAM"></td>
|
||||||
|
<td data-bind="text: spamStatus()"></td>
|
||||||
|
</tr>
|
||||||
|
<tr data-bind="visible: friendlySize()">
|
||||||
|
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td>
|
||||||
|
<td class="size" data-bind="text: friendlySize()"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="messageItem">
|
||||||
<!-- ko if: message -->
|
<div class="messageItemHeader">
|
||||||
<div class="b-message" data-bind="i18nUpdate: message, css: message().lineAsCss(0)">
|
<div data-bind="hidden: showFullInfo">
|
||||||
<div class="message-fixed-button-toolbar">
|
<time class="date" data-moment-format="FULL" data-bind="visible: 0 < message().dateTimeStampInUTC(), moment: message().dateTimeStampInUTC()"></time>
|
||||||
<a class="btn btn-success buttonEdit fontastic hide-mobile" data-bind="visible: isDraftFolder(), command: editCommand">🖉</a>
|
<div class="informationShortWrp">
|
||||||
<div class="btn-group" style="margin-right: -8px; display: inline;">
|
<div class="informationShort" data-bind="visible: message().to.length">
|
||||||
<span data-bind="visible: canBeRepliedOrForwarded">
|
<span data-i18n="GLOBAL/TO"></span>:
|
||||||
<a class="btn btn-thin btn-transparent buttonReply fontastic"
|
<span data-bind="text: message().to"></span>
|
||||||
data-bind="visible: 1 == msgDefaultAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
|
</div>
|
||||||
<a class="btn btn-thin btn-transparent buttonReplyAll fontastic"
|
<div class="informationShort" data-bind="visible: message().cc.length">
|
||||||
data-bind="visible: 2 == msgDefaultAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
|
<span data-i18n="GLOBAL/CC"></span>:
|
||||||
</span>
|
<span data-bind="text: message().cc"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="informationShort" data-bind="visible: message().spamResult()">
|
||||||
|
<span data-i18n="MESSAGE/SPAM_SCORE"></span>:
|
||||||
|
<meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: message().spamScore(), title: message().spamStatus()"></meter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hasVirus" data-bind="visible: message().hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
|
||||||
|
<!-- ko if: tagsAllowed -->
|
||||||
|
<div class="messageTags">
|
||||||
|
<span data-i18n="MESSAGE/TAGS"></span>:
|
||||||
|
<span class="messageAssignedTags" data-bind="html: tagsToHTML"></span>
|
||||||
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
||||||
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="more-view-dropdown-id" href="#" tabindex="-1">☰</a>
|
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="tags-dropdown-id" href="#" tabindex="-1">🏷</a>
|
||||||
<menu class="dropdown-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
|
<menu class="dropdown-menu right-edge" role="menu" aria-labelledby="tags-dropdown-id">
|
||||||
<div data-bind="visible: !isDraftFolder()">
|
<div data-bind="foreach: message().tagOptions()">
|
||||||
<li role="presentation">
|
<li role="presentation">
|
||||||
<a href="#" tabindex="-1" data-bind="command: replyCommand" data-icon="←" data-i18n="MESSAGE/BUTTON_REPLY"></a>
|
<a href="#" tabindex="-1" data-icon="☐" data-bind="click: toggle, text: label, title: value, attr: { class: css, 'data-icon': checked ? '☑' : '☐' }"></a>
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: replyAllCommand" data-icon="↞" data-i18n="MESSAGE/BUTTON_REPLY_ALL"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: forwardCommand" data-icon="→" data-i18n="MESSAGE/BUTTON_FORWARD"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand" data-icon="⥅" data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand" data-icon="🖉" data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div class="dividerbar">
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: setUnseen" data-icon=" " data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: archiveAllowed">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: archiveCommand" data-icon="🗄" data-i18n="GLOBAL/TO_ARCHIVE"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: canMarkAsSpam">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: spamCommand" data-icon="⚠" data-i18n="GLOBAL/SPAM"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: isSpamFolder">
|
|
||||||
<a 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 role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: deleteCommand" data-icon="🗑" data-i18n="GLOBAL/DELETE"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="command: deleteWithoutMoveCommand" data-icon="🗑" data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></a>
|
|
||||||
</li>
|
|
||||||
<li class="dividerbar" role="presentation" data-bind="visible: firstUnsubsribeLink">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: firstUnsubsribeLink }" data-icon="✖" data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<div data-bind="with: message" class="dividerbar">
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: printMessage" data-icon="🖨" data-i18n="MESSAGE/MENU_PRINT"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: $root.toggleFullScreen">
|
|
||||||
<i data-bind="css: { 'icon-arrows-out': !$root.fullScreenMode(), 'icon-arrows-in': $root.fullScreenMode }"></i>
|
|
||||||
<span data-i18n="SHORTCUTS_HELP/LABEL_FULLSCREEN_TOGGLE"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: popupMessage" data-icon="⧉" data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: html() && !isHtml()">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: viewHtml" data-icon="👁" data-i18n="MESSAGE/HTML_VIEW"></a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation" data-bind="visible: isHtml()">
|
|
||||||
<a href="#" tabindex="-1" data-bind="click: viewPlain" data-icon="👁" data-i18n="MESSAGE/PLAIN_VIEW"></a>
|
|
||||||
</li>
|
|
||||||
<li class="dividerbar" role="presentation">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: viewRaw() }">
|
|
||||||
<i class="icon-file-code"></i>
|
|
||||||
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li role="presentation">
|
|
||||||
<a target="_blank" href="#" tabindex="-1" data-bind="attr: { href: downloadLink() }" data-icon="📥" data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></a>
|
|
||||||
</li>
|
</li>
|
||||||
</div>
|
</div>
|
||||||
|
<li role="presentation" class="dividerbar">
|
||||||
|
<a href="#" tabindex="-1" data-icon="✚" data-bind="click: newTag" data-i18n="MESSAGE/NEW_TAG"></a>
|
||||||
|
</li>
|
||||||
</menu>
|
</menu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- /ko -->
|
||||||
</div>
|
</div>
|
||||||
|
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
|
||||||
|
|
||||||
<div class="messageItemHeader">
|
<div class="loading" data-bind="visible: messageLoadingThrottle">
|
||||||
<div class="subjectParent">
|
<i class="icon-spinner"></i>
|
||||||
<span class="infoParent g-ui-user-select-none fontastic" data-bind="click: toggleFullInfo">ℹ</span>
|
<span data-i18n="GLOBAL/LOADING"></span>
|
||||||
<span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: message().isFlagged() ? '★' : '☆', css: {'flagOn': message().isFlagged(), 'flagOff': !message().isFlagged()}"></span>
|
|
||||||
<span class="subject" data-bind="text: message().subject"></span>
|
|
||||||
<a href="#" class="close" data-bind="click: closeMessage" style="margin-top: -8px;">×</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="informationShort" data-bind="hidden: showFullInfo">
|
|
||||||
<span class="from" data-bind="html: viewFromShort, title: message().from"></span>
|
<div data-bind="hidden: messageLoadingThrottle">
|
||||||
<i data-bind="visible: viewFromDkimVisibility, css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
|
<div class="bodySubHeader">
|
||||||
</div>
|
<div class="readReceipt" data-bind="visible: askReadReceipt, click: readReceipt"
|
||||||
<div class="informationFull" data-bind="visible: showFullInfo, with: message">
|
data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div>
|
||||||
<table>
|
<details class="attachmentsPlace" data-bind="visible: hasAttachments, css: {'selection-mode' : showAttachmentControls}">
|
||||||
<tr data-bind="visible: from.length">
|
<summary data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></summary>
|
||||||
<td data-i18n="GLOBAL/FROM"></td>
|
<!-- ko ifnot: simpleAttachmentsList -->
|
||||||
<td><span data-bind="text: from"></span>
|
<ul class="attachmentList" data-bind="foreach: listAttachments">
|
||||||
<i data-bind="visible: $parent.viewFromDkimVisibility, css: $parent.viewFromDkimStatusIconClass, title: $parent.viewFromDkimStatusTitle"></i>
|
<li class="attachmentItem" draggable="true"
|
||||||
</td>
|
data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
|
||||||
</tr>
|
<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
|
||||||
<tr data-bind="visible: to.length">
|
<i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
|
||||||
<td data-i18n="GLOBAL/TO"></td>
|
<div class="showPreview">
|
||||||
<td data-bind="text: to"></td>
|
<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
|
||||||
</tr>
|
<i class="iconMain" data-bind="visible: !hasThumbnail(), css: iconClass()"></i>
|
||||||
<tr data-bind="visible: cc.length">
|
<div class="iconBG" data-bind="attr: { 'style': thumbnailStyle() }"></div>
|
||||||
<td data-i18n="GLOBAL/CC"></td>
|
<div class="iconPreview fontastic">👁</div>
|
||||||
<td data-bind="text: cc"></td>
|
</a>
|
||||||
</tr>
|
</div>
|
||||||
<tr data-bind="visible: bcc.length">
|
<div class="showPreplay">
|
||||||
<td data-i18n="GLOBAL/BCC"></td>
|
<i class="iconMain" data-bind="css: iconClass()"></i>
|
||||||
<td data-bind="text: bcc"></td>
|
<div class="iconPreview fontastic">▶</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr data-bind="visible: replyTo.length">
|
</div>
|
||||||
<td data-i18n="GLOBAL/REPLY_TO"></td>
|
<div class="attachmentNameParent">
|
||||||
<td data-bind="text: replyTo"></td>
|
<div class="attachmentName" data-bind="text: fileName"></div>
|
||||||
</tr>
|
<div class="attachmentSize" data-bind="text: friendlySize()"></div>
|
||||||
<tr data-bind="visible: dateTimeStampInUTC">
|
</div>
|
||||||
<td data-i18n="MESSAGE/LABEL_DATE"></td>
|
<div class="checkboxAttachment fontastic"
|
||||||
<td>
|
data-bind="visible: download, text: checked() ? '☑' : '☐', click: toggleChecked"></div>
|
||||||
<time data-moment-format="FULL" data-bind="moment: dateTimeStampInUTC"></time>
|
|
||||||
|
|
||||||
(<time data-moment-format="FROMNOW" data-bind="moment: dateTimeStampInUTC"></time>)
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr data-bind="visible: spamResult">
|
|
||||||
<td data-i18n="GLOBAL/SPAM"></td>
|
|
||||||
<td data-bind="text: spamStatus()"></td>
|
|
||||||
</tr>
|
|
||||||
<tr data-bind="visible: friendlySize()">
|
|
||||||
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td>
|
|
||||||
<td class="size" data-bind="text: friendlySize()"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="messageItem">
|
|
||||||
<div class="messageItemHeader">
|
|
||||||
<div data-bind="hidden: showFullInfo">
|
|
||||||
<time class="date" data-moment-format="FULL" data-bind="visible: 0 < message().dateTimeStampInUTC(), moment: message().dateTimeStampInUTC()"></time>
|
|
||||||
<div class="informationShortWrp">
|
|
||||||
<div class="informationShort" data-bind="visible: message().to.length">
|
|
||||||
<span data-i18n="GLOBAL/TO"></span>:
|
|
||||||
<span data-bind="text: message().to"></span>
|
|
||||||
</div>
|
|
||||||
<div class="informationShort" data-bind="visible: message().cc.length">
|
|
||||||
<span data-i18n="GLOBAL/CC"></span>:
|
|
||||||
<span data-bind="text: message().cc"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="informationShort" data-bind="visible: message().spamResult()">
|
|
||||||
<span data-i18n="MESSAGE/SPAM_SCORE"></span>:
|
|
||||||
<meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: message().spamScore(), title: message().spamStatus()"></meter>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hasVirus" data-bind="visible: message().hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
|
|
||||||
<!-- ko if: tagsAllowed -->
|
|
||||||
<div class="messageTags">
|
|
||||||
<span data-i18n="MESSAGE/TAGS"></span>:
|
|
||||||
<span class="messageAssignedTags" data-bind="html: tagsToHTML"></span>
|
|
||||||
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
|
|
||||||
<a class="btn btn-thin btn-transparent dropdown-toggle fontastic" id="tags-dropdown-id" href="#" tabindex="-1">🏷</a>
|
|
||||||
<menu class="dropdown-menu right-edge" role="menu" aria-labelledby="tags-dropdown-id">
|
|
||||||
<div data-bind="foreach: message().tagOptions()">
|
|
||||||
<li role="presentation">
|
|
||||||
<a href="#" tabindex="-1" data-icon="☐" data-bind="click: toggle, text: label, title: value, attr: { class: css, 'data-icon': checked ? '☑' : '☐' }"></a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
<li role="presentation" class="dividerbar">
|
|
||||||
<a href="#" tabindex="-1" data-icon="✚" data-bind="click: newTag" data-i18n="MESSAGE/NEW_TAG"></a>
|
|
||||||
</li>
|
</li>
|
||||||
</menu>
|
</ul>
|
||||||
</div>
|
<!-- /ko -->
|
||||||
</div>
|
<!-- ko if: simpleAttachmentsList -->
|
||||||
<!-- /ko -->
|
<ul class="attachmentListSimple" data-bind="foreach: listAttachments">
|
||||||
</div>
|
<li class="attachmentItem" data-bind="attr: { 'title': fileName }, css: {'checked': checked}">
|
||||||
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
|
<span class="attachmentName" data-bind="text: fileName"></span>
|
||||||
|
<i class="checkboxAttachment fontastic"
|
||||||
|
data-bind="visible: download, text: checked() ? '☑' : '☐', click: toggleChecked"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- /ko -->
|
||||||
|
<i class="fontastic controls-handle" data-bind="visible: allowAttachmentControls(), click: toggleAttachmentControls">⚙</i>
|
||||||
|
</details>
|
||||||
|
|
||||||
<div class="loading" data-bind="visible: messageLoadingThrottle">
|
<div class="attachmentsControls"
|
||||||
<i class="icon-spinner"></i>
|
data-bind="visible: showAttachmentControls() && hasAttachments()">
|
||||||
<span data-i18n="GLOBAL/LOADING"></span>
|
|
||||||
|
<span data-bind="visible: downloadAsZipAllowed">
|
||||||
|
<i class="fontastic iconcolor-red" data-bind="visible: downloadAsZipError">✖</i>
|
||||||
|
<i class="icon-file-archive" data-bind="visible: !downloadAsZipError(),
|
||||||
|
css: {'icon-file-archive': !downloadAsZipLoading(), 'icon-spinner': downloadAsZipLoading()}"></i>
|
||||||
|
<span class="g-ui-link" data-bind="click: downloadAsZip"
|
||||||
|
data-i18n="MESSAGE/LINK_DOWNLOAD_AS_ZIP"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="showImages" data-bind="visible: message().hasImages(), click: showImages"
|
||||||
|
data-icon="🖼" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div data-bind="hidden: messageLoadingThrottle">
|
<div class="openpgp-control encrypted" data-bind="visible: message().pgpEncrypted(), css: {'success': message().pgpDecrypted()}">
|
||||||
<div class="bodySubHeader">
|
<span data-icon="🔒" data-i18n="OPENPGP/ENCRYPTED_MESSAGE"></span>
|
||||||
<div class="readReceipt" data-bind="visible: askReadReceipt, click: readReceipt"
|
<button class="btn" data-bind="visible: pgpSupported, click: pgpDecrypt" data-i18n="OPENPGP/BUTTON_DECRYPT"></button>
|
||||||
data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div>
|
|
||||||
<details class="attachmentsPlace" data-bind="visible: hasAttachments, css: {'selection-mode' : showAttachmentControls}">
|
|
||||||
<summary data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></summary>
|
|
||||||
<!-- ko ifnot: simpleAttachmentsList -->
|
|
||||||
<ul class="attachmentList" data-bind="foreach: listAttachments">
|
|
||||||
<li class="attachmentItem" draggable="true"
|
|
||||||
data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
|
|
||||||
<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
|
|
||||||
<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="visible: !hasThumbnail(), css: iconClass()"></i>
|
|
||||||
<div class="iconBG" data-bind="attr: { 'style': thumbnailStyle() }"></div>
|
|
||||||
<div class="iconPreview fontastic">👁</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="showPreplay">
|
|
||||||
<i class="iconMain" data-bind="css: iconClass()"></i>
|
|
||||||
<div class="iconPreview fontastic">▶</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="attachmentNameParent">
|
|
||||||
<div class="attachmentName" data-bind="text: fileName"></div>
|
|
||||||
<div class="attachmentSize" data-bind="text: friendlySize()"></div>
|
|
||||||
</div>
|
|
||||||
<div class="checkboxAttachment fontastic"
|
|
||||||
data-bind="visible: download, text: checked() ? '☑' : '☐', click: toggleChecked"></div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<!-- /ko -->
|
|
||||||
<!-- ko if: simpleAttachmentsList -->
|
|
||||||
<ul class="attachmentListSimple" data-bind="foreach: 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: toggleChecked"></i>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<!-- /ko -->
|
|
||||||
<i class="fontastic controls-handle" data-bind="visible: allowAttachmentControls(), click: toggleAttachmentControls">⚙</i>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<div class="attachmentsControls"
|
|
||||||
data-bind="visible: showAttachmentControls() && hasAttachments()">
|
|
||||||
|
|
||||||
<span data-bind="visible: downloadAsZipAllowed">
|
|
||||||
<i class="fontastic iconcolor-red" data-bind="visible: downloadAsZipError">✖</i>
|
|
||||||
<i class="icon-file-archive" data-bind="visible: !downloadAsZipError(),
|
|
||||||
css: {'icon-file-archive': !downloadAsZipLoading(), 'icon-spinner': downloadAsZipLoading()}"></i>
|
|
||||||
<span class="g-ui-link" data-bind="click: downloadAsZip"
|
|
||||||
data-i18n="MESSAGE/LINK_DOWNLOAD_AS_ZIP"></span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="showImages" data-bind="visible: message().hasImages(), click: showImages"
|
|
||||||
data-icon="🖼" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="openpgp-control encrypted" data-bind="visible: message().pgpEncrypted(), css: {'success': message().pgpDecrypted()}">
|
|
||||||
<span data-icon="🔒" data-i18n="OPENPGP/ENCRYPTED_MESSAGE"></span>
|
|
||||||
<button class="btn" data-bind="visible: pgpSupported, click: pgpDecrypt" data-i18n="OPENPGP/BUTTON_DECRYPT"></button>
|
|
||||||
</div>
|
|
||||||
<div class="openpgp-control signed" data-bind="visible: message().pgpSigned(), css: {'success': message().pgpVerified() && message().pgpVerified().success, 'error': message().pgpVerified() && !message().pgpVerified().success}">
|
|
||||||
<span data-icon="✍" data-i18n="OPENPGP/SIGNED_MESSAGE"></span>
|
|
||||||
<button class="btn" data-bind="visible: pgpSupported, click: pgpVerify" data-i18n="OPENPGP/BUTTON_VERIFY"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bodyText" data-bind="initDom: messagesBodiesDom"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="openpgp-control signed" data-bind="visible: message().pgpSigned(), css: {'success': message().pgpVerified() && message().pgpVerified().success, 'error': message().pgpVerified() && !message().pgpVerified().success}">
|
||||||
|
<span data-icon="✍" data-i18n="OPENPGP/SIGNED_MESSAGE"></span>
|
||||||
|
<button class="btn" data-bind="visible: pgpSupported, click: pgpVerify" data-i18n="OPENPGP/BUTTON_VERIFY"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bodyText" data-bind="initDom: messagesBodiesDom"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /ko -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- /ko -->
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue