Skip to content

Commit

Permalink
MDL-36323 usability: Normalising icons used in blocks
Browse files Browse the repository at this point in the history
  • Loading branch information
Frederic Massart committed Nov 14, 2012
1 parent 10994f2 commit 11f8718
Show file tree
Hide file tree
Showing 22 changed files with 111 additions and 46 deletions.
4 changes: 2 additions & 2 deletions blocks/activity_modules/block_activity_modules.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,10 @@ function get_content() {

foreach ($modfullnames as $modname => $modfullname) {
if ($modname === 'resources') {
$icon = $OUTPUT->pix_icon(file_extension_icon('.htm'), '', 'moodle', array('class' => 'icon')). ' ';
$icon = $OUTPUT->pix_icon(file_extension_icon('.htm'), '', 'moodle', array('class' => 'icon')). '';
$this->content->items[] = '<a href="'.$CFG->wwwroot.'/course/resources.php?id='.$course->id.'">'.$icon.$modfullname.'</a>';
} else {
$icon = '<img src="'.$OUTPUT->pix_url('icon', $modname) . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="'.$OUTPUT->pix_url('icon', $modname) . '" class="icon" alt="" />';
$this->content->items[] = '<a href="'.$CFG->wwwroot.'/mod/'.$modname.'/index.php?id='.$course->id.'">'.$icon.$modfullname.'</a>';
}
}
Expand Down
2 changes: 1 addition & 1 deletion blocks/community/block_community.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function get_content() {
'class' => 'icon', 'alt' => get_string('addcourse', 'block_community')));
$addcourseurl = new moodle_url('/blocks/community/communitycourse.php',
array('add' => true, 'courseid' => $this->page->course->id));
$searchlink = html_writer::tag('a', $icon . '&nbsp;' . get_string('addcourse', 'block_community'),
$searchlink = html_writer::tag('a', $icon . get_string('addcourse', 'block_community'),
array('href' => $addcourseurl->out(false)));
$this->content->items[] = $searchlink;

Expand Down
4 changes: 2 additions & 2 deletions blocks/course_list/block_course_list.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function get_content() {
$this->content->icons = array();
$this->content->footer = '';

$icon = '<img src="' . $OUTPUT->pix_url('i/course') . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="' . $OUTPUT->pix_url('i/course') . '" class="icon" alt="" />';

$adminseesall = true;
if (isset($CFG->block_course_list_adminview)) {
Expand Down Expand Up @@ -109,7 +109,7 @@ function get_remote_courses() {
return;
}

$icon = '<img src="'.$OUTPUT->pix_url('i/mnethost') . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="'.$OUTPUT->pix_url('i/mnethost') . '" class="icon" alt="" />';

// shortcut - the rest is only for logged in users!
if (!isloggedin() || isguestuser()) {
Expand Down
10 changes: 8 additions & 2 deletions blocks/dock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -532,10 +532,16 @@ M.core_dock.fixTitleOrientation = function(item, title, text) {
'position' : 'relative',
'fontSize' : fontsize,
'width' : width,
'top' : width/2,
'right' : width/2 - height
'top' : width/2
});

// Positioning is different when in RTL mode.
if (Y.one(document.body).hasClass('dir-rtl')) {
title.setStyle('left', width/2 - height);
} else {
title.setStyle('right', width/2 - height);
}

// Rotate the text
title.setStyles({
'transform' : transform,
Expand Down
31 changes: 21 additions & 10 deletions blocks/navigation/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
/** General display rules **/
.block_navigation .block_tree {margin:5px;padding-left:0px;overflow:visible;}
.block_navigation .block_tree li {margin:3px;list-style: none;padding:0;}
.block_navigation .block_tree li.item_with_icon > p {position:relative;}
.block_navigation .block_tree li.item_with_icon > p img {vertical-align:middle;position:absolute;left:0;top:3px}
.block_navigation .block_tree li.item_with_icon > p {position:relative; padding-left: 21px;}
.block_navigation .block_tree li.item_with_icon > p img,
.block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img,
.block_navigation .block_tree li > p.hasicon img {vertical-align:middle;position:absolute;left:0;top:-1px;width:16px;height:16px;}
.block_navigation .block_tree li.item_with_icon.contains_branch > p img {left:16px;}
.block_navigation .block_tree li.item_with_icon.contains_branch .tree_item {padding-left:34px;}
.block_navigation .block_tree .type_activity > p.branch.hasicon,
.block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-left:37px;}

.block_navigation .block_tree li ul {padding-left:0;margin:0;}
.block_navigation .block_tree li.depth_2 ul {padding-left:16px;margin:0;}
.block_navigation .block_tree .tree_item {padding-left: 18px;margin:3px 0px;text-align:left;}
.block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node,
.block_navigation .block_tree .tree_item {padding-left: 21px;margin:3px 0px;text-align:left;}

.block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 10%;background-repeat: no-repeat;}
.block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 0;background-repeat: no-repeat;}
.block_navigation .block_tree .tree_item.branch.navigation_node {background-image:none;padding-left:0;}
.block_navigation .block_tree .type_activity > .tree_item.branch {background-image:none;position:relative;}
.block_navigation .block_tree .type_activity > .tree_item.branch img {position:absolute;left:0;}
.block_navigation .block_tree .type_activity > .tree_item.branch img {left: 16px;}
.block_navigation .block_tree .root_node.leaf {padding-left:0px;}
.block_navigation .block_tree .active_tree_node {font-weight:bold;}
.block_navigation .block_tree .depth_1.current_branch ul {font-weight:normal;}

.dock .block_navigation .tree_item {white-space: nowrap;}

.jsenabled .block_navigation .block_tree .tree_item.branch {cursor:pointer;}
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty]]);background-position: 0% 5%;background-repeat: no-repeat;}
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty]]);background-position: 0 0;background-repeat: no-repeat;}
.jsenabled .block_navigation .block_tree .collapsed ul {display: none;}
.jsenabled .block_navigation .block_tree .type_activity > .tree_item.branch {background-image: url([[pix:t/expanded]]);}
.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed]]);}
.jsenabled .block_navigation .block_tree .tree_item.branch.loadingbranch {background-image:url([[pix:i/loading_small]]);}

