mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-03 14:37:02 +03:00
Interface redesign (attachments, new preview pane layout)
This commit is contained in:
RainLoop Team
parent
6755a0ce51
commit
e3e7c1d963
64 changed files with 1286 additions and 1009 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<!-- ko template: { name: 'PhotoSwipe' } --><!-- /ko -->
|
||||
<div id="rl-sub-right">
|
||||
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused}">
|
||||
<div class="toolbar g-ui-user-select-none">
|
||||
<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
|
||||
<nobr>
|
||||
<div class="messageButtons btn-toolbar">
|
||||
<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
|
||||
<div class="btn-group" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
|
||||
<a class="btn btn-dark-disabled-border buttonClose" data-bind="command: closeMessage">
|
||||
<i class="icon-remove"></i>
|
||||
</a>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
</nobr>
|
||||
</div>
|
||||
<div class="b-content thm-message-view-background-color">
|
||||
<div class="b-content b-message-view-wrapper thm-message-view-background-color">
|
||||
<div>
|
||||
<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages()">
|
||||
<span data-bind="text: printableCheckedMessageCount()"></span>
|
||||
|
|
@ -57,124 +57,131 @@
|
|||
|
||||
<div data-bind="visible: message">
|
||||
|
||||
<div class="btn-group colored-toggle pull-right messageItemDropdown">
|
||||
<a class="btn btn-dark-disabled-border buttonReply" data-tooltip-placement="bottom"
|
||||
data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
|
||||
<i class="icon-reply"></i>
|
||||
</a>
|
||||
<!--
|
||||
<a class="btn btn-dark-disabled-border buttonReplyAll" data-tooltip-placement="bottom"
|
||||
data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
|
||||
<i class="icon-reply-all"></i>
|
||||
</a>
|
||||
<a class="btn btn-dark-disabled-border buttonForward" data-tooltip-placement="bottom"
|
||||
data-bind="command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
|
||||
<i class="icon-reply-all"></i>
|
||||
</a>
|
||||
-->
|
||||
<a id="more-view-dropdown-id" class="btn btn-dark-disabled-border dropdown-toggle buttonMore"
|
||||
href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom"
|
||||
data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
|
||||
<div class="message-fixed-button-toolbar clearfix">
|
||||
<div class="btn-group colored-toggle pull-right">
|
||||
<a class="btn btn-dark-disabled-border buttonReply" data-tooltip-placement="bottom"
|
||||
data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
|
||||
<i class="icon-reply"></i>
|
||||
</a>
|
||||
<!--
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
|
||||
<i class="icon-reply"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_REPLY"></span>
|
||||
</a>
|
||||
</li>
|
||||
<a class="btn btn-dark-disabled-border buttonReplyAll" data-tooltip-placement="bottom"
|
||||
data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
|
||||
<i class="icon-reply-all"></i>
|
||||
</a>
|
||||
<a class="btn btn-dark-disabled-border buttonForward" data-tooltip-placement="bottom"
|
||||
data-bind="command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
|
||||
<i class="icon-reply-all"></i>
|
||||
</a>
|
||||
-->
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
|
||||
<i class="icon-reply-all"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_REPLY_ALL"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
|
||||
<i class="icon-forward"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
|
||||
<i class="icon-pencil"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
|
||||
<i class="icon-forward"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation" data-bind="visible: !isDraftFolder()"></li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
|
||||
<i class="icon-archive"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_ARCHIVE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
|
||||
<i class="icon-angry-smiley"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_SPAM"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: notSpamCommand">
|
||||
<i class="icon-happy-smiley"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_NOT_SPAM"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
|
||||
<i class="icon-trash"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_DELETE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation" data-bind="visible: usePreviewPane()"></li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
|
||||
<i class="icon-print"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/MENU_PRINT"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
|
||||
<i class="icon-popup"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation"></li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
|
||||
<i class="icon-file-code"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="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="link: viewDownloadLink()">
|
||||
<i class="icon-download"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a id="more-view-dropdown-id" class="btn btn-dark-disabled-border dropdown-toggle buttonMore"
|
||||
href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom"
|
||||
data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
|
||||
<!--
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyCommand">
|
||||
<i class="icon-reply"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_REPLY"></span>
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: replyAllCommand">
|
||||
<i class="icon-reply-all"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_REPLY_ALL"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardCommand">
|
||||
<i class="icon-forward"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
|
||||
<i class="icon-pencil"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
|
||||
<i class="icon-forward"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation" data-bind="visible: !isDraftFolder()"></li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
|
||||
<i class="icon-archive"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_ARCHIVE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
|
||||
<i class="icon-angry-smiley"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_SPAM"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: notSpamCommand">
|
||||
<i class="icon-happy-smiley"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_NOT_SPAM"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: usePreviewPane()">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
|
||||
<i class="icon-trash"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_DELETE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation" data-bind="visible: usePreviewPane()"></li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
|
||||
<i class="icon-print"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/MENU_PRINT"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
|
||||
<i class="icon-popup"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation"></li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
|
||||
<i class="icon-file-code"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="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="link: viewDownloadLink()">
|
||||
<i class="icon-download"></i>
|
||||
|
||||
<span class="i18n" data-i18n-text="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group pull-right" data-bind="visible: isDraftFolder()" style="margin-right: 5px">
|
||||
<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
|
||||
<i class="icon-pencil icon-white"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messageItem" data-bind="css: viewLineAsCcc(), nano: true">
|
||||
|
|
@ -295,7 +302,8 @@
|
|||
</div>
|
||||
<div class="attachmentsPlace" data-bind="visible: message() && message().hasVisibleAttachments()">
|
||||
<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
|
||||
<li class="attachmentItem clearfix" draggable="true" data-bind="visible: !isLinked, title: fileName, event: { 'dragstart': eventDragStart }">
|
||||
<li class="attachmentItem clearfix" draggable="true" data-tooltip-placement="bottom"
|
||||
data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }">
|
||||
<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview() }">
|
||||
<div class="hidePreview">
|
||||
<div class="iconMain">
|
||||
|
|
@ -303,7 +311,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="showPreview">
|
||||
<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: {'href': linkPreviewMain(), title: fileName, 'data-index': $index}">
|
||||
<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: {'href': linkPreviewMain(), 'data-index': $index}" target="_blank">
|
||||
<div class="iconMain">
|
||||
<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue