navigation MDL-22322 Icons not used for navigation branches and fixed…

… indenting of navigation items

blocks/navigation/navigation.js

@@ -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) {

blocks/navigation/renderer.php

@@ -26,9 +26,12 @@ protected function navigation_node($items, $attrs=array(), $expansionlimit=null,
             }
             $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.' '.$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 @@ protected function navigation_node($items, $attrs=array(), $expansionlimit=null,
             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);
             }

blocks/navigation/styles.css

@@ -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;}

blocks/settings/renderer.php

@@ -30,20 +30,31 @@ protected function navigation_node(navigation_node $node, $attrs=array()) {
                 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
             $liclasses = array($item->get_css_type());
             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';

blocks/settings/styles.css

@@ -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;}

lib/navigationlib.php

@@ -153,14 +153,15 @@ public function __construct($properties) {
             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)) {