Expand All @@ -35,8 +40,9 @@
.ie6 .block_navigation .block_tree .tree_item {width:100%;}

/** Overide for RTL layout **/
.dir-rtl .block_navigation .block_tree li.depth_2 ul {padding-left:0;padding-right: 7px;}
.dir-rtl .block_navigation .block_tree .tree_item {padding-right: 18px;text-align:right;}
.dir-rtl .block_navigation .block_tree li.depth_2 ul {padding-left:0;padding-right: 16px; padding-left: 0;}
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node,
.dir-rtl .block_navigation .block_tree .tree_item {padding-right: 21px;text-align:right;}

.dir-rtl .block_navigation .block_tree .tree_item.branch {background-position: center right;}

Expand All @@ -46,7 +52,12 @@
.dir-rtl .block_navigation .block_tree .root_node.leaf {padding-right:0;}

.dir-rtl .block_navigation .block_tree li.item_with_icon > p img,
.dir-rtl .block_navigation .block_tree .type_activity > .tree_item.branch img {right:0;left:auto;}
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img,
.dir-rtl .block_navigation .block_tree li > p.hasicon img {left:auto; right:0;}
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > p img {left: auto; right:16px;}
.dir-rtl .block_navigation .block_tree .type_activity > p.branch.hasicon,
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-right:37px; padding-left: 0;}
.dir-rtl .block_navigation .block_tree .type_activity > .tree_item.branch img {right: 16px; left: auto;}

.jsenabled.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty_rtl]]);background-position: center right;}
.jsenabled.dir-rtl .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);}
2 changes: 1 addition & 1 deletion blocks/participants/block_participants.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function get_content() {
}
}

$icon = '<img src="'.$OUTPUT->pix_url('i/users') . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="'.$OUTPUT->pix_url('i/users') . '" class="icon" alt="" />';
$this->content->items[] = '<a title="'.get_string('listofallpeople').'" href="'.
$CFG->wwwroot.'/user/index.php?contextid='.$currentcontext->id.'">'.$icon.get_string('participants').'</a>';

