Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-05 15:37:03 +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 'External/User/ko';
import { isArray, arrayLength, pString, forEachObjectValue } from 'Common/Utils'; import { isArray, arrayLength, pString, forEachObjectValue } from 'Common/Utils';
import { delegateRunOnDestroy, mailToHelper } from 'Common/UtilsUser'; import { delegateRunOnDestroy, mailToHelper, setLayoutResizer } from 'Common/UtilsUser';
import { import {
Capa, Capa,
@ -10,7 +10,6 @@ import {
} from 'Common/Enums'; } from 'Common/Enums';
import { import {
Layout,
FolderType, FolderType,
SetSystemFoldersNotification, SetSystemFoldersNotification,
MessageSetAction, MessageSetAction,
@ -679,83 +678,11 @@ class AppUser extends AbstractApp {
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList); Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
} }
setLayoutResizer(source, target, sClientSideKeyName, mode) { initLeftSideLayoutResizer() {
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() {
const left = elementById('rl-left'), const left = elementById('rl-left'),
right = elementById('rl-right'), right = elementById('rl-right'),
fToggle = () => fToggle = () =>
this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize, setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
(ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width'); (ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width');
if (left && right) { if (left && right) {
fToggle(); fToggle();
@ -868,7 +795,7 @@ class AppUser extends AbstractApp {
); );
SettingsUserStore.delayLogout(); SettingsUserStore.delayLogout();
setTimeout(() => this.initVerticalLayoutResizer(), 1); setTimeout(() => this.initLeftSideLayoutResizer(), 1);
setInterval(this.reloadTime(), 60000); 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 { createElement } from 'Common/Globals';
import { FolderUserStore } from 'Stores/User/Folder'; import { FolderUserStore } from 'Stores/User/Folder';
import { SettingsUserStore } from 'Stores/User/Settings'; import { SettingsUserStore } from 'Stores/User/Settings';
import * as Local from 'Storage/Client';
export const
/** /**
* @param {(string|number)} value * @param {(string|number)} value
* @param {boolean=} includeZero = true * @param {boolean=} includeZero = true
* @returns {boolean} * @returns {boolean}
*/ */
export function isPosNumeric(value) { isPosNumeric = (value) => {
return null != value && /^[0-9]*$/.test(value.toString()); return null != value && /^[0-9]*$/.test(value.toString());
} },
/** /**
* @param {string} html * @param {string} html
* @returns {string} * @returns {string}
*/ */
export function htmlToPlain(html) { htmlToPlain = (html) => {
let pos = 0, let pos = 0,
limit = 800, limit = 800,
iP1 = 0, iP1 = 0,
@ -112,14 +114,14 @@ export function htmlToPlain(html) {
} }
return text.replace(/__bq__start__|__bq__end__/gm, '').trim(); return text.replace(/__bq__start__|__bq__end__/gm, '').trim();
} },
/** /**
* @param {string} plain * @param {string} plain
* @param {boolean} findEmailAndLinksInText = false * @param {boolean} findEmailAndLinksInText = false
* @returns {string} * @returns {string}
*/ */
export function plainToHtml(plain) { plainToHtml = (plain) => {
plain = plain.toString().replace(/\r/g, ''); plain = plain.toString().replace(/\r/g, '');
plain = plain.replace(/^>[> ]>+/gm, ([match]) => (match ? match.replace(/[ ]+/g, '') : match)); plain = plain.replace(/^>[> ]>+/gm, ([match]) => (match ? match.replace(/[ ]+/g, '') : match));
@ -170,12 +172,7 @@ export function plainToHtml(plain) {
.replace(/~~~blockquote~~~[\s]*/g, '<blockquote>') .replace(/~~~blockquote~~~[\s]*/g, '<blockquote>')
.replace(/[\s]*~~~\/blockquote~~~/g, '</blockquote>') .replace(/[\s]*~~~\/blockquote~~~/g, '</blockquote>')
.replace(/\n/g, '<br/>'); .replace(/\n/g, '<br/>');
} },
rl.Utils = {
htmlToPlain: htmlToPlain,
plainToHtml: plainToHtml
};
/** /**
* @param {Array=} aDisabled * @param {Array=} aDisabled
@ -185,14 +182,14 @@ rl.Utils = {
* @param {boolean=} bNoSelectSelectable Used in FolderCreatePopupView * @param {boolean=} bNoSelectSelectable Used in FolderCreatePopupView
* @returns {Array} * @returns {Array}
*/ */
export function folderListOptionsBuilder( folderListOptionsBuilder = (
aDisabled, aDisabled,
aHeaderLines, aHeaderLines,
fRenameCallback, fRenameCallback,
fDisableCallback, fDisableCallback,
bNoSelectSelectable, bNoSelectSelectable,
aList = FolderUserStore.folderList() aList = FolderUserStore.folderList()
) { ) => {
const const
aResult = [], aResult = [],
sDeepPrefix = '\u00A0\u00A0\u00A0', sDeepPrefix = '\u00A0\u00A0\u00A0',
@ -238,23 +235,23 @@ export function folderListOptionsBuilder(
foldersWalk(aList); foldersWalk(aList);
return aResult; return aResult;
} },
/** /**
* Call the Model/CollectionModel onDestroy() to clear knockout functions/objects * Call the Model/CollectionModel onDestroy() to clear knockout functions/objects
* @param {Object|Array} objectOrObjects * @param {Object|Array} objectOrObjects
* @returns {void} * @returns {void}
*/ */
export function delegateRunOnDestroy(objectOrObjects) { delegateRunOnDestroy = (objectOrObjects) => {
objectOrObjects && (isArray(objectOrObjects) ? objectOrObjects : [objectOrObjects]).forEach( objectOrObjects && (isArray(objectOrObjects) ? objectOrObjects : [objectOrObjects]).forEach(
obj => obj.onDestroy && obj.onDestroy() obj => obj.onDestroy && obj.onDestroy()
); );
} },
/** /**
* @returns {function} * @returns {function}
*/ */
export function computedPaginatorHelper(koCurrentPage, koPageCount) { computedPaginatorHelper = (koCurrentPage, koPageCount) => {
return () => { return () => {
const currentPage = koCurrentPage(), const currentPage = koCurrentPage(),
pageCount = koPageCount(), pageCount = koPageCount(),
@ -335,13 +332,13 @@ export function computedPaginatorHelper(koCurrentPage, koPageCount) {
return result; return result;
}; };
} },
/** /**
* @param {string} mailToUrl * @param {string} mailToUrl
* @returns {boolean} * @returns {boolean}
*/ */
export function mailToHelper(mailToUrl) { mailToHelper = (mailToUrl) => {
if ( if (
mailToUrl && mailToUrl &&
'mailto:' === 'mailto:' ===
@ -397,9 +394,78 @@ export function mailToHelper(mailToUrl) {
} }
return false; return false;
} },
export function showMessageComposer(params = []) showMessageComposer = (params = []) =>
{ {
rl.app.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(); hasher.init();
setTimeout(() => $htmlCL.remove('rl-started-trigger'), 100); setTimeout(() => $htmlCL.remove('rl-started-trigger'), 100);
setTimeout(() => $htmlCL.add('rl-started-delay'), 200);
const c = elementById('rl-content'), l = elementById('rl-loading'); const c = elementById('rl-content'), l = elementById('rl-loading');
c && (c.hidden = false); c && (c.hidden = false);

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

@ -1,8 +1,11 @@
import { Scope } from 'Common/Enums'; import { Scope } from 'Common/Enums';
import { Layout, ClientSideKeyName } from 'Common/EnumsUser';
import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals'; import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
import { pString, pInt } from 'Common/Utils'; import { pString, pInt } from 'Common/Utils';
import { setLayoutResizer } from 'Common/UtilsUser';
import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache'; import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
import { i18n } from 'Common/Translator'; import { i18n } from 'Common/Translator';
import { SettingsUserStore } from 'Stores/User/Settings';
import { AppUserStore } from 'Stores/User/App'; import { AppUserStore } from 'Stores/User/App';
import { AccountUserStore } from 'Stores/User/Account'; import { AccountUserStore } from 'Stores/User/Account';
@ -99,7 +102,23 @@ export class MailBoxUserScreen extends AbstractScreen {
* @returns {void} * @returns {void}
*/ */
onBuild() { 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 => doc.addEventListener('click', event =>
event.target.closest('#rl-right') && moveAction(false) event.target.closest('#rl-right') && moveAction(false)

17
dev/Styles/Animations.less
View file

@ -8,19 +8,12 @@
100% {transform: translateX(0)} 100% {transform: translateX(0)}
} }
html.rl-started-delay { #rl-left {
transition: width 0.3s ease-out;
}
#rl-left { #rl-right {
transition: width 0.3s ease-out; transition: left 0.3s ease-out, right 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;
}
} }
@media screen and (min-width: 1000px) { @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; min-width: 155px;
max-width: 350px; max-width: 350px;
} }
#rl-left > .resizer {
#rl-left > .resizer,
.rl-side-preview-pane .RL-MailMessageList > .resizer {
cursor: ew-resize; cursor: ew-resize;
height: 100%; height: 100%;
right: 0; right: 0;
@ -105,13 +107,17 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
} }
} }
.b-message-list-wrapper.resizable { .rl-side-preview-pane .RL-MailMessageList.resizable {
resize: vertical; resize: horizontal;
overflow: hidden; min-width: 320px;
min-height: 200px; max-width: 60%;
max-height: 500px;
} }
.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; cursor: ns-resize;
height: 5px; height: 5px;
left: 0; 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, html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
.b-message-list-wrapper > .resizer { .RL-MailMessageList > .resizer {
display: block; display: block;
} }
@ -129,18 +135,18 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth; left: @rlLeftWidth;
} }
#rl-sub-left { .RL-MailMessageList {
position: absolute; position: absolute;
top: 0; top: 50px;
bottom: 0; bottom: @rlBottomMargin;
left: 0; left: 0;
width: 50%; width: 50%;
} }
#rl-sub-right { .RL-MailMessageView {
position: absolute; position: absolute;
top: 0; top: 50px + @rlLowMargin;
bottom: 0; bottom: 13px;
right: 0; right: 0;
left: 50%; left: 50%;
@ -244,11 +250,11 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
left: @rlLeftWidth + 20; left: @rlLeftWidth + 20;
} }
#rl-sub-left { .RL-MailMessageList {
width: 40%; width: 40%;
} }
#rl-sub-right { .RL-MailMessageView {
left: 40%; left: 40%;
} }
} }
@ -304,45 +310,34 @@ html.rl-left-panel-disabled {
html.rl-mobile, html.rl-mobile,
html.rl-no-preview-pane { html.rl-no-preview-pane {
#rl-sub-left { .RL-MailMessageList {
right: @rlBottomMargin !important; right: @rlBottomMargin !important;
width: inherit; width: inherit;
} }
#rl-sub-right { .RL-MailMessageView {
left: 0 !important; left: 0 !important;
} }
} }
html.rl-mobile #rl-left > .resizer, 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; display: none !important;
} }
html.rl-bottom-preview-pane:not(.rl-mobile) { html.rl-bottom-preview-pane:not(.rl-mobile) {
#rl-sub-left { .RL-MailMessageList {
right: @rlBottomMargin !important; right: @rlBottomMargin !important;
bottom: inherit;
width: inherit; width: inherit;
height: 300px;
.b-message-list-wrapper {
bottom: inherit;
height: 300px;
box-shadow: none;
}
} }
#rl-sub-right { .RL-MailMessageView {
left: 0 !important; left: 0 !important;
top: 356px;
.b-message-view-wrapper {
top: 356px;
left: 0;
right: 5px;
box-shadow: none;
}
} }
} }

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

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

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

