Skip to content
GitLab
Commit 6da0e4cf authored by Jetha Chan's avatar Jetha Chan
Browse files

MDL-45893 user_menu: based on action_menu, new responsive approach

parent d07b0302
Hide whitespace changes
Inline Side-by-side
auth/tests/behat/behat_auth.php
View file @ 6da0e4cf
......@@ -94,6 +94,10 @@ class behat_auth extends behat_base {
// If it is needed, it expands the navigation bar with the 'Log out' link.
if ($clicknavbar = $this->get_expand_navbar_step()) {
array_unshift($steps, $clicknavbar);
} else {
// Otherwise we need to expand the the user menu.
$xpath ="//div[@class='usermenu']//a[contains(concat(' ', @class, ' '), ' toggle-display ')]";
array_unshift($steps, new When('I click on "'.$xpath.'" "xpath_element"'));
}
return $steps;
......
lib/outputrenderers.php
View file @ 6da0e4cf
......@@ -2904,6 +2904,174 @@ EOD;
return html_writer::tag('ul', implode("\n", $lis), $attrs);
}
/**
* Construct a user menu, returning HTML that can be echoed out by a
* layout file.
*
* @param stdClass $user A user object, usually $USER.
* @param bool $withlinks true if a dropdown should be built.
* @return string HTML fragment.
*/
public function user_menu($user = null, $withlinks = false) {
global $USER, $CFG;
if (is_null($user)) {
$user = $USER;
}
// Note: this behaviour is intended to match that of core_renderer::login_info,
// but should not be considered to be good practice; layout options are
// intended to be theme-specific. Please don't copy this snippet anywhere else.
if (is_null($withlinks)) {
$withlinks = empty($this->page->layout_options['nologinlinks']);
}
$returnstr = "";
// If during initial install, return the empty return string.
if (during_initial_install()) {
return $returnstr;
}
$loginpage = ((string)$this->page->url === get_login_url());
$loginurl = get_login_url();
// If not logged in, show the typical not-logged-in string.
if (!isloggedin()) {
$returnstr = get_string('loggedinnot', 'moodle');
if (!$loginpage) {
$returnstr .= " (<a href=\"$loginurl\">" . get_string('login') . '</a>)';
}
return html_writer::tag(
'span',
$returnstr
);
}
// If logged in as a guest user, show a string to that effect.
if (isguestuser()) {
$returnstr = get_string('loggedinasguest');
if (!$loginpage && $withlinks) {
$returnstr .= " (<a href=\"$loginurl\">".get_string('login').'</a>)';
}
return html_writer::tag(
'span',
$returnstr
);
}
// 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";
$avatarcontents = html_writer::span($opts->metadata['useravatar'], 'avatar current');
$usertextcontents = $opts->metadata['userfullname'];
// Other user.
if (!empty($opts->metadata['asotheruser'])) {
$avatarcontents .= html_writer::span(
$opts->metadata['realuseravatar'],
'avatar realuser'
);
$usertextcontents = $opts->metadata['realuserfullname'];
$usertextcontents .= html_writer::tag(
'span',
get_string(
'loggedinas',
'moodle',
html_writer::span(
$opts->metadata['userfullname'],
'value'
)
),
array('class' => 'meta viewingas')
);
}
// Role.
if (!empty($opts->metadata['asotherrole'])) {
$role = core_text::strtolower(preg_replace('#[ ]+#', '-', trim($opts->metadata['rolename'])));
$usertextcontents .= html_writer::span(
$opts->metadata['rolename'],
'meta role role-' . $role
);
}
// User login failures.
if (!empty($opts->metadata['userloginfail'])) {
$usertextcontents .= html_writer::span(
$opts->metadata['userloginfail'],
'meta loginfailures'
);
}
// MNet.
if (!empty($opts->metadata['asmnetuser'])) {
$mnet = strtolower(preg_replace('#[ ]+#', '-', trim($opts->metadata['mnetidprovidername'])));
$usertextcontents .= html_writer::span(
$opts->metadata['mnetidprovidername'],
'meta mnet mnet-' . $mnet
);
}
$returnstr .= html_writer::span(
html_writer::span($avatarcontents, $avatarclasses) . html_writer::span($usertextcontents, 'usertext'),
'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;
$am = new action_menu();
$am->initialise_js($this->page);
$am->set_menu_trigger(html_writer::span(
"User menu",
"accesshide"
));
$am->set_alignment(action_menu::TR, action_menu::BR);
if ($withlinks) {
$navitemcount = count($opts->navitems);
$idx = 0;
foreach ($opts->navitems as $key => $value) {
$pix = null;
if (isset($value->pix)) {
$pix = new pix_icon($value->pix, $value->title, null);
}
$al = new action_menu_link_secondary(
$value->url,
$pix,
$value->title,
array('class' => 'icon')
);
$am->add($al);
// Add dividers after the first item and before the
// last item.
if ($idx == 0 || $idx == $navitemcount - 2) {
$am->add($divider);
}
$idx++;
}
}
return html_writer::div(
html_writer::div(
$returnstr,
'userinfo'
) .
$this->render($am),
$usermenuclasses
);
}
/**
* Return the navbar content so that it can be echoed out by the layout
*
......
theme/base/layout/frontpage.php
View file @ 6da0e4cf
......@@ -66,7 +66,7 @@ echo $OUTPUT->doctype() ?>
<div id="page-header" class="clearfix">
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<div class="headermenu"><?php
echo $OUTPUT->login_info();
echo $OUTPUT->user_menu();
echo $OUTPUT->lang_menu();
echo $PAGE->headingmenu;
?></div>
......
theme/base/layout/general.php
View file @ 6da0e4cf
......@@ -80,9 +80,7 @@ echo $OUTPUT->doctype() ?>
<?php if ($hasheading) { ?>
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<div class="headermenu"><?php
if ($haslogininfo) {
echo $OUTPUT->login_info();
}
echo $OUTPUT->user_menu();
if (!empty($PAGE->layout_options['langmenu'])) {
echo $OUTPUT->lang_menu();
}
......
theme/base/style/core.css
View file @ 6da0e4cf
......@@ -192,6 +192,106 @@ a.skip:active {position: static;display: block;}
.headermenu {float:right;margin:10px;font-size:0.8em;text-align:right;}
#course-header {clear:both;}
/**
* User menu
*/
.usermenu {
border: 1px solid #333;
padding: 4px 6px;
margin: 0.5em 0em;
font-size: 14px;
}
.jsenabled .usermenu.withoutlinks .moodle-actionmenu[data-enhance]
{
display: none;
}
.usermenu .menu .filler {
width: auto;
height: 1px;
margin: 9px 0px;
display: block;
background: #e5e5e5;
}
.usermenu .toggle-display {
outline: none;
}
.usermenu .userbutton {
background: #fff;
color: #000;
display: inline-block;
font-size: 15px;
}
.usermenu .userbutton > * {
display: inline-block;
vertical-align: middle;
}
.usermenu .userbutton .avatars {
display: inline-block;
vertical-align: middle;
}
.usermenu .userbutton .usertext {
display: inline-block;
text-align: left;
}
.usermenu .userbutton .usertext .meta{
display: block;
font-size: 12px;
}
.usermenu .userbutton .usertext .meta .value {
font-weight: bold;
}
.usermenu .moodle-actionmenu .toggle-display.textmenu .caret {
display: none;
}
.jsenabled .usermenu .moodle-actionmenu[data-enhanced] .toggle-display.textmenu {
margin-left: 0;
padding-left: 0;
}
.jsenabled.dir-rtl .usermenu .moodle-actionmenu[data-enhanced] .toggle-display.textmenu {
margin-right: 0;
margin-left: 4px;
}
.jsenabled .usermenu .moodle-actionmenu[data-enhanced] .toggle-display.textmenu .caret {
display: inline-block;
margin-top: 0;
vertical-align: middle;
}
.userloggedinas .usermenu .userbutton .avatars .avatar {
display: inline-block;
vertical-align:middle;
overflow: hidden;
}
.userloggedinas .usermenu .userbutton .avatars .avatar img {
width: inherit;
height: inherit;
}
.userloggedinas .usermenu .userbutton .avatars .avatar.current {
position: relative;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
margin-top: 11px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
}
.dir-ltr .usermenu .userbutton .avatars {
margin-right: 6px;
}
.dir-rtl .usermenu .userbutton {
margin-right: -4px;
}
.dir-rtl .usermenu .userbutton .avatars {
margin-left: 6px;
}
.dir-ltr.userloggedinas .usermenu .userbutton .avatars .avatar.current {
margin-right: -34px;
}
.dir-rtl.userloggedinas .usermenu .userbutton .avatars .avatar.current {
margin-left: -42px;
}
/**
* Navbar
*/
......
theme/bootstrapbase/layout/columns1.php
View file @ 6da0e4cf
......@@ -50,7 +50,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
</ul>
</div>
</div>
......
theme/bootstrapbase/layout/columns2.php
View file @ 6da0e4cf
......@@ -51,7 +51,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
</ul>
</div>
</div>
......
theme/bootstrapbase/layout/columns3.php
View file @ 6da0e4cf
......@@ -56,7 +56,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu(); ?></li>
</ul>
</div>
</div>
......
theme/bootstrapbase/layout/popup.php
View file @ 6da0e4cf
......@@ -60,7 +60,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu(); ?></li>
</ul>
</div>
</div>
......@@ -75,6 +75,7 @@ echo $OUTPUT->doctype() ?>
<div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
</div>
<?php echo $OUTPUT->page_heading(); ?>
<?php echo $OUTPUT->user_menu(); ?>
<div id="course-header">
<?php echo $OUTPUT->course_header(); ?>
</div>
......
theme/bootstrapbase/less/moodle/modules.less
View file @ 6da0e4cf
......@@ -340,3 +340,161 @@ div#dock {
border-right: 0px none;
}
}
// Usermenu
.usermenu {
&.withoutlinks {
.withoutlinks {
display: none;
}
}
font-size: 14px;
> .moodle-actionmenu > .menubar {
display: block;
margin: -40px 0px 2px 0px;
li {
display: block;
a {
line-height: 40px;
}
}
}
> div {
height: 40px;
}
.toggle-display {
color: #777;
outline: none;
}
.userbutton {
.avatars{
display: inline-block;
height: 37px;
vertical-align: middle;
margin-right: 6px;
.avatar,
img {
display: block;
}
}
.usertext {
display: inline-block;
vertical-align: middle;
line-height: 1em;
.meta,
.role {
display: block;
font-size: 12px;
.value {
font-weight: bold;
}
}
.role {
font-weight: bold;
}
}
}
.moodle-actionmenu[data-enhanced].show .menu a {
white-space: nowrap;
}
.menu .filler {
width: auto;
height: 1px;
margin: 4px 0px;
display: block;
background: #e5e5e5;
}
}
.userloggedinas .usermenu .userbutton .avatars {
.avatar {
&.current {
position: relative;
top: 4px;
left: 4px;
width: 20px;
height: 20px;
margin-top: 11px;
border: 1px solid #fff;
border-radius: 50%;
box-shadow: -2px -2px 16px rgba(0,0,0,0.25);
}
img {
width: inherit;
height: inherit;
}
display: inline-block;
overflow: hidden;
}
}
.jsenabled .usermenu .moodle-actionmenu[data-enhanced] .toggle-display.textmenu {
position: relative;
.caret {
margin-top: 0;
vertical-align: middle;
}
}
.jsenabled .navbar-inverse {
.usermenu:hover {
.userinfo .usertext {
color: @navbarInverseLinkColorHover;
.meta {
color: @navbarInverseText;
.value {
color: @navbarInverseLinkColorHover;
}
}
}
.moodle-actionmenu[data-enhanced] .toggle-display.textmenu {
.caret {
border-top-color: @navbarInverseLinkColorHover;
}
}
}
}
.dir-ltr {
.usermenu {
.userinfo {
padding-left: 20px;
}
.userbutton {
margin-right: 4px;
padding-right: 16px;
.avatars{
margin-right: 6px;
}
}
> .moodle-actionmenu > .menubar li a {
text-align: right;
}
}
&.userloggedinas .usermenu .userbutton .avatars {
.avatar {
&.current {
margin-right: -34px;
}
}
}
}
.dir-rtl {
.usermenu {
.userbutton {
margin-left: 4px;
padding-left: 16px;
.avatars{
margin-left: 6px;
}
}
> .moodle-actionmenu > .menubar li a {
text-align: left;
}
}
&.userloggedinas .usermenu .userbutton .avatars {
.avatar {
&.current {
margin-left: -42px;
}
}
}
}
theme/bootstrapbase/less/moodle/responsive.less
View file @ 6da0e4cf
......@@ -440,6 +440,18 @@
}
.nav-collapse.active {
height: auto;
.usermenu .moodle-actionmenu[data-enhanced] {
.toggle-display {
display: none;
}
.menu {
display: block;
li {
margin: 0 0.5em;
}
}
}
}
.path-mod-data .box > table > tbody > tr > td {
display: block;
......
theme/bootstrapbase/style/moodle.css
View file @ 6da0e4cf
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
theme/clean/layout/columns1.php
View file @ 6da0e4cf
......@@ -53,7 +53,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
</ul>
</div>
</div>
......
theme/clean/layout/columns2.php
View file @ 6da0e4cf
......@@ -54,7 +54,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
</ul>
</div>
</div>
......
theme/clean/layout/columns3.php
View file @ 6da0e4cf
......@@ -65,7 +65,7 @@ echo $OUTPUT->doctype() ?>
<?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->login_info() ?></li>
<li class="navbar-text"><?php echo $OUTPUT->user_menu() ?></li>
</ul>
</div>
</div>
......
user/lib.php
View file @ 6da0e4cf
......@@ -614,3 +614,187 @@ function user_count_login_failures($user, $reset = true) {
return $count;
}
/**
* Get a list of essential user navigation items.
*
* @param stdclass $user user object.
* @param moodle_page $page page object.
* @return stdClass $returnobj navigation information object, where:
*
* $returnobj->navitems array array of links where each link is a
* stdClass with fields url, title, and
* pix
* $returnobj->metadata array array of useful user metadata to be
* used when constructing navigation;
* fields include:
*
* ROLE FIELDS
* asotherrole bool whether viewing as another role
* rolename string name of the role
*
* USER FIELDS
* These fields are for the currently-logged in user, or for
* the user that the real user is currently logged in as.
*
* userid int the id of the user in question
* userfullname string the user's full name
* userprofileurl moodle_url the url of the user's profile
* useravatar string a HTML fragment - the rendered
* user_picture for this user
* userloginfail string an error string denoting the number
* of login failures since last login
*
* "REAL USER" FIELDS
* These fields are for when asotheruser is true, and
* correspond to the underlying "real user".
*
* asotheruser bool whether viewing as another user
* realuserid int the id of the user in question