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">

View file

@ -6991,7 +6991,7 @@ html.mobile * {
border: 0;
z-index: 0;
width: 200px;
min-width: 120px;
min-width: 60px;
}
#rl-right {
position: absolute;
@ -7084,16 +7084,16 @@ html.ssm-state-tablet .b-contacts-content.modal,
html.ssm-state-mobile .b-contacts-content.modal {
width: 600px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-list-toopbar,
html.ssm-state-mobile .b-contacts-content.modal .b-list-toopbar,
html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar,
html.ssm-state-mobile .b-contacts-content.modal .b-list-toolbar,
html.ssm-state-tablet .b-contacts-content.modal .b-list-content,
html.ssm-state-mobile .b-contacts-content.modal .b-list-content,
html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toopbar,
html.ssm-state-mobile .b-contacts-content.modal .b-list-footer-toopbar {
html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toolbar,
html.ssm-state-mobile .b-contacts-content.modal .b-list-footer-toolbar {
width: 150px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-list-toopbar .e-search,
html.ssm-state-mobile .b-contacts-content.modal .b-list-toopbar .e-search {
html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar .e-search,
html.ssm-state-mobile .b-contacts-content.modal .b-list-toolbar .e-search {
width: 125px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-view-content,
@ -7110,12 +7110,12 @@ html.ssm-state-tablet .b-compose.modal {
html.ssm-state-tablet .b-contacts-content.modal {
width: 800px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-list-toopbar,
html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar,
html.ssm-state-tablet .b-contacts-content.modal .b-list-content,
html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toopbar {
html.ssm-state-tablet .b-contacts-content.modal .b-list-footer-toolbar {
width: 200px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-list-toopbar .e-search {
html.ssm-state-tablet .b-contacts-content.modal .b-list-toolbar .e-search {
width: 175px;
}
html.ssm-state-tablet .b-contacts-content.modal .b-view-content {
@ -7124,12 +7124,31 @@ html.ssm-state-tablet .b-contacts-content.modal .b-view-content {
html.ssm-state-tablet .b-contacts-content.modal .contactValueInput {
width: 250px;
}
html.rl-left-panel-disabled #rl-left {
width: 5px !important;
.show-on-panel-disabled {
display: none;
}
html.rl-left-panel-disabled #rl-left {
width: 65px !important;
}
html.rl-left-panel-disabled #rl-left .show-on-panel-disabled {
display: block;
}
html.rl-left-panel-disabled #rl-left .opacity-on-panel-disabled {
opacity: 0.3;
filter: alpha(opacity=30);
}
html.rl-left-panel-disabled #rl-left .visibility-hidden-on-panel-disabled {
visibility: hidden;
}
html.rl-left-panel-disabled #rl-left .hide-on-panel-disabled {
display: none;
}
html.rl-left-panel-disabled #rl-left.ui-state-disabled {
opacity: 1;
filter: alpha(opacity=100);
}
html.rl-left-panel-disabled #rl-right {
left: 5px !important;
left: 65px !important;
}
.ui-resizable-helper {
border-right: 5px solid #777;
@ -7342,20 +7361,21 @@ html.rl-ctrl-key-pressed .hidden-on-ctrl {
height: 30px;
padding: 10px 10px 0 8px;
color: #fff;
z-index: 101;
}
.b-folders .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-folders .b-content {
position: absolute;
top: 58px;
bottom: 43px;
bottom: 45px;
left: 0;
right: 0;
overflow: hidden;
@ -7467,6 +7487,10 @@ html.rl-ctrl-key-pressed .hidden-on-ctrl {
.b-folders .b-sub-folders.unpaddig-folder .b-sub-folders .b-sub-folders .b-sub-folders .e-item .e-link {
padding-left: 55px;
}
html.rl-left-panel-disabled .btn.buttonContacts {
margin-top: 10px !important;
margin-left: 0 !important;
}
.popups .b-folder-clear-content .modal-header {
background-color: #fff;
}
@ -8446,7 +8470,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
.b-contacts-content.modal .b-header-toolbar .btn {
margin-top: 4px;
}
.b-contacts-content.modal .b-list-toopbar {
.b-contacts-content.modal .b-list-toolbar {
padding: 0;
height: 45px;
text-align: center;
@ -8455,11 +8479,11 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
-moz-box-shadow: inset 0 -1px 0 #cccccc;
box-shadow: inset 0 -1px 0 #cccccc;
}
.b-contacts-content.modal .b-list-toopbar .e-search {
.b-contacts-content.modal .b-list-toolbar .e-search {
margin-top: 7px;
width: 225px;
}
.b-contacts-content.modal .b-list-footer-toopbar {
.b-contacts-content.modal .b-list-footer-toolbar {
position: absolute;
left: 0;
bottom: 0;
@ -8470,7 +8494,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
-moz-box-shadow: inset 0 1px 0 #cccccc;
box-shadow: inset 0 1px 0 #cccccc;
}
.b-contacts-content.modal .b-list-footer-toopbar .footer-pager {
.b-contacts-content.modal .b-list-footer-toolbar .footer-pager {
padding: 8px 10px 0 0;
}
.b-contacts-content.modal .b-list-content {
@ -9726,6 +9750,18 @@ html.rl-started-trigger.no-mobile #rl-content {
-moz-animation: highlight-folder-row 0.5s linear;
animation: highlight-folder-row 0.5s linear;
}
.rl-anim.csstransitions .b-folders .btn.buttonContacts {
-webkit-transition: margin 0.3s linear;
-moz-transition: margin 0.3s linear;
-o-transition: margin 0.3s linear;
transition: margin 0.3s linear;
}
.rl-anim.csstransitions .b-folders .b-content.opacity-on-panel-disabled {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.rl-anim.csstransitions .messageList .messageListItem {
-webkit-transition: max-height 400ms ease;
-moz-transition: max-height 400ms ease;

File diff suppressed because one or more lines are too long

View file

@ -1802,6 +1802,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iDisabledWidth = 65,
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1822,16 +1823,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);
}
},
@ -1850,7 +1850,7 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
if (null !== mLeftWidth)
{
fSetWidth(mLeftWidth);
fSetWidth(mLeftWidth > iMinWidth ? mLeftWidth : iMinWidth);
}
oLeft.resizable({
@ -5722,6 +5722,8 @@ function AdminMenuViewModel(oScreen)
{
KnoinAbstractViewModel.call(this, 'Left', 'AdminMenu');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
this.menu = oScreen.menu;
Knoin.constructorEnd(this);
@ -5746,7 +5748,6 @@ function AdminPaneViewModel()
this.version = ko.observable(RL.settingsGet('Version'));
this.adminManLoadingVisibility = RL.data().adminManLoadingVisibility;
this.leftPanelDisabled = RL.data().leftPanelDisabled;
Knoin.constructorEnd(this);
}

File diff suppressed because one or more lines are too long

View file

@ -1806,6 +1806,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iDisabledWidth = 65,
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1826,16 +1827,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);
}
},
@ -1854,7 +1854,7 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
if (null !== mLeftWidth)
{
fSetWidth(mLeftWidth);
fSetWidth(mLeftWidth > iMinWidth ? mLeftWidth : iMinWidth);
}
oLeft.resizable({
@ -12190,7 +12190,6 @@ function MailBoxMessageListViewModel()
this.folderMenuForMove = oData.folderMenuForMove;
this.useCheckboxesInList = oData.useCheckboxesInList;
this.leftPanelDisabled = oData.leftPanelDisabled;
this.mainMessageListSearch = oData.mainMessageListSearch;
this.messageListEndFolder = oData.messageListEndFolder;
@ -13762,6 +13761,8 @@ function SettingsMenuViewModel(oScreen)
{
KnoinAbstractViewModel.call(this, 'Left', 'SettingsMenu');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
this.menu = oScreen.menu;
Knoin.constructorEnd(this);
@ -13787,8 +13788,6 @@ function SettingsPaneViewModel()
{
KnoinAbstractViewModel.call(this, 'Right', 'SettingsPane');
this.leftPanelDisabled = RL.data().leftPanelDisabled;
Knoin.constructorEnd(this);
}

File diff suppressed because one or more lines are too long