List navigation bar

pull/5742/merge
Aleksander Machniak 7 years ago
parent cb57720e8c
commit 93d0ba2beb

@ -78,6 +78,8 @@
@color-list-recent-badge: #fff;
@color-list-recent-badge-background: @color-list-recent;
@color-list-pagenav: #888;
// Drag-n-drop layer
@color-drag-layer: #fff;

@ -24,6 +24,8 @@
@layout-header-height: 4.2rem;
@layout-header-font-size: 1rem;
@layout-pagenav-height: 2rem;
@layout-touch-header-height: @layout-header-height;
@layout-touch-header-font-size: 1.2rem;
@layout-touch-menu-record-height: 3.6rem;

@ -162,47 +162,51 @@
width: 1.2em;
}
&.footer {
&.pagenav {
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-bottom: 1px solid @color-layout-border;
height: @layout-pagenav-height;
overflow: hidden;
div {
a.button {
flex-grow: 1;
}
}
font-size: 80%;
min-width: 1rem !important;
height: @layout-pagenav-height !important;
color: @color-list-pagenav;
.pagenav {
text-align: center;
flex-grow: 3;
&:before {
line-height: 1 !important;
span {
display: block;
text-align: center;
@media screen and (max-width: (@screen-width-small)) {
line-height: 2 !important;
}
}
}
.pagenav-text {
height: (@layout-header-height * 0.3);
line-height: (@layout-header-height * 0.3);
flex-grow: 4;
line-height: @layout-pagenav-height;
font-size: 80%;
color: @color-pagenav-secondary;
padding-top: .25rem;
color: @color-list-pagenav;
text-overflow: ellipsis;
white-space: nowrap;
}
.pagenav-buttons {
height: (@layout-header-height * 0.7);
line-height: (@layout-header-height * 0.7);
input {
width: 3rem;
line-height: 1;
padding: .25rem;
display: inline;
text-align:center;
}
input {
width: 3rem;
font-size: 90%;
line-height: 1;
padding: .25rem;
margin: .15rem;
display: inline;
text-align: center;
}
}
}
.header {
a.button {
color: @color-font;

@ -32,38 +32,12 @@
label="contactsearchform" buttontitle="findcontacts" options="search-menu" ariatag="h2" />
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:include file="includes/pagenav.html" />
<div class="scroller">
<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="voice" id="aria-label-contactslist" />
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true"
role="listbox" data-list="contact_list" />
</div>
<div class="footer toolbar">
<!-- TODO: Move to toolbar?
<roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="button removegroup disabled" classAct="button removegroup" innerClass="inner" label="groupremoveselected" />
-->
<!--
<div class="pagenav">
<span class="pagenav-text" aria-live="polite" aria-relevant="text">
<span class="voice"><roundcube:label name="contacts" /></span>
<roundcube:object name="recordsCountDisplay" label="fromtoshort" />
</span>
<span class="pagenav-buttons">
<roundcube:button command="firstpage" type="link"
class="button firstpage disabled" classAct="button firstpage"
title="firstpage" label="first" innerclass="inner" />
<roundcube:button command="previouspage" type="link"
class="button prevpage disabled" classAct="button prevpage"
title="previouspage" label="previous" innerclass="inner" />
<roundcube:button command="nextpage" type="link"
class="button nextpage disabled" classAct="button nextpage"
title="nextpage" label="next" innerclass="inner" />
<roundcube:button command="lastpage" type="link"
class="button lastpage disabled" classAct="button lastpage"
title="lastpage" label="last" innerclass="inner" />
</span>
</div>
-->
</div>
</div>
<!-- contact details frame -->
@ -83,6 +57,9 @@
<roundcube:button command="delete" type="link"
class="button delete disabled" classAct="button delete"
label="delete" title="deletecontact" innerClass="inner" />
<!-- TODO: Move to toolbar?
<roundcube:button command="group-remove-selected" type="link" title="groupremoveselected" class="button removegroup disabled" classAct="button removegroup" innerClass="inner" label="groupremoveselected" />
-->
<span class="spacer"></span>
<!--
<roundcube:button command="compose" type="link"

@ -11,6 +11,7 @@
<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
label="contactsearchform" buttontitle="findcontacts" ariatag="h2" />
</div>
<roundcube:include file="includes/pagenav.html" />
<div class="scroller" tabindex="-1">
<roundcube:object name="addressbooks" id="directorylist" class="treelist listing iconized"
summary="ariasummarycomposecontacts" />
@ -25,18 +26,6 @@
<roundcube:button command="add-recipient" prop="bcc" type="link" title="bcc"
class="button addbcc disabled" classAct="button addbcc" innerClass="inner" content="Bcc+" />
<roundcube:container name="compose-contacts-toolbar" id="compose-contacts-toolbar" />
<!--
<div class="pagenav">
<roundcube:button command="firstpage" type="link" title="firstpage" label="first"
class="button firstpage disabled" classAct="button firstpage" innerclass="inner" />
<roundcube:button command="previouspage" type="link" title="previouspage" label="previous"
class="button prevpage disabled" classAct="button prevpage" innerclass="inner" />
<roundcube:button command="nextpage" type="link" title="nextpage" label="next"
class="button nextpage disabled" classAct="button nextpage" innerclass="inner" />
<roundcube:button command="lastpage" type="link" title="lastpage" label="last"
class="button lastpage disabled" classAct="button lastpage" innerclass="inner" />
</div>
-->
</div>
</div>

@ -0,0 +1,24 @@
<div class="pagenav toolbar" role="toolbar">
<roundcube:button command="firstpage" type="link"
class="button firstpage disabled" classAct="button firstpage"
title="firstpage" label="first" innerclass="inner" />
<roundcube:button command="previouspage" type="link"
class="button prevpage disabled" classAct="button prevpage"
title="previouspage" label="previous" innerclass="inner" />
<roundcube:if condition="template:name == 'mail'" />
<roundcube:object name="messageCountDisplay" class="pagenav-text" aria-live="polite" aria-relevant="text" />
<input class="form-control" type="text" size="3" disabled title="<roundcube:label name="currpage" />" />
<roundcube:elseif condition="template:name == 'addressbook'" />
<span class="pagenav-text" aria-live="polite" aria-relevant="text">
<roundcube:label name="contacts" /> <roundcube:object name="recordsCountDisplay" label="fromtoshort" />
</span>
<roundcube:else />
<span class="pagenav-text" aria-live="polite" aria-relevant="text">&nbsp;</span>
<roundcube:endif />
<roundcube:button command="nextpage" type="link"
class="button nextpage disabled" classAct="button nextpage"
title="nextpage" label="next" innerclass="inner" />
<roundcube:button command="lastpage" type="link"
class="button lastpage disabled" classAct="button lastpage"
title="lastpage" label="last" innerclass="inner" />
</div>

@ -35,6 +35,7 @@
label="mailquicksearchbox" buttontitle="findmail" options="search-menu" ariatag="h2" />
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:include file="includes/pagenav.html" />
<div id="messagelist-content" class="scroller" tabindex="-1">
<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
<roundcube:object name="messages"
@ -53,26 +54,6 @@
<roundcube:endif />
<roundcube:object name="listmenulink" class="button settings" innerclass="inner" />
</div>
<!--
<div class="pagenav">
<roundcube:object name="messageCountDisplay" class="pagenav-text" aria-live="polite" aria-relevant="text" />
<span class="pagenav-buttons">
<roundcube:button command="firstpage" type="link"
class="button firstpage disabled" classAct="button firstpage"
title="firstpage" label="first" innerclass="inner" />
<roundcube:button command="previouspage" type="link"
class="button prevpage disabled" classAct="button prevpage"
title="previouspage" label="previous" innerclass="inner" />
<input class="form-control" type="text" size="3" disabled title="<roundcube:label name="currpage" />" />
<roundcube:button command="nextpage" type="link"
class="button nextpage disabled" classAct="button nextpage"
title="nextpage" label="next" innerclass="inner" />
<roundcube:button command="lastpage" type="link"
class="button lastpage disabled" classAct="button lastpage"
title="lastpage" label="last" innerclass="inner" />
</span>
</div>
-->
<roundcube:container name="listcontrols" id="listcontrols" />
</div>
</div>

@ -374,7 +374,7 @@ function rcube_elastic_ui()
rcmail.addEventListener('fileappended', function(e) { if (e.attachment.complete) attachmentmenu_append(e.item); });
rcmail.init_pagejumper('.pagenav-buttons > input');
rcmail.init_pagejumper('.pagenav > input');
};
/**

Loading…
Cancel
Save