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
...@@ -94,6 +94,10 @@ class behat_auth extends behat_base { ...@@ -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 it is needed, it expands the navigation bar with the 'Log out' link.
if ($clicknavbar = $this->get_expand_navbar_step()) { if ($clicknavbar = $this->get_expand_navbar_step()) {
array_unshift($steps, $clicknavbar); 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; return $steps;
......
...@@ -2904,6 +2904,174 @@ EOD; ...@@ -2904,6 +2904,174 @@ EOD;
return html_writer::tag('ul', implode("\n", $lis), $attrs); 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 * Return the navbar content so that it can be echoed out by the layout
* *
......
...@@ -66,7 +66,7 @@ echo $OUTPUT->doctype() ?> ...@@ -66,7 +66,7 @@ echo $OUTPUT->doctype() ?>
<div id="page-header" class="clearfix"> <div id="page-header" class="clearfix">
<h1 class="headermain"><?php echo $PAGE->heading ?></h1> <h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<div class="headermenu"><?php <div class="headermenu"><?php
echo $OUTPUT->login_info(); echo $OUTPUT->user_menu();
echo $OUTPUT->lang_menu(); echo $OUTPUT->lang_menu();
echo $PAGE->headingmenu; echo $PAGE->headingmenu;
?></div> ?></div>
......
...@@ -80,9 +80,7 @@ echo $OUTPUT->doctype() ?> ...@@ -80,9 +80,7 @@ echo $OUTPUT->doctype() ?>
<?php if ($hasheading) { ?> <?php if ($hasheading) { ?>
<h1 class="headermain"><?php echo $PAGE->heading ?></h1> <h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<div class="headermenu"><?php <div class="headermenu"><?php
if ($haslogininfo) { echo $OUTPUT->user_menu();
echo $OUTPUT->login_info();
}
if (!empty($PAGE->layout_options['langmenu'])) { if (!empty($PAGE->layout_options['langmenu'])) {
echo $OUTPUT->lang_menu(); echo $OUTPUT->lang_menu();
} }
......
...@@ -192,6 +192,106 @@ a.skip:active {position: static;display: block;} ...@@ -192,6 +192,106 @@ a.skip:active {position: static;display: block;}
.headermenu {float:right;margin:10px;font-size:0.8em;text-align:right;} .headermenu {float:right;margin:10px;font-size:0.8em;text-align:right;}
#course-header {clear:both;} #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 * Navbar
*/ */
......
...@@ -50,7 +50,7 @@ echo $OUTPUT->doctype() ?> ...@@ -50,7 +50,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li> <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> </ul>
</div> </div>
</div> </div>
......
...@@ -51,7 +51,7 @@ echo $OUTPUT->doctype() ?> ...@@ -51,7 +51,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li> <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> </ul>
</div> </div>
</div> </div>
......
...@@ -56,7 +56,7 @@ echo $OUTPUT->doctype() ?> ...@@ -56,7 +56,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li> <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> </ul>
</div> </div>
</div> </div>
......
...@@ -60,7 +60,7 @@ echo $OUTPUT->doctype() ?> ...@@ -60,7 +60,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li> <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> </ul>
</div> </div>
</div> </div>
...@@ -75,6 +75,7 @@ echo $OUTPUT->doctype() ?> ...@@ -75,6 +75,7 @@ echo $OUTPUT->doctype() ?>
<div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div> <div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
</div> </div>
<?php echo $OUTPUT->page_heading(); ?> <?php echo $OUTPUT->page_heading(); ?>
<?php echo $OUTPUT->user_menu(); ?>
<div id="course-header"> <div id="course-header">
<?php echo $OUTPUT->course_header(); ?> <?php echo $OUTPUT->course_header(); ?>
</div> </div>
......
...@@ -340,3 +340,161 @@ div#dock { ...@@ -340,3 +340,161 @@ div#dock {
border-right: 0px none; 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;
}
}
}
}
...@@ -440,6 +440,18 @@ ...@@ -440,6 +440,18 @@
} }
.nav-collapse.active { .nav-collapse.active {
height: auto; 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 { .path-mod-data .box > table > tbody > tr > td {
display: block; display: block;
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
...@@ -53,7 +53,7 @@ echo $OUTPUT->doctype() ?> ...@@ -53,7 +53,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li><?php echo $OUTPUT->page_heading_menu(); ?></li> <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> </ul>
</div> </div>
</div> </div>
......
...@@ -54,7 +54,7 @@ echo $OUTPUT->doctype() ?> ...@@ -54,7 +54,7 @@ echo $OUTPUT->doctype() ?>
<?php echo $OUTPUT->custom_menu(); ?> <?php echo $OUTPUT->custom_menu(); ?>
<ul class="nav pull-right">