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:
@@ -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).' ';
|
||||
$html .= html_writer::empty_tag('input', $bulkcourseinput).' ';
|
||||
$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).' ';
|
||||
$html .= html_writer::empty_tag('input', $bulkcourseinput).' ';
|
||||
$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'));
|
||||
|
||||
+4
-3
@@ -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
@@ -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
@@ -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,
|
||||
|
||||
Vendored
+1
@@ -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
@@ -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';
|
||||
|
||||
@@ -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.';
|
||||
|
||||
@@ -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;}
|
||||
|
||||
@@ -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
Reference in New Issue
Block a user