mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-29 03:59:21 +03:00
Revamp mobile including CSS flexbox for messageListItem
This commit is contained in:
djmaze
parent
6238b97f08
commit
10f9ce39d9
70 changed files with 479 additions and 821 deletions
|
|
@ -4,7 +4,8 @@ import {
|
|||
doc,
|
||||
$htmlCL,
|
||||
leftPanelDisabled,
|
||||
Settings
|
||||
Settings,
|
||||
isMobile
|
||||
} from 'Common/Globals';
|
||||
|
||||
import { KeyState } from 'Common/Enums';
|
||||
|
|
@ -48,7 +49,7 @@ export class AbstractApp {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
download(link) {
|
||||
if (Settings.app('mobile')) {
|
||||
if (isMobile()) {
|
||||
open(link, '_self');
|
||||
focus();
|
||||
} else {
|
||||
|
|
@ -82,8 +83,7 @@ export class AbstractApp {
|
|||
}
|
||||
|
||||
bootstart() {
|
||||
const mobile = Settings.app('mobile'),
|
||||
register = (key, ClassObject, templateID) => ko.components.register(key, {
|
||||
const register = (key, ClassObject, templateID) => ko.components.register(key, {
|
||||
template: { element: templateID || (key + 'Component') },
|
||||
viewModel: {
|
||||
createViewModel: (params, componentInfo) => {
|
||||
|
|
@ -110,7 +110,7 @@ export class AbstractApp {
|
|||
register('Select', SelectComponent);
|
||||
register('TextArea', TextAreaComponent);
|
||||
register('CheckboxSimple', CheckboxComponent, 'CheckboxComponent');
|
||||
if (mobile || !Settings.app('materialDesign')) {
|
||||
if (isMobile() || !Settings.app('materialDesign')) {
|
||||
register('Checkbox', CheckboxComponent);
|
||||
} else {
|
||||
register('Checkbox', CheckboxMaterialDesignComponent, 'CheckboxMaterialDesignComponent');
|
||||
|
|
@ -118,7 +118,7 @@ export class AbstractApp {
|
|||
|
||||
initOnStartOrLangChange();
|
||||
|
||||
if (mobile) {
|
||||
if (isMobile()) {
|
||||
leftPanelDisabled(true);
|
||||
} else {
|
||||
window.addEventListener('resize', () => leftPanelDisabled(767 >= window.innerWidth));
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
ClientSideKeyName
|
||||
} from 'Common/EnumsUser';
|
||||
|
||||
import { doc, createElement, $htmlCL, Settings, leftPanelDisabled } from 'Common/Globals';
|
||||
import { doc, createElement, $htmlCL, Settings, leftPanelDisabled, isMobile } from 'Common/Globals';
|
||||
|
||||
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
|
||||
|
||||
|
|
@ -871,12 +871,11 @@ class AppUser extends AbstractApp {
|
|||
}
|
||||
}
|
||||
|
||||
initVerticalLayoutResizer(sClientSideKeyName) {
|
||||
initVerticalLayoutResizer() {
|
||||
const left = doc.getElementById('rl-left'),
|
||||
right = doc.getElementById('rl-right'),
|
||||
fDisable = bDisable => {
|
||||
this.setLayoutResizer(left, right, sClientSideKeyName, bDisable ? null : 'width');
|
||||
};
|
||||
fDisable = bDisable =>
|
||||
this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize, bDisable ? null : 'width');
|
||||
if (left && right) {
|
||||
fDisable(false);
|
||||
leftPanelDisabled.subscribe(value => fDisable(value));
|
||||
|
|
@ -1023,8 +1022,8 @@ class AppUser extends AbstractApp {
|
|||
}, 500);
|
||||
}
|
||||
|
||||
if (!Settings.app('mobile')) {
|
||||
setTimeout(() => this.initVerticalLayoutResizer(ClientSideKeyName.FolderListSize), 1);
|
||||
if (!isMobile()) {
|
||||
setTimeout(() => this.initVerticalLayoutResizer(), 1);
|
||||
}
|
||||
} else {
|
||||
this.logout();
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ export const $htmlCL = doc.documentElement.classList;
|
|||
|
||||
export const Settings = rl.settings;
|
||||
|
||||
/** @media screen and (max-width: 600px) { */
|
||||
export const isMobile = () => $htmlCL.contains('rl-mobile'); // || rl.settings.app('mobile')
|
||||
|
||||
export const dropdownVisibility = ko.observable(false).extend({ rateLimit: 0 });
|
||||
|
||||
export const moveAction = ko.observable(false);
|
||||
|
|
|
|||
6
dev/External/User/ko.js
vendored
6
dev/External/User/ko.js
vendored
|
|
@ -2,7 +2,7 @@ import 'External/ko';
|
|||
import ko from 'ko';
|
||||
import { HtmlEditor } from 'Common/Html';
|
||||
import { timeToNode } from 'Common/Momentor';
|
||||
import { doc } from 'Common/Globals';
|
||||
import { doc, isMobile } from 'Common/Globals';
|
||||
import { EmailAddressesComponent } from 'Component/EmailAddresses';
|
||||
|
||||
const rlContentType = 'snappymail/action',
|
||||
|
|
@ -86,7 +86,7 @@ ko.bindingHandlers.emailsTags = {
|
|||
// Start dragging selected messages
|
||||
ko.bindingHandlers.dragmessages = {
|
||||
init: (element, fValueAccessor) => {
|
||||
if (!rl.settings.app('mobile')) {
|
||||
if (!isMobile()) {
|
||||
element.addEventListener("dragstart", e => {
|
||||
let data = fValueAccessor()(e);
|
||||
dragImage || (dragImage = doc.getElementById('messagesDragImage'));
|
||||
|
|
@ -119,7 +119,7 @@ ko.bindingHandlers.dragmessages = {
|
|||
// Drop selected messages on folder
|
||||
ko.bindingHandlers.dropmessages = {
|
||||
init: (element, fValueAccessor) => {
|
||||
if (!rl.settings.app('mobile')) {
|
||||
if (!isMobile()) {
|
||||
const folder = fValueAccessor(),
|
||||
// folder = ko.dataFor(element),
|
||||
fnStop = e => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import ko from 'ko';
|
||||
|
||||
import { doc, $htmlCL } from 'Common/Globals';
|
||||
import { doc, $htmlCL/*, isMobile*/ } from 'Common/Globals';
|
||||
import { isNonEmptyArray } from 'Common/Utils';
|
||||
|
||||
let currentScreen = null,
|
||||
|
|
@ -9,7 +9,7 @@ let currentScreen = null,
|
|||
|
||||
const SCREENS = {},
|
||||
autofocus = dom => {
|
||||
// if (!rl.settings.app('mobile')) {
|
||||
// if (!isMobile()) {
|
||||
const af = dom.querySelector('[autofocus]');
|
||||
af && af.focus();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,8 +44,6 @@ export class MessageModel extends AbstractModel {
|
|||
|
||||
this.addObservables({
|
||||
subject: '',
|
||||
subjectPrefix: '',
|
||||
subjectSuffix: '',
|
||||
size: 0,
|
||||
dateTimeStampInUTC: 0,
|
||||
priority: MessagePriority.Normal,
|
||||
|
|
@ -117,8 +115,6 @@ export class MessageModel extends AbstractModel {
|
|||
clear() {
|
||||
this._reset();
|
||||
this.subject('');
|
||||
this.subjectPrefix('');
|
||||
this.subjectSuffix('');
|
||||
this.size(0);
|
||||
this.dateTimeStampInUTC(0);
|
||||
this.priority(MessagePriority.Normal);
|
||||
|
|
@ -192,14 +188,6 @@ export class MessageModel extends AbstractModel {
|
|||
json.Priority = MessagePriority.High == p || MessagePriority.Low == p ? p : MessagePriority.Normal;
|
||||
}
|
||||
if (super.revivePropertiesFromJson(json)) {
|
||||
if (isArray(json.SubjectParts)) {
|
||||
this.subjectPrefix(json.SubjectParts[0]);
|
||||
this.subjectSuffix(json.SubjectParts[1]);
|
||||
} else {
|
||||
this.subjectPrefix('');
|
||||
this.subjectSuffix(this.subject());
|
||||
}
|
||||
|
||||
// this.foundedCIDs = isArray(json.FoundedCIDs) ? json.FoundedCIDs : [];
|
||||
// this.attachments(AttachmentCollectionModel.reviveFromJson(json.Attachments, this.foundedCIDs));
|
||||
|
||||
|
|
@ -454,9 +442,6 @@ export class MessageModel extends AbstractModel {
|
|||
this.checked(message.checked());
|
||||
this.hasAttachments(message.hasAttachments());
|
||||
this.attachmentsSpecData(message.attachmentsSpecData());
|
||||
|
||||
this.subjectPrefix(this.subjectPrefix());
|
||||
this.subjectSuffix(this.subjectSuffix());
|
||||
}
|
||||
|
||||
this.body = null;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Capa } from 'Common/Enums';
|
||||
import { Focused, ClientSideKeyName } from 'Common/EnumsUser';
|
||||
import { doc, leftPanelDisabled, leftPanelType, moveAction, Settings } from 'Common/Globals';
|
||||
import { doc, leftPanelDisabled, leftPanelType, moveAction, Settings, isMobile } from 'Common/Globals';
|
||||
import { pString, pInt } from 'Common/Utils';
|
||||
import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
|
||||
import { i18n } from 'Common/Translator';
|
||||
|
|
@ -56,7 +56,7 @@ export class MailBoxUserScreen extends AbstractScreen {
|
|||
AppStore.focusedState(Focused.None);
|
||||
AppStore.focusedState(Focused.MessageList);
|
||||
|
||||
if (Settings.app('mobile')) {
|
||||
if (isMobile()) {
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ export class MailBoxUserScreen extends AbstractScreen {
|
|||
* @returns {void}
|
||||
*/
|
||||
onBuild() {
|
||||
if (!Settings.app('mobile')) {
|
||||
if (!isMobile()) {
|
||||
setTimeout(() =>
|
||||
rl.app.initHorizontalLayoutResizer(ClientSideKeyName.MessageListSize)
|
||||
, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Capa, KeyState } from 'Common/Enums';
|
||||
import { keyScope, leftPanelType, leftPanelDisabled, Settings } from 'Common/Globals';
|
||||
import { keyScope, leftPanelType, leftPanelDisabled, Settings, isMobile } from 'Common/Globals';
|
||||
import { runSettingsViewModelHooks } from 'Common/Plugins';
|
||||
import { initOnStartOrLangChange, i18n } from 'Common/Translator';
|
||||
|
||||
|
|
@ -104,7 +104,7 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
|
|||
keyScope(KeyState.Settings);
|
||||
leftPanelType('');
|
||||
|
||||
if (Settings.app('mobile')) {
|
||||
if (isMobile()) {
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import ko from 'ko';
|
||||
import { isMobile } from 'Common/Globals';
|
||||
|
||||
export const ThemeStore = {
|
||||
themes: ko.observableArray(),
|
||||
|
|
@ -11,8 +12,10 @@ export const ThemeStore = {
|
|||
|
||||
this.themes(Array.isArray(themes) ? themes : []);
|
||||
this.theme(Settings.get('Theme'));
|
||||
this.themeBackgroundName(Settings.get('UserBackgroundName'));
|
||||
this.themeBackgroundHash(Settings.get('UserBackgroundHash'));
|
||||
if (!isMobile()) {
|
||||
this.themeBackgroundName(Settings.get('UserBackgroundName'));
|
||||
this.themeBackgroundHash(Settings.get('UserBackgroundHash'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import ko from 'ko';
|
|||
import { KeyState } from 'Common/Enums';
|
||||
import { Focused } from 'Common/EnumsUser';
|
||||
|
||||
import { keyScope, leftPanelDisabled, Settings } from 'Common/Globals';
|
||||
import { keyScope, leftPanelDisabled, Settings, isMobile } from 'Common/Globals';
|
||||
|
||||
class AppUserStore {
|
||||
constructor() {
|
||||
|
|
@ -22,27 +22,19 @@ class AppUserStore {
|
|||
contactsIsAllowed: false
|
||||
});
|
||||
|
||||
const isMobile = Settings.app('mobile');
|
||||
|
||||
this.focusedState.subscribe((value) => {
|
||||
this.focusedState.subscribe(value => {
|
||||
switch (value) {
|
||||
case Focused.MessageList:
|
||||
keyScope(KeyState.MessageList);
|
||||
if (isMobile) {
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
isMobile() && leftPanelDisabled(true);
|
||||
break;
|
||||
case Focused.MessageView:
|
||||
keyScope(KeyState.MessageView);
|
||||
if (isMobile) {
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
isMobile() && leftPanelDisabled(true);
|
||||
break;
|
||||
case Focused.FolderList:
|
||||
keyScope(KeyState.FolderList);
|
||||
if (isMobile) {
|
||||
leftPanelDisabled(false);
|
||||
}
|
||||
isMobile() && leftPanelDisabled(false);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import ko from 'ko';
|
||||
|
||||
import { StorageResultType, Notification } from 'Common/Enums';
|
||||
import { Layout, Focused, MessageSetAction } from 'Common/EnumsUser';
|
||||
import { Focused, MessageSetAction } from 'Common/EnumsUser';
|
||||
import { doc } from 'Common/Globals';
|
||||
import { pInt, pString } from 'Common/Utils';
|
||||
import { plainToHtml } from 'Common/UtilsUser';
|
||||
|
|
@ -211,7 +211,7 @@ class MessageUserStore {
|
|||
|
||||
this.message.subscribe(message => {
|
||||
if (message) {
|
||||
if (Layout.NoPreview === SettingsStore.layout()) {
|
||||
if (!SettingsStore.usePreviewPane()) {
|
||||
AppStore.focusedState(Focused.MessageView);
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import ko from 'ko';
|
|||
import { MESSAGES_PER_PAGE_VALUES } from 'Common/Consts';
|
||||
import { Layout, EditorDefaultType } from 'Common/EnumsUser';
|
||||
import { pInt } from 'Common/Utils';
|
||||
import { doc } from 'Common/Globals';
|
||||
import { doc, isMobile } from 'Common/Globals';
|
||||
|
||||
class SettingsUserStore {
|
||||
constructor() {
|
||||
|
|
@ -34,7 +34,7 @@ class SettingsUserStore {
|
|||
autoLogout: 30
|
||||
});
|
||||
|
||||
this.usePreviewPane = ko.computed(() => Layout.NoPreview !== this.layout());
|
||||
this.usePreviewPane = ko.computed(() => Layout.NoPreview !== this.layout() && !isMobile());
|
||||
|
||||
this.subscribers();
|
||||
}
|
||||
|
|
@ -42,9 +42,9 @@ class SettingsUserStore {
|
|||
subscribers() {
|
||||
const htmlCL = doc.documentElement.classList;
|
||||
this.layout.subscribe(value => {
|
||||
htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value);
|
||||
htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
|
||||
htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
|
||||
htmlCL.toggle('rl-no-preview-pane', isMobile() || Layout.NoPreview === value);
|
||||
htmlCL.toggle('rl-side-preview-pane', !isMobile() && Layout.SidePreview === value);
|
||||
htmlCL.toggle('rl-bottom-preview-pane', !isMobile() && Layout.BottomPreview === value);
|
||||
dispatchEvent(new CustomEvent('rl-layout', {detail:value}));
|
||||
});
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@ class SettingsUserStore {
|
|||
this.messagesPerPage(settingsGet('MPP'));
|
||||
|
||||
this.showImages(!!settingsGet('ShowImages'));
|
||||
this.useCheckboxesInList(!!settingsGet('UseCheckboxesInList'));
|
||||
this.useCheckboxesInList(!!(isMobile() || settingsGet('UseCheckboxesInList')));
|
||||
this.allowDraftAutosave(!!settingsGet('AllowDraftAutosave'));
|
||||
this.useThreads(!!settingsGet('UseThreads'));
|
||||
this.replySameFolder(!!settingsGet('ReplySameFolder'));
|
||||
|
|
|
|||
|
|
@ -26,16 +26,6 @@
|
|||
100% {transform: translateX(0)}
|
||||
}
|
||||
|
||||
html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper {
|
||||
/*transform: scale(1.1);*/
|
||||
transform: translateY(-20px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*html.rl-started-trigger.no-mobile #rl-content {
|
||||
opacity: 0.7;
|
||||
}*/
|
||||
|
||||
html.rl-started-delay {
|
||||
|
||||
#rl-left {
|
||||
|
|
@ -56,97 +46,105 @@ html.rl-started-delay {
|
|||
}
|
||||
|
||||
html {
|
||||
&.rgba.backgroundsize .e-strip-animation {
|
||||
.e-strip-animation {
|
||||
background-size: 60px 60px;
|
||||
.rl-strip-animation(0, 0.1);
|
||||
animation: animate-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
html.no-mobile {
|
||||
@media screen and (min-width: 1000px) {
|
||||
|
||||
.b-login-content {
|
||||
.alertError {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s linear;
|
||||
html.rl-started-trigger .b-login-content .loginFormWrapper {
|
||||
/*transform: scale(1.1);*/
|
||||
transform: translateY(-20px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
html {
|
||||
.b-login-content {
|
||||
.alertError {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s linear;
|
||||
}
|
||||
.alertError[hidden] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.alertError[hidden] {
|
||||
|
||||
.b-login-content .errorAnimated {
|
||||
animation: login-form-shake 400ms ease-in-out;
|
||||
}
|
||||
|
||||
.b-login-content .errorAnimated .buttonLogin {
|
||||
color: #b94a48;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.b-login-content .afterLoginHide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.b-login-content .errorAnimated {
|
||||
animation: login-form-shake 400ms ease-in-out;
|
||||
}
|
||||
|
||||
.b-login-content .errorAnimated .buttonLogin {
|
||||
color: #b94a48;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.b-login-content .afterLoginHide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.b-login-content .loginFormWrapper {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
& .button-delete-transitions {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
& .b-folders .e-item .anim-action-class {
|
||||
animation: highlight-folder-row 0.5s linear;
|
||||
}
|
||||
|
||||
& .b-folders .btn.buttonContacts {
|
||||
transition: margin 0.3s linear;
|
||||
}
|
||||
|
||||
& .b-folders .b-content.opacity-on-panel-disabled {
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
& .messageList {
|
||||
.messageListItem {
|
||||
transition: max-height 400ms ease;
|
||||
.b-login-content .loginFormWrapper {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
|
||||
& .button-delete-transitions {
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
& .b-list-content {
|
||||
.e-contact-item {
|
||||
transition: max-height 400ms ease;
|
||||
& .b-folders .e-item .anim-action-class {
|
||||
animation: highlight-folder-row 0.5s linear;
|
||||
}
|
||||
}
|
||||
|
||||
& .modal.b-domain-content {
|
||||
.modal-body {
|
||||
transition: left 500ms ease;
|
||||
& .b-folders .btn.buttonContacts {
|
||||
transition: margin 0.3s linear;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-popups > .rl-view-model .modal {
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
#rl-popups > .rl-view-model:not(.show) .modal {
|
||||
top: -25%;
|
||||
}
|
||||
#rl-popups > .rl-view-model .modal.fade {
|
||||
opacity: 1;
|
||||
}
|
||||
#rl-popups > .rl-view-model:not(.show) .modal.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
& .b-folders .b-content.opacity-on-panel-disabled {
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
& .b-compose.loading .b-header-toolbar {
|
||||
background-size: 60px 60px;
|
||||
.rl-strip-animation(255, 0.2);
|
||||
animation: animate-stripes 2s linear infinite;
|
||||
& .messageList {
|
||||
.messageListItem {
|
||||
transition: max-height 400ms ease;
|
||||
}
|
||||
.listDragOver {
|
||||
transition: all 400ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
& .b-list-content {
|
||||
.e-contact-item {
|
||||
transition: max-height 400ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
& .modal.b-domain-content {
|
||||
.modal-body {
|
||||
transition: left 500ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-popups > .rl-view-model .modal {
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
#rl-popups > .rl-view-model:not(.show) .modal {
|
||||
top: -25%;
|
||||
}
|
||||
#rl-popups > .rl-view-model .modal.fade {
|
||||
opacity: 1;
|
||||
}
|
||||
#rl-popups > .rl-view-model:not(.show) .modal.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& .b-compose.loading .b-header-toolbar {
|
||||
background-size: 60px 60px;
|
||||
.rl-strip-animation(255, 0.2);
|
||||
animation: animate-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,10 +90,8 @@
|
|||
background-image: none;
|
||||
background: rgba(0, 0, 0, .5) !important;
|
||||
|
||||
.attachmentIcon {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -112,10 +112,7 @@
|
|||
|
||||
&.hideContactListCheckbox {
|
||||
.checkboxItem {
|
||||
display: none !important;
|
||||
}
|
||||
.sidebarParent {
|
||||
margin-right: 10px !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,32 +129,13 @@
|
|||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
border: 0 solid transparent;
|
||||
border: 0;
|
||||
border-left: 6px solid #eee;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.delimiter {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: #999;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebarParent {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
background-color: #eee;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: #bbb;
|
||||
&.focused {
|
||||
border-left-color: #bbb;
|
||||
}
|
||||
|
||||
&.deleted {
|
||||
|
|
@ -197,28 +175,22 @@
|
|||
}
|
||||
|
||||
&.checked {
|
||||
border-left-color: #69A8F5;
|
||||
z-index: 101;
|
||||
|
||||
.sidebarParent {
|
||||
background-color: #69A8F5;
|
||||
}
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: darken(#69A8F5, 5%) !important;
|
||||
&.focused {
|
||||
border-left-color: darken(#69A8F5, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
background-color: #fff;
|
||||
border-left-color: #398CF2;
|
||||
z-index: 102;
|
||||
|
||||
.sidebarParent {
|
||||
background-color: #398CF2;
|
||||
}
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: darken(#398CF2, 5%) !important;
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -394,7 +366,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
border: 0 solid transparent;
|
||||
border: 0;
|
||||
z-index: 100;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -389,7 +389,8 @@ html.rl-bottom-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
html.rl-mobile .hide-on-mobile {
|
||||
html.rl-mobile .hide-mobile,
|
||||
html:not(.rl-mobile) .show-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@
|
|||
.language-button {
|
||||
padding: 5px;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.e-mobile-switcher {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,7 @@ html, body {
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: var(--main-bg-color, #e3e3e3);
|
||||
background-size: var(--main-bg-size);
|
||||
background: var(--main-bg-color, #e3e3e3);
|
||||
color: var(--main-color, #333);
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
|
|
@ -28,11 +27,13 @@ body {
|
|||
}
|
||||
|
||||
/*
|
||||
.rl-mobile / .no-mobile
|
||||
.rl-mobile
|
||||
*/
|
||||
@media screen and (min-width: 1000px) {
|
||||
body {
|
||||
background-image: var(--main-bg-image);
|
||||
background-size: var(--main-bg-size);
|
||||
background-repeat: var(--main-bg-repeat);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -183,19 +183,6 @@ html.rl-no-preview-pane {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.delimiter {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
.messageListItem:last-child {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
&.selected {
|
||||
border-bottom: 1px solid #bfd5ef;
|
||||
}
|
||||
}
|
||||
|
||||
.fullThreadsParent {
|
||||
height: 25px;
|
||||
padding: 3px 5px;
|
||||
|
|
@ -206,49 +193,24 @@ html.rl-no-preview-pane {
|
|||
.messageListItem {
|
||||
|
||||
position: relative;
|
||||
height: 52px;
|
||||
max-height: 60px;
|
||||
font-size: 12px;
|
||||
line-height: 21px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
margin: 0;
|
||||
border: 0 solid transparent;
|
||||
padding: 5px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid rgba(153, 153, 153, 0.2);
|
||||
border-left: 6px solid #eee;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
background-color: #f9f9f9;
|
||||
|
||||
/* &:nth-child(even) {
|
||||
background-color: #f3f3f3;
|
||||
}*/
|
||||
|
||||
.delimiter {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: #999;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.sidebarParent {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
background-color: #eee;
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: #ccc !important;
|
||||
border-left-color: #ccc;
|
||||
}
|
||||
|
||||
.importantMark {
|
||||
|
|
@ -260,7 +222,7 @@ html.rl-no-preview-pane {
|
|||
|
||||
&.deleted-mark {
|
||||
opacity: .7;
|
||||
.sender, .subject, .subject-prefix, .subject-suffix {
|
||||
.subjectParent {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
|
@ -269,15 +231,6 @@ html.rl-no-preview-pane {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
&.e-single-line {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&.e-single-line .wrapper {
|
||||
line-height: 25px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&.new {
|
||||
max-height: 0;
|
||||
}
|
||||
|
|
@ -288,62 +241,36 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.checkboxMessage {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-top: 11px;
|
||||
padding: 0 8px 0 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&.e-single-line .checkboxMessage {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
|
||||
&.e-single-line .flagParent {
|
||||
float: left;
|
||||
padding: 0 8px 0 2px;
|
||||
}
|
||||
|
||||
.dateParent {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
time {
|
||||
margin: 0 5px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.e-single-line .dateParent {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsParent {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
position: relative;
|
||||
margin: 2px 10px 0 5px;
|
||||
}
|
||||
|
||||
&.e-single-line .attachmentParent {
|
||||
float: left;
|
||||
margin: 0 8px 0 0;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.threadsCountParent {
|
||||
|
|
@ -366,25 +293,10 @@ html.rl-no-preview-pane {
|
|||
border-color: #666;
|
||||
}
|
||||
|
||||
&.e-single-line .senderParent {
|
||||
display: inline-block;
|
||||
text-overflow: none;
|
||||
width: 200px;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
display: block;
|
||||
color: #000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.e-single-line .subjectParent {
|
||||
}
|
||||
|
||||
.senderParent, .subjectParent, .dateParent {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -395,7 +307,7 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
&.emptySubject .subjectParent {
|
||||
.subject, .subject-prefix, .subject-suffix {
|
||||
.subject {
|
||||
display: none;
|
||||
}
|
||||
.emptySubjectText {
|
||||
|
|
@ -403,7 +315,8 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
.sender, .subject, .subject-suffix {
|
||||
.sender, .subject {
|
||||
margin-left: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -432,20 +345,6 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
.subject-prefix {
|
||||
color: #888;
|
||||
/*font-style: italic;*/
|
||||
}
|
||||
|
||||
.attachment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flagOff, .flagOn, .flagOnHalf {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flagOff {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
|
|
@ -454,12 +353,12 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.flagOn, .flagOnHalf {
|
||||
display: none;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.replyFlag, .forwardFlag {
|
||||
display: none;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.answered .replyFlag {
|
||||
|
|
@ -470,81 +369,53 @@ html.rl-no-preview-pane {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
&.withAttachments .attachment {
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
&:not(.withAttachments) .attachmentParent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hasUnseenSubMessage {
|
||||
background-color: #FFFFD9;
|
||||
.sidebarParent {
|
||||
background-color: lighten(orange, 30%);
|
||||
}
|
||||
&.focused .sidebarParent {
|
||||
background-color: darken(orange, 10%) !important;
|
||||
border-left-color: lighten(orange, 30%);
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.unseen {
|
||||
background-color: #FFFFD9;
|
||||
.sender, .subject, .subject-suffix {
|
||||
border-left-color: orange;
|
||||
.sender, .subjectParent {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sidebarParent {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: darken(orange, 10%) !important;
|
||||
&.focused {
|
||||
border-left-color: darken(orange, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
.sidebarParent {
|
||||
background-color: lighten(#398CF2, 10%) !important;
|
||||
}
|
||||
border-left-color: lighten(#398CF2, 10%);
|
||||
|
||||
&.focused .sidebarParent {
|
||||
background-color: darken(#398CF2, 5%) !important;
|
||||
&.focused {
|
||||
border-left-color: darken(#398CF2, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: #DFEFFF;
|
||||
border-bottom-color: rgba(57, 140, 242, 0.2);
|
||||
border-left-color: #398CF2;
|
||||
z-index: 101;
|
||||
|
||||
.sidebarParent {
|
||||
background-color: #398CF2 !important;
|
||||
}
|
||||
|
||||
.delimiter {
|
||||
background-color: #398CF2;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
+ .messageListItem .delimiter {
|
||||
background-color: #398CF2;
|
||||
opacity: 0.3;
|
||||
+ .messageListItem {
|
||||
border-bottom-color: rgba(57, 140, 242, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.hasFlaggedSubMessage {
|
||||
.flagOff, .flagOn {
|
||||
display: none;
|
||||
}
|
||||
.flagOnHalf {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.flagged {
|
||||
.flagOff, .flagOnHalf {
|
||||
display: none;
|
||||
}
|
||||
.flagOn {
|
||||
display: inline-block;
|
||||
}
|
||||
&:not(.flagged) .flagOn,
|
||||
&:not(.hasFlaggedSubMessage) .flagOnHalf,
|
||||
&.flagged .flagOff, &.hasFlaggedSubMessage .flagOff {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -560,10 +431,7 @@ html.rl-no-preview-pane {
|
|||
|
||||
&.hideMessageListCheckbox {
|
||||
.checkboxMessage, .checkboxCheckAll {
|
||||
display: none !important;
|
||||
}
|
||||
.sidebarParent {
|
||||
margin-right: 10px !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -572,7 +440,7 @@ html.rl-no-preview-pane {
|
|||
@media screen and (min-width: 1401px) {
|
||||
.messageList .b-content .messageListItem {
|
||||
font-size: 13px;
|
||||
.dateParent {
|
||||
time {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
|
@ -598,3 +466,76 @@ html.rl-mobile {
|
|||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.messageListItem {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-side-preview-pane, .rl-mobile {
|
||||
|
||||
.messageListItem {
|
||||
|
||||
.checkboxMessage {
|
||||
margin: 10px 0 -5px;
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
flex: 1 0 auto;
|
||||
margin-left: 30px;
|
||||
order: 1;
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.rl-mobile):not(.rl-side-preview-pane) .messageList {
|
||||
|
||||
.messageListItem {
|
||||
|
||||
line-height: 25px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.checkboxMessage {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.flagParent {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.attachmentParent {
|
||||
margin: 6px 8px 0 0;
|
||||
}
|
||||
|
||||
.senderParent {
|
||||
font-weight: normal;
|
||||
text-overflow: none;
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,7 +125,6 @@ html.rl-no-preview-pane {
|
|||
|
||||
.messageItemHeader {
|
||||
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-top: 0;
|
||||
|
|
@ -133,12 +132,6 @@ html.rl-no-preview-pane {
|
|||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.date {
|
||||
}
|
||||
|
||||
.subjectParent {
|
||||
font-size: 18px;
|
||||
|
|
@ -157,9 +150,7 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.informationShort {
|
||||
margin: 4px 0;
|
||||
margin-left: 5px;
|
||||
margin-right: 50px;
|
||||
margin: 4px 50px 0 5px;
|
||||
|
||||
a {
|
||||
.g-ui-link;
|
||||
|
|
|
|||
|
|
@ -169,7 +169,3 @@ textarea + .settings-save-trigger {
|
|||
.list-table {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
html.mobile .hide-mobile {
|
||||
display:none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@ class LoginAdminView extends AbstractViewCenter {
|
|||
constructor() {
|
||||
super('Admin/Login', 'AdminLogin');
|
||||
|
||||
const appSettingsGet = rl.settings.app;
|
||||
this.mobile = !!appSettingsGet('mobile');
|
||||
this.mobileDevice = !!appSettingsGet('mobileDevice');
|
||||
|
||||
this.hideSubmitButton = appSettingsGet('hideSubmitButton');
|
||||
this.hideSubmitButton = rl.settings.app('hideSubmitButton');
|
||||
|
||||
this.addObservables({
|
||||
login: '',
|
||||
|
|
|
|||
|
|
@ -1090,7 +1090,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
}
|
||||
|
||||
setFocusInPopup() {
|
||||
// rl.settings.app('mobile') ||
|
||||
// isMobile() ||
|
||||
setTimeout(() => {
|
||||
if (!this.to()) {
|
||||
this.to.focused(true);
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ class FilterPopupView extends AbstractViewPopup {
|
|||
}
|
||||
|
||||
onShowWithDelay() {
|
||||
if (this.isNew() && this.filter()/* && !rl.settings.app('mobile')*/) {
|
||||
if (this.isNew() && this.filter()/* && !isMobile()*/) {
|
||||
this.filter().nameFocused(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ class FolderCreatePopupView extends AbstractViewPopup {
|
|||
}
|
||||
|
||||
onShowWithDelay() {
|
||||
// rl.settings.app('mobile') ||
|
||||
// isMobile() ||
|
||||
this.folderNameFocused(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ class IdentityPopupView extends AbstractViewPopup {
|
|||
}
|
||||
|
||||
onShowWithDelay() {
|
||||
if (!this.owner()/* && !rl.settings.app('mobile')*/) {
|
||||
if (!this.owner()/* && !isMobile()*/) {
|
||||
this.emailFocused(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ class TwoFactorTestPopupView extends AbstractViewPopup {
|
|||
}
|
||||
|
||||
onShowWithDelay() {
|
||||
// rl.settings.app('mobile') ||
|
||||
// isMobile() ||
|
||||
this.codeFocused(true);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,9 +18,6 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
|
|||
constructor(name) {
|
||||
super(name, 'SystemDropDown');
|
||||
|
||||
this.mobile = !!Settings.app('mobile');
|
||||
this.mobileDevice = !!Settings.app('mobileDevice');
|
||||
|
||||
this.allowSettings = !!Settings.capa(Capa.Settings);
|
||||
this.allowHelp = !!Settings.capa(Capa.Help);
|
||||
|
||||
|
|
|
|||
|
|
@ -69,9 +69,6 @@ class LoginUserView extends AbstractViewCenter {
|
|||
signMeType: LoginSignMeType.Unused
|
||||
});
|
||||
|
||||
this.mobile = !!Settings.app('mobile');
|
||||
this.mobileDevice = !!Settings.app('mobileDevice');
|
||||
|
||||
this.forgotPasswordLinkUrl = Settings.app('forgotPasswordLinkUrl');
|
||||
this.registrationLinkUrl = Settings.app('registrationLinkUrl');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import ko from 'ko';
|
||||
|
||||
import { Capa, KeyState } from 'Common/Enums';
|
||||
import { Focused, Layout } from 'Common/EnumsUser';
|
||||
import { leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
|
||||
import { Focused } from 'Common/EnumsUser';
|
||||
import { leftPanelDisabled, moveAction, Settings, isMobile } from 'Common/Globals';
|
||||
import { mailBox, settings } from 'Common/Links';
|
||||
import { setFolderHash } from 'Common/Cache';
|
||||
|
||||
|
|
@ -54,12 +54,9 @@ export class FolderListMailBoxUserView extends AbstractViewLeft {
|
|||
onBuild(dom) {
|
||||
const qs = s => dom.querySelector(s),
|
||||
eqs = (ev, s) => ev.target.closestWithin(s, dom),
|
||||
isMobile = Settings.app('mobile'),
|
||||
fSelectFolder = (el, event, starred) => {
|
||||
const isMove = moveAction();
|
||||
if (isMobile) {
|
||||
leftPanelDisabled(true);
|
||||
}
|
||||
isMobile() && leftPanelDisabled(true);
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -78,7 +75,7 @@ export class FolderListMailBoxUserView extends AbstractViewLeft {
|
|||
event.ctrlKey
|
||||
);
|
||||
} else {
|
||||
if (Layout.NoPreview === SettingsStore.layout()) {
|
||||
if (!SettingsStore.usePreviewPane()) {
|
||||
MessageStore.message(null);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import {
|
|||
} from 'Common/Enums';
|
||||
|
||||
import {
|
||||
Layout,
|
||||
Focused,
|
||||
ComposeType,
|
||||
FolderType,
|
||||
|
|
@ -16,7 +15,7 @@ import {
|
|||
|
||||
import { UNUSED_OPTION_VALUE } from 'Common/Consts';
|
||||
|
||||
import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
|
||||
import { doc, leftPanelDisabled, moveAction, Settings, isMobile } from 'Common/Globals';
|
||||
|
||||
import { computedPaginatorHelper } from 'Common/UtilsUser';
|
||||
import { File } from 'Common/File';
|
||||
|
|
@ -61,7 +60,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
|
||||
this.iGoToUpUpOrDownDownTimeout = 0;
|
||||
|
||||
this.mobile = !!Settings.app('mobile');
|
||||
this.newMoveToFolder = !!Settings.get('NewMoveToFolder');
|
||||
|
||||
this.allowReload = !!Settings.capa(Capa.Reload);
|
||||
|
|
@ -125,11 +123,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
this.sLastSearchValue = '';
|
||||
|
||||
this.addComputables({
|
||||
messageListItemTemplate: () =>
|
||||
this.mobile || Layout.SidePreview === SettingsStore.layout()
|
||||
? 'MailMessageListItem'
|
||||
: 'MailMessageListItemNoPreviewPane',
|
||||
|
||||
messageListSearchDesc: () => {
|
||||
const value = MessageStore.messageListEndSearch();
|
||||
return value ? i18n('MESSAGE_LIST/SEARCH_RESULT_FOR', { 'SEARCH': value }) : ''
|
||||
|
|
@ -179,9 +172,9 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
isUnSpamVisible: () =>
|
||||
this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder(),
|
||||
|
||||
mobileCheckedStateShow: () => this.mobile ? 0 < MessageStore.messageListChecked().length : true,
|
||||
mobileCheckedStateShow: () => isMobile() ? 0 < MessageStore.messageListChecked().length : true,
|
||||
|
||||
mobileCheckedStateHide: () => this.mobile ? !MessageStore.messageListChecked().length : true,
|
||||
mobileCheckedStateHide: () => isMobile() ? !MessageStore.messageListChecked().length : true,
|
||||
|
||||
messageListFocused: () => Focused.MessageList === AppStore.focusedState()
|
||||
});
|
||||
|
|
@ -388,7 +381,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
return false;
|
||||
});
|
||||
|
||||
if (Layout.NoPreview === SettingsStore.layout() && !this.message()) {
|
||||
if (!SettingsStore.usePreviewPane() && !this.message()) {
|
||||
this.selector.iFocusedNextHelper = up ? -1 : 1;
|
||||
} else {
|
||||
this.selector.iSelectNextHelper = up ? -1 : 1;
|
||||
|
|
@ -405,8 +398,8 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
|
||||
useAutoSelect() {
|
||||
return !this.messageListDisableAutoSelect()
|
||||
&& !/is:unseen/.test(this.mainMessageListSearch())
|
||||
&& Layout.NoPreview !== SettingsStore.layout();
|
||||
&& !/is:unseen/.test(this.mainMessageListSearch())
|
||||
&& SettingsStore.usePreviewPane();
|
||||
}
|
||||
|
||||
searchEnterAction() {
|
||||
|
|
@ -680,7 +673,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
this.selector.init(dom.querySelector('.b-content'), KeyState.MessageList);
|
||||
|
||||
dom.addEventListener('click', event => {
|
||||
this.mobile && leftPanelDisabled(true);
|
||||
isMobile() && leftPanelDisabled(true);
|
||||
|
||||
if (eqs(event, '.messageList .b-message-list-wrapper') && Focused.MessageView === AppStore.focusedState()) {
|
||||
AppStore.focusedState(Focused.MessageList);
|
||||
|
|
@ -706,7 +699,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
|
|||
this.initUploaderForAppend();
|
||||
this.initShortcuts();
|
||||
|
||||
if (!rl.settings.app('mobile') && Settings.capa(Capa.Prefetch)) {
|
||||
if (!isMobile() && Settings.capa(Capa.Prefetch)) {
|
||||
ifvisible.idle(this.prefetchNextTick.bind(this));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@ import {
|
|||
ClientSideKeyName,
|
||||
FolderType,
|
||||
Focused,
|
||||
Layout,
|
||||
MessageSetAction
|
||||
} from 'Common/EnumsUser';
|
||||
|
||||
import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
|
||||
import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings, isMobile } from 'Common/Globals';
|
||||
|
||||
import { inFocus } from 'Common/Utils';
|
||||
import { mailToHelper } from 'Common/UtilsUser';
|
||||
|
|
@ -86,8 +85,6 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
this.allowMessageActions = !!Settings.capa(Capa.MessageActions);
|
||||
this.allowMessageListActions = !!Settings.capa(Capa.MessageListActions);
|
||||
|
||||
this.mobile = !!Settings.app('mobile');
|
||||
|
||||
this.attachmentsActions = AppStore.attachmentsActions;
|
||||
|
||||
this.message = MessageStore.message;
|
||||
|
|
@ -287,14 +284,14 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
@command((self) => !self.messageListAndMessageViewLoading())
|
||||
goUpCommand() {
|
||||
dispatchEvent(new CustomEvent('mailbox.message-list.selector.go-up',
|
||||
{detail:Layout.NoPreview === this.layout() ? !!this.message() : true}
|
||||
{detail:SettingsStore.usePreviewPane() || !!this.message()}
|
||||
));
|
||||
}
|
||||
|
||||
@command((self) => !self.messageListAndMessageViewLoading())
|
||||
goDownCommand() {
|
||||
dispatchEvent(new CustomEvent('mailbox.message-list.selector.go-down',
|
||||
{detail:Layout.NoPreview === this.layout() ? !!this.message() : true}
|
||||
{detail:SettingsStore.usePreviewPane() || !!this.message()}
|
||||
));
|
||||
}
|
||||
|
||||
|
|
@ -408,7 +405,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
this.oHeaderDom = dom.querySelector('.messageItemHeader');
|
||||
if (this.oHeaderDom) {
|
||||
if (!this.resizeObserver) {
|
||||
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.throttle(50).bind(this));
|
||||
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
|
||||
}
|
||||
this.resizeObserver.observe(this.oHeaderDom);
|
||||
} else if (this.resizeObserver) {
|
||||
|
|
@ -417,7 +414,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
|
||||
const eqs = (ev, s) => ev.target.closestWithin(s, dom);
|
||||
dom.addEventListener('click', event => {
|
||||
this.mobile && leftPanelDisabled(true);
|
||||
isMobile() && leftPanelDisabled(true);
|
||||
|
||||
let el = eqs(event, 'a');
|
||||
if (el) {
|
||||
|
|
@ -506,7 +503,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
*/
|
||||
escShortcuts() {
|
||||
if (this.viewModelVisible && this.message()) {
|
||||
const preview = Layout.NoPreview !== this.layout();
|
||||
const preview = SettingsStore.usePreviewPane();
|
||||
if (this.fullScreenMode()) {
|
||||
this.fullScreenMode(false);
|
||||
|
||||
|
|
@ -616,7 +613,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
|
||||
// change focused state
|
||||
shortcuts.add('arrowleft', '', KeyState.MessageView, () => {
|
||||
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
|
||||
if (!this.fullScreenMode() && this.message() && SettingsStore.usePreviewPane()) {
|
||||
if (this.oMessageScrollerDom && 0 < this.oMessageScrollerDom.scrollLeft) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -626,7 +623,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
|
|||
});
|
||||
// shortcuts.add('tab', 'shift', KeyState.MessageView, (event, handler) => {
|
||||
shortcuts.add('tab', '', KeyState.MessageView, () => {
|
||||
if (!this.fullScreenMode() && this.message() && Layout.NoPreview !== this.layout()) {
|
||||
if (!this.fullScreenMode() && this.message() && SettingsStore.usePreviewPane()) {
|
||||
AppStore.focusedState(Focused.MessageList);
|
||||
}
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { KeyState } from 'Common/Enums';
|
||||
import { leftPanelDisabled } from 'Common/Globals';
|
||||
import { leftPanelDisabled, isMobile } from 'Common/Globals';
|
||||
import { settings, mailbox } from 'Common/Links';
|
||||
import { getFolderInboxName } from 'Common/Cache';
|
||||
|
||||
|
|
@ -15,13 +15,11 @@ export class MenuSettingsUserView extends AbstractViewLeft {
|
|||
|
||||
this.leftPanelDisabled = leftPanelDisabled;
|
||||
|
||||
this.mobile = rl.settings.app('mobile');
|
||||
|
||||
this.menu = screen.menu;
|
||||
}
|
||||
|
||||
onBuild(dom) {
|
||||
if (this.mobile) {
|
||||
if (isMobile()) {
|
||||
dom.addEventListener('click', event =>
|
||||
event.target.closestWithin('.b-settings-menu .e-item.selectable', dom) && leftPanelDisabled(true)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { mailbox } from 'Common/Links';
|
||||
import { getFolderInboxName } from 'Common/Cache';
|
||||
import { leftPanelDisabled } from 'Common/Globals';
|
||||
import { leftPanelDisabled, isMobile } from 'Common/Globals';
|
||||
|
||||
import MessageStore from 'Stores/User/Message';
|
||||
|
||||
|
|
@ -10,8 +10,6 @@ export class PaneSettingsUserView extends AbstractViewRight {
|
|||
constructor() {
|
||||
super('User/Settings/Pane', 'SettingsPane');
|
||||
|
||||
this.mobile = rl.settings.app('mobile');
|
||||
|
||||
this.leftPanelDisabled = leftPanelDisabled;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +32,7 @@ export class PaneSettingsUserView extends AbstractViewRight {
|
|||
}
|
||||
|
||||
onBuild(dom) {
|
||||
this.mobile && dom.addEventListener('click', () => leftPanelDisabled(true));
|
||||
isMobile() && dom.addEventListener('click', () => leftPanelDisabled(true));
|
||||
}
|
||||
|
||||
backToMailBoxClick() {
|
||||
|
|
|
|||
14
dev/boot.js
14
dev/boot.js
|
|
@ -129,7 +129,7 @@ win.rl = {
|
|||
if (RL_APP_DATA.Title) {
|
||||
title += (title ? ' - ' : '') + RL_APP_DATA.Title;
|
||||
}
|
||||
doc.title = null == title ? '' : '' + title;
|
||||
doc.title = title;
|
||||
},
|
||||
|
||||
initData: appData => {
|
||||
|
|
@ -172,15 +172,7 @@ setInterval(setTimestamp, 60000); // 1m
|
|||
|
||||
[eId('app-css'),eId('app-theme-link')].forEach(css => css.href = css.dataset.href);
|
||||
|
||||
loadScript('./?/'
|
||||
+ (options.admin ? 'Admin' : '')
|
||||
+ 'AppData@'
|
||||
+ (options.mobile ? 'mobile' : 'no-mobile')
|
||||
+ (options.mobileDevice ? '-1' : '-0')
|
||||
+ '/'
|
||||
+ (rl.hash.get() || '0')
|
||||
+ '/'
|
||||
+ Math.random().toString().substr(2)
|
||||
+ '/').then(() => {});
|
||||
loadScript(`./?/${options.admin ? 'Admin' : ''}AppData/${rl.hash.get() || '0'}/${Math.random().toString().substr(2)}/`)
|
||||
.then(() => {});
|
||||
|
||||
})(this);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue