MDL-45893 user_menu: responsive approach; fixed minor issues

auth/tests/behat/behat_auth.php

@@ -91,14 +91,13 @@ class behat_auth extends behat_base {
             return $steps;
         }
 
-        // If it is needed, it expands the navigation bar with the 'Log out' link.
+        // There is no longer any need to worry about whether the navigation
-        if ($clicknavbar = $this->get_expand_navbar_step()) {
+        // bar needs to be expanded; user_menu now lives outside the
-            array_unshift($steps, $clicknavbar);
+        // hamburger.
-        } else {
+
-            // Otherwise we need to expand the the user menu.
+        // However, the user menu *always* needs to be expanded.
         $xpath ="//div[@class='usermenu']//a[contains(concat(' ', @class, ' '), ' toggle-display ')]";
         array_unshift($steps, new When('I click on "'.$xpath.'" "xpath_element"'));
-        }
 
         return $steps;
     }

lang/en/moodle.php

@@ -1896,6 +1896,7 @@ $string['userdescription_help'] = 'This box enables you to enter some text about
 $string['userdetails'] = 'User details';
 $string['userfiles'] = 'User files';
 $string['userlist'] = 'User list';
+$string['usermenu'] = 'User menu';
 $string['username'] = 'Username';
 $string['usernameemail'] = 'Username / email';
 $string['usernameemailmatch'] = 'The username and email address do not relate to the same user';

lib/outputrenderers.php

@@ -2912,8 +2912,9 @@ EOD;
      * @param bool $withlinks true if a dropdown should be built.
      * @return string HTML fragment.
      */
