Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 20:19:22 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add mobile version (beta)

Browse source
This commit is contained in:
RainLoop Team 2016-05-01 04:07:10 +03:00
parent 1391648e1b
commit b0ffd84ac6
76 changed files with 2945 additions and 845 deletions
Download patch file Download diff file Expand all files Collapse all files

105
dev/App/Abstract.jsx
View file

@ -264,6 +264,7 @@ class AbstractApp extends AbstractBoot
Events.pub('rl.bootstart');
const
mobile = Settings.appSettingsGet('mobile'),
ssm = require('ssm'),
ko = require('ko')
;
@ -294,54 +295,6 @@ class AbstractApp extends AbstractBoot
_.delay(Utils.windowResizeCallback, 1000);
ssm.addState({
id: 'mobile',
maxWidth: 767,
onEnter: () => {
Globals.$html.addClass('ssm-state-mobile');
Events.pub('ssm.mobile-enter');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-mobile');
Events.pub('ssm.mobile-leave');
}
});
ssm.addState({
id: 'tablet',
minWidth: 768,
maxWidth: 999,
onEnter: function() {
Globals.$html.addClass('ssm-state-tablet');
},
onLeave: function() {
Globals.$html.removeClass('ssm-state-tablet');
}
});
ssm.addState({
id: 'desktop',
minWidth: 1000,
maxWidth: 1400,
onEnter: () => {
Globals.$html.addClass('ssm-state-desktop');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-desktop');
}
});
ssm.addState({
id: 'desktop-large',
minWidth: 1400,
onEnter: () => {
Globals.$html.addClass('ssm-state-desktop-large');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-desktop-large');
}
});
Events.sub('ssm.mobile-enter', () => {
Globals.leftPanelDisabled(true);
});
@ -350,6 +303,62 @@ class AbstractApp extends AbstractBoot
Globals.leftPanelDisabled(false);
});
if (!mobile)
{
ssm.addState({
id: 'mobile',
maxWidth: 767,
onEnter: () => {
Globals.$html.addClass('ssm-state-mobile');
Events.pub('ssm.mobile-enter');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-mobile');
Events.pub('ssm.mobile-leave');
}
});
ssm.addState({
id: 'tablet',
minWidth: 768,
maxWidth: 999,
onEnter: function() {
Globals.$html.addClass('ssm-state-tablet');
},
onLeave: function() {
Globals.$html.removeClass('ssm-state-tablet');
}
});
ssm.addState({
id: 'desktop',
minWidth: 1000,
maxWidth: 1400,
onEnter: () => {
Globals.$html.addClass('ssm-state-desktop');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-desktop');
}
});
ssm.addState({
id: 'desktop-large',
minWidth: 1400,
onEnter: () => {
Globals.$html.addClass('ssm-state-desktop-large');
},
onLeave: () => {
Globals.$html.removeClass('ssm-state-desktop-large');
}
});
}
else
{
Globals.$html.addClass('ssm-state-mobile').addClass('rl-mobile');
Events.pub('ssm.mobile-enter');
}
Globals.leftPanelDisabled.subscribe((bValue) => {
Globals.$html.toggleClass('rl-left-panel-disabled', bValue);
Globals.$html.toggleClass('rl-left-panel-enabled', !bValue);

2
dev/App/User.jsx
View file

@ -396,7 +396,7 @@ class AppUser extends AbstractApp
}).fail(() => {
if (callback)
{
callback(false);
_.delay(() => callback(false), 1);
}
});
}

2
dev/External/ko.js vendored
View file

@ -31,7 +31,7 @@
window.setTimeout(function(){
fValue($oEl.width());
}, 500);
};
}
;
$w.on('resize', fInit);

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

