MDL-31830 course: fixed up minor points as noted by Damyon's integration review

* Fixed typo breaking drag and drop of courses.
* Fixed the ' ' title for the create new button plus two other icons I found as well.
* Adding padding to items displayed in the action menu drop down. base + bootstrapbase.
* Padding adjusted to the same as on the course page. base + bootstrapbase.
* Removed hover icon from categories. base only.
* Fixed categroy typo
* Removed min-width that was being applied to coursename making its clickable area larger than normal.
* The category tree is now presented using aria attributes as per http://www.w3.org/WAI/GL/wiki/Using_ARIA_trees
* Bulk action selectors now use aria-labelledby
* Category course count now given access hidden label.
* Pagination links now have better titles.
* The course action icons now present with role=button
This commit is contained in:
Sam Hemelryk
2013-10-07 19:41:52 +13:00
parent 8aa3aa3dfd
commit 7fd307b153
12 changed files with 79 additions and 38 deletions
+53 -19
View File
@@ -122,10 +122,16 @@ class core_course_management_renderer extends plugin_renderer_base {
$listing = coursecat::get(0)->get_children();
$attributes = array(
'class' => 'ml',
'role' => 'tree',
'aria-labelledby' => 'category-listing-title'
);
$html = html_writer::start_div('category-listing');
$html .= html_writer::tag('h3', get_string('categories'));
$html .= html_writer::tag('h3', get_string('categories'), array('id' => 'category-listing-title'));
$html .= $this->category_listing_actions($category);
$html .= html_writer::start_tag('ul', array('class' => 'ml'));
$html .= html_writer::start_tag('ul', $attributes);
foreach ($listing as $listitem) {
// Render each category in the listing.
$subcategories = array();
@@ -169,7 +175,9 @@ class core_course_management_renderer extends plugin_renderer_base {
'data-expandable' => $isexpandable ? '1' : '0',
'data-expanded' => $isexpanded ? '1' : '0',
'data-selected' => $activecategory ? '1' : '0',
'data-visible' => $category->visible ? '1' : '0'
'data-visible' => $category->visible ? '1' : '0',
'role' => 'treeitem',
'aria-expanded' => $isexpanded ? 'true' : 'false'
);
$text = $category->get_formatted_name();
$courseicon = $this->output->pix_icon('i/course', get_string('courses'));
@@ -209,11 +217,13 @@ class core_course_management_renderer extends plugin_renderer_base {
if ($hasactions) {
$html .= $this->category_listitem_actions($category, $actions);
}
$html .= html_writer::span($category->coursecount.$courseicon, 'course-count dimmed');
$countid = 'course-count-'.$category->id;
$html .= html_writer::span(get_string('courses'), 'accesshide', array('id' => $countid));
$html .= html_writer::span($category->coursecount.$courseicon, 'course-count dimmed', array('aria-labelledby' => $countid));
$html .= html_writer::end_div();
$html .= html_writer::end_div();
if ($isexpanded) {
$html .= html_writer::start_tag('ul', array('class' => 'ml'));
$html .= html_writer::start_tag('ul', array('class' => 'ml', 'role' => 'group'));
$catatlevel = array_shift($selectedcategories);
foreach ($subcategories as $listitem) {
$childcategories = ($listitem->id == $catatlevel) ? $listitem->get_children() : array();
@@ -273,7 +283,7 @@ class core_course_management_renderer extends plugin_renderer_base {
));
}
$menu->actiontext = get_string('createnew');
$menu->actionicon = new pix_icon('t/add', ' ', 'moodle', array('class' => 'iconsmall'));
$menu->actionicon = new pix_icon('t/add', ' ', 'moodle', array('class' => 'iconsmall', 'title' => ''));
$actions[] = $this->render($menu);
}
if (coursecat::can_approve_course_requests()) {
@@ -302,7 +312,7 @@ class core_course_management_renderer extends plugin_renderer_base {
} else {
$menu->actiontext = get_string('resortsubcategories');
}
$menu->actionicon = new pix_icon('t/sort', ' ', 'moodle', array('class' => 'iconsmall'));
$menu->actionicon = new pix_icon('t/sort', ' ', 'moodle', array('class' => 'iconsmall', 'title' => ''));
$actions[] = $this->render($menu);
}
if (!$hasitems) {
@@ -356,19 +366,31 @@ class core_course_management_renderer extends plugin_renderer_base {
'name' => get_string('resortbyname'),
'idnumber' => get_string('resortbyidnumber'),
);
$select = html_writer::select($options, 'resortcategoriesby');
$select = html_writer::select(
$options,
'resortcategoriesby',
'',
array('' => 'choosedots'),
array('aria-labelledby' => 'resortselectedcategoriesby')
);
$submit = array('type' => 'submit', 'name' => 'bulkresortcategories', 'value' => $strgo);
$html .= $this->detail_pair(
get_string('resortselectedcategoriesby'),
html_writer::span(get_string('resortselectedcategoriesby'), '', array('id' => 'resortselectedcategoriesby')),
$select . html_writer::empty_tag('input', $submit)
);
}
if (coursecat::can_change_parent_any()) {
$options = coursecat::make_categories_list('moodle/category:manage');
$select = html_writer::select($options, 'movecategoriesto');
$select = html_writer::select(
$options,
'movecategoriesto',
'',
array('' => 'choosedots'),
array('aria-labelledby' => 'moveselectedcategoriesto')
);
$submit = array('type' => 'submit', 'name' => 'bulkmovecategories', 'value' => $strgo);
$html .= $this->detail_pair(
get_string('moveselectedcategoriesto'),
html_writer::span(get_string('moveselectedcategoriesto'), '', array('id' => 'moveselectedcategoriesto')),
$select . html_writer::empty_tag('input', $submit)
);
}
@@ -490,7 +512,8 @@ class core_course_management_renderer extends plugin_renderer_base {
if ($page == $i) {
$class = 'active-page';
}
$items[] = $this->action_button(new moodle_url($baseurl, array('page' => $i)), $i + 1, null, $class);
$pageurl = new moodle_url($baseurl, array('page' => $i));
$items[] = $this->action_button($pageurl, $i + 1, null, $class, get_string('pagea', 'moodle', $i+1));
}
if ($page < ($totalpages - 1)) {
$items[] = '...';
@@ -539,7 +562,7 @@ class core_course_management_renderer extends plugin_renderer_base {
}
$html .= html_writer::start_div('float-left');
$html .= html_writer::empty_tag('input', $bulkcourseinput).'&nbsp';
$html .= html_writer::empty_tag('input', $bulkcourseinput).'&nbsp;';
$html .= html_writer::end_div();
$html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename'));
$html .= html_writer::start_div('float-right');
@@ -586,7 +609,7 @@ class core_course_management_renderer extends plugin_renderer_base {
new action_menu_link_secondary($idnumberurl, null, get_string('resortbyidnumber'))
));
$menu->actiontext = get_string('resortcourses');
$menu->actionicon = new pix_icon('t/sort', ' ', 'moodle', array('class' => 'iconsmall'));
$menu->actionicon = new pix_icon('t/sort', ' ', 'moodle', array('class' => 'iconsmall', 'title' => ''));
$actions[] = $this->render($menu);
}
$strall = get_string('all');
@@ -598,7 +621,7 @@ class core_course_management_renderer extends plugin_renderer_base {
new action_menu_link_secondary(new moodle_url($this->page->url, array('perpage' => 100)), null, 100),
new action_menu_link_secondary(new moodle_url($this->page->url, array('perpage' => 999)), null, $strall),
));
if ($perpage === 999) {
if ((int)$perpage === 999) {
$perpage = $strall;
}
$menu->attributes['class'] .= ' courses-per-page';
@@ -621,6 +644,7 @@ class core_course_management_renderer extends plugin_renderer_base {
}
$actionshtml = array();
foreach ($actions as $action) {
$action['attributes']['role'] = 'button';
$actionshtml[] = $this->output->action_icon($action['url'], $action['icon'], null, $action['attributes']);
}
return html_writer::span(join('', $actionshtml), 'course-item-actions item-actions');
@@ -637,10 +661,16 @@ class core_course_management_renderer extends plugin_renderer_base {
$html = html_writer::start_div('course-bulk-actions bulk-actions');
if ($category->can_move_courses_out_of()) {
$options = coursecat::make_categories_list('moodle/category:manage');
$select = html_writer::select($options, 'movecoursesto');
$select = html_writer::select(
$options,
'movecoursesto',
'',
array('' => 'choosedots'),
array('aria-labelledby' => 'moveselectedcoursesto')
);
$submit = array('type' => 'submit', 'name' => 'bulkmovecourses', 'value' => get_string('go'));
$html .= $this->detail_pair(
get_string('moveselectedcoursesto'),
html_writer::span(get_string('moveselectedcoursesto'), '', array('id' => 'moveselectedcoursesto')),
$select . html_writer::empty_tag('input', $submit)
);
}
@@ -711,7 +741,7 @@ class core_course_management_renderer extends plugin_renderer_base {
* @param string $class A class to give the button.
* @return string
*/
protected function action_button(moodle_url $url, $text, $id = null, $class = null) {
protected function action_button(moodle_url $url, $text, $id = null, $class = null, $title = null) {
$attributes = array(
'class' => 'yui3-button',
);
@@ -721,6 +751,10 @@ class core_course_management_renderer extends plugin_renderer_base {
if (!is_null($class)) {
$attributes['class'] .= ' '.$class;
}
if (is_null($title)) {
$title = $text;
}
$attributes['title'] = $title;
return html_writer::link($url, $text, $attributes);
}
@@ -1028,7 +1062,7 @@ class core_course_management_renderer extends plugin_renderer_base {
$html = html_writer::start_tag('li', $attributes);
$html .= html_writer::start_div('clearfix');
$html .= html_writer::start_div('float-left');
$html .= html_writer::empty_tag('input', $bulkcourseinput).'&nbsp';
$html .= html_writer::empty_tag('input', $bulkcourseinput).'&nbsp;';
$html .= html_writer::end_div();
$html .= html_writer::link($viewcourseurl, $text, array('class' => 'float-left coursename'));
$html .= html_writer::tag('span', $categoryname, array('class' => 'float-left categoryname'));
@@ -395,7 +395,7 @@ Console.prototype = {
* @method removeCourseById
* @param {Number} id
*/
removeCourseById : function() {
removeCourseById : function(id) {
var courses = this.get('courses'),
length = courses.length,
course,
@@ -704,6 +704,7 @@ DragDrop.prototype = {
}
}
} else if (iscourse || drop.ancestor('#course-listing')) {
course = console.getCourseById(courseid);
previoussibling = drag.get('previousSibling');
aftercourseid = (previoussibling) ? previoussibling.getData('id') || 0 : 0;
previousid = (this.previoussibling) ? this.previoussibling.getData('id') : 0;
@@ -1144,7 +1145,7 @@ Category.prototype = {
expand : function() {
var node = this.get('node'),
action = node.one('a[data-action=expand]');
node.removeClass('collapsed');
node.removeClass('collapsed').setAttribute('aria-expanded', 'true');
action.setAttribute('data-action', 'collapse').one('img').setAttrs({
src : M.util.image_url('t/switch_minus', 'moodle'),
title : M.util.get_string('collapse', 'moodle'),
@@ -1159,7 +1160,7 @@ Category.prototype = {
collapse : function() {
var node = this.get('node'),
action = node.one('a[data-action=collapse]');
node.addClass('collapsed');
node.addClass('collapsed').setAttribute('aria-expanded', 'false');
action.setAttribute('data-action', 'expand').one('img').setAttrs({
src : M.util.image_url('t/switch_plus', 'moodle'),
title : M.util.get_string('expand', 'moodle'),
File diff suppressed because one or more lines are too long
@@ -388,7 +388,7 @@ Console.prototype = {
* @method removeCourseById
* @param {Number} id
*/
removeCourseById : function() {
removeCourseById : function(id) {
var courses = this.get('courses'),
length = courses.length,
course,
@@ -695,6 +695,7 @@ DragDrop.prototype = {
}
}
} else if (iscourse || drop.ancestor('#course-listing')) {
course = console.getCourseById(courseid);
previoussibling = drag.get('previousSibling');
aftercourseid = (previoussibling) ? previoussibling.getData('id') || 0 : 0;
previousid = (this.previoussibling) ? this.previoussibling.getData('id') : 0;
@@ -1119,7 +1120,7 @@ Category.prototype = {
expand : function() {
var node = this.get('node'),
action = node.one('a[data-action=expand]');
node.removeClass('collapsed');
node.removeClass('collapsed').setAttribute('aria-expanded', 'true');
action.setAttribute('data-action', 'collapse').one('img').setAttrs({
src : M.util.image_url('t/switch_minus', 'moodle'),
title : M.util.get_string('collapse', 'moodle'),
@@ -1134,7 +1135,7 @@ Category.prototype = {
collapse : function() {
var node = this.get('node'),
action = node.one('a[data-action=collapse]');
node.addClass('collapsed');
node.addClass('collapsed').setAttribute('aria-expanded', 'false');
action.setAttribute('data-action', 'expand').one('img').setAttrs({
src : M.util.image_url('t/switch_plus', 'moodle'),
title : M.util.get_string('expand', 'moodle'),
+2 -2
View File
@@ -145,7 +145,7 @@ Category.prototype = {
expand : function() {
var node = this.get('node'),
action = node.one('a[data-action=expand]');
node.removeClass('collapsed');
node.removeClass('collapsed').setAttribute('aria-expanded', 'true');
action.setAttribute('data-action', 'collapse').one('img').setAttrs({
src : M.util.image_url('t/switch_minus', 'moodle'),
title : M.util.get_string('collapse', 'moodle'),
@@ -160,7 +160,7 @@ Category.prototype = {
collapse : function() {
var node = this.get('node'),
action = node.one('a[data-action=collapse]');
node.addClass('collapsed');
node.addClass('collapsed').setAttribute('aria-expanded', 'false');
action.setAttribute('data-action', 'expand').one('img').setAttrs({
src : M.util.image_url('t/switch_plus', 'moodle'),
title : M.util.get_string('expand', 'moodle'),
+1 -1
View File
@@ -393,7 +393,7 @@ Console.prototype = {
* @method removeCourseById
* @param {Number} id
*/
removeCourseById : function() {
removeCourseById : function(id) {
var courses = this.get('courses'),
length = courses.length,
course,
+1
View File
@@ -255,6 +255,7 @@ DragDrop.prototype = {
}
}
} else if (iscourse || drop.ancestor('#course-listing')) {
course = console.getCourseById(courseid);
previoussibling = drag.get('previousSibling');
aftercourseid = (previoussibling) ? previoussibling.getData('id') || 0 : 0;
previousid = (this.previoussibling) ? this.previoussibling.getData('id') : 0;
+1 -1
View File
@@ -383,7 +383,7 @@ $string['modulemissingcode'] = 'Module {$a} is missing the code needed to perfor
$string['movecatcontentstoroot'] = 'Moving the category content to root is not allowed. You must move the contents to an existant category!';
$string['movecategorynotpossible'] = 'You cannot move category \'{$a}\' into the selected category.';
$string['movecategoryownparent'] = 'You cannot make category \'{$a}\' a parent of itself.';
$string['movecategoryparentconflict'] = 'You cannot make categroy \'{$a}\' a subcategory of one of its own sub categories.';
$string['movecategoryparentconflict'] = 'You cannot make category \'{$a}\' a subcategory of one of its own sub categories.';
$string['multiplerecordsfound'] = 'Multiple records found, only one record expected.';
$string['multiplerestorenotallow'] = 'Multiple restore execution not allowed!';
$string['mustbeloggedin'] = 'You must be logged in to do this';
+1
View File
@@ -1295,6 +1295,7 @@ $string['other'] = 'Other';
$string['outline'] = 'Outline';
$string['outlinereport'] = 'Outline report';
$string['page'] = 'Page';
$string['pagea'] = 'Page {$a}';
$string['pageheaderconfigablock'] = 'Configuring a block in {$a->fullname}';
$string['pagepath'] = 'Page path';
$string['pageshouldredirect'] = 'This page should automatically redirect. If nothing is happening please use the continue link below.';
+4 -3
View File
@@ -258,17 +258,18 @@ input.titleeditor { width: 330px; vertical-align: text-bottom; }
#course-category-listings li[data-selected='1']:last-of-type > div {border-bottom-color:#e1e1e8;}
#course-category-listings > div > div > ul.ml > li:first-child > div {border-top:0;}
.jsenabled #course-category-listings .category-item-actions .menu-action-text {padding-left:0.3em;}
#course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) li {line-height:normal;}
#course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a,
#course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menu .menu-action-text {display:inline-block;}
#course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a {color:inherit;}
#course-category-listings .listing-actions .moodle-actionmenu:not([data-enhanced]) > .menubar a > img {display:none;}
#course-category-listings li > div:hover,
#course-category-listings li[data-selected='1'] > div {background-image:url([[pix:t/collapsed]]);background-repeat: no-repeat; background-position: right center;}
#course-category-listings .item-actions {margin-right:1em;display:inline-block;display:initial;}
#course-category-listings .item-actions img {margin: 0 0.2em;}
#course-category-listings .item-actions img {margin: 0 0.3em;}
#course-category-listings .item-actions .menu .menu-action {margin-right:1em;}
#course-category-listings li .tree-icon {margin-left:1em;}
@@ -280,7 +281,7 @@ input.titleeditor { width: 330px; vertical-align: text-bottom; }
#course-listing .listitem .drag-handle {margin-right:0.5em;}
#course-listing .listitem .idnumber {color:#a1a1a8;margin-right:2em;}
#course-listing .listitem .categoryname {display:inline-block;margin-left:1em;color:#a1a1a8;}
#course-listing .listitem .coursename {display:inline-block;min-width:50%;}
#course-listing .listitem .coursename {display:inline-block;}
#category-listing .course-count {color:#a1a1a8;margin-right:2em;min-width:35px;display:inline-block;}
#category-listing .listitem.collapsed > ul.ml {display: none;}
+4 -2
View File
@@ -764,7 +764,7 @@ span.editinstructions {
display:inline-block;
display:initial;
img {
margin: 0 0.2em;
margin: 0 0.3em;
}
}
@@ -831,7 +831,6 @@ span.editinstructions {
}
.coursename {
display:inline-block;
min-width:50%;
}
.drag-handle {
display:inline-block;
@@ -929,6 +928,9 @@ span.editinstructions {
margin: 1em;
}
}
/** JS MUST be enabled for this next style **/
.jsenabled #course-category-listings .category-item-actions .menu-action-text {padding-left:0.3em;}
/** Management header styling **/
.coursecat-management-header {
vertical-align:middle;
File diff suppressed because one or more lines are too long