Move folder list resize button to bottom

This commit is contained in:
RainLoop Team 2014-04-28 19:53:16 +04:00
parent 0ce7b03fd0
commit c25b5bfef7
13 changed files with 103 additions and 50 deletions

View file

@ -1075,6 +1075,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1094,15 +1095,17 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
},
fDisable = function (bDisable) {
var iWidth = 5;
if (bDisable)
{
oLeft.resizable('disable');
fSetWidth(5);
fSetWidth(iWidth);
}
else
{
oLeft.resizable('enable');
fSetWidth(RL.local().get(sClientSideKeyName) || 170);
iWidth = Utils.pInt(RL.local().get(sClientSideKeyName)) || iMinWidth;
fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
}
},
@ -1125,8 +1128,8 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
oLeft.resizable({
'helper': 'ui-resizable-helper',
'minWidth': 170,
'maxWidth': 400,
'minWidth': iMinWidth,
'maxWidth': 350,
'handles': 'e',
'stop': fResizeFunction
});

View file

@ -108,7 +108,7 @@ html.ssm-state-desktop {
}
}
html.ssm-state-tablet, html.ssm-state-mobile {
html.ssm-state-tablet {
#rl-left {
width: 160px;
@ -139,6 +139,37 @@ html.ssm-state-tablet, html.ssm-state-mobile {
}
}
html.ssm-state-mobile {
#rl-left {
width: 155px;
}
#rl-right {
left: 155px;
}
#rl-sub-left {
width: 310px;
.messageList .inputSearch {
width: 200px;
}
}
#rl-sub-right {
left: 310px;
}
.b-compose.modal {
width: 800px;
}
.b-contacts-content.modal {
width: 800px;
}
}
html.rl-left-panel-disabled {
#rl-left {

View file

@ -76,7 +76,7 @@
.b-content {
position: absolute;
top: 50px + @rlLowMargin;
top: 50px;
bottom: @rlLowMargin;
left: 0;
right: @rlLowMargin;

View file

@ -87,7 +87,7 @@ select {
// }
}
.btn, .btn.btn-dark-disabled-border {
.btn.btn-dark-disabled-border {
&.disabled, &[disabled] {
border-color: #aaa;
}

View file

@ -6,9 +6,6 @@
<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>
<a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(true); }">
<i class="icon-resize"></i>
</a>
</div>
<div class="b-content" data-bind="nano: true">
<div class="content g-scrollbox">
@ -20,6 +17,12 @@
</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>

View file

@ -3,19 +3,14 @@
data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused, 'loading': messageListCompleteLoadingThrottle, 'hideMessageListCheckbox': !useCheckboxesInList() }">
<div class="toolbar">
<div class="btn-toolbar">
<div class="btn-group" data-bind="visible: leftPanelDisabled">
<a class="btn" data-bind="click: function () { leftPanelDisabled(false); }">
<i class="icon-resize"></i>
</a>
</div>
<div class="btn-group">
<a class="btn buttonReload" data-tooltip-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<a class="btn btn-dark-disabled-border buttonReload" data-tooltip-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottle}"></i>
</a>
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group dropdown" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
<i class="icon-folder"></i>
&nbsp;&nbsp;
<span class="caret"></span>
@ -46,7 +41,7 @@
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group dropdown" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-list-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
<a id="more-list-dropdown-id" class="btn btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
@ -163,6 +158,9 @@
</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

@ -4,7 +4,7 @@
<nobr>
<div class="messageButtons btn-toolbar">
<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
<a class="btn buttonClose" data-bind="command: closeMessage">
<a class="btn btn-dark-disabled-border buttonClose" data-bind="command: closeMessage">
<i class="icon-remove"></i>
</a>
</div>
@ -39,7 +39,7 @@
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group dropdown" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
<a id="more-view-dropdown-id" class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
<a id="more-view-dropdown-id" class="btn btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
<i class="icon-list"></i>
</a>
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-view-dropdown-id">
@ -113,10 +113,10 @@
</div>
<div class="btn-group">&nbsp;</div>
<div class="btn-group" data-bind="visible: !usePreviewPane()">
<a class="btn buttonUp" data-bind="command: goUpCommand">
<a class="btn btn-dark-disabled-border buttonUp" data-bind="command: goUpCommand">
<i class="icon-left-middle"></i>
</a>
<a class="btn buttonDown" data-bind="command: goDownCommand">
<a class="btn btn-dark-disabled-border buttonDown" data-bind="command: goDownCommand">
<i class="icon-right-middle"></i>
</a>
</div>

View file

@ -6306,9 +6306,7 @@ select {
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn.disabled,
.btn.btn-dark-disabled-border.disabled,
.btn[disabled],
.btn.btn-dark-disabled-border[disabled] {
border-color: #aaa;
}
@ -7025,31 +7023,45 @@ html.ssm-state-desktop #rl-sub-left {
html.ssm-state-desktop #rl-sub-right {
left: 400px;
}
html.ssm-state-tablet #rl-left,
html.ssm-state-mobile #rl-left {
html.ssm-state-tablet #rl-left {
width: 160px;
}
html.ssm-state-tablet #rl-right,
html.ssm-state-mobile #rl-right {
html.ssm-state-tablet #rl-right {
left: 160px;
}
html.ssm-state-tablet #rl-sub-left,
html.ssm-state-mobile #rl-sub-left {
html.ssm-state-tablet #rl-sub-left {
width: 350px;
}
html.ssm-state-tablet #rl-sub-left .messageList .inputSearch,
html.ssm-state-mobile #rl-sub-left .messageList .inputSearch {
html.ssm-state-tablet #rl-sub-left .messageList .inputSearch {
width: 220px;
}
html.ssm-state-tablet #rl-sub-right,
html.ssm-state-mobile #rl-sub-right {
html.ssm-state-tablet #rl-sub-right {
left: 350px;
}
html.ssm-state-tablet .b-compose.modal,
html.ssm-state-tablet .b-compose.modal {
width: 800px;
}
html.ssm-state-tablet .b-contacts-content.modal {
width: 800px;
}
html.ssm-state-mobile #rl-left {
width: 155px;
}
html.ssm-state-mobile #rl-right {
left: 155px;
}
html.ssm-state-mobile #rl-sub-left {
width: 310px;
}
html.ssm-state-mobile #rl-sub-left .messageList .inputSearch {
width: 200px;
}
html.ssm-state-mobile #rl-sub-right {
left: 310px;
}
html.ssm-state-mobile .b-compose.modal {
width: 800px;
}
html.ssm-state-tablet .b-contacts-content.modal,
html.ssm-state-mobile .b-contacts-content.modal {
width: 800px;
}
@ -9100,7 +9112,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
}
.b-settins-right .b-content {
position: absolute;
top: 58px;
top: 50px;
bottom: 8px;
left: 0;
right: 8px;

File diff suppressed because one or more lines are too long

View file

@ -1797,6 +1797,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1816,15 +1817,17 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
},
fDisable = function (bDisable) {
var iWidth = 5;
if (bDisable)
{
oLeft.resizable('disable');
fSetWidth(5);
fSetWidth(iWidth);
}
else
{
oLeft.resizable('enable');
fSetWidth(RL.local().get(sClientSideKeyName) || 170);
iWidth = Utils.pInt(RL.local().get(sClientSideKeyName)) || iMinWidth;
fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
}
},
@ -1847,8 +1850,8 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
oLeft.resizable({
'helper': 'ui-resizable-helper',
'minWidth': 170,
'maxWidth': 400,
'minWidth': iMinWidth,
'maxWidth': 350,
'handles': 'e',
'stop': fResizeFunction
});

File diff suppressed because one or more lines are too long

View file

@ -1801,6 +1801,7 @@ Utils.setExpandedFolder = function (sFullNameHash, bExpanded)
Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
{
var
iMinWidth = 155,
oLeft = $(sLeft),
oRight = $(sRight),
@ -1820,15 +1821,17 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
},
fDisable = function (bDisable) {
var iWidth = 5;
if (bDisable)
{
oLeft.resizable('disable');
fSetWidth(5);
fSetWidth(iWidth);
}
else
{
oLeft.resizable('enable');
fSetWidth(RL.local().get(sClientSideKeyName) || 170);
iWidth = Utils.pInt(RL.local().get(sClientSideKeyName)) || iMinWidth;
fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
}
},
@ -1851,8 +1854,8 @@ Utils.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
oLeft.resizable({
'helper': 'ui-resizable-helper',
'minWidth': 170,
'maxWidth': 400,
'minWidth': iMinWidth,
'maxWidth': 350,
'handles': 'e',
'stop': fResizeFunction
});

File diff suppressed because one or more lines are too long