@ -72,6 +72,11 @@
AppStore.focusedState(Enums.Focused.None);
AppStore.focusedState(Enums.Focused.MessageList);
if (Settings.appSettingsGet('mobile'))
{
Globals.leftPanelDisabled(true);
}
if (!Settings.capa(Enums.Capa.Folders))
{
Globals.leftPanelType(
@ -144,7 +149,7 @@
MailBoxUserScreen.prototype.onBuild = function ()
{
if (!Globals.bMobileDevice)
if (!Globals.bMobileDevice && !Settings.appSettingsGet('mobile'))
{
_.defer(function () {
require('App/User').default.initHorizontalLayoutResizer(Enums.ClientSideKeyName.MessageListSize);

5
dev/Screen/User/Settings.js
View file

@ -139,6 +139,11 @@
this.setSettingsTitle();
Globals.keyScope(Enums.KeyState.Settings);
Globals.leftPanelType('');
if (Settings.appSettingsGet('mobile'))
{
Globals.leftPanelDisabled(true);
}
};
SettingsUserScreen.prototype.setSettingsTitle = function ()

2
dev/Storage/Settings.jsx
View file

@ -13,8 +13,6 @@ class SettingsStorage
this.appSettings = Utils.getConfigurationFromScriptTag('application');
this.appSettings = Utils.isNormal(this.appSettings) ? this.appSettings : {};
window.console.log(this.appSettings);
}
/**

4
dev/Styles/Admin.less
View file

@ -109,3 +109,7 @@
}
}
}
html.rl-mobile .b-settings-content .legend {
width: auto;
}

40
dev/Styles/Animations.less
View file

@ -44,27 +44,27 @@ html.csstransitions.rl-started-trigger.no-mobile .b-login-content .loginFormWrap
.transition(opacity 0.5s linear);
}
.rl-anim {
html.csstransitions.rl-started-delay {
&.csstransitions.no-mobile.rl-started-delay {
#rl-left {
.transition(width 0.3s ease-out);
}
#rl-right {
.transition(left 0.3s ease-out);
}
#rl-sub-left, #rl-sub-left .messageList .inputSearch {
.transition(width 0.3s ease-out);
}
#rl-sub-right {
.transition(left 0.3s ease-out);
}
#rl-left {
.transition(width 0.3s ease-out);
}
#rl-right {
.transition(~'left 0.3s ease-out, right 0.3s ease-out');
}
#rl-sub-left, #rl-sub-left .messageList .inputSearch {
.transition(width 0.3s ease-out);
}
#rl-sub-right {
.transition(left 0.3s ease-out);
}
}
.rl-anim {
&.cssanimations.csstransitions.no-mobile .b-login-content .errorAnimated {
animation: login-form-shake 400ms ease-in-out;
}
@ -78,10 +78,6 @@ html.csstransitions.rl-started-trigger.no-mobile .b-login-content .loginFormWrap
opacity: 0;
}
/* &.csstransitions.no-mobile #rl-content {
.transition(opacity 0.3s ease-out);
}*/
&.csstransitions.no-mobile .btn-group.dropdown.colored-toggle.open .animate-this-icon-on-open {
animation: bounce-me .5s linear;
}

15
dev/Styles/Contacts.less
View file

@ -416,3 +416,18 @@
}
}
html.rl-mobile {
.b-contacts-content {
.b-list-content, .b-list-toolbar, .b-list-footer-toolbar {
width: 170px;
}
.b-list-toolbar .e-search {
width: 150px;
}
.b-view-content-toolbar, .b-view-content {
left: 170px;
}
}
}

14
dev/Styles/FolderList.less
View file

@ -242,7 +242,7 @@
max-width: fit-content;
white-space: nowrap;
overflow: hidden;
height: 20px;
height: 19px;
display: inline-block;
}
}
@ -258,4 +258,16 @@ html.rl-left-panel-disabled, html.rl-left-panel-short {
margin-top: 10px !important;
margin-left: 0 !important;
}
#rl-left {
visibility: hidden;
}
}
html.rl-mobile {
.btn.buttonCompose {
width: 100%;
}
.btn.buttonContacts {
display: none;
}
}

31
dev/Styles/Layout.less
View file

@ -19,6 +19,22 @@
min-height: 400px;
}
html.rl-mobile {
#rl-center {
min-width: 250px;
min-height: 250px;
}
&.rl-left-panel-enabled #rl-right {
right: -150px;
}
&.rl-left-panel-disabled #rl-right {
left: 5px !important;
}
}
#rl-top {
.g-ui-absolute-reset;
bottom: auto;
@ -353,3 +369,18 @@ html.rl-ctrl-key-pressed {
margin-top: 20px;
font-size: 20px;
}
html.rl-mobile .hide-on-mobile {
display: none;
}
.show-on-mobile {
display: none;
}
html.rl-mobile .show-on-mobile {
display: initial;
}
html.rl-mobile .width100-on-mobile {
width: 100%;
}

