navigation MDL-22322 Icons not used for navigation branches and fixed indenting of navigation items

This commit is contained in:
Sam Hemelryk 2010-05-05 05:59:57 +00:00
parent bfe6fe455e
commit 7081714dc4
7 changed files with 52 additions and 17 deletions

View File

@ -291,11 +291,13 @@ M.block_navigation.classes.branch.prototype.construct_from_json = function(obj)
*/
M.block_navigation.classes.branch.prototype.inject_into_dom = function(element) {
var isbranch = ((this.expandable !== null || this.haschildren) && this.expansionceiling===null);
var branchli = this.tree.Y.Node.create('<li></li>');
var branchp = this.tree.Y.Node.create('<p class="tree_item"></p>');
if ((this.expandable !== null || this.haschildren) && this.expansionceiling===null) {
if (isbranch) {
branchli.addClass('collapsed');
branchli.addClass('contains_branch');
branchp.addClass('branch');
branchp.on('click', this.tree.toggleexpansion, this.tree);
if (this.expandable) {
@ -312,8 +314,9 @@ M.block_navigation.classes.branch.prototype.inject_into_dom = function(element)
// Prepare the icon, should be an object representing a pix_icon
var branchicon = false;
if (this.icon != null) {
if (this.icon != null && !isbranch) {
branchicon = this.tree.Y.Node.create('<img src="'+M.util.image_url(this.icon.pix, this.icon.component)+'" alt="" />');
branchli.addClass('item_with_icon');
if (this.icon.alt) {
branchicon.setAttribute('alt', this.icon.alt);
}
@ -325,7 +328,6 @@ M.block_navigation.classes.branch.prototype.inject_into_dom = function(element)
branchicon.addClass(this.icon.classes[i]);
}
}
this.name = '&nbsp;'+this.name;
}
if (this.link === null) {

View File

@ -26,9 +26,12 @@ class block_navigation_renderer extends plugin_renderer_base {
}
$content = $item->get_content();
$title = $item->get_title();
if ($item->icon instanceof renderable) {
$isbranch = (empty($expansionlimit) || $item->type != $expansionlimit) && ($item->children->count() > 0 || ($item->nodetype == navigation_node::NODETYPE_BRANCH && $item->children->count()==0 && isloggedin()));
$hasicon = (!$isbranch && $item->icon instanceof renderable);
if ($hasicon) {
$icon = $this->output->render($item->icon);
$content = $icon.'&nbsp;'.$content; // use CSS for spacing of icons
$content = $icon.$content; // use CSS for spacing of icons
}
if ($item->helpbutton !== null) {
$content = trim($item->helpbutton).html_writer::tag('span', $content, array('class'=>'clearhelpbutton'));
@ -71,17 +74,25 @@ class block_navigation_renderer extends plugin_renderer_base {
if ($item->has_children() && (!$item->forceopen || $item->collapse)) {
$liclasses[] = 'collapsed';
}
if ($isbranch) {
$liclasses[] = 'contains_branch';
} else if ($hasicon) {
$liclasses[] = 'item_with_icon';
}
if ($item->isactive === true) {
$liclasses[] = 'current_branch';
}
$liattr = array('class'=>join(' ',$liclasses));
// class attribute on the div item which only contains the item content
$divclasses = array('tree_item');
if ((empty($expansionlimit) || $item->type != $expansionlimit) && ($item->children->count() > 0 || ($item->nodetype == navigation_node::NODETYPE_BRANCH && $item->children->count()==0 && isloggedin()))) {
if ($isbranch) {
$divclasses[] = 'branch';
} else {
$divclasses[] = 'leaf';
}
if ($hasicon) {
$divclasses[] = 'hasicon';
}
if (!empty($item->classes) && count($item->classes)>0) {
$divclasses[] = join(' ', $item->classes);
}

View File

@ -6,9 +6,14 @@
/** General display rules **/
.block_navigation .block_tree {margin:5px;padding-left:0px;overflow:visible;}
.block_navigation .block_tree li {margin:0;list-style: none;}
.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 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: 16px;margin:3px 0px;text-align:left;}
.block_navigation .block_tree .tree_item {padding-left: 18px;margin:3px 0px;text-align:left;}
.block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: center left;background-repeat: no-repeat;}
.block_navigation .block_tree .navigation_node.tree_item.branch {background-image:none;padding-left:0;}
.block_navigation .block_tree .root_node.leaf {padding-left:0px;}

View File

@ -30,6 +30,12 @@ class block_settings_renderer extends plugin_renderer_base {
continue;
}
$isbranch = ($item->children->count()>0 || $item->nodetype==navigation_node::NODETYPE_BRANCH);
$hasicon = (!$isbranch && $item->icon instanceof renderable);
if ($isbranch) {
$item->hideicon = true;
}
$content = $this->output->render($item);
// this applies to the li item which contains all child lists too
@ -37,13 +43,18 @@ class block_settings_renderer extends plugin_renderer_base {
if (!$item->forceopen || (!$item->forceopen && $item->collapse) || ($item->children->count()==0 && $item->nodetype==navigation_node::NODETYPE_BRANCH)) {
$liclasses[] = 'collapsed';
}
if ($isbranch) {
$liclasses[] = 'contains_branch';
} else if ($hasicon) {
$liclasses[] = 'item_with_icon';
}
if ($item->isactive === true) {
$liclasses[] = 'current_branch';
}
$liattr = array('class'=>join(' ',$liclasses));
// class attribute on the div item which only contains the item content
$divclasses = array('tree_item');
if ($item->children->count()>0 || $item->nodetype==navigation_node::NODETYPE_BRANCH) {
if ($isbranch) {
$divclasses[] = 'branch';
} else {
$divclasses[] = 'leaf';

View File

@ -7,7 +7,12 @@
.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 .tree_item {padding-left: 16px;margin:3px 0px;text-align:left;}
.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:3px}
.block_settings .block_tree .tree_item {padding-left: 18px;margin:3px 0px;text-align:left;}
.block_settings .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: center left;background-repeat: no-repeat;}
.block_settings .block_tree .root_node.leaf {padding-left:0px;}
.block_settings .block_tree .current_branch {font-weight:bold;}

View File

@ -153,14 +153,15 @@ class navigation_node implements renderable {
if (array_key_exists('shorttext', $properties)) {
$this->shorttext = $properties['shorttext'];
}
if (array_key_exists('icon', $properties)) {
$this->icon = $properties['icon'];
if ($this->icon instanceof pix_icon) {
if (empty($this->icon->attributes['class'])) {
$this->icon->attributes['class'] = 'navicon';
} else {
$this->icon->attributes['class'] .= ' navicon';
}
if (!array_key_exists('icon', $properties)) {
$properties['icon'] = new pix_icon('i/navigationitem', 'moodle');
}
$this->icon = $properties['icon'];
if ($this->icon instanceof pix_icon) {
if (empty($this->icon->attributes['class'])) {
$this->icon->attributes['class'] = 'navicon';
} else {
$this->icon->attributes['class'] .= ' navicon';
}
}
if (array_key_exists('type', $properties)) {

BIN
pix/i/navigationitem.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 B