@ -3,10 +3,11 @@
} }
.messageView { .messageView {
height: 100%;
.toolbar { .toolbar {
position: absolute; position: absolute;
top: 0; top: -50px - @rlLowMargin;
right: 0; right: 0;
left: 0; left: 0;
height: 30px; height: 30px;
@ -15,19 +16,10 @@
} }
.b-content { .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; background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
.b-message-view-checked-helper { .b-message-view-checked-helper {
text-align: center; 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() }"> data-bind="css: {'message-selected': isMessageSelected, 'focused': messageListFocused() }">
<div class="toolbar"> <div class="toolbar">
<div class="btn-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="messageView" data-bind="css: {'message-selected': isMessageSelected, 'focused': messageFocused}"> <div class="toolbar top-toolbar g-ui-user-select-none">
<div class="toolbar top-toolbar g-ui-user-select-none"> <div class="messageButtons btn-toolbar">
<div class="messageButtons btn-toolbar"> <div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE"> <a class="btn buttonClose fontastic" data-bind="command: closeMessageCommand">✖</a>
<a class="btn buttonClose fontastic" data-bind="command: closeMessageCommand">✖</a> </div>
</div> <div class="btn-group" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT">
<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>
<a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a> </div>
</div> <div class="btn-group">
<div class="btn-group"> <a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
<a class="btn button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE"> <i class="icon-archive"></i>
<i class="icon-archive"></i> </a>
</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-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">
<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>
<i class="icon-check-mark-circle-two"></i> </a>
</a> <a class="btn button-delete fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
<a class="btn button-delete fontastic" data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a> </div>
</div> <div class="btn-group">
<div class="btn-group"> <a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a>
<a class="btn btn-thin buttonUp fontastic" data-bind="command: goUpCommand">❮</a> <a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
<a class="btn btn-thin buttonDown fontastic" data-bind="command: goDownCommand">❯</a>
</div>
</div> </div>
</div> </div>
<div class="b-content b-message-view-wrapper"> </div>
<div style="height: 100%"> <div class="b-content b-message-view-wrapper">
<div class="b-message-view-backdrop" data-bind="visible: moveAction"> <div style="height: 100%">
<div class="backdrop-message"> <div class="b-message-view-backdrop" data-bind="visible: moveAction">
<i class="fontastic">📁</i> <div class="backdrop-message">
<span data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span> <i class="fontastic">📁</i>
</div> <span data-i18n="MESSAGE/MESSAGE_VIEW_MOVE_DESC"></span>
</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>
</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 class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages(), text: messageError()">
</div> </div>
<div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()"> <div class="b-message-view-desc" data-i18n="MESSAGE/MESSAGE_VIEW_DESC" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
</div> </div>
<div class="message-fixed-button-toolbar" data-bind="visible: message"> <div class="message-fixed-button-toolbar" data-bind="visible: message">
<div class="btn-group" style="margin-right: -11px;"> <div class="btn-group" style="margin-right: -11px;">
<a class="btn btn-thin-2 btn-transparent buttonReply fontastic" <a class="btn btn-thin-2 btn-transparent buttonReply fontastic"
data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a> data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand" data-i18n="[title]MESSAGE/BUTTON_REPLY">←</a>
<a class="btn btn-thin-2 btn-transparent buttonReplyAll fontastic" <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> 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" <a class="btn btn-thin-2 btn-transparent buttonForward fontastic"
data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand" data-i18n="[title]MESSAGE/BUTTON_FORWARD">→</a> 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"> <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> <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"> <ul class="dropdown-menu g-ui-menu right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
<div data-bind="visible: !isDraftFolder()"> <div data-bind="visible: !isDraftFolder()">
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
<i class="fontastic">←</i> <i class="fontastic">←</i>
<span data-i18n="MESSAGE/BUTTON_REPLY"></span> <span data-i18n="MESSAGE/BUTTON_REPLY"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
<i class="fontastic">↞</i> <i class="fontastic">↞</i>
<span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span> <span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
<i class="fontastic">→</i> <i class="fontastic">→</i>
<span data-i18n="MESSAGE/BUTTON_FORWARD"></span> <span data-i18n="MESSAGE/BUTTON_FORWARD"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
<i class="fontastic">🖉</i> <i class="fontastic">🖉</i>
<span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span> <span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand"> <a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
<i class="fontastic">→</i> <i class="fontastic">→</i>
<span data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span> <span data-i18n="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
</a> </a>
</li> </li>
</div> </div>
<div class="dividerbar"> <div class="dividerbar">
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()"> <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"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i> <i class="icon-archive"></i>
<span data-i18n="GLOBAL/TO_ARCHIVE"></span> <span data-i18n="GLOBAL/TO_ARCHIVE"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()"> <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"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
<i class="fontastic">⚠</i> <i class="fontastic">⚠</i>
<span data-i18n="GLOBAL/SPAM"></span> <span data-i18n="GLOBAL/SPAM"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()"> <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"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: notSpamCommand">
<i class="icon-check-mark-circle-two"></i> <i class="icon-check-mark-circle-two"></i>
<span data-i18n="GLOBAL/NOT_SPAM"></span> <span data-i18n="GLOBAL/NOT_SPAM"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
<i class="fontastic">🗑</i> <i class="fontastic">🗑</i>
<span data-i18n="GLOBAL/DELETE"></span> <span data-i18n="GLOBAL/DELETE"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation" data-bind="command: deleteWithoutMoveCommand"> <li class="e-item" role="presentation" data-bind="command: deleteWithoutMoveCommand">
<a class="e-link menuitem" href="#" tabindex="-1"> <a class="e-link menuitem" href="#" tabindex="-1">
<i class="fontastic">🗑</i> <i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span> <span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a> </a>
</li> </li>
<li class="e-item dividerbar" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()"> <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 }"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewUnsubscribeLink }">
<i class="fontastic">✖</i> <i class="fontastic">✖</i>
<span data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></span> <span data-i18n="MESSAGE/BUTTON_UNSUBSCRIBE"></span>
</a> </a>
</li> </li>
</div> </div>
<div data-bind="visible: allowMessageActions" class="dividerbar"> <div data-bind="visible: allowMessageActions" class="dividerbar">
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } "> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } ">
<i class="fontastic">🖨</i> <i class="fontastic">🖨</i>
<span data-i18n="MESSAGE/MENU_PRINT"></span> <span data-i18n="MESSAGE/MENU_PRINT"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { message() && message().viewPopupMessage(); }"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { message() && message().viewPopupMessage(); }">
<i class="icon-popup"></i> <i class="icon-popup"></i>
<span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span> <span data-i18n="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
</a> </a>
</li> </li>
<li class="e-item dividerbar" role="presentation"> <li class="e-item dividerbar" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewViewLink }">
<i class="icon-file-code"></i> <i class="icon-file-code"></i>
<span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span> <span data-i18n="MESSAGE/MENU_VIEW_ORIGINAL"></span>
</a> </a>
</li> </li>
<li class="e-item" role="presentation"> <li class="e-item" role="presentation">
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }"> <a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="attr: { href: viewDownloadLink }">
<i class="icon-download"></i> <i class="icon-download"></i>
<span data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span> <span data-i18n="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
</a> </a>
</li> </li>
</div> </div>
</ul> </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> </div>
</div> </div>
<div data-bind="visible: message"> <div class="btn-group hide-mobile" data-bind="visible: isDraftFolder()" data-i18n="[title]MESSAGE/BUTTON_EDIT" style="margin-right: 5px">
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}"> <a class="btn btn-success buttonEdit fontastic" data-bind="command: messageEditCommand">🖉</a>
<div class="subjectParent"> </div>
<button class="close" data-bind="command: closeMessageCommand" style="margin-top: -2px;">×</button> </div>
<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> <div data-bind="visible: message">
<b style="color: red; margin-right: 5px" data-bind="visible: viewIsImportant">!</b> <div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
<span class="subject" data-bind="text: viewSubject, title: viewSubject, event: { 'dblclick': toggleFullScreen }"></span> <div class="subjectParent">
<span class="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span> <button class="close" data-bind="command: closeMessageCommand" style="margin-top: -2px;">×</button>
</div> <span class="infoParent g-ui-user-select-none fontastic" data-bind="click: function() { showFullInfo(!showFullInfo()); }">ℹ</span>
<div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }"> <span class="flagParent g-ui-user-select-none flagOff fontastic" data-bind="text: viewIsFlagged() ? '★' : '☆', css: {'flagOn': viewIsFlagged, 'flagOff': !viewIsFlagged()}"></span>
<div class="informationShort"> <b style="color: red; margin-right: 5px" data-bind="visible: viewIsImportant">!</b>
<span class="from" data-bind="html: viewFromShort, title: viewFrom"></span> <span class="subject" data-bind="text: viewSubject, title: viewSubject, event: { 'dblclick': toggleFullScreen }"></span>
<span data-bind="visible: viewFromDkimVisibility"> <span class="emptySubjectText" data-i18n="MESSAGE/EMPTY_SUBJECT_TEXT" data-bind="event: { 'dblclick': toggleFullScreen }"></span>
&nbsp; </div>
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i> <div data-bind="hidden: showFullInfo(), event: { 'dblclick': toggleFullScreen }">
</span> <div class="informationShort">
<div data-bind="visible: 0 < viewTimeStamp()"> <span class="from" data-bind="html: viewFromShort, title: viewFrom"></span>
(<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>) <span data-bind="visible: viewFromDkimVisibility">
</div> &nbsp;
</div> <i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
<div class="informationShortWrp"> </span>
<div class="informationShort" data-bind="visible: viewTo"> <div data-bind="visible: 0 < viewTimeStamp()">
<span data-i18n="GLOBAL/TO"></span>:&nbsp; (<time class="date" data-moment-format="FULL" data-bind="moment: viewTimeStamp"></time>)
<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> </div>
<div class="informationFull" data-bind="visible: showFullInfo()"> <div class="informationShortWrp">
<table> <div class="informationShort" data-bind="visible: viewTo">
<tr data-bind="visible: '' !== viewFrom()"> <span data-i18n="GLOBAL/TO"></span>:&nbsp;
<td data-i18n="GLOBAL/FROM"></td> <span data-bind="text: viewTo"></span>
<td><span data-bind="text: viewFrom, title: viewFrom"></span> </div>
<span data-bind="visible: viewFromDkimVisibility"> <div class="informationShort" data-bind="visible: viewCc">
&nbsp; <span data-i18n="GLOBAL/CC"></span>:&nbsp;
<i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i> <span data-bind="text: viewCc"></span>
</span> </div>
</td> </div>
</tr> <div class="informationShort" data-bind="visible: viewSpamStatus()">
<tr data-bind="visible: '' !== viewTo()"> <span data-i18n="MESSAGE/SPAM_SCORE"></span>:&nbsp;
<td data-i18n="GLOBAL/TO"></td> <meter min="0" max="100" optimum="0" low="33" high="66" data-bind="value: viewSpamScore, title: viewSpamStatus"></meter>
<td data-bind="text: viewTo, title: viewTo"></td> </div>
</tr> </div>
<tr data-bind="visible: '' !== viewCc()"> <div class="informationFull" data-bind="visible: showFullInfo()">
<td data-i18n="GLOBAL/CC"></td> <table>
<td data-bind="text: viewCc, title: viewCc"></td> <tr data-bind="visible: '' !== viewFrom()">
</tr> <td data-i18n="GLOBAL/FROM"></td>
<tr data-bind="visible: '' !== viewBcc()"> <td><span data-bind="text: viewFrom, title: viewFrom"></span>
<td data-i18n="GLOBAL/BCC"></td> <span data-bind="visible: viewFromDkimVisibility">
<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; &nbsp;
(<time data-moment-format="FROMNOW" data-bind="moment: viewTimeStamp"></time>) <i data-bind="css: viewFromDkimStatusIconClass, title: viewFromDkimStatusTitle"></i>
</td> </span>
</tr> </td>
<tr data-bind="visible: 0 < viewSpamScore()"> </tr>
<td data-i18n="MESSAGE/SPAM_SCORE"></td> <tr data-bind="visible: '' !== viewTo()">
<td><span data-bind="text: viewSpamScore, title: viewSpamStatus"></span>%</td> <td data-i18n="GLOBAL/TO"></td>
</tr> <td data-bind="text: viewTo, title: viewTo"></td>
<tr data-bind="visible: '' !== viewFrom()"> </tr>
<td data-i18n="POPUPS_FILTER/SELECT_FIELD_SIZE"></td> <tr data-bind="visible: '' !== viewCc()">
<td class="size" data-bind="text: viewSize"></td> <td data-i18n="GLOBAL/CC"></td>
</tr> <td data-bind="text: viewCc, title: viewCc"></td>
</table> </tr>
</div> <tr data-bind="visible: '' !== viewBcc()">
<div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div> <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>
<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }"> <div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
<div tabindex="0" data-bind="hasfocus: messageDomFocused"> </div>
<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
<div> <div>
<span class="buttonFull" data-bind="click: toggleFullScreen"> <span class="buttonFull" data-bind="click: toggleFullScreen">
<i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i> <i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i>
</span> </span>
<div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()"> <div class="loading g-ui-min-height-300" data-bind="visible: messageLoadingThrottle()">
<i class="icon-spinner"></i> <i class="icon-spinner"></i>
<span data-i18n="GLOBAL/LOADING"></span> <span data-i18n="GLOBAL/LOADING"></span>
</div>
</div> </div>
</div>
<div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()"> <div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()">
<div class="bodySubHeader"> <div class="bodySubHeader">
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages"> <div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages">
<i class="fontastic">🖼</i> <i class="fontastic">🖼</i>
<span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span> <span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
</div> </div>
<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt"> <div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt">
<i class="icon-mail"></i> <i class="icon-mail"></i>
<span class="text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span> <span class="text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span>
</div> </div>
<div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(), <div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(),
css: {'selection-mode' : showAttachmnetControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}"> css: {'selection-mode' : showAttachmnetControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}">
<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []"> <ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
<li class="attachmentItem" draggable="true" <li class="attachmentItem" draggable="true"
data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}"> 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() }"> <div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
<i class="hidePreview iconMain" data-bind="css: iconClass()"></i> <i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
<div class="showPreview"> <div class="showPreview">
<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank"> <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">
<i class="iconMain" data-bind="css: iconClass()"></i> <i class="iconMain" data-bind="css: iconClass()"></i>
<div class="iconPreview fontastic">▶</div> <div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
</div> <div class="iconPreview fontastic">👁</div>
</a>
</div> </div>
<div class="attachmentNameParent"> <div class="showPreplay">
<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="attachmentName" data-bind="text: fileName"></div> <i class="iconMain" data-bind="css: iconClass()"></i>
<div class="attachmentSize" data-bind="text: friendlySize"></div> <div class="iconPreview fontastic">▶</div>
</div> </div>
<div class="checkboxAttachment fontastic" </div>
data-bind="text: checked() ? '☑' : '☐', <div class="attachmentNameParent">
click: function () { checked(!checked()); return false }"></div> <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="attachmentName" data-bind="text: fileName"></div>
</li> <div class="attachmentSize" data-bind="text: friendlySize"></div>
</ul> </div>
<i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }">⚙</i> <div class="checkboxAttachment fontastic"
</div> data-bind="text: checked() ? '☑' : '☐',
click: function () { checked(!checked()); return false }"></div>
<div class="attachmentsControls" </li>
data-bind="visible: showAttachmnetControls() && message() && message().attachments().hasVisible()"> </ul>
<i class="fontastic controls-handle" data-bind="visible: allowAttachmnetControls() && !showAttachmnetControls(), click: function () { showAttachmnetControls(true); showAttachmnetControlsState(true); }">⚙</i>
<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>
<div class="bodyText g-ui-min-height-300" <div class="attachmentsControls"
data-bind="initDom: messagesBodiesDom"></div> 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>
<div class="bodyText g-ui-min-height-300"
data-bind="initDom: messagesBodiesDom"></div>
</div> </div>
</div> </div>
</div> </div>