MDL-36415 usability: Use new up/down and ordering icons

This commit is contained in:
Frederic Massart 2012-11-15 11:44:18 +08:00
parent d4e5a26cfd
commit 06b7ed0a45
10 changed files with 43 additions and 34 deletions

View File

@ -167,11 +167,11 @@
} else {
$columndir = $dir == "ASC" ? "DESC":"ASC";
if ($column == "lastaccess") {
$columnicon = $dir == "ASC" ? "up":"down";
$columnicon = ($dir == "ASC") ? "sort_desc" : "sort_asc";
} else {
$columnicon = $dir == "ASC" ? "down":"up";
$columnicon = ($dir == "ASC") ? "sort_asc" : "sort_desc";
}
$columnicon = " <img src=\"" . $OUTPUT->pix_url('t/' . $columnicon) . "\" alt=\"\" />";
$columnicon = "<img class='iconsort' src=\"" . $OUTPUT->pix_url('t/' . $columnicon) . "\" alt=\"\" />";
}
$$column = "<a href=\"user.php?sort=$column&amp;dir=$columndir\">".$string[$column]."</a>$columnicon";

View File

@ -245,7 +245,7 @@ abstract class format_section_renderer_base extends plugin_renderer_base {
$strmoveup = get_string('moveup');
$controls[] = html_writer::link($url,
html_writer::empty_tag('img', array('src' => $this->output->pix_url('t/up'),
html_writer::empty_tag('img', array('src' => $this->output->pix_url('i/up'),
'class' => 'icon up', 'alt' => $strmoveup)),
array('title' => $strmoveup, 'class' => 'moveup'));
}
@ -257,7 +257,7 @@ abstract class format_section_renderer_base extends plugin_renderer_base {
$strmovedown = get_string('movedown');
$controls[] = html_writer::link($url,
html_writer::empty_tag('img', array('src' => $this->output->pix_url('t/down'),
html_writer::empty_tag('img', array('src' => $this->output->pix_url('i/down'),
'class' => 'icon down', 'alt' => $strmovedown)),
array('title' => $strmovedown, 'class' => 'movedown'));
}

View File

@ -512,7 +512,7 @@ class course_enrolment_table extends html_table implements renderable {
} else {
$link = html_writer::link(new moodle_url($url, array(self::SORTVAR=>$n)), $fields[$name][$n]);
if ($this->sort == $n) {
$link .= ' '.html_writer::link(new moodle_url($url, array(self::SORTVAR=>$n, self::SORTDIRECTIONVAR=>$this->get_field_sort_direction($n))), $this->get_direction_icon($output, $n));
$link .= html_writer::link(new moodle_url($url, array(self::SORTVAR=>$n, self::SORTDIRECTIONVAR=>$this->get_field_sort_direction($n))), $this->get_direction_icon($output, $n));
}
$bits[] = html_writer::tag('span', $link, array('class'=>'subheading_'.$n));
@ -525,7 +525,7 @@ class course_enrolment_table extends html_table implements renderable {
} else {
$newlabel = html_writer::link(new moodle_url($url, array(self::SORTVAR=>$name)), $fields[$name]);
if ($this->sort == $name) {
$newlabel .= ' '.html_writer::link(new moodle_url($url, array(self::SORTVAR=>$name, self::SORTDIRECTIONVAR=>$this->get_field_sort_direction($name))), $this->get_direction_icon($output, $name));
$newlabel .= html_writer::link(new moodle_url($url, array(self::SORTVAR=>$name, self::SORTDIRECTIONVAR=>$this->get_field_sort_direction($name))), $this->get_direction_icon($output, $name));
}
}
}
@ -633,9 +633,11 @@ class course_enrolment_table extends html_table implements renderable {
$direction = $this->sortdirection;
}
if ($direction === 'ASC') {
return html_writer::empty_tag('img', array('alt'=>'', 'src'=>$output->pix_url('t/down')));
return html_writer::empty_tag('img', array('alt' => '', 'class' => 'iconsort',
'src' => $output->pix_url('t/sort_asc')));
} else {
return html_writer::empty_tag('img', array('alt'=>'', 'src'=>$output->pix_url('t/up')));
return html_writer::empty_tag('img', array('alt' => '', 'class' => 'iconsort',
'src' => $output->pix_url('t/sort_desc')));
}
}

View File

@ -5075,16 +5075,16 @@ class admin_setting_manageenrols extends admin_setting {
if ($updowncount > 1) {
$aurl = new moodle_url($url, array('action'=>'up', 'enrol'=>$enrol));
$updown .= "<a href=\"$aurl\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"$strup\" /></a>&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"$strup\" class=\"iconsmall\" /></a>&nbsp;";
} else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />&nbsp;";
}
if ($updowncount < $enrolcount) {
$aurl = new moodle_url($url, array('action'=>'down', 'enrol'=>$enrol));
$updown .= "<a href=\"$aurl\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"$strdown\" /></a>";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"$strdown\" class=\"iconsmall\" /></a>";
} else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />";
}
++$updowncount;
}
@ -5606,17 +5606,17 @@ class admin_setting_manageauths extends admin_setting {
if ($enabled) {
if ($updowncount > 1) {
$updown .= "<a href=\"$url&amp;action=up&amp;auth=$auth\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" /></a>&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" class=\"iconsmall\" /></a>&nbsp;";
}
else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />&nbsp;";
}
if ($updowncount < $authcount) {
$updown .= "<a href=\"$url&amp;action=down&amp;auth=$auth\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" /></a>";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" class=\"iconsmall\" /></a>";
}
else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />";
}
++ $updowncount;
}
@ -5773,17 +5773,17 @@ class admin_setting_manageeditors extends admin_setting {
if ($enabled) {
if ($updowncount > 1) {
$updown .= "<a href=\"$url&amp;action=up&amp;editor=$editor\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" /></a>&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" class=\"iconsmall\" /></a>&nbsp;";
}
else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />&nbsp;";
}
if ($updowncount < $editorcount) {
$updown .= "<a href=\"$url&amp;action=down&amp;editor=$editor\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" /></a>";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" class=\"iconsmall\" /></a>";
}
else {
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"icon\" alt=\"\" />";
$updown .= "<img src=\"" . $OUTPUT->pix_url('spacer') . "\" class=\"iconsmall\" alt=\"\" />";
}
++ $updowncount;
}
@ -6000,7 +6000,7 @@ class admin_setting_manageformats extends admin_setting {
$cnt = 0;
$defaultformat = get_config('moodlecourse', 'format');
$spacer = $OUTPUT->pix_icon('spacer', '', 'moodle', array('class' => 'icon'));
$spacer = $OUTPUT->pix_icon('spacer', '', 'moodle', array('class' => 'iconsmall'));
foreach ($formats as $format) {
$url = new moodle_url('/admin/courseformats.php',
array('sesskey' => sesskey(), 'format' => $format->name));
@ -6021,13 +6021,13 @@ class admin_setting_manageformats extends admin_setting {
$updown = '';
if ($cnt) {
$updown .= html_writer::link($url->out(false, array('action' => 'up')),
$OUTPUT->pix_icon('t/up', $txt->up, 'moodle')). '&nbsp;';
$OUTPUT->pix_icon('t/up', $txt->up, 'moodle', array('class' => 'iconsmall'))). '';
} else {
$updown .= $spacer;
}
if ($cnt < count($formats) - 1) {
$updown .= '&nbsp;'.html_writer::link($url->out(false, array('action' => 'down')),
$OUTPUT->pix_icon('t/down', $txt->down, 'moodle'));
$OUTPUT->pix_icon('t/down', $txt->down, 'moodle', array('class' => 'iconsmall')));
} else {
$updown .= $spacer;
}
@ -6862,18 +6862,19 @@ class admin_setting_managerepository extends admin_setting {
// Display up/down link
$updown = '';
$spacer = $OUTPUT->spacer(array('height'=>15, 'width'=>15)); // should be done with CSS instead
// Should be done with CSS instead.
$spacer = $OUTPUT->spacer(array('height' => 15, 'width' => 15, 'class' => 'smallicon'));
if ($updowncount > 1) {
$updown .= "<a href=\"$this->baseurl&amp;action=moveup&amp;repos=".$typename."\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" /></a>&nbsp;";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/up') . "\" alt=\"up\" class=\"iconsmall\" /></a>&nbsp;";
}
else {
$updown .= $spacer;
}
if ($updowncount < $totalinstances) {
$updown .= "<a href=\"$this->baseurl&amp;action=movedown&amp;repos=".$typename."\">";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" /></a>";
$updown .= "<img src=\"" . $OUTPUT->pix_url('t/down') . "\" alt=\"down\" class=\"iconsmall\" /></a>";
}
else {
$updown .= $spacer;

View File

@ -1153,10 +1153,10 @@ class flexible_table {
if ($order == SORT_ASC) {
return html_writer::empty_tag('img',
array('src' => $OUTPUT->pix_url('t/down'), 'alt' => get_string('asc')));
array('src' => $OUTPUT->pix_url('t/sort_asc'), 'alt' => get_string('asc'), 'class' => 'iconsort'));
} else {
return html_writer::empty_tag('img',
array('src' => $OUTPUT->pix_url('t/up'), 'alt' => get_string('desc')));
array('src' => $OUTPUT->pix_url('t/sort_desc'), 'alt' => get_string('desc'), 'class' => 'iconsort'));
}
}

View File

@ -190,7 +190,7 @@ table#categoryquestions {width: 100%;overflow: hidden;table-layout: fixed;}
#categoryquestions .iconcol {width: 15px;text-align: center;padding: 0;}
#categoryquestions .checkbox {width: 19px;text-align: center;padding: 0;}
#categoryquestions .qtype {text-align: center;}
#categoryquestions .qtype {width: 24px;padding: 0;}
#categoryquestions .qtype {width: 28px;padding: 0;}
#categoryquestions .questiontext p {margin: 0;}
#page-mod-quiz-edit div.quizcontents {float:left;width:70%;display:block;clear:left;}

View File

@ -898,12 +898,14 @@ class mod_workshop_renderer extends plugin_renderer_base {
if ($sortby !== $sortid or $sorthow !== 'ASC') {
$url = new moodle_url($PAGE->url);
$url->params(array('sortby' => $sortid, 'sorthow' => 'ASC'));
$out .= $this->output->action_icon($url, new pix_icon('t/up', get_string('sortasc', 'workshop')), null, array('class' => 'sort asc'));
$out .= $this->output->action_icon($url, new pix_icon('t/sort_asc', get_string('sortasc', 'workshop')),
null, array('class' => 'iconsort sort asc'));
}
if ($sortby !== $sortid or $sorthow !== 'DESC') {
$url = new moodle_url($PAGE->url);
$url->params(array('sortby' => $sortid, 'sorthow' => 'DESC'));
$out .= $this->output->action_icon($url, new pix_icon('t/down', get_string('sortdesc', 'workshop')), null, array('class' => 'sort desc'));
$out .= $this->output->action_icon($url, new pix_icon('t/sort_desc', get_string('sortdesc', 'workshop')),
null, array('class' => 'iconsort sort desc'));
}
}
return $out;

View File

@ -251,9 +251,9 @@ abstract class question_bank_column_base {
protected function get_sort_icon($reverse) {
global $OUTPUT;
if ($reverse) {
return ' <img src="' . $OUTPUT->pix_url('t/up') . '" alt="' . get_string('desc') . '" />';
return $OUTPUT->pix_icon('t/sort_desc', get_string('desc'), '', array('class' => 'iconsort'));
} else {
return ' <img src="' . $OUTPUT->pix_url('t/down') . '" alt="' . get_string('asc') . '" />';
return $OUTPUT->pix_icon('t/sort_asc', get_string('asc'), '', array('class' => 'iconsort'));
}
}

View File

@ -94,6 +94,8 @@ img.icon {height:16px;vertical-align:text-bottom;width:16px;padding: 2px 6px 2px
img.iconsmall {height:12px;margin-right:3px;vertical-align:middle;width:12px;}
img.iconhelp, .helplink img {height:16px; padding-left:3px;vertical-align:middle;width:16px;}
img.iconlarge {height: 24px; width: 24px; vertical-align:middle;}
img.iconsort { vertical-align: text-bottom; padding-left: .3em; margin-bottom: .15em;}
.dir-rtl img.iconsort { padding-right: .3em; padding-left: 0;}
img.icontoggle {height:17px;vertical-align:middle;width:50px;}
img.iconkbhelp {height:17px;width:49px;}
.categorybox .category {font-size:1.2em;font-weight:bold;}

View File

@ -16,6 +16,8 @@ optional changes:
* new icons i/export and i/import (sized 16x16). Previously export and import actions used i/backup and i/restore.
* new icon i/assignroles (sized 16x16), to prevent the use of i/roles which is 12x12.
* new icon i/switchrole (sized 16x16), was previously using i/roles. Now is a copy of the new i/assignroles icon.
* new icons t/sort_asc, t/sort_desc to use for ordering in table headers.
* new class 'iconsort' for icons used for ordering in table headers.
=== 2.3 ===