mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-29 12:09:20 +03:00
More responsive interface with auto resize (#10)
This commit is contained in:
RainLoop Team
parent
acf80b96a3
commit
17b2afcf22
32 changed files with 1093 additions and 296 deletions
|
|
@ -260,4 +260,54 @@ AbstractApp.prototype.bootstart = function ()
|
|||
_.delay(function () {
|
||||
Utils.windowResize();
|
||||
}, 1000);
|
||||
|
||||
ssm.addState({
|
||||
id: 'mobile',
|
||||
maxWidth: 767,
|
||||
onEnter: function(){
|
||||
$html.addClass('ssm-state-mobile');
|
||||
},
|
||||
onLeave: function(){
|
||||
$html.removeClass('ssm-state-mobile');
|
||||
}
|
||||
});
|
||||
|
||||
ssm.addState({
|
||||
id: 'tablet',
|
||||
minWidth: 768,
|
||||
maxWidth: 1023,
|
||||
onEnter: function(){
|
||||
$html.addClass('ssm-state-tablet');
|
||||
},
|
||||
onLeave: function(){
|
||||
$html.removeClass('ssm-state-tablet');
|
||||
}
|
||||
});
|
||||
|
||||
ssm.addState({
|
||||
id: 'desktop',
|
||||
minWidth: 1000,
|
||||
maxWidth: 1366,
|
||||
onEnter: function(){
|
||||
$html.addClass('ssm-state-desktop');
|
||||
},
|
||||
onLeave: function(){
|
||||
$html.removeClass('ssm-state-desktop');
|
||||
}
|
||||
});
|
||||
|
||||
ssm.addState({
|
||||
id: 'desktop-large',
|
||||
minWidth: 1367,
|
||||
onEnter: function(){
|
||||
$html.addClass('ssm-state-desktop-large');
|
||||
},
|
||||
onLeave: function(){
|
||||
$html.removeClass('ssm-state-desktop-large');
|
||||
}
|
||||
});
|
||||
|
||||
_.delay(function () {
|
||||
ssm.ready();
|
||||
}, 500);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -222,13 +222,13 @@ AdminApp.prototype.bootstart = function ()
|
|||
|
||||
kn.startScreens([AdminSettingsScreen]);
|
||||
|
||||
if (!Globals.bMobileDevice)
|
||||
{
|
||||
_.defer(function () {
|
||||
Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center',
|
||||
120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize);
|
||||
});
|
||||
}
|
||||
// if (!Globals.bMobileDevice)
|
||||
// {
|
||||
// _.defer(function () {
|
||||
// Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center',
|
||||
// 120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize);
|
||||
// });
|
||||
// }
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
|
|||
|
|
@ -848,13 +848,13 @@ RainLoopApp.prototype.bootstart = function ()
|
|||
window.SimplePace.set(100);
|
||||
}
|
||||
|
||||
if (!Globals.bMobileDevice)
|
||||
{
|
||||
_.defer(function () {
|
||||
Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center',
|
||||
120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize);
|
||||
});
|
||||
}
|
||||
// if (!Globals.bMobileDevice)
|
||||
// {
|
||||
// _.defer(function () {
|
||||
// Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center',
|
||||
// 120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize);
|
||||
// });
|
||||
// }
|
||||
|
||||
}, this));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,16 +113,16 @@ MailBoxScreen.prototype.onStart = function ()
|
|||
}, this);
|
||||
};
|
||||
|
||||
MailBoxScreen.prototype.onBuild = function ()
|
||||
{
|
||||
if (!Globals.bMobileDevice)
|
||||
{
|
||||
_.defer(function () {
|
||||
Utils.initLayoutResizer('#rl-resizer-left', '#rl-resizer-right', '#rl-right',
|
||||
350, 800, 350, 350, Enums.ClientSideKeyName.MailBoxListSize);
|
||||
});
|
||||
}
|
||||
};
|
||||
//MailBoxScreen.prototype.onBuild = function ()
|
||||
//{
|
||||
// if (!Globals.bMobileDevice)
|
||||
// {
|
||||
// _.defer(function () {
|
||||
// Utils.initLayoutResizer('#rl-resizer-left', '#rl-resizer-right', '#rl-right',
|
||||
// 350, 800, 350, 350, Enums.ClientSideKeyName.MailBoxListSize);
|
||||
// });
|
||||
// }
|
||||
//};
|
||||
|
||||
/**
|
||||
* @return {Array}
|
||||
|
|
|
|||
|
|
@ -67,6 +67,25 @@ html.rl-started-trigger.no-mobile #rl-content {
|
|||
|
||||
.rl-anim {
|
||||
|
||||
&.csstransitions.no-mobile {
|
||||
|
||||
#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);
|
||||
}
|
||||
}
|
||||
|
||||
&.csstransitions.no-mobile #rl-content {
|
||||
.transition(opacity 0.3s ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
@contacts-popup-left-width: 270px;
|
||||
@contacts-popup-left-width: 250px;
|
||||
|
||||
.b-contacts-content {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,13 @@
|
|||
|
||||
#rl-bg {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#rl-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -6,7 +15,7 @@
|
|||
|
||||
#rl-center {
|
||||
.g-ui-absolute-reset;
|
||||
min-width: 900px;
|
||||
min-width: 700px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
|
|
@ -18,6 +27,7 @@
|
|||
|
||||
#rl-bottom {
|
||||
.g-ui-absolute-reset;
|
||||
|
||||
top: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -26,82 +36,149 @@
|
|||
.g-ui-absolute-reset;
|
||||
|
||||
right: auto;
|
||||
width: 100%;
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
.g-ui-absolute-reset;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#rl-resizer-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 35%;
|
||||
}
|
||||
|
||||
#rl-resizer-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 65%;
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
#rl-top-resizer-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-top-resizer-left {
|
||||
#rl-sub-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: auto;
|
||||
// width: @rlLeftWidth;
|
||||
min-width: 120px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
#rl-bg {
|
||||
z-index: -1;
|
||||
#rl-sub-right {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
html.mobile {
|
||||
#rl-top-resizer-left {
|
||||
width: @rlLeftWidth - 60;
|
||||
html.ssm-state-desktop-large {
|
||||
|
||||
#rl-left {
|
||||
width: @rlLeftWidth + 20;
|
||||
}
|
||||
#rl-top-resizer-right {
|
||||
left: @rlLeftWidth - 60;
|
||||
|
||||
#rl-right {
|
||||
left: @rlLeftWidth + 20;
|
||||
}
|
||||
#rl-resizer-left {
|
||||
|
||||
#rl-sub-left {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
left: 500px;
|
||||
}
|
||||
|
||||
.b-compose.modal {
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.b-contacts-content.modal {
|
||||
width: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
html.ssm-state-desktop {
|
||||
#rl-left {
|
||||
width: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: @rlLeftWidth;
|
||||
}
|
||||
|
||||
#rl-sub-left {
|
||||
width: 350px;
|
||||
}
|
||||
#rl-resizer-right {
|
||||
|
||||
#rl-sub-right {
|
||||
left: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
html.ssm-state-tablet {
|
||||
#rl-left {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
#rl-sub-left {
|
||||
width: 320px;
|
||||
|
||||
.messageList .inputSearch {
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
left: 320px;
|
||||
}
|
||||
|
||||
.b-compose.modal {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.b-contacts-content.modal {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
html.ssm-state-mobile {
|
||||
#rl-left {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#rl-right {
|
||||
left: 120px;
|
||||
}
|
||||
|
||||
#rl-sub-left {
|
||||
width: 280px;
|
||||
|
||||
.messageList .inputSearch {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-sub-right {
|
||||
left: 280px;
|
||||
}
|
||||
|
||||
.b-compose.modal {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.b-contacts-content.modal {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
html.rl-no-preview-pane {
|
||||
|
||||
#rl-resizer-left {
|
||||
#rl-sub-left {
|
||||
right: @rlBottomMargin !important;
|
||||
width: inherit;
|
||||
|
||||
.messageList .inputSearch {
|
||||
width: 300px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#rl-resizer-right {
|
||||
#rl-sub-right {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +1,97 @@
|
|||
|
||||
.rl-view-model {
|
||||
&.RL-Login, &.RL-LoginNew, &.RL-AdminLogin {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.b-login-content {
|
||||
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
margin-left: -230px;
|
||||
|
||||
.loginFormWrapper {
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 380px;
|
||||
|
||||
.loginForm {
|
||||
background-color: #efefef;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 40px 40px 10px 40px;
|
||||
}
|
||||
|
||||
#recaptcha_image img {
|
||||
border: 1px solid #ccc;
|
||||
.border-radius(3px);
|
||||
}
|
||||
|
||||
.inputLoginForm, .inputEmail, .inputLogin, .inputPassword {
|
||||
font-size: 18px;
|
||||
height: 30px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.signMeLabel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input-append .add-on {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
background: none;
|
||||
margin-left: -35px;
|
||||
z-index: 1000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.input-append .add-on i {
|
||||
font-size: 17px;
|
||||
line-height: 29px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.control-group.error .add-on i {
|
||||
color: #b94a48;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonLogin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 0 0 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loginAfter {
|
||||
display: inline-block;
|
||||
height: 90%;
|
||||
vertical-align: middle;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.flag-selector {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rl-view-model {
|
||||
&.RL-Login, &.RL-LoginNew, &.RL-AdminLogin {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.b-login-content {
|
||||
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
.loginFormWrapper {
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
width: 380px;
|
||||
|
||||
.loginForm {
|
||||
background-color: #efefef;
|
||||
text-align: left;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 40px 40px 10px 40px;
|
||||
}
|
||||
|
||||
#recaptcha_image img {
|
||||
border: 1px solid #ccc;
|
||||
.border-radius(3px);
|
||||
}
|
||||
|
||||
.inputLoginForm, .inputEmail, .inputLogin, .inputPassword {
|
||||
font-size: 18px;
|
||||
height: 30px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.signMeLabel {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input-append .add-on {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
background: none;
|
||||
margin-left: -35px;
|
||||
z-index: 1000;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.input-append .add-on i {
|
||||
font-size: 17px;
|
||||
line-height: 29px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.control-group.error .add-on i {
|
||||
color: #b94a48;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonLogin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin: 0 0 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loginAfter {
|
||||
display: inline-block;
|
||||
height: 90%;
|
||||
vertical-align: middle;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.flag-selector {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ html.rl-no-preview-pane {
|
|||
left: 0;
|
||||
height: 30px;
|
||||
padding: 10px @rlMainBorderSize;
|
||||
min-width: 280px;
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +24,6 @@ html.rl-no-preview-pane {
|
|||
left: 0;
|
||||
height: 30px;
|
||||
padding: 7px;
|
||||
min-width: 300px;
|
||||
z-index: 101;
|
||||
|
||||
background-color: #eee;
|
||||
|
|
@ -76,7 +74,6 @@ html.rl-no-preview-pane {
|
|||
left: 0;
|
||||
height: 29px;
|
||||
padding: 10px 8px 10px 11px;
|
||||
min-width: 280px;
|
||||
z-index: 101;
|
||||
|
||||
background-color: #eee;
|
||||
|
|
@ -117,7 +114,6 @@ html.rl-no-preview-pane {
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 101;
|
||||
min-width: 300px;
|
||||
|
||||
.box-sizing(border-box);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
@rlSyncFile: "images/sync.gif";
|
||||
@rlSyncFileStop: "images/sync.png";
|
||||
@rlEditorSprite: "images/editor.png";
|
||||
|
||||
@rlLeftWidth: 230px;
|
||||
@rlInputBorderSize: 1px;
|
||||
@rlMainBorderSize: 1px;
|
||||
@rlLowBorderSize: 1px;
|
||||
|
||||
@rlMainBorderRadius: 5px;
|
||||
@rlLowBorderRadius: 3px;
|
||||
|
||||
@rlMainShadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
|
||||
|
||||
@rlLowMargin: 8px;
|
||||
@rlBottomMargin: 5px;
|
||||
|
||||
@rlMainDarkColor: #aaa;
|
||||
@rlMessageDelimiterColor: #999;
|
||||
|
||||
// bootstart
|
||||
@btnBorderRadius: 2px;
|
||||
|
||||
@tooltipColor: #eee;
|
||||
@tooltipBackground: #333;
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: #333;
|
||||
|
||||
@rlSyncFile: "images/sync.gif";
|
||||
@rlSyncFileStop: "images/sync.png";
|
||||
@rlEditorSprite: "images/editor.png";
|
||||
|
||||
@rlLeftWidth: 200px;
|
||||
@rlInputBorderSize: 1px;
|
||||
@rlMainBorderSize: 1px;
|
||||
@rlLowBorderSize: 1px;
|
||||
|
||||
@rlMainBorderRadius: 5px;
|
||||
@rlLowBorderRadius: 3px;
|
||||
|
||||
@rlMainShadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
|
||||
|
||||
@rlLowMargin: 8px;
|
||||
@rlBottomMargin: 5px;
|
||||
|
||||
@rlMainDarkColor: #aaa;
|
||||
@rlMessageDelimiterColor: #999;
|
||||
|
||||
// bootstart
|
||||
@btnBorderRadius: 2px;
|
||||
|
||||
@tooltipColor: #eee;
|
||||
@tooltipBackground: #333;
|
||||
@tooltipArrowWidth: 5px;
|
||||
@tooltipArrowColor: #333;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
function AdminLoginViewModel()
|
||||
{
|
||||
KnoinAbstractViewModel.call(this, 'Right', 'AdminLogin');
|
||||
KnoinAbstractViewModel.call(this, 'Center', 'AdminLogin');
|
||||
|
||||
this.login = ko.observable('');
|
||||
this.password = ko.observable('');
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
function LoginViewModel()
|
||||
{
|
||||
KnoinAbstractViewModel.call(this, 'Right', 'Login');
|
||||
KnoinAbstractViewModel.call(this, 'Center', 'Login');
|
||||
|
||||
var oData = RL.data();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue