Setting to show / hide icons for navigation menu items.

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2018-02-12 - Setting to show / hide icons for navigation menu items.
 * 2018-02-08 - Fixed bug for the profile editing button in non admin view.
 * 2018-02-08 - Improved SCSS search for competencies node in the nav drawer.
 * 2018-02-08 - Harmonise HTML structure of the nav drawer regarding to media spans.

README.md

@@ -293,6 +293,15 @@ With this setting you can add a default Font Awesome icon in front of the block
 
 By enabling this setting you can invert the default light navbar to a dark one with white links.
 
+#### Navigation menu
+
+##### Navigation menu item icons
+
+If this setting is enabled (default), icons will be added to corresponding navigation items of the sliding side menu. Root nodes, that group other items together won't get an icon to underline their heading character. 
+If disabled, no icons in front of the items will be shown. 
+
+Please note: This is an all or nothing setting. It is only possible to display or hide icons for all suitable menu items at once.
+
 
 Further improvements to Boost core theme
 ----------------------------------------

lang/en/theme_boost_campus.php

@@ -170,6 +170,11 @@ $string['blockiconsetting_desc_code'] = '.block_people .card-block .card-title::
 $string['navbardesignheadingsetting'] = 'Navbar';
 $string['darknavbarsetting'] = 'Dark navbar';
 $string['darknavbarsetting_desc'] = 'By checking this setting you can invert the default light navbar to a dark one with white links.';
+// ...Nav drawer.
+$string['navdrawerheadingsetting'] = 'Navigation menu';
+$string['navdrawericonssetting'] = 'Navigation menu item icons';
+$string['navdrawericonssetting_desc'] = 'If this setting is enabled (default), icons will be added to corresponding navigation items of the sliding side menu. Root nodes, that group other items together won\'t get an icon to underline their heading character. <br/>If disabled, no icons in front of the items will be shown. <br/>
+Please note: This is an all or nothing setting. It is only possible to display or hide icons for <strong>all suitable</strong> menu items at once.';
 
 // ADDITIONAL STRINGS (IN ALPHABETICAL ORDER).
 $string['cachedef_imagearea'] = 'Cache for imagearea items';

layout/columns2.php

@@ -78,6 +78,7 @@ $templatecontext = [
     // MODIFICATION END.
 ];
 
+
 // MODIDFICATION START.
 // Use the returned value from theme_boost_campus_get_modified_flatnav_defaulthomepageontop as the template context.
 $templatecontext['flatnavigation'] = theme_boost_campus_process_flatnav($PAGE->flatnav);

lib.php

@@ -98,7 +98,8 @@ function theme_boost_campus_get_pre_scss($theme) {
         'showsettingsincourse' => ['showsettingsincourse'],
         'incoursesettingsswitchtorole' => ['incoursesettingsswitchtorole'],
         'hidefooteronloginpage' => ['hidefooteronloginpage'],
-        'footerhideusertourslink' => ['footerhideusertourslink']
+        'footerhideusertourslink' => ['footerhideusertourslink'],
+        'navdrawericons' => ['navdrawericons']
         // MODIFICATION END.
     ];
 
@@ -175,3 +176,13 @@ function theme_boost_campus_reset_app_cache() {
     // we also delete the complete theme cache here.
     theme_reset_all_caches();
 }
+
+/**
+ * Get icon mapping for font-awesome.
+ */
+function theme_boost_campus_get_fontawesome_icon_map() {
+    return [
+        'core:i/course' => 'fa-graduation-cap',
+        'core:i/home' => 'fa-home',
+    ];
+}

locallib.php

@@ -211,6 +211,49 @@ function theme_boost_campus_process_flatnav(flat_navigation $flatnav) {
         // Return the passed flat navigation without changes.
         $flatnavreturn = $flatnav;
     }
+
+    // If the setting 'navdrawericonssetting' is enabled.
+    if (get_config('theme_boost_campus', 'navdrawericons') == 'yes') {
+        // Adding icons to flatnav nodes.
+        // Dashboard node.
+        if ($myhomenode = $flatnav->find('myhome', global_navigation::TYPE_SYSTEM)) {
+            $myhomenode->icon = new pix_icon('i/dashboard', '');
+        }
+        // Site home node.
+        if ($homenode = $flatnav->find('home', global_navigation::TYPE_SETTING)) {
+            $homenode->icon = new pix_icon('i/home', '');
+        }
+        // Site administration node.
+        if (($sitesettingsnode = $flatnav->find('sitesettings', global_navigation::TYPE_SITE_ADMIN))) {
+            $sitesettingsnode->icon = new pix_icon('t/preferences', '');
+        }
+        // Participants node.
+        if ($participantsnode = $flatnav->find('participants', global_navigation::TYPE_CONTAINER)) {
+            $participantsnode->icon = new pix_icon('i/users', '');
+        }
+        // Course section nodes.
+        if ($allsectionnodes = $flatnav->type(global_navigation::TYPE_SECTION)) {
+            foreach ($allsectionnodes as $n) {
+                $n->icon = new pix_icon('i/folder', '');
+            }
+        }
+        // Calendar node.
+        if ($calendarnode = $flatnav->find('calendar', global_navigation::TYPE_CUSTOM)) {
+            $calendarnode->icon = new pix_icon('i/calendar', '');
+        }
+        // Private files node.
+        if ($privatefilesnode = $flatnav->find('privatefiles', global_navigation::TYPE_SETTING)) {
+            $privatefilesnode->icon = new pix_icon('i/files', '');
+        }
+        // My courses nodes.
+        if ($mycourses = $flatnav->type(global_navigation::TYPE_COURSE)) {
+            foreach ($mycourses as $n) {
+                $n->icon = new pix_icon('i/course', '');
+                $n->set_indent(false);
+            }
+        }
+    }
+
     return $flatnavreturn;
 }
 

pix_core/i/home.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#999999"><path d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"/></svg>

scss/post.scss

@@ -170,9 +170,28 @@ body.loginbackgroundimage {
         padding-right: 2px;
     }
 
+
     /*
      * General left menu.
      */
+    /* Course home menu. */
+    .list-group-item[data-key|=coursehome] {
+        /* Add solid border and realign the node with the other ones. */
+        @include navdrawer-node-separator(parent);
+        padding: .75rem 1.25rem;
+        /* As this node is a heading node, no icon is needed and the media span can be hidden. */
+        .media-left {
+            display: none;
+        }
+    }
+
+    /* Menu items participants, badges, grades and competencies need dashed bottom border. */
+    .list-group-item[data-key|=participants],
+    .list-group-item[data-key|=badgesview],
+    .list-group-item[data-key|=grades],
+    .list-group-item[data-key|=competencies] {
+        @include navdrawer-node-separator(child);
+    }
 
     /* Add solid border: myhome, website start and calendar. */
     .list-group-item[data-key|=myhome],
@@ -181,16 +200,6 @@ body.loginbackgroundimage {
         @include navdrawer-node-separator(parent);
     }
 
-    /* Remove icon from elements that does not need any. */
-    .list-group-item[data-key|=coursehome] span.media-left,
-    .list-group-item[data-key|=myhome] span.media-left,
-    .list-group-item[data-key|=home] span.media-left,
-    .list-group-item[data-key|=calendar] span.media-left,
-    .list-group-item[data-key|=privatefiles] span.media-left,
-    .list-group-item[data-key|=sitesettings] span.media-left {
-        display: none;
-    }
-
     /* Menu item: my files. */
     .list-group-item[data-key|=privatefiles] {
         border-bottom-right-radius: .25rem;
@@ -198,12 +207,16 @@ body.loginbackgroundimage {
     }
 
     /* Menu item: my courses. */
-    /* Separate the courses menu items from the other ones and add a bottom border*/
     .list-group-item[data-key|=mycourses] {
+        /* Separate the courses menu items from the other ones and add a bottom border*/
         @include navdrawer-node-separator(parent);
         margin-top: 15px;
         border-top-right-radius: .25rem;
         border-top-left-radius: .25rem;
+        /* As this node is a heading node, no icon is needed and the media span can be hidden. */
+        .media-left {
+            display: none;
+        }
     }
 
     /* Dashed border for all courses I'm enrolled in except the last one. */
@@ -215,24 +228,17 @@ body.loginbackgroundimage {
         border-bottom: none;
     }
 
-    /* Reduce the indent. */
-    .list-group-item[data-parent-key|=mycourses] > div {
-        margin-left: 0 !important;
-    }
-
-    /* Set course icon to each course menu items. */
-    .list-group-item[data-parent-key|=mycourses] span.media-left > img {
-        content: url([[pix:i/course]]);
-    }
-
     /*
      * Course home menu
      */
-
-    /* Add solid border and realign the node with the other ones. */
     .list-group-item[data-key|=coursehome] {
+        /* Add solid border and realign the node with the other ones. */
         @include navdrawer-node-separator(parent);
         padding: .75rem 1.25rem;
+        /* As this node is a topic node, no icon is needed and the media span can be hidden. */
+        .media-left {
+            display: none;
+        }
     }
 
     /* Menu items participants, badges, grades and competencies need dashed bottom border. */
@@ -243,27 +249,13 @@ body.loginbackgroundimage {
         @include navdrawer-node-separator(child);
     }
 
-    /* Set icons to menu items participants, badges, grades and competencies. */
-    .list-group-item[data-key|=participants] span.media-left > img {
-        content: url([[pix:i/users]]);
-    }
-    .list-group-item[data-key|=badgesview] span.media-left > img {
-        content: url([[pix:i/badge]]);
-    }
-    .list-group-item[data-key|=grades] span.media-left > img {
-        content: url([[pix:i/grades]]);
+    /* If setting 'navdrawericons' is disabled, do not show any icons by hiding the whole media-left span. */
+    @if variable-exists(navdrawericons) {
+        @if $navdrawericons == 'no' {
+            .list-group-item .media-left {
+                display: none;
             }
-    .list-group-item[data-key|=competencies] span.media-left > img {
-        content: url([[pix:i/user]]);
         }
-
-    /* Set and align icons before course section links */
-    .list-group-item[href*="section-"] span.media-left > img.icon {
-        content: url([[pix:i/folder]]);
-    }
-
-    .list-group-item[href*="section-"] .icon {
-        vertical-align: sub;
     }
 }
 

scss/pre.scss

@@ -5,7 +5,6 @@
 @mixin navdrawer-node-separator($nodetype) {
     @if $nodetype == child {
         border-bottom: 1px dashed $gray-light;
-        padding-left: 10px;
     }
     @else if $nodetype == parent {
         border-bottom: 1px solid $gray-light;

settings.php

@@ -548,6 +548,21 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
+    // Settings title to group navdrawer related settings together with a common heading. We don't want a description here.
+    $name = 'theme_boost_campus/navdrawerheading';
+    $title = get_string('navdrawerheadingsetting', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_heading($name, $title, null);
+    $page->add($setting);
+
+    $name = 'theme_boost_campus/navdrawericons';
+    $title = get_string('navdrawericonssetting', 'theme_boost_campus', null, true);
+    $description = get_string('navdrawericonssetting_desc', 'theme_boost_campus', null, true);
+    $setting = new admin_setting_configcheckbox($name, $title, $description, 'yes', 'yes', 'no' ); // Overriding default values
+    // yes = 1 and no = 0 because of the use of empty() in theme_boost_campus_get_pre_scss() (lib.php). Default 0 value would
+    // not write the variable to scss that could cause the scss to crash if used in that file. See MDL-58376.
+    $setting->set_updatedcallback('theme_reset_all_caches');
+    $page->add($setting);
+
     // Add tab to settings page.
     $settings->add($page);
 }

templates/flat_navigation.mustache

@@ -68,11 +68,11 @@
     {{#action}}
     <a class="list-group-item list-group-item-action {{#isactive}}font-weight-bold{{/isactive}}" href="{{{action}}}" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
         <div class="m-l-{{get_indent}}">
-            {{#is_section}}
+            {{#icon.pix}}
                 <span class="media-left">
-                    {{#pix}}i/folder{{/pix}}
+                    {{#pix}}{{{icon.pix}}}{{/pix}}
                 </span>
-            {{/is_section}}
+            {{/icon.pix}}
             <span class="media-body">{{{text}}}</span>
         </div>
     </a>
@@ -80,11 +80,11 @@
     {{^action}}
     <div class="list-group-item" data-key="{{key}}" data-isexpandable="{{isexpandable}}" data-indent="{{get_indent}}" data-showdivider="{{showdivider}}" data-type="{{type}}" data-nodetype="{{nodetype}}" data-collapse="{{collapse}}" data-forceopen="{{forceopen}}" data-isactive="{{isactive}}" data-hidden="{{hidden}}" data-preceedwithhr="{{preceedwithhr}}" {{#parent.key}}data-parent-key="{{.}}"{{/parent.key}}>
         <div class="m-l-{{get_indent}}">
-            {{#is_section}}
+            {{#icon.pix}}
                 <span class="media-left">
-                    {{#pix}}i/folder{{/pix}}
+                    {{#pix}}{{{icon.pix}}}{{/pix}}
                 </span>
-            {{/is_section}}
+            {{/icon.pix}}
             <span class="media-body">{{{text}}}</span>
         </div>
     </div>

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_campus';
-$plugin->version = 2018020700;
+$plugin->version = 2018021200;
 $plugin->release = 'v3.3-r3';
 $plugin->requires = 2017111300;
 $plugin->maturity = MATURITY_STABLE;