Expand Down
4 changes: 2 additions & 2 deletions blocks/private_files/renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@ protected function htmllize_tree($tree, $dir) {
$result = '<ul>';
foreach ($dir['subdirs'] as $subdir) {
$image = $this->output->pix_icon(file_folder_icon(), $subdir['dirname'], 'moodle', array('class'=>'icon'));
$result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.$image.' '.s($subdir['dirname']).'</div> '.$this->htmllize_tree($tree, $subdir).'</li>';
$result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.$image.s($subdir['dirname']).'</div> '.$this->htmllize_tree($tree, $subdir).'</li>';
}
foreach ($dir['files'] as $file) {
$url = file_encode_url("$CFG->wwwroot/pluginfile.php", '/'.$tree->context->id.'/user/private'.$file->get_filepath().$file->get_filename(), true);
$filename = $file->get_filename();
$image = $this->output->pix_icon(file_file_icon($file), $filename, 'moodle', array('class'=>'icon'));
$result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.html_writer::link($url, $image.'&nbsp;'.$filename).'</div></li>';
$result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.html_writer::link($url, $image.$filename).'</div></li>';
}
$result .= '</ul>';

Expand Down
15 changes: 7 additions & 8 deletions blocks/settings/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
/** General display rules **/
.block_settings .block_tree {margin:5px;padding-left:0px;overflow:visible;}
.block_settings .block_tree li {margin:0;list-style: none;}
.block_settings .block_tree li ul {padding-left:16px;margin:0;}
.block_settings .block_tree li ul {padding-left:18px;margin:0;}

.block_settings .block_tree li.item_with_icon > p {position:relative;}
.block_settings .block_tree li.item_with_icon > p img {vertical-align:middle;position:absolute;left:0;top:-1px}
.block_settings .block_tree li.item_with_icon > p img {vertical-align:middle;position:absolute;left:0;top:-1px; width: 16px; height: 16px;}

.block_settings .block_tree .tree_item {padding-left: 18px;margin:3px 0px;text-align:left;}
.block_settings .block_tree .tree_item {padding-left: 21px;margin:3px 0px;text-align:left;}

.block_settings .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 10%;background-repeat: no-repeat;}
.block_settings .block_tree .root_node.leaf {padding-left:0px;}
Expand All @@ -26,12 +26,11 @@

/** Overide for RTL layout **/
.dir-rtl .block_settings .block_tree {padding-right:0px;}
.dir-rtl .block_settings .block_tree li ul {padding-left:0;padding-right: 7px;}
.dir-rtl .block_settings .block_tree li.item_with_icon > p img,
.dir-rtl .block_navigation .block_tree .type_activity > .tree_item.branch img {left:auto;right:0;}
.dir-rtl .block_settings .block_tree .tree_item {padding-right: 18px;text-align:right;}
.dir-rtl .block_settings .block_tree li ul {padding-left:0;padding-right: 18px;}
.dir-rtl .block_settings .block_tree .tree_item {padding-right: 21px; padding-left: 0; text-align:right;}
.dir-rtl .block_settings .block_tree .tree_item.branch {background-position: center right;}
.dir-rtl .block_settings .block_tree .root_node.leaf {padding-right:0px;}
.dir-rtl .block_settings .block_tree li.item_with_icon > p img { right: 0; left: auto;}

