Use fixed header fature on files list

This commit is contained in:
Aleksander Machniak 2013-07-10 10:31:03 +02:00
parent 92aee8213a
commit 041064416a
4 changed files with 36 additions and 25 deletions

View file

@ -667,7 +667,7 @@ rcube_webmail.prototype.files_list_update = function(head)
var list = this.file_list; var list = this.file_list;
list.clear(); list.clear();
$('thead', list.list).html(head); $('thead', list.fixed_header ? list.fixed_header : list.list).html(head);
kolab_files_list_coltypes(); kolab_files_list_coltypes();
file_api.file_list(); file_api.file_list();
}; };
@ -1019,6 +1019,7 @@ function kolab_files_ui()
}); });
this.env.file_list = list; this.env.file_list = list;
rcmail.file_list.resize();
}; };
// call file_list request for every folder (used for search and virt. collections) // call file_list request for every folder (used for search and virt. collections)
@ -1068,6 +1069,8 @@ function kolab_files_ui()
this.requests[params.req_id] = this.request('file_list', params, 'file_list_loop_response'); this.requests[params.req_id] = this.request('file_list', params, 'file_list_loop_response');
} }
rcmail.file_list.resize();
if (!valid) if (!valid)
return; return;

View file

@ -157,59 +157,59 @@
color: #aaa; color: #aaa;
} }
#filelist thead tr td { .filelist thead tr td {
padding: 0; padding: 0;
} }
#filelist tbody tr td { .filelist tbody tr td {
padding: 2px 7px; padding: 2px 7px;
height: 18px; height: 18px;
} }
#filelist tr td.size { .filelist tr td.size {
width: 80px; width: 80px;
text-align: right; text-align: right;
} }
#filelist thead tr td.size { .filelist thead tr td.size {
text-align: left; text-align: left;
} }
#filelist tr td.mtime { .filelist tr td.mtime {
width: 125px; width: 125px;
} }
#filelist tr td.options { .filelist tr td.options {
width: 26px; width: 26px;
cursor: pointer; cursor: pointer;
} }
#filelist thead tr td.filename, .filelist thead tr td.filename,
#filelist tbody tr td.filename { .filelist tbody tr td.filename {
width: 99%; width: 99%;
white-space: nowrap; white-space: nowrap;
} }
#filelist thead tr td.sortedASC a, .filelist thead tr td.sortedASC a,
#filelist thead tr td.sortedDESC a { .filelist thead tr td.sortedDESC a {
color: #004458; color: #004458;
text-decoration: underline; text-decoration: underline;
background: url(../../../../skins/larry/images/listicons.png) right -912px no-repeat; background: url(../../../../skins/larry/images/listicons.png) right -912px no-repeat;
} }
#filelist thead tr td.sortedASC a { .filelist thead tr td.sortedASC a {
background-position: right -944px; background-position: right -944px;
} }
#filelist td img { .filelist td img {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
#filelist tr td.options div.listmenu, .filelist tr td.options div.listmenu,
#filelist tr td.flag span.flagged, .filelist tr td.flag span.flagged,
#filelist tr td.flag span.unflagged, .filelist tr td.flag span.unflagged,
#filelist tr td.flag span.unflagged:hover { .filelist tr td.flag span.unflagged:hover {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 18px; height: 18px;
@ -218,35 +218,43 @@
background: url(../../../../skins/larry/images/listicons.png) -100px 0 no-repeat; background: url(../../../../skins/larry/images/listicons.png) -100px 0 no-repeat;
} }
#filelist thead tr td.options div.listmenu { .filelist thead tr td.options div.listmenu {
background-position: 0 -976px; background-position: 0 -976px;
cursor: pointer; cursor: pointer;
width: 26px; width: 26px;
} }
#filelist thead tr td.options { .filelist thead tr td.options {
padding: 0 3px; padding: 0 3px;
} }
#filelist tbody tr td.options:hover span { .filelist thead tr td.options {
padding: 2px 3px;
}
.filelist thead tr td:first-child {
border-radius: 4px 0 0 0;
}
.filelist tbody tr td.options:hover span {
width: 26px; width: 26px;
height: 18px; height: 18px;
background: url(../../../../skins/larry/images/buttons.png) -5px -418px no-repeat; background: url(../../../../skins/larry/images/buttons.png) -5px -418px no-repeat;
display: block; display: block;
} }
#filelist td.filename { .filelist td.filename {
padding: 0 4px; padding: 0 4px;
} }
#filelist tbody td.filename span { .filelist tbody td.filename span {
background: url(images/unknown.png) 0 0 no-repeat; background: url(images/unknown.png) 0 0 no-repeat;
padding: 0 0 0 20px; padding: 0 0 0 20px;
height: 16px; height: 16px;
} }
/* /*
#filelist tbody td.filename span input { .filelist tbody td.filename span input {
padding: 0 2px; padding: 0 2px;
height: 18px; height: 18px;
} }

View file

@ -10,7 +10,7 @@
</div> </div>
<div id="filelistcontainer" class="boxlistcontent uibox"> <div id="filelistcontainer" class="boxlistcontent uibox">
<roundcube:object name="filelist" id="filelist" class="records-table sortheader" /> <roundcube:object name="filelist" id="filelist" class="records-table filelist sortheader fixedheader" />
</div> </div>
</div> </div>

View file

@ -39,7 +39,7 @@
<div id="filelistcontainer" class="uibox"> <div id="filelistcontainer" class="uibox">
<div id="filelistbox" class="boxlistcontent"> <div id="filelistbox" class="boxlistcontent">
<roundcube:object name="filelist" id="filelist" class="records-table sortheader" optionsmenuIcon="true" /> <roundcube:object name="filelist" id="filelist" class="records-table filelist sortheader fixedheader" optionsmenuIcon="true" />
</div> </div>
<roundcube:object name="message" id="message" class="statusbar" /> <roundcube:object name="message" id="message" class="statusbar" />
</div> </div>