MDL-55941 tablelib: Improve initialbar UX

This commit is contained in:
Brendan Heywood 2016-09-13 10:31:32 +10:00 committed by Ilya Tregubov
parent 216ea39be7
commit d2df110950
3 changed files with 65 additions and 5 deletions

View File

@ -938,20 +938,41 @@ class flexible_table {
*/
protected function print_one_initials_bar($alpha, $current, $class, $title, $urlvar) {
echo html_writer::start_tag('div', array('class' => 'initialbar ' . $class)) .
$title . ' : ';
html_writer::tag('span', $title . ': ', array('class' => 'initialbarlabel'));
if ($current) {
echo html_writer::link($this->baseurl->out(false, array($urlvar => '')), get_string('all'));
echo html_writer::link($this->baseurl->out(false, array($urlvar => '')),
get_string('all'), array('class' => 'initialbarall'));
} else {
echo html_writer::tag('strong', get_string('all'));
echo html_writer::tag('strong', get_string('all'), array('class' => 'initialbarall'));
}
// We want to find a letter grouping size which suits the language so
// find the largest group size which is less than 15 chars. By always
// using a max number of groups which is a factor of 2, we always get
// nice wrapping, and the last row is always the shortest.
$groupsize = count($alpha);
$groups = 1;
while ($groupsize > 15) {
$groups *= 2;
$groupsize = ceil(count($alpha) / $groups);
}
echo html_writer::start_tag('span', array('class' => 'initialbargroups'));
echo html_writer::start_tag('span', array('class' => 'initialbargroup'));
$c = 0;
foreach ($alpha as $letter) {
if ($c++ > 0 && $c % $groupsize == 1) {
echo html_writer::end_tag('span') . ' ';
echo html_writer::start_tag('span', array('class' => 'initialbargroup'));
}
if ($letter === $current) {
echo html_writer::tag('strong', $letter);
} else {
echo html_writer::link($this->baseurl->out(false, array($urlvar => $letter)), $letter);
}
}
echo html_writer::end_tag('span');
echo html_writer::end_tag('span');
echo html_writer::end_tag('div');
}

View File

@ -1267,11 +1267,49 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
text-align: center;
}
.initialbar {
overflow: auto;
.initialbarlabel {
display: inline-block;
width: 6em;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.initialbargroups {
float: left;
}
.initialbargroup {
float: left;
display: inline-block;
white-space: nowrap;
}
a,
strong {
padding-left: 3px;
padding-right: 3px;
display: inline-block;
min-width: 1.4em;
text-align: center;
&.initialbarall {
float: left;
width: 4em;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
strong {
background: @linkColor;
color: @bodyBackground;
}
}
/* Moodle Dialogue Settings (moodle-core-dialogue) */
.moodle-dialogue-base .moodle-dialogue-lightbox {

View File

@ -10290,6 +10290,7 @@ body.path-question-type .mform fieldset.hidden {
}
}
/*!
* Bootstrap v2.3.2
*
* Copyright 2013 Twitter, Inc