mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Cleanup and improve HTML/CSS and it's JavaScript handling
This commit is contained in:
parent
6273869b32
commit
2e34f98c80
|
@ -683,7 +683,7 @@ class AppUser extends AbstractApp {
|
|||
right = elementById('rl-right'),
|
||||
fToggle = () =>
|
||||
setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
|
||||
(ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width');
|
||||
(ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width');
|
||||
if (left && right) {
|
||||
fToggle();
|
||||
leftPanelDisabled.subscribe(fToggle);
|
||||
|
|
|
@ -53,6 +53,7 @@ dropdownVisibility.subscribe(value => {
|
|||
}
|
||||
});
|
||||
|
||||
leftPanelDisabled.toggle = () => leftPanelDisabled(!leftPanelDisabled());
|
||||
leftPanelDisabled.subscribe(value => {
|
||||
value && moveAction() && moveAction(false);
|
||||
$htmlCL.toggle('rl-left-panel-disabled', value);
|
||||
|
|
|
@ -407,15 +407,25 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
|
|||
target.removeAttribute('style');
|
||||
source.removeAttribute('style');
|
||||
}
|
||||
// source.classList.toggle('resizable', mode);
|
||||
if (mode) {
|
||||
source.classList.add('resizable');
|
||||
const length = Local.get(sClientSideKeyName+mode);
|
||||
if (!source.layoutResizer) {
|
||||
const resizer = createElement('div', {'class':'resizer'}),
|
||||
size = {},
|
||||
store = () => {
|
||||
if ('Width' == resizer.mode) {
|
||||
target.style.left = source.offsetWidth + 'px';
|
||||
Local.set(resizer.key+resizer.mode, source.offsetWidth);
|
||||
} else {
|
||||
target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
|
||||
Local.set(resizer.key+resizer.mode, source.offsetHeight);
|
||||
}
|
||||
},
|
||||
cssint = s => {
|
||||
let value = getComputedStyle(source, null)[s].replace('px', '');
|
||||
if (value.includes('%')) {
|
||||
value = source.parentElement['width'==resizer.mode ? 'offsetWidth' : 'offsetHeight']
|
||||
value = source.parentElement['offset'+resizer.mode]
|
||||
* value.replace('%', '') / 100;
|
||||
}
|
||||
return parseFloat(value);
|
||||
|
@ -425,17 +435,20 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
|
|||
resizer.addEventListener('mousedown', {
|
||||
handleEvent: function(e) {
|
||||
if ('mousedown' == e.type) {
|
||||
const lmode = resizer.mode.toLowerCase();
|
||||
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);
|
||||
size.pos = ('width' == lmode) ? e.pageX : e.pageY;
|
||||
size.min = cssint('min-'+lmode);
|
||||
size.max = cssint('max-'+lmode);
|
||||
size.org = cssint(lmode);
|
||||
addEventListener('mousemove', this);
|
||||
addEventListener('mouseup', this);
|
||||
} else if ('mousemove' == e.type) {
|
||||
const length = size.org + (('width' == resizer.mode ? e.pageX : e.pageY) - size.pos);
|
||||
const lmode = resizer.mode.toLowerCase(),
|
||||
length = size.org + (('width' == lmode ? e.pageX : e.pageY) - size.pos);
|
||||
if (length >= size.min && length <= size.max ) {
|
||||
source.style[resizer.mode] = length + 'px';
|
||||
source.style[lmode] = length + 'px';
|
||||
source.observer || store();
|
||||
}
|
||||
} else if ('mouseup' == e.type) {
|
||||
removeEventListener('mousemove', this);
|
||||
|
@ -443,25 +456,16 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
|
|||
}
|
||||
}
|
||||
});
|
||||
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.observer = window.ResizeObserver ? new ResizeObserver(store) : null;
|
||||
}
|
||||
source.layoutResizer.mode = mode;
|
||||
source.observer.observe(source, { box: 'border-box' });
|
||||
const length = Local.get(sClientSideKeyName);
|
||||
source.layoutResizer.key = sClientSideKeyName;
|
||||
source.observer && source.observer.observe(source, { box: 'border-box' });
|
||||
if (length) {
|
||||
source.style[mode] = length + 'px';
|
||||
}
|
||||
} else {
|
||||
source.observer && source.observer.disconnect();
|
||||
source.classList.remove('resizable');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -110,8 +110,8 @@ export class MailBoxUserScreen extends AbstractScreen {
|
|||
let layout = SettingsUserStore.layout();
|
||||
setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,
|
||||
(ThemeStore.isMobile() || Layout.NoPreview === layout)
|
||||
? null
|
||||
: (Layout.SidePreview === layout ? 'width' : 'height')
|
||||
? 0
|
||||
: (Layout.SidePreview === layout ? 'Width' : 'Height')
|
||||
);
|
||||
};
|
||||
if (top && bottom) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Scope } from 'Common/Enums';
|
||||
import { keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals';
|
||||
import { doc, keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals';
|
||||
import { addObservablesTo } from 'Common/Utils';
|
||||
import { ThemeStore } from 'Stores/Theme';
|
||||
|
||||
|
@ -24,4 +24,8 @@ AppUserStore.focusedState.subscribe(value => {
|
|||
ThemeStore.isMobile() && leftPanelDisabled(Scope.FolderList !== value);
|
||||
break;
|
||||
}
|
||||
['FolderList','MessageList','MessageView'].forEach(name => {
|
||||
let dom = doc.querySelector('.RL-Mail'+name);
|
||||
dom && dom.classList.toggle('focused', name === value);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -212,7 +212,9 @@ export const MessageUserStore = new class {
|
|||
if (message && folder && folder !== message.folder) {
|
||||
this.message(null);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
isMessageSelected: value => elementById('rl-right').classList.toggle('message-selected', value)
|
||||
});
|
||||
|
||||
this.purgeMessageBodyCache = this.purgeMessageBodyCache.throttle(30000);
|
||||
|
|
|
@ -17,6 +17,15 @@
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
z-index: 1;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
html.rl-mobile {
|
||||
|
||||
&:not(.rl-left-panel-disabled) #rl-right {
|
||||
|
@ -28,10 +37,6 @@ html.rl-mobile {
|
|||
}
|
||||
}
|
||||
|
||||
#rl-left {
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
/*
|
||||
.resizable::after {
|
||||
background-color: #aaa;
|
||||
|
@ -50,7 +55,7 @@ html.rl-mobile {
|
|||
}
|
||||
*/
|
||||
|
||||
.resizable > .resizer {
|
||||
.resizer {
|
||||
background: #aaa;
|
||||
background: rgba(255,255,255,0.5);
|
||||
display: none;
|
||||
|
@ -58,11 +63,11 @@ html.rl-mobile {
|
|||
position: absolute;
|
||||
z-index: 102;
|
||||
}
|
||||
.resizable > .resizer:hover {
|
||||
.resizer:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
||||
html:not(.rl-left-panel-disabled) #rl-left {
|
||||
resize: horizontal;
|
||||
overflow: hidden;
|
||||
min-width: 155px;
|
||||
|
@ -78,6 +83,99 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
|||
width: 5px;
|
||||
}
|
||||
|
||||
.rl-side-preview-pane .RL-MailMessageList {
|
||||
resize: horizontal;
|
||||
min-width: 320px;
|
||||
max-width: 60%;
|
||||
}
|
||||
.rl-bottom-preview-pane .RL-MailMessageList {
|
||||
resize: vertical;
|
||||
min-height: 200px;
|
||||
max-height: 60%;
|
||||
}
|
||||
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
|
||||
.RL-MailMessageList > .resizer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.RL-MailMessageList {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: @rlBottomMargin;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.RL-MailMessageView {
|
||||
position: absolute;
|
||||
top: 50px + @rlLowMargin;
|
||||
bottom: 13px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
|
||||
.b-message-view-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
|
||||
.backdrop-message {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-side-preview-pane {
|
||||
.RL-MailMessageView {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
#rl-popups > dialog {
|
||||
top: 0;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
*/
|
||||
#rl-popups > .rl-view-model {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-height: 60vh;
|
||||
max-width: 90vw;
|
||||
|
@ -107,98 +205,6 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable {
|
|||
}
|
||||
}
|
||||
|
||||
.rl-side-preview-pane .RL-MailMessageList.resizable {
|
||||
resize: horizontal;
|
||||
min-width: 320px;
|
||||
max-width: 60%;
|
||||
}
|
||||
.rl-bottom-preview-pane .RL-MailMessageList.resizable {
|
||||
resize: vertical;
|
||||
min-height: 200px;
|
||||
max-height: 60%;
|
||||
}
|
||||
.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
||||
.RL-MailMessageList > .resizer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
z-index: 1;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
.RL-MailMessageList {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: @rlBottomMargin;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.RL-MailMessageView {
|
||||
position: absolute;
|
||||
top: 50px + @rlLowMargin;
|
||||
bottom: 13px;
|
||||
right: 0;
|
||||
left: 50%;
|
||||
|
||||
.b-message-view-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
|
||||
.backdrop-message {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
#rl-popups > dialog {
|
||||
top: 0;
|
||||
margin: 10px auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
*/
|
||||
#rl-popups > .rl-view-model {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
#rl-settings-subscreen {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.dropdown-menu * + .dividerbar {
|
||||
margin-top: 9px;
|
||||
padding-top: 9px;
|
||||
|
@ -254,8 +260,10 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
|
|||
width: 40%;
|
||||
}
|
||||
|
||||
.RL-MailMessageView {
|
||||
left: 40%;
|
||||
html.rl-side-preview-pane {
|
||||
.RL-MailMessageView {
|
||||
left: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -307,7 +315,6 @@ html.rl-left-panel-disabled {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-mobile,
|
||||
html.rl-no-preview-pane {
|
||||
|
||||
.RL-MailMessageList {
|
||||
|
@ -315,28 +322,24 @@ html.rl-no-preview-pane {
|
|||
width: inherit;
|
||||
}
|
||||
|
||||
.RL-MailMessageView {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-mobile #rl-left > .resizer,
|
||||
html.rl-no-preview-pane #rl-right .resizer,
|
||||
html.rl-mobile #rl-right .resizer {
|
||||
html.rl-no-preview-pane #rl-right .resizer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane:not(.rl-mobile) {
|
||||
html.rl-bottom-preview-pane {
|
||||
|
||||
.RL-MailMessageList {
|
||||
right: @rlBottomMargin !important;
|
||||
bottom: inherit;
|
||||
width: inherit;
|
||||
height: 300px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.RL-MailMessageView {
|
||||
left: 0 !important;
|
||||
left: 0;
|
||||
top: 356px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,40 +1,34 @@
|
|||
|
||||
html.rl-mobile,
|
||||
html.rl-no-preview-pane {
|
||||
.messageList.message-selected {
|
||||
.message-selected .RL-MailMessageList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.RL-MailMessageList.focused .messageList {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
|
||||
#sort-list-dropdown-id {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.RL-MailMessageList .btn-toolbar {
|
||||
height: 30px;
|
||||
padding: 10px 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.messageList {
|
||||
height: 100%;
|
||||
height: calc(100% - 50px);
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
box-shadow: @rlMainShadow;
|
||||
z-index: 101;
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px 1px;
|
||||
z-index: 102;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.b-footer {
|
||||
flex-shrink: 0;
|
||||
|
@ -163,10 +157,6 @@ html.rl-no-preview-pane {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
|
||||
.hideMessageListCheckbox {
|
||||
|
@ -414,7 +404,7 @@ html.rl-ctrl-key-pressed .messageListItem {
|
|||
}
|
||||
}
|
||||
|
||||
.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
|
||||
.messageList:not(.hideMessageListCheckbox) .subjectParent {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
.g-ui-min-height-300 {
|
||||
min-height: 300px;
|
||||
|
||||
html.rl-no-preview-pane {
|
||||
#rl-right:not(.message-selected) .RL-MailMessageView {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.RL-MailMessageView.focused .messageView {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
||||
.messageView {
|
||||
|
@ -204,7 +212,7 @@
|
|||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: grey;
|
||||
padding-top: 50px;
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.showImages, .readReceipt, .pgpSigned, .pgpEncrypted {
|
||||
|
@ -446,11 +454,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
||||
.thread-controls {
|
||||
.dropdown-toggle {
|
||||
padding-left: 10px;
|
||||
|
@ -463,13 +466,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .messageView,
|
||||
html.rl-no-preview-pane .messageView {
|
||||
|
||||
&:not(.message-selected) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
@ -490,7 +488,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-bottom-preview-pane:not(.rl-mobile) .messageView {
|
||||
html.rl-bottom-preview-pane .messageView {
|
||||
.b-content {
|
||||
bottom: @rlBottomMargin;
|
||||
}
|
||||
|
|
|
@ -10,16 +10,14 @@
|
|||
top: 40px;
|
||||
}
|
||||
|
||||
.b-system-drop-down {
|
||||
.RL-SystemDropDown {
|
||||
|
||||
.b-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlLowMargin;
|
||||
z-index: 103;
|
||||
}
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlLowMargin;
|
||||
z-index: 103;
|
||||
|
||||
.email-title {
|
||||
display: inline-block;
|
||||
|
|
|
@ -20,12 +20,6 @@ class PaneSettingsAdminView extends AbstractViewRight {
|
|||
.computed(() => PackageAdminStore.loading() ? 'visible' : 'hidden');
|
||||
}
|
||||
|
||||
toggleLeft(item, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
leftPanelDisabled(!leftPanelDisabled());
|
||||
}
|
||||
|
||||
logoutClick() {
|
||||
Remote.adminLogout(() => rl.logoutReload());
|
||||
}
|
||||
|
|
|
@ -10,7 +10,6 @@ import { AppUserStore } from 'Stores/User/App';
|
|||
import { SettingsUserStore } from 'Stores/User/Settings';
|
||||
import { FolderUserStore } from 'Stores/User/Folder';
|
||||
import { MessageUserStore } from 'Stores/User/Message';
|
||||
import { ThemeStore } from 'Stores/Theme';
|
||||
|
||||
import { showScreenPopup } from 'Knoin/Knoin';
|
||||
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
||||
|
@ -40,8 +39,6 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
this.allowContacts = AppUserStore.allowContacts();
|
||||
|
||||
addComputablesTo(this, {
|
||||
folderListFocused: () => Scope.FolderList === AppUserStore.focusedState(),
|
||||
|
||||
folderListVisible: () => {
|
||||
let multiple = false,
|
||||
inbox, visible,
|
||||
|
@ -85,7 +82,6 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
|
||||
el = eqs(event, 'a');
|
||||
if (el && el.matches('.selectable')) {
|
||||
ThemeStore.isMobile() && leftPanelDisabled(true);
|
||||
event.preventDefault();
|
||||
const folder = ko.dataFor(el);
|
||||
if (folder) {
|
||||
|
@ -120,7 +116,7 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
|
||||
shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => {
|
||||
let items = [], index = 0;
|
||||
dom.querySelectorAll('.b-folders li a:not(.hidden)').forEach(node => {
|
||||
dom.querySelectorAll('li a:not(.hidden)').forEach(node => {
|
||||
if (node.offsetHeight || node.getClientRects().length) {
|
||||
items.push(node);
|
||||
if (node.matches('.focused')) {
|
||||
|
@ -143,7 +139,7 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
});
|
||||
|
||||
shortcuts.add('enter,open', '', Scope.FolderList, () => {
|
||||
const item = qs('.b-folders li a:not(.hidden).focused');
|
||||
const item = qs('li a:not(.hidden).focused');
|
||||
if (item) {
|
||||
AppUserStore.focusedState(Scope.MessageList);
|
||||
item.click();
|
||||
|
@ -153,7 +149,7 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
});
|
||||
|
||||
shortcuts.add('space', '', Scope.FolderList, () => {
|
||||
const item = qs('.b-folders li a:not(.hidden).focused'),
|
||||
const item = qs('li a:not(.hidden).focused'),
|
||||
folder = item && ko.dataFor(item);
|
||||
if (folder) {
|
||||
const collapsed = folder.collapsed();
|
||||
|
@ -172,10 +168,10 @@ export class MailFolderList extends AbstractViewLeft {
|
|||
});
|
||||
|
||||
AppUserStore.focusedState.subscribe(value => {
|
||||
let el = qs('.b-folders li a.focused');
|
||||
let el = qs('li a.focused');
|
||||
el && el.classList.remove('focused');
|
||||
if (Scope.FolderList === value) {
|
||||
el = qs('.b-folders li a.selected');
|
||||
el = qs('li a.selected');
|
||||
el && el.classList.add('focused');
|
||||
}
|
||||
});
|
||||
|
|
|
@ -69,9 +69,10 @@ export class MailMessageList extends AbstractViewRight {
|
|||
);
|
||||
|
||||
this.composeInEdit = AppUserStore.composeInEdit;
|
||||
|
||||
this.isMobile = ThemeStore.isMobile;
|
||||
this.leftPanelDisabled = leftPanelDisabled;
|
||||
|
||||
this.isMessageSelected = MessageUserStore.isMessageSelected;
|
||||
this.messageListSearch = MessageUserStore.listSearch;
|
||||
this.messageListError = MessageUserStore.listError;
|
||||
|
||||
|
@ -167,8 +168,6 @@ export class MailMessageList extends AbstractViewRight {
|
|||
|
||||
mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessageUserStore.listChecked().length : true,
|
||||
|
||||
messageListFocused: () => Scope.MessageList === AppUserStore.focusedState(),
|
||||
|
||||
sortText: () => {
|
||||
let mode = FolderUserStore.sortMode(),
|
||||
desc = '' === mode || mode.includes('REVERSE');
|
||||
|
@ -338,20 +337,6 @@ export class MailMessageList extends AbstractViewRight {
|
|||
}
|
||||
}
|
||||
|
||||
hideLeft(item, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
|
||||
showLeft(item, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
leftPanelDisabled(false);
|
||||
}
|
||||
|
||||
composeClick() {
|
||||
showMessageComposer();
|
||||
}
|
||||
|
@ -683,14 +668,14 @@ export class MailMessageList extends AbstractViewRight {
|
|||
}
|
||||
|
||||
onBuild(dom) {
|
||||
const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom);
|
||||
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
|
||||
|
||||
this.selector.init(dom.querySelector('.b-content'), Scope.MessageList);
|
||||
|
||||
dom.addEventListener('click', event => {
|
||||
ThemeStore.isMobile() && leftPanelDisabled(true);
|
||||
ThemeStore.isMobile() && !eqs(event, '.toggleLeft') && leftPanelDisabled(true);
|
||||
|
||||
if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
|
||||
if (eqs(event, '.messageList') && Scope.MessageView === AppUserStore.focusedState()) {
|
||||
AppUserStore.focusedState(Scope.MessageList);
|
||||
}
|
||||
|
||||
|
|
|
@ -81,7 +81,6 @@ export class MailMessageView extends AbstractViewRight {
|
|||
this.hasCheckedMessages = MessageUserStore.hasCheckedMessages;
|
||||
this.messageLoadingThrottle = MessageUserStore.messageLoading;
|
||||
this.messagesBodiesDom = MessageUserStore.messagesBodiesDom;
|
||||
this.isMessageSelected = MessageUserStore.isMessageSelected;
|
||||
this.messageActiveDom = MessageUserStore.messageActiveDom;
|
||||
this.messageError = MessageUserStore.messageError;
|
||||
|
||||
|
@ -177,8 +176,6 @@ export class MailMessageView extends AbstractViewRight {
|
|||
return '';
|
||||
},
|
||||
|
||||
messageFocused: () => Scope.MessageView === AppUserStore.focusedState(),
|
||||
|
||||
messageListAndMessageViewLoading:
|
||||
() => MessageUserStore.listCompleteLoading() || MessageUserStore.messageLoading()
|
||||
});
|
||||
|
|
|
@ -4,8 +4,6 @@ import { getFolderInboxName } from 'Common/Cache';
|
|||
|
||||
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
||||
|
||||
import { ThemeStore } from 'Stores/Theme';
|
||||
|
||||
export class MenuSettingsUserView extends AbstractViewLeft {
|
||||
/**
|
||||
* @param {Object} screen
|
||||
|
@ -18,14 +16,6 @@ export class MenuSettingsUserView extends AbstractViewLeft {
|
|||
this.menu = screen.menu;
|
||||
}
|
||||
|
||||
onBuild(dom) {
|
||||
dom.addEventListener('click', event =>
|
||||
ThemeStore.isMobile()
|
||||
&& event.target.closestWithin('.b-settins-left nav a', dom)
|
||||
&& leftPanelDisabled(true)
|
||||
);
|
||||
}
|
||||
|
||||
link(route) {
|
||||
return settings(route);
|
||||
}
|
||||
|
|
|
@ -11,6 +11,7 @@ export class PaneSettingsUserView extends AbstractViewRight {
|
|||
constructor() {
|
||||
super('SettingsPane');
|
||||
|
||||
this.isMobile = ThemeStore.isMobile;
|
||||
this.leftPanelDisabled = leftPanelDisabled;
|
||||
}
|
||||
|
||||
|
@ -18,22 +19,10 @@ export class PaneSettingsUserView extends AbstractViewRight {
|
|||
MessageUserStore.message(null);
|
||||
}
|
||||
|
||||
hideLeft(item, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
|
||||
showLeft(item, event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
leftPanelDisabled(false);
|
||||
}
|
||||
|
||||
onBuild(dom) {
|
||||
dom.addEventListener('click', () => ThemeStore.isMobile() && leftPanelDisabled(true));
|
||||
dom.addEventListener('click', () =>
|
||||
ThemeStore.isMobile() && !event.target.closestWithin('.toggleLeft', dom) && leftPanelDisabled(true)
|
||||
);
|
||||
}
|
||||
|
||||
backToMailBoxClick() {
|
||||
|
|
|
@ -1,20 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
(w=>{
|
||||
|
||||
// Edge Legacy (pre chromium/webkit), Firefox < 69, Safari < 13.4
|
||||
w.ResizeObserver || (w.ResizeObserver = class {
|
||||
constructor(callback) {
|
||||
this.observer = new MutationObserver(callback.debounce(250));
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
observe(target) {
|
||||
this.observer.observe(target, { attributes: true, subtree: true, attributeFilter: ['style'] });
|
||||
}
|
||||
});
|
||||
|
||||
})(this);
|
|
@ -19,23 +19,21 @@
|
|||
{{BaseAppFaviconTouchLinkTag}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="rl-app" data-admin='{{BaseAppAdmin}}'>
|
||||
<div id="rl-loading">
|
||||
<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
|
||||
<div class="e-spinner">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rl-loading-error" hidden="">An error occurred.<br>Please refresh the page and try again.</div>
|
||||
<div id="rl-content" hidden="">
|
||||
<div id="rl-popups"></div>
|
||||
<div id="rl-left"></div>
|
||||
<div id="rl-right"></div>
|
||||
<body id="rl-app" data-admin='{{BaseAppAdmin}}'>
|
||||
<div id="rl-loading">
|
||||
<div id="rl-loading-desc">{{LoadingDescriptionEsc}}</div>
|
||||
<div class="e-spinner">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rl-loading-error" hidden="">An error occurred.<br>Please refresh the page and try again.</div>
|
||||
<div id="rl-content" hidden="">
|
||||
<div id="rl-left"></div>
|
||||
<div id="rl-right"></div>
|
||||
</div>
|
||||
<div id="rl-popups"></div>
|
||||
{{BaseTemplates}}
|
||||
<script nonce="" type="text/javascript">{{BaseAppBootScript}}{{BaseLanguage}}</script>
|
||||
</body>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="b-settings b-admin-right">
|
||||
<div class="b-toolbar g-ui-user-select-none">
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: toggleLeft, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
<i class="icon-spinner" style="margin: 10px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
|
||||
<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
|
||||
<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="b-folders g-ui-user-select-none" data-bind="css: {'focused': folderListFocused, 'single-root-inbox': foldersListWithSingleInboxRootFolder}">
|
||||
<div class="b-folders g-ui-user-select-none" data-bind="css: {'single-root-inbox': foldersListWithSingleInboxRootFolder}">
|
||||
<div class="b-toolbar btn-toolbar hide-mobile">
|
||||
<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
|
||||
<i class="icon-paper-plane"></i>
|
||||
|
@ -12,10 +12,10 @@
|
|||
<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
|
||||
<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
|
||||
</div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: leftPanelDisabled.toggle()"></div>
|
||||
<div class="b-footer btn-toolbar hide-mobile">
|
||||
<div class="btn-group">
|
||||
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
|
||||
<a class="btn buttonResize" data-bind="click: leftPanelDisabled.toggle()">
|
||||
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -1,237 +1,234 @@
|
|||
<div class="messageList g-ui-user-select-none"
|
||||
data-bind="css: {'message-selected': isMessageSelected, 'focused': messageListFocused() }">
|
||||
<div class="toolbar">
|
||||
<div class="btn-toolbar">
|
||||
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: hideLeft, visible: !leftPanelDisabled()">❮</a>
|
||||
<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: showLeft, visible: leftPanelDisabled()">❯</a>
|
||||
<a class="btn buttonCompose show-mobile" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
|
||||
<i class="icon-paper-plane"></i>
|
||||
</a>
|
||||
<a class="btn" data-bind="command: reloadCommand, visible: mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
|
||||
<i class="icon-spinner not-animated"></i>
|
||||
</a>
|
||||
<!-- ko if: !newMoveToFolder -->
|
||||
<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="fontastic hidden-on-ctrl-btn">📁</i>
|
||||
<span class="caret"></span>
|
||||
<div class="btn-toolbar">
|
||||
<!-- ko if: isMobile() -->
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
|
||||
<i class="icon-paper-plane"></i>
|
||||
</a>
|
||||
<!-- /ko -->
|
||||
<a class="btn" data-bind="command: reloadCommand, visible: mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
|
||||
<i class="icon-spinner not-animated"></i>
|
||||
</a>
|
||||
<!-- ko if: !newMoveToFolder -->
|
||||
<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="fontastic hidden-on-ctrl-btn">📁</i>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
|
||||
<li role="presentation" data-bind="css: { 'disabled': disabled }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
|
||||
<a href="#" tabindex="-1" data-bind="text: name"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: newMoveToFolder -->
|
||||
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand" data-i18n="[title]GLOBAL/MOVE_TO">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="fontastic hidden-on-ctrl-btn">📁</i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
|
||||
<a class="btn button-archive"
|
||||
data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
|
||||
<i class="icon-archive"></i>
|
||||
</a>
|
||||
<a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
|
||||
<a class="btn button-not-spam"
|
||||
data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
|
||||
<i class="icon-check-mark-circle-two"></i>
|
||||
</a>
|
||||
<a class="btn button-delete fontastic"
|
||||
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
|
||||
</div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
|
||||
<li role="presentation" data-bind="css: { 'disabled': disabled }, click: function (mdata, oEvent) { if (!disabled) $root.moveSelectedMessagesToFolder(id, oEvent && !!oEvent.ctrlKey); }">
|
||||
<a href="#" tabindex="-1" data-bind="text: name"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- ko if: newMoveToFolder -->
|
||||
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn buttonMove" data-bind="command: moveNewCommand" data-i18n="[title]GLOBAL/MOVE_TO">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="fontastic hidden-on-ctrl-btn">📁</i>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
|
||||
<a class="btn button-archive"
|
||||
data-bind="visible: isArchiveVisible, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">
|
||||
<i class="icon-archive"></i>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic flagged">★</i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
|
||||
</a>
|
||||
<a class="btn button-spam fontastic" data-bind="visible: isSpamVisible, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
|
||||
<a class="btn button-not-spam"
|
||||
data-bind="visible: isUnSpamVisible, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
|
||||
<i class="icon-check-mark-circle-two"></i>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic unflagged">☆</i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
|
||||
</a>
|
||||
<a class="btn button-delete fontastic"
|
||||
data-bind="command: deleteCommand" data-i18n="[title]GLOBAL/DELETE">🗑</a>
|
||||
</div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<a id="more-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]GLOBAL/MORE">☰</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<li role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_SEEN"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic flagged">★</i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_FLAG"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic unflagged">☆</i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">↞</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">🗑</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">🔥</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
|
||||
<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText">⬇</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
|
||||
<li role="presentation" data-sort="DATE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">📅⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">📅⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="SIZE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">✉⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">✉⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">𝐒⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">𝐒⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">@⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">@⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="icon-none"></i>
|
||||
<span data-i18n="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-bind="command: multyForwardCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">↞</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-bind="visible: allowDangerousActions, command: deleteWithoutMoveCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">🗑</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="visible: allowDangerousActions, command: clearCommand">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">🔥</i>
|
||||
<span data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
|
||||
<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText">⬇</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
|
||||
<li role="presentation" data-sort="DATE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">📅⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_DATE_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">📅⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_DATE_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="SIZE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">✉⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SIZE_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE SIZE" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">✉⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SIZE_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="SUBJECT" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">𝐒⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE SUBJECT" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">𝐒⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_SUBJECT_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation" data-sort="FROM" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">@⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_FROM_ASC"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-sort="REVERSE FROM" data-bind="click: changeSort">
|
||||
<a href="#" tabindex="-1">
|
||||
<i class="fontastic">@⬆</i>
|
||||
<span data-i18n="MESSAGE_LIST/SORT_FROM_DESC"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="messageList g-ui-user-select-none" data-bind="css: {'hideMessageListCheckbox': !useCheckboxesInList() }">
|
||||
<div class="second-toolbar thm-message-list-top-toolbar">
|
||||
<div class="form-inline">
|
||||
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
|
||||
<div class="input-append" data-bind="visible: allowSearch">
|
||||
<div class="close-input-wrp">
|
||||
<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">×</a>
|
||||
<input type="search" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
|
||||
</div>
|
||||
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">▼</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-message-list-wrapper" data-bind="css: {'hideMessageListCheckbox': !useCheckboxesInList() }">
|
||||
<div class="second-toolbar thm-message-list-top-toolbar">
|
||||
<div class="form-inline">
|
||||
<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
|
||||
<div class="input-append" data-bind="visible: allowSearch">
|
||||
<div class="close-input-wrp">
|
||||
<a class="close" data-bind="click: cancelSearch, visible: '' !== messageListSearchDesc()">×</a>
|
||||
<input type="search" class="span4 inputSearch" tabindex="-1" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: inputProxyMessageListSearch, onEnter: searchEnterAction, hasfocus: inputMessageListSearchFocus" />
|
||||
</div>
|
||||
<a class="btn buttonMoreSearch" data-bind="visible: allowSearchAdv, click: advancedSearchClick">▼</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-content" data-bind="initDom: dragOverBodyArea">
|
||||
<div class="listThreadUidDesc" data-bind="visible: 0 < messageListEndThreadUid(), click: cancelThreadUid">
|
||||
<i class="fontastic">⬅</i>
|
||||
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
|
||||
</div>
|
||||
<div class="b-content" data-bind="initDom: dragOverBodyArea">
|
||||
<div class="listThreadUidDesc" data-bind="visible: 0 < messageListEndThreadUid(), click: cancelThreadUid">
|
||||
<i class="fontastic">⬅</i>
|
||||
<span data-i18n="MESSAGE_LIST/BACK_TO_MESSAGE_LIST"></span>
|
||||
</div>
|
||||
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div>
|
||||
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
|
||||
<i class="fontastic">⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
|
||||
</div>
|
||||
<div class="listClear" data-bind="visible: clearListIsVisible()">
|
||||
<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></a>
|
||||
</div>
|
||||
<div class="listError error" data-bind="visible: !dragOver() && '' !== messageListError(), text: messageListError"></div>
|
||||
<div class="listEmptyMessage" data-bind="visible: listEmptyMessage(), text: listEmptyMessage()"></div>
|
||||
<div class="listLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
|
||||
messageListCompleteLoadingThrottle() && '' === messageListError()">
|
||||
<i class="icon-spinner"></i>
|
||||
<span data-i18n="GLOBAL/LOADING"></span>
|
||||
</div>
|
||||
<div data-bind="dragmessages: getDragData">
|
||||
<div class="messageListPlace" data-bind="foreach: messageList">
|
||||
<div class="listSearchDesc" data-bind="visible: '' !== messageListSearchDesc(), text: messageListSearchDesc"></div>
|
||||
<div class="listDragOver" data-bind="css: {'viewAppendArea': dragOver() && '' === messageListError() && !popupVisibility(), 'dragOverEnter': dragOverEnter }, initDom: dragOverArea">
|
||||
<i class="fontastic">⬇</i>
|
||||
<span data-i18n="MESSAGE_LIST/PUT_MESSAGE_HERE"></span>
|
||||
</div>
|
||||
<div class="listClear" data-bind="visible: clearListIsVisible()">
|
||||
<a href="#" class="g-ui-link" data-i18n="MESSAGE_LIST/BUTTON_EMPTY_FOLDER" data-bind="command: clearCommand"></a>
|
||||
</div>
|
||||
<div class="listError error" data-bind="visible: !dragOver() && '' !== messageListError(), text: messageListError"></div>
|
||||
<div class="listEmptyMessage" data-bind="visible: listEmptyMessage(), text: listEmptyMessage()"></div>
|
||||
<div class="listLoading" data-bind="visible: !dragOver() && 0 === messageList().length &&
|
||||
messageListCompleteLoadingThrottle() && '' === messageListError()">
|
||||
<i class="icon-spinner"></i>
|
||||
<span data-i18n="GLOBAL/LOADING"></span>
|
||||
</div>
|
||||
<div data-bind="dragmessages: getDragData">
|
||||
<div class="messageListPlace" data-bind="foreach: messageList">
|
||||
|
||||
<div class="messageListItem" data-bind="css: lineAsCss()">
|
||||
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
|
||||
<div class="messageListItem" data-bind="css: lineAsCss()">
|
||||
<div class="checkboxMessage fontastic" data-bind="text: checked() ? '☑' : '☐'"></div>
|
||||
|
||||
<div class="flagParent fontastic"></div>
|
||||
<div class="flagParent fontastic"></div>
|
||||
|
||||
<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}">
|
||||
<!-- ko if: isAnswered --><i class="replyFlag fontastic">←</i><!-- /ko -->
|
||||
<!-- ko if: isForwarded --><i class="forwardFlag fontastic">→</i><!-- /ko -->
|
||||
<!-- ko text: senderEmailsString --><!-- /ko -->
|
||||
</div>
|
||||
|
||||
<div class="attachmentParent actionHandle">
|
||||
<i data-bind="css: attachmentIconClass"></i>
|
||||
</div>
|
||||
|
||||
<div class="subjectParent actionHandle">
|
||||
<!-- ko if: isImportant --><b class="importantMark">!</b><!-- /ko -->
|
||||
<!-- ko text: subject || $root.emptySubjectValue --><!-- /ko -->
|
||||
</div>
|
||||
|
||||
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
|
||||
|
||||
<div class="threads-len" data-bind="visible: 1 < threadsLen()">
|
||||
<span>
|
||||
<!-- ko text: threadsLen --><!-- /ko -->
|
||||
›
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
|
||||
<div class="senderParent actionHandle" data-bind="attr: {'title': senderClearEmailsString}">
|
||||
<!-- ko if: isAnswered --><i class="replyFlag fontastic">←</i><!-- /ko -->
|
||||
<!-- ko if: isForwarded --><i class="forwardFlag fontastic">→</i><!-- /ko -->
|
||||
<!-- ko text: senderEmailsString --><!-- /ko -->
|
||||
</div>
|
||||
|
||||
<div class="attachmentParent actionHandle">
|
||||
<i data-bind="css: attachmentIconClass"></i>
|
||||
</div>
|
||||
|
||||
<div class="subjectParent actionHandle">
|
||||
<!-- ko if: isImportant --><b class="importantMark">!</b><!-- /ko -->
|
||||
<!-- ko text: subject || $root.emptySubjectValue --><!-- /ko -->
|
||||
</div>
|
||||
|
||||
<div class="sizeParent actionHandle" data-bind="text: friendlySize()"></div>
|
||||
|
||||
<div class="threads-len" data-bind="visible: 1 < threadsLen()">
|
||||
<span>
|
||||
<!-- ko text: threadsLen --><!-- /ko -->
|
||||
›
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<time class="actionHandle" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="messagesDragImage"><span class="text"></span> <i class="icon-mail"></i></div>
|
||||
</div>
|
||||
<div class="b-footer thm-message-list-bottom-toolbar">
|
||||
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
|
||||
<!-- ko text: userUsageProc --><!-- /ko -->%
|
||||
</span>
|
||||
<div class="pull-right">
|
||||
<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
|
||||
</div>
|
||||
<div id="messagesDragImage"><span class="text"></span> <i class="icon-mail"></i></div>
|
||||
</div>
|
||||
<div class="b-footer thm-message-list-bottom-toolbar">
|
||||
<span data-bind="visible: 0 < userUsageProc(), attr: { title: quotaTooltip() }" class="e-quota">
|
||||
<!-- ko text: userUsageProc --><!-- /ko -->%
|
||||
</span>
|
||||
<div class="pull-right">
|
||||
<!-- ko template: { name: 'Paginator', data: messageListPaginator } --><!-- /ko -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'focused': messageFocused}">
|
||||
<div class="messageView">
|
||||
<div class="toolbar top-toolbar g-ui-user-select-none">
|
||||
<div class="messageButtons btn-toolbar">
|
||||
<div class="btn-group" data-i18n="[title]GLOBAL/CLOSE">
|
||||
|
@ -243,17 +243,15 @@
|
|||
<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>
|
||||
<span class="buttonFull" data-bind="click: toggleFullScreen">
|
||||
<i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i>
|
||||
</span>
|
||||
<div class="loading" data-bind="visible: messageLoadingThrottle()">
|
||||
<i class="icon-spinner"></i>
|
||||
<span data-i18n="GLOBAL/LOADING"></span>
|
||||
</div>
|
||||
|
||||
<div class="g-ui-min-height-300" data-bind="visible: !messageLoadingThrottle()">
|
||||
<div data-bind="visible: !messageLoadingThrottle()">
|
||||
<div class="bodySubHeader">
|
||||
<div class="showImages" data-bind="visible: message() && message().hasImages(), click: showImages">
|
||||
<i class="fontastic">🖼</i>
|
||||
|
@ -310,7 +308,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bodyText g-ui-min-height-300"
|
||||
<div class="bodyText"
|
||||
data-bind="initDom: messagesBodiesDom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,9 +4,9 @@
|
|||
<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: leftPanelDisabled.toggle()"></div>
|
||||
<div class="b-footer">
|
||||
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
|
||||
<a class="btn buttonResize" data-bind="click: leftPanelDisabled.toggle()">
|
||||
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
<div class="b-settings b-settins-right">
|
||||
<div class="b-toolbar btn-toolbar" style="margin-top: 2px;">
|
||||
<div class="btn-group show-mobile" data-bind="visible: !leftPanelDisabled()" style="margin-left: -1px">
|
||||
<a class="btn btn-thin-2 fontastic" data-bind="click: hideLeft">❮</a>
|
||||
</div>
|
||||
<div class="btn-group show-mobile" data-bind="visible: leftPanelDisabled()">
|
||||
<a class="btn btn-thin-2 fontastic" data-bind="click: showLeft">❯</a>
|
||||
<!-- ko if: isMobile() -->
|
||||
<div class="btn-group" style="margin-left: -1px">
|
||||
<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: leftPanelDisabled.toggle, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<a class="btn button-back" data-bind="click: backToMailBoxClick">
|
||||
<i class="fontastic">⬅</i>
|
||||
<span data-i18n="GLOBAL/BACK"></span>
|
||||
|
|
|
@ -1,81 +1,77 @@
|
|||
<div class="b-system-drop-down g-ui-user-select-none">
|
||||
<div class="b-toolbar">
|
||||
<div class="btn-toolbar">
|
||||
<div class="audioPlace"
|
||||
data-bind="visible: '' !== currentAudio(), attr: { title: currentAudio }, click: stopPlay">
|
||||
<div class="playIcon"><div></div></div>
|
||||
<i class="stopIcon fontastic">⏸</i>
|
||||
</div>
|
||||
<div class="accountPlace hide-mobile" data-bind="text: emailTitle()"></div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
|
||||
<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-block dropdown-toggle">
|
||||
<i class="fontastic" data-bind="css: {'icon-spinner': accountsLoading()}">👤</i>
|
||||
<div class="btn-toolbar g-ui-user-select-none">
|
||||
<div class="audioPlace"
|
||||
data-bind="visible: '' !== currentAudio(), attr: { title: currentAudio }, click: stopPlay">
|
||||
<div class="playIcon"><div></div></div>
|
||||
<i class="stopIcon fontastic">⏸</i>
|
||||
</div>
|
||||
<div class="accountPlace hide-mobile" data-bind="text: emailTitle()"></div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="registerBootstrapDropdown: true, openDropdownTrigger: accountMenuDropdownTrigger">
|
||||
<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn single btn-block dropdown-toggle">
|
||||
<i class="fontastic" data-bind="css: {'icon-spinner': accountsLoading()}">👤</i>
|
||||
<!--
|
||||
<b data-bind="text: accountsUnreadCount, visible: 100 > accountsUnreadCount() && 0 < accountsUnreadCount()"></b>
|
||||
<b data-bind="visible: 99 < accountsUnreadCount()">99+</b>
|
||||
|
||||
<b data-bind="text: accountsUnreadCount, visible: 100 > accountsUnreadCount() && 0 < accountsUnreadCount()"></b>
|
||||
<b data-bind="visible: 99 < accountsUnreadCount()">99+</b>
|
||||
|
||||
-->
|
||||
<span class="caret"></span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu right-edge" tabindex="-1" role="menu" aria-labelledby="top-system-dropdown-id">
|
||||
|
||||
<!-- ko if: accounts().length -->
|
||||
<!-- ko foreach: accounts -->
|
||||
<li role="presentation">
|
||||
<a class="account-item" href="#" data-bind="click: $root.accountClick,
|
||||
attr: {'href': changeAccountLink()}, css: {'current': $root.accountEmail() === email}">
|
||||
<!-- <b class="pull-right counter" data-bind="visible: 0 < count()">
|
||||
<span data-bind="text: count, visible: 100 > count()"></span>
|
||||
<span data-bind="visible: 99 < count()">99+</span>
|
||||
</b>-->
|
||||
<i class="fontastic">✔</i>
|
||||
<i class="fontastic">👤</i>
|
||||
<span class="email-title" data-bind="text: email, attr: {title: email}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- /ko -->
|
||||
<!-- /ko -->
|
||||
|
||||
<li class="dividerbar" role="presentation" data-bind="visible: allowAccounts">
|
||||
<a href="#" tabindex="-1" data-bind="click: addAccountClick">
|
||||
<i class="fontastic">✚</i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu right-edge" tabindex="-1" role="menu" aria-labelledby="top-system-dropdown-id">
|
||||
|
||||
<!-- ko if: accounts().length -->
|
||||
<!-- ko foreach: accounts -->
|
||||
<li role="presentation">
|
||||
<a class="account-item" href="#" data-bind="click: $root.accountClick,
|
||||
attr: {'href': changeAccountLink()}, css: {'current': $root.accountEmail() === email}">
|
||||
<!-- <b class="pull-right counter" data-bind="visible: 0 < count()">
|
||||
<span data-bind="text: count, visible: 100 > count()"></span>
|
||||
<span data-bind="visible: 99 < count()">99+</span>
|
||||
</b>-->
|
||||
<i class="fontastic">✔</i>
|
||||
<i class="fontastic">👤</i>
|
||||
<span class="email-title" data-bind="text: email, attr: {title: email}"></span>
|
||||
</a>
|
||||
</li>
|
||||
<!-- /ko -->
|
||||
<!-- /ko -->
|
||||
|
||||
<li class="dividerbar" role="presentation" data-bind="visible: allowAccounts">
|
||||
<a href="#" tabindex="-1" data-bind="click: addAccountClick">
|
||||
<i class="fontastic">✚</i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_ADD_ACCOUNT"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation" data-bind="visible: allowContacts">
|
||||
<a href="#" tabindex="-1" data-bind="click: contactsClick">
|
||||
<i class="fontastic">📇</i>
|
||||
<span data-i18n="GLOBAL/CONTACTS"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: settingsClick">
|
||||
<i class="fontastic">⚙</i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: settingsHelp">
|
||||
<i class="icon-help"></i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_HELP"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: toggleLayout">
|
||||
<i class="fontastic show-mobile">💻</i>
|
||||
<span class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
|
||||
<i class="fontastic hide-mobile">📱</i>
|
||||
<span class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: logoutClick">
|
||||
<i class="fontastic">⏻</i>
|
||||
<span data-i18n="GLOBAL/LOGOUT"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li role="presentation" data-bind="visible: allowContacts">
|
||||
<a href="#" tabindex="-1" data-bind="click: contactsClick">
|
||||
<i class="fontastic">📇</i>
|
||||
<span data-i18n="GLOBAL/CONTACTS"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: settingsClick">
|
||||
<i class="fontastic">⚙</i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_SETTINGS"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: settingsHelp">
|
||||
<i class="icon-help"></i>
|
||||
<span data-i18n="TOP_TOOLBAR/BUTTON_HELP"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dividerbar" role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: toggleLayout">
|
||||
<i class="fontastic show-mobile">💻</i>
|
||||
<span class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
|
||||
<i class="fontastic hide-mobile">📱</i>
|
||||
<span class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#" tabindex="-1" data-bind="click: logoutClick">
|
||||
<i class="fontastic">⏻</i>
|
||||
<span data-i18n="GLOBAL/LOGOUT"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -59,7 +59,6 @@ config.paths.js = {
|
|||
libs: {
|
||||
name: 'libs.js',
|
||||
src: [
|
||||
'dev/polyfill.js',
|
||||
'dev/prototype.js',
|
||||
'dev/External/ifvisible.js',
|
||||
'dev/dragdropgecko.js',
|
||||
|
|
Loading…
Reference in a new issue