Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-27 02:59:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added: resize messages list vertical

Browse source
This commit is contained in:
djmaze 2021-11-05 10:20:06 +01:00
parent 5188a88e95
commit 263e595ba2
10 changed files with 450 additions and 465 deletions
Download patch file Download diff file Expand all files Collapse all files

81
dev/App/User.js
View file

@ -1,7 +1,7 @@
import 'External/User/ko';
import { isArray, arrayLength, pString, forEachObjectValue } from 'Common/Utils';
import { delegateRunOnDestroy, mailToHelper } from 'Common/UtilsUser';
import { delegateRunOnDestroy, mailToHelper, setLayoutResizer } from 'Common/UtilsUser';
import {
Capa,
@ -10,7 +10,6 @@ import {
} from 'Common/Enums';
import {
Layout,
FolderType,
SetSystemFoldersNotification,
MessageSetAction,
@ -679,83 +678,11 @@ class AppUser extends AbstractApp {
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
}
setLayoutResizer(source, target, sClientSideKeyName, mode) {
if (mode) {
source.classList.add('resizable');
if (!source.querySelector('.resizer')) {
const resizer = createElement('div', {'class':'resizer'}),
cssint = s => parseFloat(getComputedStyle(source, null).getPropertyValue(s).replace('px', ''));
source.append(resizer);
resizer.addEventListener('mousedown', {
source: source,
mode: mode,
handleEvent: function(e) {
if ('mousedown' == e.type) {
e.preventDefault();
this.pos = ('width' == this.mode) ? e.pageX : e.pageY;
this.min = cssint('min-'+this.mode);
this.max = cssint('max-'+this.mode);
this.org = cssint(this.mode);
addEventListener('mousemove', this);
addEventListener('mouseup', this);
} else if ('mousemove' == e.type) {
const length = this.org + (('width' == this.mode ? e.pageX : e.pageY) - this.pos);
if (length >= this.min && length <= this.max ) {
this.source.style[this.mode] = length + 'px';
}
} else if ('mouseup' == e.type) {
removeEventListener('mousemove', this);
removeEventListener('mouseup', this);
}
}
});
if ('width' == mode) {
source.observer = new ResizeObserver(() => {
target.style.left = source.offsetWidth + 'px';
Local.set(sClientSideKeyName, source.offsetWidth);
});
} else {
source.observer = new ResizeObserver(() => {
target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
Local.set(sClientSideKeyName, source.offsetHeight);
});
}
}
source.observer.observe(source, { box: 'border-box' });
const length = Local.get(sClientSideKeyName);
if (length) {
if ('width' == mode) {
source.style.width = length + 'px';
} else {
source.style.height = length + 'px';
}
}
} else {
source.observer && source.observer.disconnect();
source.classList.remove('resizable');
target.removeAttribute('style');
source.removeAttribute('style');
}
}
initHorizontalLayoutResizer() {
const top = doc.querySelector('.b-message-list-wrapper'),
bottom = doc.querySelector('.b-message-view-wrapper'),
fToggle = () => {
this.setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,
(ThemeStore.isMobile() || Layout.BottomPreview !== SettingsUserStore.layout()) ? null : 'height');
};
if (top && bottom) {
fToggle();
addEventListener('rl-layout', fToggle);
}
}
initVerticalLayoutResizer() {
initLeftSideLayoutResizer() {
const left = elementById('rl-left'),
right = elementById('rl-right'),
fToggle = () =>
this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
(ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width');
if (left && right) {
fToggle();
@ -868,7 +795,7 @@ class AppUser extends AbstractApp {
);
SettingsUserStore.delayLogout();
setTimeout(() => this.initVerticalLayoutResizer(), 1);
setTimeout(() => this.initLeftSideLayoutResizer(), 1);
setInterval(this.reloadTime(), 60000);

110
dev/Common/UtilsUser.js
View file

@ -5,21 +5,23 @@ import { isArray } from 'Common/Utils';
import { createElement } from 'Common/Globals';
import { FolderUserStore } from 'Stores/User/Folder';
import { SettingsUserStore } from 'Stores/User/Settings';
import * as Local from 'Storage/Client';
export const
/**
* @param {(string|number)} value
* @param {boolean=} includeZero = true
* @returns {boolean}
*/
export function isPosNumeric(value) {
isPosNumeric = (value) => {
return null != value && /^[0-9]*$/.test(value.toString());
}
},
/**
* @param {string} html
* @returns {string}
*/
export function htmlToPlain(html) {
htmlToPlain = (html) => {
let pos = 0,
limit = 800,
iP1 = 0,
@ -112,14 +114,14 @@ export function htmlToPlain(html) {
}
return text.replace(/__bq__start__|__bq__end__/gm, '').trim();
}
},
/**
* @param {string} plain
* @param {boolean} findEmailAndLinksInText = false
* @returns {string}
*/
export function plainToHtml(plain) {
plainToHtml = (plain) => {
plain = plain.toString().replace(/\r/g, '');
plain = plain.replace(/^>[> ]>+/gm, ([match]) => (match ? match.replace(/[ ]+/g, '') : match));
@ -170,12 +172,7 @@ export function plainToHtml(plain) {
.replace(/~~~blockquote~~~[\s]*/g, '<blockquote>')
.replace(/[\s]*~~~\/blockquote~~~/g, '</blockquote>')
.replace(/\n/g, '<br/>');
}
rl.Utils = {
htmlToPlain: htmlToPlain,
plainToHtml: plainToHtml
};
},
/**
* @param {Array=} aDisabled
@ -185,14 +182,14 @@ rl.Utils = {
* @param {boolean=} bNoSelectSelectable Used in FolderCreatePopupView
* @returns {Array}
*/
export function folderListOptionsBuilder(
folderListOptionsBuilder = (
aDisabled,
aHeaderLines,
fRenameCallback,
fDisableCallback,
bNoSelectSelectable,
aList = FolderUserStore.folderList()
) {
) => {
const
aResult = [],
sDeepPrefix = '\u00A0\u00A0\u00A0',
@ -238,23 +235,23 @@ export function folderListOptionsBuilder(
foldersWalk(aList);
return aResult;
}
},
/**
* Call the Model/CollectionModel onDestroy() to clear knockout functions/objects
* @param {Object|Array} objectOrObjects
* @returns {void}
*/
export function delegateRunOnDestroy(objectOrObjects) {
delegateRunOnDestroy = (objectOrObjects) => {
objectOrObjects && (isArray(objectOrObjects) ? objectOrObjects : [objectOrObjects]).forEach(
obj => obj.onDestroy && obj.onDestroy()
);
}
},
/**
* @returns {function}
*/
export function computedPaginatorHelper(koCurrentPage, koPageCount) {
computedPaginatorHelper = (koCurrentPage, koPageCount) => {
return () => {
const currentPage = koCurrentPage(),
pageCount = koPageCount(),
@ -335,13 +332,13 @@ export function computedPaginatorHelper(koCurrentPage, koPageCount) {
return result;
};
}
},
/**
* @param {string} mailToUrl
* @returns {boolean}
*/
export function mailToHelper(mailToUrl) {
mailToHelper = (mailToUrl) => {
if (
mailToUrl &&
'mailto:' ===
@ -397,9 +394,78 @@ export function mailToHelper(mailToUrl) {
}
return false;
}
},
export function showMessageComposer(params = [])
showMessageComposer = (params = []) =>
{
rl.app.showMessageComposer(params);
}
},
setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
{
if (source.layoutResizer && source.layoutResizer.mode != mode) {
target.removeAttribute('style');
source.removeAttribute('style');
}
if (mode) {
source.classList.add('resizable');
if (!source.layoutResizer) {
const resizer = createElement('div', {'class':'resizer'}),
size = {},
cssint = s => {
let value = getComputedStyle(source, null)[s].replace('px', '');
if (value.includes('%')) {
value = source.parentElement['width'==resizer.mode ? 'offsetWidth' : 'offsetHeight']
* value.replace('%', '') / 100;
}
return parseFloat(value);
};
source.layoutResizer = resizer;
source.append(resizer);
resizer.addEventListener('mousedown', {
handleEvent: function(e) {
if ('mousedown' == e.type) {
e.preventDefault();
size.pos = ('width' == resizer.mode) ? e.pageX : e.pageY;
size.min = cssint('min-'+resizer.mode);
size.max = cssint('max-'+resizer.mode);
size.org = cssint(resizer.mode);
addEventListener('mousemove', this);
addEventListener('mouseup', this);
} else if ('mousemove' == e.type) {
const length = size.org + (('width' == resizer.mode ? e.pageX : e.pageY) - size.pos);
if (length >= size.min && length <= size.max ) {
source.style[resizer.mode] = length + 'px';
}
} else if ('mouseup' == e.type) {
removeEventListener('mousemove', this);
removeEventListener('mouseup', this);
}
}
});
source.observer = new ResizeObserver(() => {
if ('width' == resizer.mode) {
target.style.left = source.offsetWidth + 'px';
Local.set(sClientSideKeyName, source.offsetWidth);
} else {
target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
Local.set(sClientSideKeyName, source.offsetHeight);
}
});
}
source.layoutResizer.mode = mode;
source.observer.observe(source, { box: 'border-box' });
const length = Local.get(sClientSideKeyName);
if (length) {
source.style[mode] = length + 'px';
}
} else {
source.observer && source.observer.disconnect();
source.classList.remove('resizable');
}
};
rl.Utils = {
htmlToPlain: htmlToPlain,
plainToHtml: plainToHtml
};

1
dev/Knoin/Knoin.js
View file

@ -305,7 +305,6 @@ export const
hasher.init();
setTimeout(() => $htmlCL.remove('rl-started-trigger'), 100);
setTimeout(() => $htmlCL.add('rl-started-delay'), 200);
const c = elementById('rl-content'), l = elementById('rl-loading');
c && (c.hidden = false);

21
dev/Screen/User/MailBox.js
View file

@ -1,8 +1,11 @@
import { Scope } from 'Common/Enums';
import { Layout, ClientSideKeyName } from 'Common/EnumsUser';
import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
import { pString, pInt } from 'Common/Utils';
import { setLayoutResizer } from 'Common/UtilsUser';
import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
import { i18n } from 'Common/Translator';
import { SettingsUserStore } from 'Stores/User/Settings';
import { AppUserStore } from 'Stores/User/App';
import { AccountUserStore } from 'Stores/User/Account';
@ -99,7 +102,23 @@ export class MailBoxUserScreen extends AbstractScreen {
* @returns {void}
*/
onBuild() {
setTimeout(() => rl.app.initHorizontalLayoutResizer(), 1);
setTimeout(() => {
// initMailboxLayoutResizer
const top = doc.querySelector('.RL-MailMessageList'),
bottom = doc.querySelector('.RL-MailMessageView'),
fToggle = () => {
let layout = SettingsUserStore.layout();
setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,
(ThemeStore.isMobile() || Layout.NoPreview === layout)
? null
: (Layout.SidePreview === layout ? 'width' : 'height')
);
};
if (top && bottom) {
fToggle();
addEventListener('rl-layout', fToggle);
}
}, 1);
doc.addEventListener('click', event =>
event.target.closest('#rl-right') && moveAction(false)

17
dev/Styles/Animations.less
View file

@ -8,19 +8,12 @@
100% {transform: translateX(0)}
}
html.rl-started-delay {
#rl-left {
transition: width 0.3s ease-out;
}
#rl-left {
transition: width 0.3s ease-out;
}
#rl-right {
transition: left 0.3s ease-out, right 0.3s ease-out;
}
#rl-sub-right {
transition: left 0.3s ease-out;
}
#rl-right {
transition: left 0.3s ease-out, right 0.3s ease-out;
}
@media screen and (min-width: 1000px) {

67
dev/Styles/User/Layout.less
View file

@ -68,7 +68,9 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
min-width: 155px;
max-width: 350px;
}
#rl-left > .resizer {
#rl-left > .resizer,
.rl-side-preview-pane .RL-MailMessageList > .resizer {
cursor: ew-resize;
height: 100%;
right: 0;
@ -105,13 +107,17 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
}
}
.b-message-list-wrapper.resizable {
resize: vertical;
overflow: hidden;
min-height: 200px;
max-height: 500px;
.rl-side-preview-pane .RL-MailMessageList.resizable {
resize: horizontal;
min-width: 320px;
max-width: 60%;
}
.b-message-list-wrapper > .resizer {
.rl-bottom-preview-pane .RL-MailMessageList.resizable {
resize: vertical;
min-height: 200px;
max-height: 60%;
}
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
@ -120,7 +126,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
}
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
.b-message-list-wrapper > .resizer {
.RL-MailMessageList > .resizer {
display: block;
}
@ -129,18 +135,18 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth;
}
#rl-sub-left {
.RL-MailMessageList {
position: absolute;
top: 0;
bottom: 0;
top: 50px;
bottom: @rlBottomMargin;
left: 0;
width: 50%;
}
#rl-sub-right {
.RL-MailMessageView {
position: absolute;
top: 0;
bottom: 0;
top: 50px + @rlLowMargin;
bottom: 13px;
right: 0;
left: 50%;
@ -244,11 +250,11 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth + 20;
}
#rl-sub-left {
.RL-MailMessageList {
width: 40%;
}
#rl-sub-right {
.RL-MailMessageView {
left: 40%;
}
}
@ -304,45 +310,34 @@ html.rl-left-panel-disabled {
html.rl-mobile,
html.rl-no-preview-pane {
#rl-sub-left {
.RL-MailMessageList {
right: @rlBottomMargin !important;
width: inherit;
}
#rl-sub-right {
.RL-MailMessageView {
left: 0 !important;
}
}
html.rl-mobile #rl-left > .resizer,
html.rl-side-preview-pane:not(.rl-mobile) #rl-right .resizer {
html.rl-no-preview-pane #rl-right .resizer,
html.rl-mobile #rl-right .resizer {
display: none !important;
}
html.rl-bottom-preview-pane:not(.rl-mobile) {
#rl-sub-left {
.RL-MailMessageList {
right: @rlBottomMargin !important;
bottom: inherit;
width: inherit;
.b-message-list-wrapper {
bottom: inherit;
height: 300px;
box-shadow: none;
}
height: 300px;
}
#rl-sub-right {
.RL-MailMessageView {
left: 0 !important;
.b-message-view-wrapper {
top: 356px;
left: 0;
right: 5px;
box-shadow: none;
}
top: 356px;
}
}

10
dev/Styles/User/MessageList.less
View file

@ -12,10 +12,11 @@ html.rl-no-preview-pane {
}
.messageList {
height: 100%;
.toolbar {
position: absolute;
top: 0;
top: -50px;
right: 0;
left: 0;
height: 30px;
@ -59,13 +60,8 @@ html.rl-no-preview-pane {
}
.b-message-list-wrapper {
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: @rlBottomMargin;
border: 1px solid @rlMainDarkColor;
height: 100%;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;

18
dev/Styles/User/MessageView.less
View file

@ -3,10 +3,11 @@
}
.messageView {
height: 100%;
.toolbar {
position: absolute;
top: 0;
top: -50px - @rlLowMargin;
right: 0;
left: 0;
height: 30px;
@ -15,19 +16,10 @@
}
.b-content {
position: absolute;
margin: 0;
top: 50px + @rlLowMargin;
bottom: @rlLowMargin + @rlBottomMargin;
right: @rlLowMargin;
left: -2px;
/*overflow: hidden;*/
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
.b-message-view-checked-helper {
text-align: center;

2
snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html
View file

@ -1,4 +1,4 @@
<div id="rl-sub-left" class="messageList g-ui-user-select-none"
<div class="messageList g-ui-user-select-none"
data-bind="css: {'message-selected': isMessageSelected, 'focused': messageListFocused() }">
<div class="toolbar">
<div class="btn-toolbar">

588
snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
View file

@ -1,320 +1,318 @@
<div id="rl-sub-right">
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'focused': messageFocused}">
<div class="toolbar top-toolbar g-ui-user-select-none">
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
<a class="btn buttonClose fontastic" data-bind="command: closeMessageCommand">✖</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: messageEditCommand">🖉</a>
</div>
<div class="btn-group">
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
<a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete 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 class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'focused': messageFocused}">
<div class="toolbar top-toolbar g-ui-user-select-none">
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
<a class="btn buttonClose fontastic" data-bind="command: closeMessageCommand">✖</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: messageEditCommand">🖉</a>
</div>
<div class="btn-group">
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<i class="icon-archive"></i>
</a>
<a class="btn button-spam fontastic" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
<a class="btn button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
<i class="icon-check-mark-circle-two"></i>
</a>
<a class="btn button-delete 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 b-message-view-wrapper">
<div style="height: 100%">
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
<div class="backdrop-message">
<i class="fontastic">📁</i>
<span data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span>
</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-content b-message-view-wrapper">
<div style="height: 100%">
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
<div class="backdrop-message">
<i class="fontastic">📁</i>
<span data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span>
</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 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="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 fontastic"
data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
<a class="btn btn-thin-2 btn-transparent buttonReplyAll fontastic"
data-bind="visible: 'replyall' === lastReplyAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
<a class="btn btn-thin-2 btn-transparent buttonForward fontastic"
data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand" data-i18n="[title]MESSAGE/BUTTON_FORWARD">→</a>
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
<a class="btn btn-thin-2 btn-transparent dropdown-toggle" id="more-view-dropdown-id" href="#" tabindex="-1" style="margin-left: -4px; margin-right: 2px">▾</a>
<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
<div data-bind="visible: !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 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="command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="e-item dividerbar" 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 () { 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 () { 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-mobile" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT" style="margin-right: 5px">
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a>
<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 fontastic"
data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
<a class="btn btn-thin-2 btn-transparent buttonReplyAll fontastic"
data-bind="visible: 'replyall' === lastReplyAction(), command: replyAllCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY_ALL">↞</a>
<a class="btn btn-thin-2 btn-transparent buttonForward fontastic"
data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand" data-i18n="[title]MESSAGE/BUTTON_FORWARD">→</a>
<div class="btn-group" data-bind="registerBootstrapDropdown: true" style="display: inline-block">
<a class="btn btn-thin-2 btn-transparent dropdown-toggle" id="more-view-dropdown-id" href="#" tabindex="-1" style="margin-left: -4px; margin-right: 2px">▾</a>
<ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
<div data-bind="visible: !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 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="command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="e-item dividerbar" 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 () { 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 () { 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 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 fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
<span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: viewIsFlagged() ? '★' : '☆', css: {'flagOn': viewIsFlagged, 'flagOff': !viewIsFlagged()}"></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="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span>
</div>
<div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">
<div class="informationShort">
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
<span data-bind="visible: viewFromDkimVisibility">
&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</span>
<div data-bind="visible: 0 < viewTimeStamp()">
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
</div>
</div>
<div class="informationShortWrp">
<div class="informationShort" data-bind="visible: viewTo">
<span data-i18n="GLOBAL/TO"></span>:&nbsp;
<span data-bind="text: viewTo"></span>
</div>
<div class="informationShort" data-bind="visible: viewCc">
<span data-i18n="GLOBAL/CC"></span>:&nbsp;
<span data-bind="text: viewCc"></span>
</div>
</div>
<div class="informationShort" data-bind="visible: viewSpamStatus()">
<span data-i18n="MESSAGE/SPAM_SCORE"></span>:&nbsp;
<meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: viewSpamScore, title: viewSpamStatus"></meter>
<div class="btn-group hide-mobile" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT" style="margin-right: 5px">
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</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 fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
<span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: viewIsFlagged() ? '★' : '☆', css: {'flagOn': viewIsFlagged, 'flagOff': !viewIsFlagged()}"></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="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span>
</div>
<div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">
<div class="informationShort">
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
<span data-bind="visible: viewFromDkimVisibility">
&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</span>
<div data-bind="visible: 0 < viewTimeStamp()">
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
</div>
</div>
<div class="informationFull" data-bind="visible: showFullInfo()">
<table>
<tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="GLOBAL/FROM"></td>
<td><span data-bind="text: viewFrom, title: viewFrom"></span>
<span data-bind="visible: viewFromDkimVisibility">
&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</span>
</td>
</tr>
<tr data-bind="visible: '' !== viewTo()">
<td data-i18n="GLOBAL/TO"></td>
<td data-bind="text: viewTo, title: viewTo"></td>
</tr>
<tr data-bind="visible: '' !== viewCc()">
<td data-i18n="GLOBAL/CC"></td>
<td data-bind="text: viewCc, title: viewCc"></td>
</tr>
<tr data-bind="visible: '' !== viewBcc()">
<td data-i18n="GLOBAL/BCC"></td>
<td data-bind="text: viewBcc, title: viewBcc"></td>
</tr>
<tr data-bind="visible: '' !== viewReplyTo()">
<td data-i18n="GLOBAL/REPLY_TO"></td>
<td data-bind="text: viewReplyTo, title: viewReplyTo"></td>
</tr>
<tr data-bind="visible: 0 < viewTimeStamp()">
<td data-i18n="MESSAGE/LABEL_DATE"></td>
<td>
<time data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>
<div class="informationShortWrp">
<div class="informationShort" data-bind="visible: viewTo">
<span data-i18n="GLOBAL/TO"></span>:&nbsp;
<span data-bind="text: viewTo"></span>
</div>
<div class="informationShort" data-bind="visible: viewCc">
<span data-i18n="GLOBAL/CC"></span>:&nbsp;
<span data-bind="text: viewCc"></span>
</div>
</div>
<div class="informationShort" data-bind="visible: viewSpamStatus()">
<span data-i18n="MESSAGE/SPAM_SCORE"></span>:&nbsp;
<meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: viewSpamScore, title: viewSpamStatus"></meter>
</div>
</div>
<div class="informationFull" data-bind="visible: showFullInfo()">
<table>
<tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="GLOBAL/FROM"></td>
<td><span data-bind="text: viewFrom, title: viewFrom"></span>
<span data-bind="visible: viewFromDkimVisibility">
&nbsp;
(<time data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>)
</td>
</tr>
<tr data-bind="visible: 0 < viewSpamScore()">
<td data-i18n="MESSAGE/SPAM_SCORE"></td>
<td><span data-bind="text: viewSpamScore, title: viewSpamStatus"></span>%</td>
</tr>
<tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td>
<td class="size" data-bind="text: viewSize"></td>
</tr>
</table>
</div>
<div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</span>
</td>
</tr>
<tr data-bind="visible: '' !== viewTo()">
<td data-i18n="GLOBAL/TO"></td>
<td data-bind="text: viewTo, title: viewTo"></td>
</tr>
<tr data-bind="visible: '' !== viewCc()">
<td data-i18n="GLOBAL/CC"></td>
<td data-bind="text: viewCc, title: viewCc"></td>
</tr>
<tr data-bind="visible: '' !== viewBcc()">
<td data-i18n="GLOBAL/BCC"></td>
<td data-bind="text: viewBcc, title: viewBcc"></td>
</tr>
<tr data-bind="visible: '' !== viewReplyTo()">
<td data-i18n="GLOBAL/REPLY_TO"></td>
<td data-bind="text: viewReplyTo, title: viewReplyTo"></td>
</tr>
<tr data-bind="visible: 0 < viewTimeStamp()">
<td data-i18n="MESSAGE/LABEL_DATE"></td>
<td>
<time data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>
&nbsp;
(<time data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>)
</td>
</tr>
<tr data-bind="visible: 0 < viewSpamScore()">
<td data-i18n="MESSAGE/SPAM_SCORE"></td>
<td><span data-bind="text: viewSpamScore, title: viewSpamStatus"></span>%</td>
</tr>
<tr data-bind="visible: '' !== viewFrom()">
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td>
<td class="size" data-bind="text: viewSize"></td>
</tr>
</table>
</div>
<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
<div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
</div>
<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
<div>
<span class="buttonFull" data-bind="click: toggleFullScreen">
<i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i>
</span>
<div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()">
<i class="icon-spinner"></i>
<span data-i18n="GLOBAL/LOADING"></span>
</div>
<div>
<span class="buttonFull" data-bind="click: toggleFullScreen">
<i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i>
</span>
<div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()">
<i class="icon-spinner"></i>
<span data-i18n="GLOBAL/LOADING"></span>
</div>
</div>
<div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()">
<div class="bodySubHeader">
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages">
<i class="fontastic">🖼</i>
<span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
</div>
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt">
<i class="icon-mail"></i>
<span class="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" draggable="true"
data-bind="visible: !isLinked, 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="css: iconClass()"></i>
<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
<div class="iconPreview fontastic">👁</div>
</a>
</div>
<div class="showPreplay">
<div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()">
<div class="bodySubHeader">
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages">
<i class="fontastic">🖼</i>
<span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
</div>
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt">
<i class="icon-mail"></i>
<span class="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" draggable="true"
data-bind="visible: !isLinked, 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="css: iconClass()"></i>
<div class="iconPreview fontastic">▶</div>
</div>
<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
<div class="iconPreview fontastic">👁</div>
</a>
</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="showPreplay">
<i class="iconMain" data-bind="css: iconClass()"></i>
<div class="iconPreview fontastic">▶</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-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>
<button type="button" class="close" style="margin-right: 5px;"
data-bind="click: function () { showAttachmnetControls(false); showAttachmnetControlsState(false); }">×</button>
</div>
</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>
<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="bodyText g-ui-min-height-300"
data-bind="initDom: messagesBodiesDom"></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-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>
<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>