.jsenabled.dir-rtl .block_settings .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty_rtl]]);background-position: center right;}
.jsenabled.dir-rtl .block_settings .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);}
.jsenabled.dir-rtl .block_settings .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);}
4 changes: 2 additions & 2 deletions blocks/site_main_menu/block_site_main_menu.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function get_content() {
} else {
$linkcss = $cm->visible ? '' : ' class="dimmed" ';
//Accessibility: incidental image - should be empty Alt text
$icon = '<img src="' . $cm->get_icon_url() . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="' . $cm->get_icon_url() . '" class="icon" alt="" />';
$this->content->items[] = '<a title="'.$cm->modplural.'" '.$linkcss.' '.$cm->extra.
' href="' . $url . '">' . $icon . $instancename . '</a>';
}
Expand Down Expand Up @@ -120,7 +120,7 @@ function get_content() {
$this->content->icons[] = '';
} else {
//Accessibility: incidental image - should be empty Alt text
$icon = '<img src="' . $mod->get_icon_url() . '" class="icon" alt="" />&nbsp;';
$icon = '<img src="' . $mod->get_icon_url() . '" class="icon" alt="" />';
$this->content->items[] = '<a title="' . $mod->modfullname . '" ' . $linkcss . ' ' . $mod->extra .
' href="' . $url . '">' . $icon . $instancename . '</a>' . $editbuttons;
}
Expand Down
4 changes: 2 additions & 2 deletions grade/lib.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2300,14 +2300,14 @@ function grade_extend_settings($plugininfo, $courseid) {
if ($imports = grade_helper::get_plugins_import($courseid)) {
$importnode = $gradenode->add($strings['import'], null, navigation_node::TYPE_CONTAINER);
foreach ($imports as $import) {
$importnode->add($import->string, $import->link, navigation_node::TYPE_SETTING, null, $import->id, new pix_icon('i/restore', ''));
$importnode->add($import->string, $import->link, navigation_node::TYPE_SETTING, null, $import->id, new pix_icon('i/import', ''));
}
}

if ($exports = grade_helper::get_plugins_export($courseid)) {
$exportnode = $gradenode->add($strings['export'], null, navigation_node::TYPE_CONTAINER);
foreach ($exports as $export) {
$exportnode->add($export->string, $export->link, navigation_node::TYPE_SETTING, null, $export->id, new pix_icon('i/backup', ''));
$exportnode->add($export->string, $export->link, navigation_node::TYPE_SETTING, null, $export->id, new pix_icon('i/export', ''));
}
}

Expand Down
4 changes: 2 additions & 2 deletions lib/enrollib.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ function enrol_add_course_navigation(navigation_node $coursenode, $course) {
if ($course->id == SITEID or (!empty($CFG->adminsassignrolesincourse) and is_siteadmin())) {
if (has_capability('moodle/role:assign', $coursecontext)) {
$url = new moodle_url('/admin/roles/assign.php', array('contextid'=>$coursecontext->id));
$permissionsnode->add(get_string('assignedroles', 'role'), $url, navigation_node::TYPE_SETTING, null, 'roles', new pix_icon('i/roles', ''));
$permissionsnode->add(get_string('assignedroles', 'role'), $url, navigation_node::TYPE_SETTING, null, 'roles', new pix_icon('i/rolesm', ''));
}
}
// Check role permissions
Expand All @@ -459,7 +459,7 @@ function enrol_add_course_navigation(navigation_node $coursenode, $course) {
//TODO, create some new UI for role assignments at course level
if (has_capability('moodle/role:assign', $coursecontext)) {
$url = new moodle_url('/enrol/otherusers.php', array('id'=>$course->id));
$usersnode->add(get_string('notenrolledusers', 'enrol'), $url, navigation_node::TYPE_SETTING, null, 'otherusers', new pix_icon('i/roles', ''));
$usersnode->add(get_string('notenrolledusers', 'enrol'), $url, navigation_node::TYPE_SETTING, null, 'otherusers', new pix_icon('i/rolesm', ''));
}
}

Expand Down
6 changes: 3 additions & 3 deletions lib/navigationlib.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3527,7 +3527,7 @@ protected function load_course_settings($forceopen = false) {
// Import data from other courses
if (has_capability('moodle/restore:restoretargetimport', $coursecontext)) {
$url = new moodle_url('/backup/import.php', array('id'=>$course->id));
$coursenode->add(get_string('import'), $url, self::TYPE_SETTING, null, 'import', new pix_icon('i/restore', ''));
$coursenode->add(get_string('import'), $url, self::TYPE_SETTING, null, 'import', new pix_icon('i/import', ''));
}

// Publish course on a hub
Expand Down Expand Up @@ -3597,7 +3597,7 @@ protected function load_course_settings($forceopen = false) {
$returnurl->param('sesskey', sesskey());
foreach ($roles as $key => $name) {
$url = new moodle_url('/course/switchrole.php', array('id'=>$course->id,'sesskey'=>sesskey(), 'switchrole'=>$key, 'returnurl'=>$returnurl->out(false)));
$switchroles->add($name, $url, self::TYPE_SETTING, null, $key, new pix_icon('i/roles', ''));
$switchroles->add($name, $url, self::TYPE_SETTING, null, $key, new pix_icon('i/rolesm', ''));
}
}
// Return we are done
Expand Down Expand Up @@ -4064,7 +4064,7 @@ protected function load_category_settings() {
// Assign local roles
if (has_capability('moodle/role:assign', $this->context)) {
$assignurl = new moodle_url('/'.$CFG->admin.'/roles/assign.php', array('contextid'=>$this->context->id));
$categorynode->add(get_string('assignroles', 'role'), $assignurl, self::TYPE_SETTING, null, 'roles', new pix_icon('i/roles', ''));
$categorynode->add(get_string('assignroles', 'role'), $assignurl, self::TYPE_SETTING, null, 'roles', new pix_icon('i/rolesm', ''));
}

// Override roles
Expand Down
Binary file added pix/i/export.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions pix/i/export.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pix/i/import.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions pix/i/import.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added pix/i/rolesm.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 11f8718

Please sign in to comment.