Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-11 00:14:50 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.

Browse source 
And removed wysiwyg resize() in favor of flexbox.
This commit is contained in:
djmaze 2021-11-05 14:47:19 +01:00
parent d305e090c5
commit 789dc264f7
11 changed files with 386 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

7
dev/Common/Html.js
View file

@ -29,12 +29,6 @@ export class HtmlEditor {
this.onBlur = onBlur;
this.onModeChange = onModeChange;
this.resize = (() => {
try {
this.editor && this.editor.resize(element.clientWidth, element.clientHeight);
} catch (e) {} // eslint-disable-line no-empty
}).throttle(100);
if (element) {
let editor;
@ -42,7 +36,6 @@ export class HtmlEditor {
this.onReady = fn => onReady.push(fn);
const readyCallback = () => {
this.editor = editor;
this.resize();
this.onReady = fn => fn();
onReady.forEach(fn => fn());
};

6
dev/External/SquireUI.js vendored
View file

@ -540,12 +540,6 @@ class SquireUI
focus() {
('plain' == this.mode ? this.plain : this.squire).focus();
}
resize(width, height) {
height = Math.max(200, (height - this.wysiwyg.offsetTop)) + 'px';
this.wysiwyg.style.height = height;
this.plain.style.height = height;
}
}
this.SquireUI = SquireUI;

15
dev/Styles/User/Compose.less
View file

@ -2,21 +2,32 @@
.b-compose {
&.modal {
width: 98%;
display: flex;
flex-direction: column;
height: calc(100% - 52px);
max-width: 1000px;
min-height: calc(100% - 52px);
width: 98%;
}
.modal-body {
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
}
.textAreaParent, .attachmentAreaParent {
box-sizing: border-box;
height: 100%;
min-height: 200px;
position: relative;
}
.textAreaParent {
display: flex;
flex-direction: column;
}
.attachmentAreaParent {
border-top: 1px solid #ccc;
overflow-y: auto;

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

@ -13,6 +13,11 @@ html.rl-no-preview-pane {
.messageList {
height: 100%;
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
box-shadow: @rlMainShadow;
z-index: 101;
.toolbar {
position: absolute;
@ -25,14 +30,15 @@ html.rl-no-preview-pane {
white-space: nowrap;
}
.b-message-list-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.b-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 30px;
flex-shrink: 0;
padding: 7px;
z-index: 101;
background-color: var(--message-list-toolbar-bg-color, #eee);
// #gradient > .vertical(#f4f4f4, #dfdfdf);
@ -59,23 +65,9 @@ html.rl-no-preview-pane {
padding-right: 8px;
}
.b-message-list-wrapper {
border: 1px solid @rlMainDarkColor;
height: 100%;
box-shadow: @rlMainShadow;
border-radius: @rlMainBorderRadius;
z-index: 101;
}
.second-toolbar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 29px;
flex-shrink: 0;
padding: 10px 8px 10px 11px;
z-index: 101;
white-space: nowrap;
background-color: var(--message-list-toolbar-bg-color, #eee);
@ -108,18 +100,11 @@ html.rl-no-preview-pane {
}
.b-content {
position: absolute;
top: 50px;
bottom: 45px;
left: 0;
right: 0;
height: 100%;
padding: 0;
overflow: auto;
z-index: 101;
scroll-behavior: smooth;
background-color: #fff;
.listClear {
text-align: center;
padding: 10px;
@ -179,8 +164,7 @@ html.rl-no-preview-pane {
}
}
&.focused .b-message-list-wrapper {
background-color: #000;
&.focused {
border-color: #9d9d9d;
}
}

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

@ -3,6 +3,9 @@
}
.messageView {
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
.toolbar {
@ -16,75 +19,79 @@
}
.b-content {
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
}
.b-message-view-checked-helper {
text-align: center;
font-size: 70px;
line-height: 70px;
padding-top: 100px;
color: #999;
.b-message {
display: flex;
flex-direction: column;
height: 100%;
}
.icon-mail {
font-size: 100px;
font-size: 50px;
line-height: 90px;
padding-left: 10px;
}
.b-message-view-checked-helper {
text-align: center;
font-size: 70px;
line-height: 70px;
padding-top: 100px;
color: #999;
.icon-mail {
font-size: 100px;
font-size: 50px;
line-height: 90px;
padding-left: 10px;
}
}
.b-message-view-desc {
text-align: center;
font-size: 24px;
line-height: 30px;
color: #999;
padding: 120px 10px 0 10px;
}
.b-message-view-desc.error {
color: #DA4F49;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
top: 33px;
right: 10px;
}
.infoParent {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.flagParent {
cursor: pointer;
margin: 0 0.25em;
.flagOn {
color: orange;
}
.b-message-view-desc {
text-align: center;
font-size: 24px;
line-height: 30px;
color: #999;
padding: 120px 10px 0 10px;
}
.b-message-view-desc.error {
color: #DA4F49;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
top: 33px;
right: 10px;
}
.infoParent {
cursor: pointer;
&.flagOff:not(:hover) {
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.flagParent {
cursor: pointer;
margin: 0 0.25em;
.flagOn {
color: orange;
}
&.flagOff:not(:hover) {
opacity: 0.5;
}
}
}
.messageItemHeader {
padding: 10px;
background-color: #f8f8f8;
border-bottom: 1px solid #ddd;
border-radius: @rlMainBorderRadius @rlMainBorderRadius 0 0;
padding: 10px;
flex-shrink: 0;
.subjectParent {
font-size: 18px;
@ -162,11 +169,7 @@
.messageItem {
color: #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
overflow: auto;
scroll-behavior: smooth;
@ -443,8 +446,7 @@
}
}
&.focused .b-content {
z-index: 101;
&.focused {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-color: darken(@rlMainDarkColor, 5%);
}

30
dev/Styles/User/SquireUI.less
View file

@ -1,9 +1,10 @@
.squire-toolbar {
padding: 2px;
border-bottom: 1px solid #b6b6b6;
min-height: 28px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px;
white-space: nowrap;
}
@ -38,6 +39,7 @@
.squire-wysiwyg, .squire-plain {
box-sizing: border-box;
font-size: 13px;
height: 100%;
line-height: 16px;
min-height: 200px;
overflow: auto;
@ -155,16 +157,22 @@ Secondly, we can't rely on MUA's what to do with :empty
}
/* @media (hover: none) */
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
display: none;
}
.rl-mobile .squire-toolbar {
background: #EEE;
padding: 1px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
@media screen and (max-height: 600px) {
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
display: none;
}
.rl-mobile .squire-toolbar {
background: #EEE;
padding: 1px;
position: fixed;
top: 18px;
left: 0;
right: 0;
/*
transform: translateY(-42px);
z-index: 9;
*/
}
}
.rl-mobile .b-compose.modal,

26
dev/View/Popup/Compose.js
View file

@ -312,8 +312,6 @@ class ComposePopupView extends AbstractViewPopup {
}
});
this.resizeObserver = new ResizeObserver(this.resizerTrigger.throttle(50).bind(this));
decorateKoCommands(this, {
sendCommand: self => self.canBeSentOrSaved(),
saveCommand: self => self.canBeSentOrSaved(),
@ -641,8 +639,6 @@ class ComposePopupView extends AbstractViewPopup {
rl.route.on();
this.resizeObserver.disconnect();
(getFullscreenElement() === this.oContent) && exitFullscreen();
}
@ -709,10 +705,6 @@ class ComposePopupView extends AbstractViewPopup {
onShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText) {
rl.route.off();
const ro = this.resizeObserver;
ro.observe(ro.compose);
ro.observe(ro.header);
this.autosaveStart();
this.viewModelDom.dataset.wysiwyg = SettingsUserStore.editorDefaultType();
@ -1088,7 +1080,7 @@ class ComposePopupView extends AbstractViewPopup {
}
}
onBuild(dom) {
onBuild() {
// initUploader
if (this.composeUploaderButton()) {
@ -1249,12 +1241,6 @@ class ComposePopupView extends AbstractViewPopup {
return false;
});
const ro = this.resizeObserver;
ro.compose = dom.querySelector('.b-compose');
ro.header = dom.querySelector('.b-header');
ro.toolbar = dom.querySelector('.b-header-toolbar');
ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']());
// Fullscreen must be on app, else other popups fail
@ -1463,16 +1449,6 @@ class ComposePopupView extends AbstractViewPopup {
item => item.id
);
}
resizerTrigger() {
let ro = this.resizeObserver,
height = Math.max(200, ro.compose.clientHeight - ro.header.offsetHeight - ro.toolbar.offsetHeight) + 'px';
if (ro.height !== height) {
ro.height = height;
ro.els.forEach(element => element.style.height = height);
this.oEditor && this.oEditor.resize();
}
}
}
export { ComposePopupView, ComposePopupView as default };

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

@ -60,7 +60,6 @@ export class MailMessageView extends AbstractViewRight {
}
}, this.messageVisibility);
this.oHeaderDom = null;
this.oMessageScrollerDom = null;
this.addObservables({
@ -116,7 +115,6 @@ export class MailMessageView extends AbstractViewRight {
this.viewUid = '';
this.viewHash = '';
this.addObservables({
viewBodyTopValue: 0,
viewSubject: '',
viewFromShort: '',
viewFromDkimData: ['none', ''],
@ -304,10 +302,6 @@ export class MailMessageView extends AbstractViewRight {
showMessageComposer([sType, MessageUserStore.message()]);
}
checkHeaderHeight() {
this.oHeaderDom && this.viewBodyTopValue(MessageUserStore.message() ? this.oHeaderDom.offsetHeight : 0);
}
onBuild(dom) {
this.oMessageScrollerDom = dom.querySelector('.messageItem');
@ -316,19 +310,8 @@ export class MailMessageView extends AbstractViewRight {
this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
let el = dom.querySelector('.messageItemHeader');
this.oHeaderDom = el;
if (el) {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
}
this.resizeObserver.observe(el);
} else if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
let event = 'fullscreenchange';
el = dom.querySelector('.b-message-view-wrapper');
let event = 'fullscreenchange',
el = dom.querySelector('.b-content');
if (!el.requestFullscreen && el.webkitRequestFullscreen) {
el.requestFullscreen = el.webkitRequestFullscreen;
event = 'webkit'+event;

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

@ -23,297 +23,295 @@
</div>
</div>
</div>
<div class="b-content b-message-view-wrapper">
<div style="height: 100%">
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
<div class="backdrop-message">
<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 class="b-content">
<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 right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
<div data-bind="visible: !isDraftFolder()">
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: replyCommand">
<i class="fontastic">←</i>
<span data-i18n="MESSAGE/BUTTON_REPLY"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: replyAllCommand">
<i class="fontastic">↞</i>
<span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: forwardCommand">
<i class="fontastic">→</i>
<span data-i18n="MESSAGE/BUTTON_FORWARD"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand">
<i class="fontastic">🖉</i>
<span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
</a>
</li>
<li role="presentation">
<a 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 role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i>
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
</a>
</li>
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: spamCommand">
<i class="fontastic">⚠</i>
<span data-i18n="GLOBAL/SPAM"></span>
</a>
</li>
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: notSpamCommand">
<i class="icon-check-mark-circle-two"></i>
<span data-i18n="GLOBAL/NOT_SPAM"></span>
</a>
</li>
<li role="presentation">
<a target="_blank" href="#" tabindex="-1" data-bind="command: deleteCommand">
<i class="fontastic">🗑</i>
<span data-i18n="GLOBAL/DELETE"></span>
</a>
</li>
<li role="presentation" data-bind="command: deleteWithoutMoveCommand">
<a href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="dividerbar" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
<a target="_blank" 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 role="presentation">
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } ">
<i class="fontastic">🖨</i>
<span data-i18n="MESSAGE/MENU_PRINT"></span>
</a>
</li>
<li role="presentation">
<a target="_blank" 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="dividerbar" role="presentation">
<a target="_blank" 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 role="presentation">
<a target="_blank" 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 right-edge" role="menu" aria-labelledby="more-view-dropdown-id">
<div data-bind="visible: !isDraftFolder()">
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: replyCommand">
<i class="fontastic">←</i>
<span data-i18n="MESSAGE/BUTTON_REPLY"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: replyAllCommand">
<i class="fontastic">↞</i>
<span data-i18n="MESSAGE/BUTTON_REPLY_ALL"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: forwardCommand">
<i class="fontastic">→</i>
<span data-i18n="MESSAGE/BUTTON_FORWARD"></span>
</a>
</li>
<li role="presentation">
<a href="#" tabindex="-1" data-bind="command: editAsNewCommand">
<i class="fontastic">🖉</i>
<span data-i18n="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
</a>
</li>
<li role="presentation">
<a 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 role="presentation" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: archiveCommand">
<i class="icon-archive"></i>
<span data-i18n="GLOBAL/TO_ARCHIVE"></span>
</a>
</li>
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: spamCommand">
<i class="fontastic">⚠</i>
<span data-i18n="GLOBAL/SPAM"></span>
</a>
</li>
<li role="presentation" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
<a target="_blank" href="#" tabindex="-1" data-bind="command: notSpamCommand">
<i class="icon-check-mark-circle-two"></i>
<span data-i18n="GLOBAL/NOT_SPAM"></span>
</a>
</li>
<li role="presentation">
<a target="_blank" href="#" tabindex="-1" data-bind="command: deleteCommand">
<i class="fontastic">🗑</i>
<span data-i18n="GLOBAL/DELETE"></span>
</a>
</li>
<li role="presentation" data-bind="command: deleteWithoutMoveCommand">
<a href="#" tabindex="-1">
<i class="fontastic">🗑</i>
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
</a>
</li>
<li class="dividerbar" role="presentation" data-bind="visible: message() && message().hasUnsubsribeLinks()">
<a target="_blank" 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 role="presentation">
<a target="_blank" href="#" tabindex="-1" data-bind="click: function () { message() && message().printMessage(); } ">
<i class="fontastic">🖨</i>
<span data-i18n="MESSAGE/MENU_PRINT"></span>
</a>
</li>
<li role="presentation">
<a target="_blank" 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="dividerbar" role="presentation">
<a target="_blank" 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 role="presentation">
<a target="_blank" 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 class="b-message" 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()">
<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>

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

@ -153,7 +153,7 @@
</table>
</div>
<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">
<div class="attachmentAreaParent" data-bind="visible: attachmentsPlace">
<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
<ul class="attachmentList" data-bind="foreach: attachments">

8
snappymail/v/0.0.0/themes/SquaresDark/styles.css
View file

@ -71,15 +71,11 @@
border-top-color: var(--main-color);
}
.messageList .b-message-list-wrapper {
border-color: #555;
}
.well,
.modal,
.b-settins-right .b-content,
.messageList .b-content,
.messageView .b-content,
.messageList,
.messageView,
.b-admin-right .b-content,
.b-compose .b-attachment-place {
background-color: #000;