-    public function user_menu($user = null, $withlinks = false) {
+    public function user_menu($user = null, $withlinks = null) {
         global $USER, $CFG;
+        require_once($CFG->dirroot . '/user/lib.php');
 
         if (is_null($user)) {
             $user = $USER;
@@ -2926,6 +2927,12 @@ EOD;
             $withlinks = empty($this->page->layout_options['nologinlinks']);
         }
 
+        // Add a class for when $withlinks is false.
+        $usermenuclasses = 'usermenu';
+        if (!$withlinks) {
+            $usermenuclasses .= ' withoutlinks';
+        }
+
         $returnstr = "";
 
         // If during initial install, return the empty return string.
@@ -2941,10 +2948,14 @@ EOD;
             if (!$loginpage) {
                 $returnstr .= " (<a href=\"$loginurl\">" . get_string('login') . '</a>)';
             }
-            return html_writer::tag(
+            return html_writer::div(
-                'span',
+                html_writer::span(
-                $returnstr
+                    $returnstr,
+                    'login'
+                ),
+                $usermenuclasses
             );
+
         }
 
         // If logged in as a guest user, show a string to that effect.
@@ -2953,14 +2964,17 @@ EOD;
             if (!$loginpage && $withlinks) {
                 $returnstr .= " (<a href=\"$loginurl\">".get_string('login').'</a>)';
             }
-            return html_writer::tag(
+
-                'span',
+            return html_writer::div(
-                $returnstr
+                html_writer::span(
+                    $returnstr,
+                    'login'
+                ),
+                $usermenuclasses
             );
         }
 
         // Get some navigation opts.
-        require_once($CFG->dirroot . '/user/lib.php');
         $opts = user_get_user_navigation_info($user, $this->page, $this->page->course);
 
         $avatarclasses = "avatars";
@@ -3015,16 +3029,11 @@ EOD;
         }
 
         $returnstr .= html_writer::span(
-            html_writer::span($avatarcontents, $avatarclasses) . html_writer::span($usertextcontents, 'usertext'),
+            html_writer::span($usertextcontents, 'usertext') .
+            html_writer::span($avatarcontents, $avatarclasses),
             'userbutton'
         );
 
-        // Add a class for when $withlinks is false.
-        $usermenuclasses = 'usermenu';
-        if (!$withlinks) {
-            $usermenuclasses .= ' withoutlinks';
-        }
-
         // Create a divider (well, a filler).
         $divider = new action_menu_filler();
         $divider->primary = false;
@@ -3032,7 +3041,7 @@ EOD;
         $am = new action_menu();
         $am->initialise_js($this->page);
         $am->set_menu_trigger(html_writer::span(
-            "User menu",
+            get_string('usermenu', 'moodle'),
             "accesshide"
         ));
         $am->set_alignment(action_menu::TR, action_menu::BR);
@@ -3042,7 +3051,7 @@ EOD;
             foreach ($opts->navitems as $key => $value) {
                 $pix = null;
                 if (isset($value->pix)) {
-                    $pix = new pix_icon($value->pix, $value->title, null);
+                    $pix = new pix_icon($value->pix, $value->title, null, array('class' => 'iconsmall'));
                 }
                 $al = new action_menu_link_secondary(
                     $value->url,

theme/bootstrapbase/layout/columns1.php

@@ -46,11 +46,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
                 </ul>
             </div>
         </div>

theme/bootstrapbase/layout/columns2.php

@@ -47,11 +47,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
                 </ul>
             </div>
         </div>

theme/bootstrapbase/layout/columns3.php

@@ -52,11 +52,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu(); ?></li>
                 </ul>
             </div>
         </div>

theme/bootstrapbase/less/moodle/modules.less

@@ -343,12 +343,19 @@ div#dock {
 
 // Usermenu
 .usermenu {
+    font-size: 14px;
     &.withoutlinks {
         .withoutlinks {
             display: none;
         }
     }
-    font-size: 14px;
+    .login {
+        color: @navbarText;
+        line-height: 40px;
+        a {
+            color: @navbarLinkColor;
+        }
+    }
     > .moodle-actionmenu > .menubar {
         display: block;
         margin: -40px 0px 2px 0px;
@@ -363,13 +370,15 @@ div#dock {
         height: 40px;
     }
     .toggle-display {
-        color: #777;
+        color: @navbarLinkColor;
         outline: none;
     }
     .userbutton {
+        height: 40px;
+        line-height: 40px;
         .avatars{
             display: inline-block;
-            height: 37px;
+            height: 36px;
             vertical-align: middle;
             margin-right: 6px;
 
@@ -435,7 +444,29 @@ div#dock {
     }
 }
 .jsenabled .navbar-inverse {
-    .usermenu:hover {
+    .usermenu {
+        .login {
+            color: @navbarInverseText;
+            a {
+                color: @navbarInverseLinkColor;
+                &:hover {
+                    color: @navbarInverseLinkColorHover;
+                }
+            }
+        }
+        .toggle-display {
+            color: @navbarInverseLinkColor;
+        }
+        .userinfo .usertext {
+            color: @navbarInverseLinkColor;
+            .meta {
+                color: @navbarInverseText;
+                .value {
+                    color: @navbarInverseLinkColor;
+                }
+            }
+        }
+        &:hover {
             .userinfo .usertext {
                 color: @navbarInverseLinkColorHover;
                 .meta {
@@ -451,17 +482,19 @@ div#dock {
                 }
             }
         }
+    }
 }
 .dir-ltr {
     .usermenu {
+        float: right;
         .userinfo {
             padding-left: 20px;
         }
         .userbutton {
             margin-right: 4px;
-            padding-right: 16px;
+            padding-right: 8px;
             .avatars{
-                margin-right: 6px;
+                margin-left: 6px;
             }
         }
         > .moodle-actionmenu > .menubar li a {
@@ -479,11 +512,12 @@ div#dock {
 
 .dir-rtl {
     .usermenu {
+        float: left;
         .userbutton {
             margin-left: 4px;
-            padding-left: 16px;
+            padding-left: 8px;
             .avatars{
-                margin-left: 6px;
+                margin-right: 6px;
             }
         }
         > .moodle-actionmenu > .menubar li a {

theme/clean/layout/columns1.php

@@ -49,11 +49,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
                 </ul>
             </div>
         </div>

theme/clean/layout/columns2.php

@@ -50,11 +50,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
                 </ul>
             </div>
         </div>

theme/clean/layout/columns3.php

@@ -61,11 +61,11 @@ echo $OUTPUT->doctype() ?>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </a>
+            <?php echo $OUTPUT->user_menu(); ?>
             <div class="nav-collapse collapse">
                 <?php echo $OUTPUT->custom_menu(); ?>
                 <ul class="nav pull-right">
                     <li><?php echo $OUTPUT->page_heading_menu(); ?></li>
-                    <li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
                 </ul>
             </div>
         </div>