Resize for the folder list. (#10)

This commit is contained in:
RainLoop Team 2014-01-03 17:32:25 +04:00
parent 3c8532b21a
commit 1dc5a45564
10 changed files with 357 additions and 233 deletions

View file

@ -848,13 +848,13 @@ RainLoopApp.prototype.bootstart = function ()
window.SimplePace.set(100); window.SimplePace.set(100);
} }
// if (!Globals.bMobileDevice) if (!Globals.bMobileDevice)
// { // if (false)
// _.defer(function () { {
// Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center', _.defer(function () {
// 120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize); Utils.initLayoutResizer('#rl-left', '#rl-right', Enums.ClientSideKeyName.FolderListSize);
// }); });
// } }
}, this)); }, this));
} }

View file

@ -1038,89 +1038,127 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList); RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList);
}; };
Utils.initLayoutResizer = function (sLeft, sRight, sParent/*, koSwither*/, Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
{ {
iLimitL = iLimitL || 300;
iMaxL = iMaxL || 500;
iDefL = iDefL || (iMaxL - iLimitL / 2);
iLimitR = iLimitR || 300;
var var
iTemp = 0,
oLeft = $(sLeft), oLeft = $(sLeft),
oRight = $(sRight), oRight = $(sRight),
oParent = $(sParent), mLeftWidth = RL.local().get(sClientSideKeyName) || null,
iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL, fResizeFunction = function (oEvent, oObject) {
fFunction = function (oEvent, oObject, bForce) { if (oObject && oObject.size && oObject.size.width)
if (oObject || bForce)
{ {
var RL.local().set(sClientSideKeyName, oObject.size.width);
iWidth = oParent.width(),
iProc = oObject ? oObject.size.width / iWidth * 100 : null oRight.css({
'left': '' + oObject.size.width + 'px'
});
}
}
; ;
if (null === iProc && bForce) if (null !== mLeftWidth)
{
iProc = oLeft.width() / iWidth * 100;
}
if (null !== iProc)
{ {
oLeft.css({ oLeft.css({
'width': '', 'width': '' + mLeftWidth + 'px'
'height': '',
'right': '' + (100 - iProc) + '%'
}); });
oRight.css({ oRight.css({
'width': '', 'left': '' + mLeftWidth + 'px'
'height': '',
'left': '' + iProc + '%'
}); });
} }
}
},
fResiseFunction = function (oEvent, oObject)
{
if (/*koSwither && koSwither() && */oObject && oObject.element &&
oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
{
var iWidth = oParent.width();
iTemp = iWidth - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable('option', 'maxWidth', iTemp);
if (oObject.size && oObject.size.width)
{
RL.local().set(sClientSideKeyName, oObject.size.width);
}
fFunction(null, null, true);
}
}
;
if (iLeftWidth)
{
oLeft.width(iLeftWidth);
}
iTemp = oParent.width() - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable({ oLeft.resizable({
'minWidth': iLimitL, 'helper': 'ui-resizable-helper',
'maxWidth': iTemp, 'minWidth': 120,
'maxWidth': 400,
'handles': 'e', 'handles': 'e',
'resize': fFunction, 'stop': fResizeFunction
'stop': fFunction
}); });
fFunction(null, null, true);
$window.resize(_.throttle(fResiseFunction, 400));
}; };
//Utils.initLayoutResizer1 = function (sLeft, sRight, sParent/*, koSwither*/,
// iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
//{
// iLimitL = iLimitL || 300;
// iMaxL = iMaxL || 500;
// iDefL = iDefL || (iMaxL - iLimitL / 2);
// iLimitR = iLimitR || 300;
//
// var
// iTemp = 0,
// oLeft = $(sLeft),
// oRight = $(sRight),
// oParent = $(sParent),
// iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL,
// fFunction = function (oEvent, oObject, bForce) {
//
// if (oObject || bForce)
// {
// var
// iWidth = oParent.width(),
// iProc = oObject ? oObject.size.width / iWidth * 100 : null
// ;
//
// if (null === iProc && bForce)
// {
// iProc = oLeft.width() / iWidth * 100;
// }
//
// if (null !== iProc)
// {
// oLeft.css({
// 'width': '',
// 'height': '',
// 'right': '' + (100 - iProc) + '%'
// });
//
// oRight.css({
// 'width': '',
// 'height': '',
// 'left': '' + iProc + '%'
// });
// }
// }
// },
// fResiseFunction = function (oEvent, oObject)
// {
// if (/*koSwither && koSwither() && */oObject && oObject.element &&
// oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
// {
// var iWidth = oParent.width();
// iTemp = iWidth - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
// oLeft.resizable('option', 'maxWidth', iTemp);
// if (oObject.size && oObject.size.width)
// {
// RL.local().set(sClientSideKeyName, oObject.size.width);
// }
//
// fFunction(null, null, true);
// }
// }
// ;
//
// if (iLeftWidth)
// {
// oLeft.width(iLeftWidth);
// }
//
// iTemp = oParent.width() - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
//
// oLeft.resizable({
// 'minWidth': iLimitL,
// 'maxWidth': iTemp,
// 'handles': 'e',
// 'resize': fFunction,
// 'stop': fFunction
// });
//
// fFunction(null, null, true);
// $window.resize(_.throttle(fResiseFunction, 400));
//};
/** /**
* @param {Object} oMessageTextBody * @param {Object} oMessageTextBody
*/ */

View file

@ -35,8 +35,8 @@
#rl-left { #rl-left {
.g-ui-absolute-reset; .g-ui-absolute-reset;
right: auto;
width: @rlLeftWidth; width: @rlLeftWidth;
min-width: 120px;
} }
#rl-right { #rl-right {
@ -117,15 +117,15 @@ html.ssm-state-tablet {
} }
#rl-sub-left { #rl-sub-left {
width: 300px; width: 310px;
.messageList .inputSearch { .messageList .inputSearch {
width: 210px; width: 220px;
} }
} }
#rl-sub-right { #rl-sub-right {
left: 300px; left: 310px;
} }
.b-compose.modal { .b-compose.modal {
@ -147,15 +147,15 @@ html.ssm-state-mobile {
} }
#rl-sub-left { #rl-sub-left {
width: 280px; width: 310px;
.messageList .inputSearch { .messageList .inputSearch {
width: 190px; width: 220px;
} }
} }
#rl-sub-right { #rl-sub-right {
left: 280px; left: 310px;
} }
.b-compose.modal { .b-compose.modal {
@ -167,6 +167,12 @@ html.ssm-state-mobile {
} }
} }
.ui-resizable-helper {
border-right: 5px solid #777;
border-right-color: rgba(255,255,255,0.7);
}
html.rl-no-preview-pane { html.rl-no-preview-pane {
#rl-sub-left { #rl-sub-left {

View file

@ -2,7 +2,7 @@
"name": "RainLoop", "name": "RainLoop",
"title": "RainLoop Webmail", "title": "RainLoop Webmail",
"version": "1.6.0", "version": "1.6.0",
"release": "623", "release": "624",
"description": "Simple, modern & fast web-based email client", "description": "Simple, modern & fast web-based email client",
"homepage": "http://rainloop.net", "homepage": "http://rainloop.net",
"main": "Gruntfile.js", "main": "Gruntfile.js",

View file

@ -5989,8 +5989,8 @@ html.mobile * {
margin: 0; margin: 0;
border: 0; border: 0;
z-index: 0; z-index: 0;
right: auto;
width: 200px; width: 200px;
min-width: 120px;
} }
#rl-right { #rl-right {
position: absolute; position: absolute;
@ -6056,13 +6056,13 @@ html.ssm-state-tablet #rl-right {
left: 150px; left: 150px;
} }
html.ssm-state-tablet #rl-sub-left { html.ssm-state-tablet #rl-sub-left {
width: 300px; width: 310px;
} }
html.ssm-state-tablet #rl-sub-left .messageList .inputSearch { html.ssm-state-tablet #rl-sub-left .messageList .inputSearch {
width: 210px; width: 220px;
} }
html.ssm-state-tablet #rl-sub-right { html.ssm-state-tablet #rl-sub-right {
left: 300px; left: 310px;
} }
html.ssm-state-tablet .b-compose.modal { html.ssm-state-tablet .b-compose.modal {
width: 800px; width: 800px;
@ -6077,13 +6077,13 @@ html.ssm-state-mobile #rl-right {
left: 120px; left: 120px;
} }
html.ssm-state-mobile #rl-sub-left { html.ssm-state-mobile #rl-sub-left {
width: 280px; width: 310px;
} }
html.ssm-state-mobile #rl-sub-left .messageList .inputSearch { html.ssm-state-mobile #rl-sub-left .messageList .inputSearch {
width: 190px; width: 220px;
} }
html.ssm-state-mobile #rl-sub-right { html.ssm-state-mobile #rl-sub-right {
left: 280px; left: 310px;
} }
html.ssm-state-mobile .b-compose.modal { html.ssm-state-mobile .b-compose.modal {
width: 800px; width: 800px;
@ -6091,6 +6091,10 @@ html.ssm-state-mobile .b-compose.modal {
html.ssm-state-mobile .b-contacts-content.modal { html.ssm-state-mobile .b-contacts-content.modal {
width: 800px; width: 800px;
} }
.ui-resizable-helper {
border-right: 5px solid #777;
border-right-color: rgba(255, 255, 255, 0.7);
}
html.rl-no-preview-pane #rl-sub-left { html.rl-no-preview-pane #rl-sub-left {
right: 5px !important; right: 5px !important;
width: inherit; width: inherit;

File diff suppressed because one or more lines are too long

View file

@ -1650,89 +1650,127 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList); RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList);
}; };
Utils.initLayoutResizer = function (sLeft, sRight, sParent/*, koSwither*/, Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
{ {
iLimitL = iLimitL || 300;
iMaxL = iMaxL || 500;
iDefL = iDefL || (iMaxL - iLimitL / 2);
iLimitR = iLimitR || 300;
var var
iTemp = 0,
oLeft = $(sLeft), oLeft = $(sLeft),
oRight = $(sRight), oRight = $(sRight),
oParent = $(sParent), mLeftWidth = RL.local().get(sClientSideKeyName) || null,
iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL, fResizeFunction = function (oEvent, oObject) {
fFunction = function (oEvent, oObject, bForce) { if (oObject && oObject.size && oObject.size.width)
if (oObject || bForce)
{ {
var RL.local().set(sClientSideKeyName, oObject.size.width);
iWidth = oParent.width(),
iProc = oObject ? oObject.size.width / iWidth * 100 : null oRight.css({
'left': '' + oObject.size.width + 'px'
});
}
}
; ;
if (null === iProc && bForce) if (null !== mLeftWidth)
{
iProc = oLeft.width() / iWidth * 100;
}
if (null !== iProc)
{ {
oLeft.css({ oLeft.css({
'width': '', 'width': '' + mLeftWidth + 'px'
'height': '',
'right': '' + (100 - iProc) + '%'
}); });
oRight.css({ oRight.css({
'width': '', 'left': '' + mLeftWidth + 'px'
'height': '',
'left': '' + iProc + '%'
}); });
} }
}
},
fResiseFunction = function (oEvent, oObject)
{
if (/*koSwither && koSwither() && */oObject && oObject.element &&
oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
{
var iWidth = oParent.width();
iTemp = iWidth - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable('option', 'maxWidth', iTemp);
if (oObject.size && oObject.size.width)
{
RL.local().set(sClientSideKeyName, oObject.size.width);
}
fFunction(null, null, true);
}
}
;
if (iLeftWidth)
{
oLeft.width(iLeftWidth);
}
iTemp = oParent.width() - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable({ oLeft.resizable({
'minWidth': iLimitL, 'helper': 'ui-resizable-helper',
'maxWidth': iTemp, 'minWidth': 120,
'maxWidth': 400,
'handles': 'e', 'handles': 'e',
'resize': fFunction, 'stop': fResizeFunction
'stop': fFunction
}); });
fFunction(null, null, true);
$window.resize(_.throttle(fResiseFunction, 400));
}; };
//Utils.initLayoutResizer1 = function (sLeft, sRight, sParent/*, koSwither*/,
// iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
//{
// iLimitL = iLimitL || 300;
// iMaxL = iMaxL || 500;
// iDefL = iDefL || (iMaxL - iLimitL / 2);
// iLimitR = iLimitR || 300;
//
// var
// iTemp = 0,
// oLeft = $(sLeft),
// oRight = $(sRight),
// oParent = $(sParent),
// iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL,
// fFunction = function (oEvent, oObject, bForce) {
//
// if (oObject || bForce)
// {
// var
// iWidth = oParent.width(),
// iProc = oObject ? oObject.size.width / iWidth * 100 : null
// ;
//
// if (null === iProc && bForce)
// {
// iProc = oLeft.width() / iWidth * 100;
// }
//
// if (null !== iProc)
// {
// oLeft.css({
// 'width': '',
// 'height': '',
// 'right': '' + (100 - iProc) + '%'
// });
//
// oRight.css({
// 'width': '',
// 'height': '',
// 'left': '' + iProc + '%'
// });
// }
// }
// },
// fResiseFunction = function (oEvent, oObject)
// {
// if (/*koSwither && koSwither() && */oObject && oObject.element &&
// oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
// {
// var iWidth = oParent.width();
// iTemp = iWidth - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
// oLeft.resizable('option', 'maxWidth', iTemp);
// if (oObject.size && oObject.size.width)
// {
// RL.local().set(sClientSideKeyName, oObject.size.width);
// }
//
// fFunction(null, null, true);
// }
// }
// ;
//
// if (iLeftWidth)
// {
// oLeft.width(iLeftWidth);
// }
//
// iTemp = oParent.width() - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
//
// oLeft.resizable({
// 'minWidth': iLimitL,
// 'maxWidth': iTemp,
// 'handles': 'e',
// 'resize': fFunction,
// 'stop': fFunction
// });
//
// fFunction(null, null, true);
// $window.resize(_.throttle(fResiseFunction, 400));
//};
/** /**
* @param {Object} oMessageTextBody * @param {Object} oMessageTextBody
*/ */

File diff suppressed because one or more lines are too long

View file

@ -1650,89 +1650,127 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList); RL.local().set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList);
}; };
Utils.initLayoutResizer = function (sLeft, sRight, sParent/*, koSwither*/, Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
{ {
iLimitL = iLimitL || 300;
iMaxL = iMaxL || 500;
iDefL = iDefL || (iMaxL - iLimitL / 2);
iLimitR = iLimitR || 300;
var var
iTemp = 0,
oLeft = $(sLeft), oLeft = $(sLeft),
oRight = $(sRight), oRight = $(sRight),
oParent = $(sParent), mLeftWidth = RL.local().get(sClientSideKeyName) || null,
iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL, fResizeFunction = function (oEvent, oObject) {
fFunction = function (oEvent, oObject, bForce) { if (oObject && oObject.size && oObject.size.width)
if (oObject || bForce)
{ {
var RL.local().set(sClientSideKeyName, oObject.size.width);
iWidth = oParent.width(),
iProc = oObject ? oObject.size.width / iWidth * 100 : null oRight.css({
'left': '' + oObject.size.width + 'px'
});
}
}
; ;
if (null === iProc && bForce) if (null !== mLeftWidth)
{
iProc = oLeft.width() / iWidth * 100;
}
if (null !== iProc)
{ {
oLeft.css({ oLeft.css({
'width': '', 'width': '' + mLeftWidth + 'px'
'height': '',
'right': '' + (100 - iProc) + '%'
}); });
oRight.css({ oRight.css({
'width': '', 'left': '' + mLeftWidth + 'px'
'height': '',
'left': '' + iProc + '%'
}); });
} }
}
},
fResiseFunction = function (oEvent, oObject)
{
if (/*koSwither && koSwither() && */oObject && oObject.element &&
oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
{
var iWidth = oParent.width();
iTemp = iWidth - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable('option', 'maxWidth', iTemp);
if (oObject.size && oObject.size.width)
{
RL.local().set(sClientSideKeyName, oObject.size.width);
}
fFunction(null, null, true);
}
}
;
if (iLeftWidth)
{
oLeft.width(iLeftWidth);
}
iTemp = oParent.width() - iLimitR;
iTemp = iMaxL > iTemp ? iTemp : iMaxL;
oLeft.resizable({ oLeft.resizable({
'minWidth': iLimitL, 'helper': 'ui-resizable-helper',
'maxWidth': iTemp, 'minWidth': 120,
'maxWidth': 400,
'handles': 'e', 'handles': 'e',
'resize': fFunction, 'stop': fResizeFunction
'stop': fFunction
}); });
fFunction(null, null, true);
$window.resize(_.throttle(fResiseFunction, 400));
}; };
//Utils.initLayoutResizer1 = function (sLeft, sRight, sParent/*, koSwither*/,
// iLimitL, iMaxL, iDefL, iLimitR, sClientSideKeyName)
//{
// iLimitL = iLimitL || 300;
// iMaxL = iMaxL || 500;
// iDefL = iDefL || (iMaxL - iLimitL / 2);
// iLimitR = iLimitR || 300;
//
// var
// iTemp = 0,
// oLeft = $(sLeft),
// oRight = $(sRight),
// oParent = $(sParent),
// iLeftWidth = RL.local().get(sClientSideKeyName) || iDefL,
// fFunction = function (oEvent, oObject, bForce) {
//
// if (oObject || bForce)
// {
// var
// iWidth = oParent.width(),
// iProc = oObject ? oObject.size.width / iWidth * 100 : null
// ;
//
// if (null === iProc && bForce)
// {
// iProc = oLeft.width() / iWidth * 100;
// }
//
// if (null !== iProc)
// {
// oLeft.css({
// 'width': '',
// 'height': '',
// 'right': '' + (100 - iProc) + '%'
// });
//
// oRight.css({
// 'width': '',
// 'height': '',
// 'left': '' + iProc + '%'
// });
// }
// }
// },
// fResiseFunction = function (oEvent, oObject)
// {
// if (/*koSwither && koSwither() && */oObject && oObject.element &&
// oObject.element[0]['id'] && '#' + oObject.element[0]['id'] === '' + sLeft)
// {
// var iWidth = oParent.width();
// iTemp = iWidth - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
// oLeft.resizable('option', 'maxWidth', iTemp);
// if (oObject.size && oObject.size.width)
// {
// RL.local().set(sClientSideKeyName, oObject.size.width);
// }
//
// fFunction(null, null, true);
// }
// }
// ;
//
// if (iLeftWidth)
// {
// oLeft.width(iLeftWidth);
// }
//
// iTemp = oParent.width() - iLimitR;
// iTemp = iMaxL > iTemp ? iTemp : iMaxL;
//
// oLeft.resizable({
// 'minWidth': iLimitL,
// 'maxWidth': iTemp,
// 'handles': 'e',
// 'resize': fFunction,
// 'stop': fFunction
// });
//
// fFunction(null, null, true);
// $window.resize(_.throttle(fResiseFunction, 400));
//};
/** /**
* @param {Object} oMessageTextBody * @param {Object} oMessageTextBody
*/ */
@ -17167,13 +17205,13 @@ RainLoopApp.prototype.bootstart = function ()
window.SimplePace.set(100); window.SimplePace.set(100);
} }
// if (!Globals.bMobileDevice) if (!Globals.bMobileDevice)
// { // if (false)
// _.defer(function () { {
// Utils.initLayoutResizer('#rl-top-resizer-left', '#rl-top-resizer-right', '#rl-center', _.defer(function () {
// 120, 300, 200, 600, Enums.ClientSideKeyName.FolderListSize); Utils.initLayoutResizer('#rl-left', '#rl-right', Enums.ClientSideKeyName.FolderListSize);
// }); });
// } }
}, this)); }, this));
} }

File diff suppressed because one or more lines are too long