10
dev/Styles/MessageList.less
View file

@ -1,5 +1,5 @@
html.rl-no-preview-pane {
html.rl-no-preview-pane {
.messageList.message-selected {
display: none;
}
@ -15,6 +15,7 @@ html.rl-no-preview-pane {
height: 30px;
padding: 10px @rlMainBorderSize;
z-index: 102;
white-space: nowrap;
}
.b-footer {
@ -75,6 +76,7 @@ html.rl-no-preview-pane {
height: 29px;
padding: 10px 8px 10px 11px;
z-index: 101;
white-space: nowrap;
background-color: #eee;
// #gradient > .vertical(#f4f4f4, #dfdfdf);
@ -624,3 +626,9 @@ html.cssanimations.rl-anim .messageList .line-loading {
cursor: pointer;
cursor: move;
}
html.rl-mobile {
#rl-sub-left .messageList .inputSearch {
width: 160px !important;
}
}

6
dev/Styles/MessageView.less
View file

@ -17,7 +17,7 @@ html.rl-no-preview-pane {
position: absolute;
top: 0;
right: 0;
left: -2px;
left: 0;
height: 30px;
padding: 10px 0;
color: #fff;
@ -120,6 +120,8 @@ html.rl-no-preview-pane {
background-color: #f8f8f8;
border-top: 0px;
border-bottom: 1px solid #ddd;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
z-index: 1;
top: 0;
left: 0;
@ -159,6 +161,7 @@ html.rl-no-preview-pane {
.informationShort {
margin-left: 22px;
margin-right: 50px;
a {
.g-ui-link;
}
@ -563,6 +566,7 @@ html.rl-no-preview-pane .messageView {
.b-content {
top: 50px;
left: 0;
bottom: @rlBottomMargin;
right: @rlBottomMargin;
border: @rlMainBorderSize solid @rlMainDarkColor;

4
dev/Styles/Settings.less
View file

@ -112,3 +112,7 @@
}
}
}
html.rl-mobile .b-settings-content .legend {
width: auto;
}

8
dev/Styles/SettingsAccounts.less
View file

@ -1,6 +1,10 @@
.b-settings-accounts {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;
@ -58,6 +62,8 @@
.account-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}
@ -103,6 +109,8 @@
.identity-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}

6
dev/Styles/SettingsFilters.less
View file

@ -1,6 +1,10 @@
.b-settings-filters {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;
@ -54,6 +58,8 @@
.filter-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}

4
dev/Styles/SettingsFolders.less
View file

@ -1,6 +1,10 @@
.b-settings-folders {
html.rl-mobile &{
margin-right: 35px;
}
&.ignore-folder-subscribe {
.subscribe-folder, .unsubscribe-folder {
display: none;

6
dev/Styles/SettingsGeneral.less
View file

@ -1,6 +1,10 @@
.b-settings-general {
html.rl-mobile &{
margin-right: 15px;
}
.notification-desc-denied {
color: #999;
display: none;
@ -20,7 +24,7 @@
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
padding: 2px 0px;

4
dev/Styles/SettingsOpenPGP.less
View file

@ -1,6 +1,10 @@
.b-settings-open-pgp {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;

4
dev/Styles/SettingsTemplates.less
View file

@ -1,6 +1,10 @@
.b-settings-templates {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;

8
dev/Styles/SettingsThemes.less
View file

@ -7,8 +7,16 @@
}
}
html.rl-mobile .b-settings-content .b-settings-theme .legend {
width: auto;
}
.b-themes-list {
html.rl-mobile &{
margin-right: 15px;
}
.e-item {
display: inline-block;

4
dev/Styles/SystemDropDown.less
View file

@ -192,6 +192,4 @@ html.ssm-state-mobile .accountPlace {
animation: thirdBar 1s infinite;
}
}
}
}

4
dev/Styles/Ui.less
View file

@ -174,11 +174,11 @@ html.rgba .g-ui-resizable-delimiter-highlight {
}
}
e-spinner {
.e-spinner {
display: none;
}
.e-powered {
.e-powered, .e-mobile-switcher {
margin-top: 8px;
color: #333;
a {

30
dev/Styles/_BootstrapFix.less
View file

@ -382,3 +382,33 @@ html.no-rgba .modal {
.control-label.remove-padding-top {
padding-top: 0;
}
html.rl-mobile {
.popups .modal {
width: 100% !important;
width: calc(~'100% - 20px') !important;
}
.b-settings-content {
padding: 10px;
padding-left: 20px;
}
.list-table {
width: 100%;
max-width: 100%;
}
.form-horizontal {
.control-group {
.control-label {
text-align: left;
float: none;
}
.controls {
margin-left: 0;
}
}
}
}

3
dev/View/Admin/Login.js
View file

@ -28,6 +28,9 @@
this.logoPowered = !!Settings.settingsGet('LoginPowered');
this.mobile = !!Settings.appSettingsGet('mobile');
this.mobileDevice = !!Settings.appSettingsGet('mobileDevice');
this.login = ko.observable('');
this.password = ko.observable('');

3
dev/View/User/AbstractSystemDropDown.js
View file

@ -33,6 +33,9 @@
this.logoImg = Utils.trim(Settings.settingsGet('UserLogo'));
this.logoTitle = Utils.trim(Settings.settingsGet('UserLogoTitle'));
this.mobile = !!Settings.appSettingsGet('mobile');
this.mobileDevice = !!Settings.appSettingsGet('mobileDevice');
this.allowSettings = !!Settings.capa(Enums.Capa.Settings);
this.allowHelp = !!Settings.capa(Enums.Capa.Help);

3
dev/View/User/Login.js
View file

@ -53,6 +53,9 @@
this.logoPowered = !!Settings.settingsGet('LoginPowered');
this.loginDescription = Utils.trim(Settings.settingsGet('LoginDescription'));
this.mobile = !!Settings.appSettingsGet('mobile');
this.mobileDevice = !!Settings.appSettingsGet('mobileDevice');
this.forgotPasswordLinkUrl = Settings.appSettingsGet('forgotPasswordLinkUrl');
this.registrationLinkUrl = Settings.appSettingsGet('registrationLinkUrl');

6
dev/View/User/MailBox/FolderList.js
View file

@ -80,8 +80,14 @@
var
self = this,
bMobile = Settings.appSettingsGet('mobile'),
fSelectFolder = function (oEvent, bStarred) {
if (bMobile)
{
Globals.leftPanelDisabled(true);
}
oEvent.preventDefault();
if (bStarred)

44
dev/View/User/MailBox/MessageList.js
View file

@ -48,6 +48,8 @@
this.bPrefetch = false;
this.emptySubjectValue = '';
this.mobile = !!Settings.appSettingsGet('mobile');
this.allowReload = !!Settings.capa(Enums.Capa.Reload);
this.allowSearch = !!Settings.capa(Enums.Capa.Search);
this.allowSearchAdv = !!Settings.capa(Enums.Capa.SearchAdv);
@ -63,6 +65,11 @@
this.folderList = FolderStore.folderList;
this.composeInEdit = AppStore.composeInEdit;
this.allowComposer = !!Settings.capa(Enums.Capa.Composer);
this.leftPanelDisabled = Globals.leftPanelDisabled;
this.selectorMessageSelected = MessageStore.selectorMessageSelected;
this.selectorMessageFocused = MessageStore.selectorMessageFocused;
this.isMessageSelected = MessageStore.isMessageSelected;
@ -101,9 +108,9 @@
this.dragOverBodyArea = ko.observable(null);
this.messageListItemTemplate = ko.computed(function () {
return Enums.Layout.SidePreview === SettingsStore.layout() ?
return this.mobile || Enums.Layout.SidePreview === SettingsStore.layout() ?
'MailMessageListItem' : 'MailMessageListItemNoPreviewPane';
});
}, this);
this.messageListSearchDesc = ko.computed(function () {
var sValue = MessageStore.messageListEndSearch();
@ -338,6 +345,30 @@
MessageListMailBoxUserView.prototype.iGoToUpUpOrDownDownTimeout = 0;
MessageListMailBoxUserView.prototype.hideLeft = function (oItem, oEvent)
{
oEvent.preventDefault();
oEvent.stopPropagation();
Globals.leftPanelDisabled(true);
};
MessageListMailBoxUserView.prototype.showLeft = function (oItem, oEvent)
{
oEvent.preventDefault();
oEvent.stopPropagation();
Globals.leftPanelDisabled(false);
};
MessageListMailBoxUserView.prototype.composeClick = function ()
{
if (Settings.capa(Enums.Capa.Composer))
{
kn.showScreenPopup(require('View/Popup/Compose'));
}
};
MessageListMailBoxUserView.prototype.goToUpUpOrDownDown = function (bUp)
{
var self = this;
@ -707,6 +738,15 @@
this.selector.init(this.oContentVisible, this.oContentScrollable, Enums.KeyState.MessageList);
if (this.mobile)
{
oDom
.on('click', function () {
Globals.leftPanelDisabled(true);
})
;
}
oDom
.on('click', '.messageList .b-message-list-wrapper', function () {
if (Enums.Focused.MessageView === AppStore.focusedState())

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

@ -72,6 +72,8 @@
this.logoImg = Utils.trim(Settings.settingsGet('UserLogoMessage'));
this.logoIframe = Utils.trim(Settings.settingsGet('UserIframeMessage'));
this.mobile = !!Settings.appSettingsGet('mobile');
this.attachmentsActions = AppStore.attachmentsActions;
this.message = MessageStore.message;
@ -688,6 +690,15 @@
this.oHeaderDom = $('.messageItemHeader', oDom);
this.oHeaderDom = this.oHeaderDom[0] ? this.oHeaderDom : null;
if (this.mobile)
{
oDom
.on('click', function () {
Globals.leftPanelDisabled(true);
})
;
}
oDom
.on('click', 'a', function (oEvent) {
// setup maito protocol

12
dev/View/User/Settings/Menu.js
View file

@ -12,6 +12,7 @@
Links = require('Common/Links'),
Cache = require('Common/Cache'),
Settings = require('Storage/Settings'),
kn = require('Knoin/Knoin'),
AbstractView = require('Knoin/AbstractView')
@ -29,6 +30,8 @@
this.leftPanelDisabled = Globals.leftPanelDisabled;
this.mobile = Settings.appSettingsGet('mobile');
this.menu = oScreen.menu;
kn.constructorEnd(this);
@ -44,6 +47,15 @@
// self.backToMailBoxClick();
// });
if (this.mobile)
{
oDom
.on('click', '.b-settings-menu .e-item.selectable', function () {
Globals.leftPanelDisabled(true);
})
;
}
key('up, down', Enums.KeyState.Settings, _.throttle(function (event, handler) {
var

36
dev/View/User/Settings/Pane.js
View file

@ -6,6 +6,10 @@
var
_ = require('_'),
Globals = require('Common/Globals'),
Settings = require('Storage/Settings'),
kn = require('Knoin/Knoin'),
AbstractView = require('Knoin/AbstractView')
;
@ -18,6 +22,10 @@
{
AbstractView.call(this, 'Right', 'SettingsPane');
this.mobile = Settings.appSettingsGet('mobile');
this.leftPanelDisabled = Globals.leftPanelDisabled;
kn.constructorEnd(this);
}
@ -29,6 +37,34 @@
require('Stores/User/Message').message(null);
};
PaneSettingsUserView.prototype.hideLeft = function (oItem, oEvent)
{
oEvent.preventDefault();
oEvent.stopPropagation();
Globals.leftPanelDisabled(true);
};
PaneSettingsUserView.prototype.showLeft = function (oItem, oEvent)
{
oEvent.preventDefault();
oEvent.stopPropagation();
Globals.leftPanelDisabled(false);
};
PaneSettingsUserView.prototype.onBuild = function (oDom)
{
if (this.mobile)
{
oDom
.on('click', function () {
Globals.leftPanelDisabled(true);
})
;
}
};
PaneSettingsUserView.prototype.backToMailBoxClick = function ()
{
kn.setHash(require('Common/Links').inbox(