Folder list resize optimization

This commit is contained in:
RainLoop Team 2014-05-08 02:20:17 +04:00
parent 53dc509d79
commit 1250efa445
26 changed files with 31233 additions and 31154 deletions

View file

@ -1075,6 +1075,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iDisabledWidth = 65,
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1095,16 +1096,15 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
},
fDisable = function (bDisable) {
var iWidth = 5;
if (bDisable)
{
oLeft.resizable('disable');
fSetWidth(iWidth);
fSetWidth(iDisabledWidth);
}
else
{
oLeft.resizable('enable');
iWidth = Utils.pInt(RL.local().get(sClientSideKeyName)) || iMinWidth;
var iWidth = Utils.pInt(RL.local().get(sClientSideKeyName)) || iMinWidth;
fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
}
},
@ -1123,7 +1123,7 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
if (null !== mLeftWidth)
{
fSetWidth(mLeftWidth);
fSetWidth(mLeftWidth > iMinWidth ? mLeftWidth : iMinWidth);
}
oLeft.resizable({

View file

@ -154,6 +154,14 @@ html.rl-started-trigger.no-mobile #rl-content {
animation: highlight-folder-row 0.5s linear;
}
&.csstransitions .b-folders .btn.buttonContacts {
.transition(margin 0.3s linear);
}
&.csstransitions .b-folders .b-content.opacity-on-panel-disabled {
.transition(opacity 0.3s linear);
}
&.csstransitions .messageList {
.messageListItem {
.transition(max-height 400ms ease);

View file

@ -58,7 +58,7 @@
}*/
}
.b-list-toopbar {
.b-list-toolbar {
padding: 0;
height: 45px;
text-align: center;
@ -71,7 +71,7 @@
}
}
.b-list-footer-toopbar {
.b-list-footer-toolbar {
position: absolute;
left: 0;
bottom: 0;

View file

@ -15,22 +15,23 @@
height: 30px;
padding: 10px 10px 0 @rlLowMargin;
color: #fff;
z-index: 101;
}
.b-footer {
position: absolute;
bottom: 18px;
bottom: 20px;
right: 0;
left: 0;
height: 20px;
padding: 0 10px 0 0;
padding: 0 10px 0 5px;
z-index: 101;
}
.b-content {
position: absolute;
top: 50px + @rlLowMargin;
bottom: 30px + @rlLowMargin + @rlBottomMargin;
bottom: 32px + @rlLowMargin + @rlBottomMargin;
// left: @rlLowMargin;
left: 0;
right: 0;
@ -161,3 +162,10 @@
padding-left: @subPadding * 3 + @folderItemPadding;
}
}
html.rl-left-panel-disabled {
.btn.buttonContacts {
margin-top: 10px !important;
margin-left: 0 !important;
}
}

View file

@ -36,7 +36,7 @@
.g-ui-absolute-reset;
width: @rlLeftWidth;
min-width: 120px;
min-width: 60px;
}
#rl-right {
@ -147,10 +147,10 @@ html.ssm-state-tablet, html.ssm-state-mobile {
}
.b-contacts-content.modal {
.b-list-toopbar, .b-list-content, .b-list-footer-toopbar {
.b-list-toolbar, .b-list-content, .b-list-footer-toolbar {
width: 150px;
}
.b-list-toopbar .e-search {
.b-list-toolbar .e-search {
width: 125px;
}
.b-view-content {
@ -173,10 +173,10 @@ html.ssm-state-tablet {
}
.b-contacts-content.modal {
.b-list-toopbar, .b-list-content, .b-list-footer-toopbar {
.b-list-toolbar, .b-list-content, .b-list-footer-toolbar {
width: 200px;
}
.b-list-toopbar .e-search {
.b-list-toolbar .e-search {
width: 175px;
}
.b-view-content {
@ -188,15 +188,38 @@ html.ssm-state-tablet {
}
}
.show-on-panel-disabled {
display: none;
}
html.rl-left-panel-disabled {
#rl-left {
width: 5px !important;
display: none;
width: 65px !important;
.show-on-panel-disabled {
display: block;
}
.opacity-on-panel-disabled {
.opacity(30);
}
.visibility-hidden-on-panel-disabled {
visibility: hidden;
}
.hide-on-panel-disabled {
display: none;
}
&.ui-state-disabled {
.opacity(100);
}
}
#rl-right {
left: 5px !important;
left: 65px !important;
}
}

View file

@ -10,6 +10,8 @@ function AdminMenuViewModel(oScreen)
{
KnoinAbstractViewModel.call(this, 'Left', 'AdminMenu');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
this.menu = oScreen.menu;
Knoin.constructorEnd(this);

View file

@ -12,7 +12,6 @@ function AdminPaneViewModel()
this.version = ko.observable(RL.settingsGet('Version'));
this.adminManLoadingVisibility = RL.data().adminManLoadingVisibility;
this.leftPanelDisabled = RL.data().leftPanelDisabled;
Knoin.constructorEnd(this);
}

View file

@ -26,7 +26,6 @@ function MailBoxMessageListViewModel()
this.folderMenuForMove = oData.folderMenuForMove;
this.useCheckboxesInList = oData.useCheckboxesInList;
this.leftPanelDisabled = oData.leftPanelDisabled;
this.mainMessageListSearch = oData.mainMessageListSearch;
this.messageListEndFolder = oData.messageListEndFolder;

View file

@ -10,6 +10,8 @@ function SettingsMenuViewModel(oScreen)
{
KnoinAbstractViewModel.call(this, 'Left', 'SettingsMenu');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
this.menu = oScreen.menu;
Knoin.constructorEnd(this);

View file

@ -8,8 +8,6 @@ function SettingsPaneViewModel()
{
KnoinAbstractViewModel.call(this, 'Right', 'SettingsPane');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
Knoin.constructorEnd(this);
}

View file

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

View file

@ -1,6 +1,12 @@
<div class="b-admin-left g-ui-user-select-none">
<div class="b-toolbar"></div>
<div class="b-content thm-settings-menu">
<div class="b-toolbar">
<div class="btn-group show-on-panel-disabled">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i class="icon-resize"></i>
</a>
</div>
</div>
<div class="b-content thm-settings-menu opacity-on-panel-disabled">
<div class="b-admin-menu" data-bind="foreach: menu">
<!-- ko if: disabled -->
<span class="e-item disabled">
@ -14,4 +20,5 @@
<!-- /ko -->
</div>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
</div>

View file

@ -13,12 +13,6 @@
<i class="icon-power"></i>
</a>
</div>
<div class="btn-group pull-right">&nbsp;</div>
<div class="btn-group pull-right" data-bind="visible: leftPanelDisabled">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(false); }">
<i class="icon-resize"></i>
</a>
</div>
</div>
</div>
<div class="b-content" data-bind="nano: true">

View file

@ -1,13 +1,13 @@
<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderList.focused}">
<div class="b-toolbar btn-toolbar">
<a class="btn buttonCompose" data-tooltip-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
<i class="icon-paper-plane"></i>
</a>
<a class="btn buttonContacts" data-tooltip-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
<i class="icon-address-book"></i>
</a>
</div>
<div class="b-content" data-bind="nano: true">
<div class="b-toolbar btn-toolbar">
<a class="btn buttonCompose pull-left" data-tooltip-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
<i class="icon-paper-plane"></i>
</a>
<a class="btn buttonContacts pull-left" data-tooltip-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
<i class="icon-address-book"></i>
</a>
</div>
<div class="b-content opacity-on-panel-disabled" data-bind="nano: true">
<div class="content g-scrollbox">
<div class="content-wrapper">
<div data-bind="template: { name: 'MailFolderListSystemItem', foreach: folderListSystem }"></div>
@ -16,20 +16,24 @@
</div>
</div>
</div>
<div class="b-footer btn-toolbar">
<div class="btn-group pull-right">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(true); }">
<i class="icon-resize"></i>
</a>
</div>
<div class="btn-group pull-right">&nbps;</div>
<div class="btn-group pull-right">
<a class="btn" data-bind="click: createFolder">
<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
</a>
<a class="btn" data-bind="click: configureFolders">
<i class="icon-cog"></i>
</a>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
<div class="b-footer">
<nobr>
<div class="btn-toolbar">
<div class="btn-group hide-on-panel-disabled">
<a class="btn" data-bind="click: createFolder">
<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
</a>
<a class="btn" data-bind="click: configureFolders">
<i class="icon-cog"></i>
</a>
</div>
<div class="btn-group">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i class="icon-resize"></i>
</a>
</div>
</div>
</nobr>
</div>
</div>

View file

@ -164,9 +164,6 @@
</div>
<div class="mainDelimiter footerDelimiter"></div>
<div class="b-footer thm-message-list-bottom-toolbar">
<a class="btn" data-bind="visible: leftPanelDisabled, click: function () { leftPanelDisabled(false); }">
<i class="icon-resize"></i>
</a>
<span data-bind="visible: 0 < userUsageProc(), tooltip2: quotaTooltip" class="e-quota">
<span data-bind="text: userUsageProc"></span>%
</span>

View file

@ -69,7 +69,7 @@
</div>
</div>
<div class="modal-body" style="position: relative;">
<div class="b-list-toopbar">
<div class="b-list-toolbar">
<input type="search" class="i18n span3 e-search" placeholder="Search" autocorrect="off" autocapitalize="off"
data-i18n-placeholder="CONTACTS/SEARCH_INPUT_PLACEHOLDER" data-bind="value: search" />
</div>
@ -111,7 +111,7 @@
</div>
</div>
</div>
<div class="b-list-footer-toopbar">
<div class="b-list-footer-toolbar">
<div class="pull-right footer-pager">
<!-- ko template: { name: 'Pagenator', data: contactsPagenator } --><!-- /ko -->
</div>

View file

@ -1,7 +1,12 @@
<div class="b-settins-left g-ui-user-select-none">
<div class="b-toolbar">
<div class="btn-group show-on-panel-disabled">
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
<i class="icon-resize"></i>
</a>
</div>
</div>
<div class="b-content thm-settings-menu">
<div class="b-content thm-settings-menu opacity-on-panel-disabled">
<div class="b-settings-menu" data-bind="foreach: menu">
<!-- ko if: disabled -->
<span class="e-item disabled">
@ -15,4 +20,5 @@
<!-- /ko -->
</div>
</div>
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
</div>

View file

@ -6,10 +6,6 @@
&nbsp;&nbsp;
<span class="i18n" data-i18n-text="SETTINGS_LABELS/BUTTON_BACK"></span>
</a>
&nbsp;&nbsp;
<a class="btn buttonResize" data-bind="visible: leftPanelDisabled, click: function () { leftPanelDisabled(false); }">
<i class="icon-resize"></i>
</a>
</div>
</div>
<div class="b-content" data-bind="nano: true">

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,6 @@
/*! See http://www.JSON.org/js.html */
var JSON;JSON||(JSON={}),function(){function str(a,b){var c,d,e,f,g=gap,h,i=b[a];i&&typeof i=="object"&&typeof i.toJSON=="function"&&(i=i.toJSON(a)),typeof rep=="function"&&(i=rep.call(b,a,i));switch(typeof i){case"string":return quote(i);case"number":return isFinite(i)?String(i):"null";case"boolean":case"null":return String(i);case"object":if(!i)return"null";gap+=indent,h=[];if(Object.prototype.toString.apply(i)==="[object Array]"){f=i.length;for(c=0;c<f;c+=1)h[c]=str(c,i)||"null";e=h.length===0?"[]":gap?"[\n"+gap+h.join(",\n"+gap)+"\n"+g+"]":"["+h.join(",")+"]",gap=g;return e}if(rep&&typeof rep=="object"){f=rep.length;for(c=0;c<f;c+=1)d=rep[c],typeof d=="string"&&(e=str(d,i),e&&h.push(quote(d)+(gap?": ":":")+e))}else for(d in i)Object.hasOwnProperty.call(i,d)&&(e=str(d,i),e&&h.push(quote(d)+(gap?": ":":")+e));e=h.length===0?"{}":gap?"{\n"+gap+h.join(",\n"+gap)+"\n"+g+"}":"{"+h.join(",")+"}",gap=g;return e}}function quote(a){escapable.lastIndex=0;return escapable.test(a)?'"'+a.replace(escapable,function(a){var b=meta[a];return typeof b=="string"?b:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+a+'"'}function f(a){return a<10?"0"+a:a}"use strict",typeof Date.prototype.toJSON!="function"&&(Date.prototype.toJSON=function(a){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null},String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(a){return this.valueOf()});var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;typeof JSON.stringify!="function"&&(JSON.stringify=function(a,b,c){var d;gap="",indent="";if(typeof c=="number")for(d=0;d<c;d+=1)indent+=" ";else typeof c=="string"&&(indent=c);rep=b;if(b&&typeof b!="function"&&(typeof b!="object"||typeof b.length!="number"))throw new Error("JSON.stringify");return str("",{"":a})}),typeof JSON.parse!="function"&&(JSON.parse=function(text,reviver){function walk(a,b){var c,d,e=a[b];if(e&&typeof e=="object")for(c in e)Object.hasOwnProperty.call(e,c)&&(d=walk(e,c),d!==undefined?e[c]=d:delete e[c]);return reviver.call(a,b,e)}var j;text=String(text),cx.lastIndex=0,cx.test(text)&&(text=text.replace(cx,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)}));if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,""))){j=eval("("+text+")");return typeof reviver=="function"?walk({"":j},""):j}throw new SyntaxError("JSON.parse")})}();
/*! RainLoop Simple Pace v1.0 (c) 2013 RainLoop Team; Licensed under MIT */
/*! RainLoop Simple Pace v1.0 (c) 2013 RainLoop Team; Licensed under MIT */
!function(a){function b(){var b=this;b.el=null,b.done=!1,b.progress=0,b.addInterval=0,b.addSpeed=3,b.stopProgress=100,b.interval=a.setInterval(function(){var c=b.build();c&&a.clearInterval(b.interval)},100)}if(b.prototype.startAddInterval=function(){var b=this;b.stopAddInterval(),b.addInterval=a.setInterval(function(){0<b.progress&&b.stopProgress>b.progress&&b.add(b.addSpeed)},500)},b.prototype.stopAddInterval=function(){a.clearInterval(this.addInterval),this.addInterval=0},b.prototype.build=function(){if(null===this.el){var a=document.querySelector("body");a&&(this.el=document.createElement("div"),this.el.className="simple-pace simple-pace-active",this.el.innerHTML='<div class="simple-pace-progress"><div class="simple-pace-progress-inner"></div></div><div class="simple-pace-activity"></div>',a.firstChild?a.insertBefore(this.el,a.firstChild):a.appendChild(this.el))}return this.el},b.prototype.reset=function(){return this.progress=0,this.render()},b.prototype.update=function(b){var c=a.parseInt(b,10);return c>this.progress&&(this.progress=c,this.progress=100<this.progress?100:this.progress,this.progress=0>this.progress?0:this.progress),this.render()},b.prototype.add=function(b){return this.progress+=a.parseInt(b,10),this.progress=100<this.progress?100:this.progress,this.progress=0>this.progress?0:this.progress,this.render()},b.prototype.setSpeed=function(a,b){this.addSpeed=a,this.stopProgress=b||100},b.prototype.render=function(){var b=this.build();b&&b.children&&b.children[0]&&b.children[0].setAttribute("style","width:"+this.progress+"%"),100!==this.progress||this.done?100>this.progress&&this.done?(this.done=!1,this.startAddInterval(),b.className=b.className.replace("simple-pace-inactive",""),b.className+=" simple-pace-inactive"):100>this.progress&&!this.done&&0===this.addInterval&&this.startAddInterval():(this.done=!0,this.stopAddInterval(),a.setTimeout(function(){b.className=b.className.replace("simple-pace-active",""),b.className+=" simple-pace-inactive"},500))},!a.SimplePace){var c=new b;a.SimplePace={sleep:function(){c.setSpeed(2,95)},set:function(a){c.update(a)},add:function(a){c.add(a)}}}}(window);
/*! RainLoop Top Driver v1.0 (c) 2013 RainLoop Team; Licensed under MIT */
/*! RainLoop Top Driver v1.0 (c) 2013 RainLoop Team; Licensed under MIT */
!function(a,b){function c(){}c.prototype.s=a.sessionStorage,c.prototype.t=a.top||a,c.prototype.getHash=function(){var a=null;if(this.s)a=this.s.getItem("__rlA")||null;else if(this.t){var c=this.t.name&&b&&"{"===this.t.name.toString().substr(0,1)?b.parse(this.t.name.toString()):null;a=c?c.__rlA||null:null}return a},c.prototype.setHash=function(){var c=a.rainloopAppData,d=null;this.s?this.s.setItem("__rlA",c&&c.AuthAccountHash?c.AuthAccountHash:""):this.t&&b&&(d={},d.__rlA=c&&c.AuthAccountHash?c.AuthAccountHash:"",this.t.name=b.stringify(d))},c.prototype.clearHash=function(){this.s?this.s.setItem("__rlA",""):this.t&&(this.t.name="")},a._rlhh=new c,a.__rlah=function(){return a._rlhh?a._rlhh.getHash():null},a.__rlah_set=function(){a._rlhh&&a._rlhh.setHash()},a.__rlah_clear=function(){a._rlhh&&a._rlhh.clearHash()}}(window,window.JSON);

File diff suppressed because one or more lines are too long