Moodle in English: User dropdown menu

User dropdown menu

by Jetha Chan - Wednesday, July 9, 2014, 4:01 PM

Hi everyone,

As part of our continuing work on overhauling navigation throughout Moodle, we've just finished up a first pass at a user menu dropdown system (https://tracker.moodle.org/browse/MDL-45893). This is a feature that a lot of community themers have integrated into their own themes, and I'm excited to be a part of building it into Moodle core.

A screenshot of a full-width window displaying a Moodle site, with the new user menu open.

Don't worry too much about the old login_info renderer going away; this will only replace the use of it in the header, base and bootstrapbase will still call it in the footer and if you're using a custom solution this shouldn't affect you at all (unless / until you decide to use the new renderer, albeit).

There've been some changes to the bootstrap navbar as well; it's now a renderable with all that entails. Menus can now be enqueued in the navbar, optionally specifying whether or not they collapse on narrower screens and a custom hamburger to use if necessary!

Re: User dropdown menu

by Jetha Chan - Wednesday, July 9, 2014, 4:03 PM

Please have a play and test our prototype at http://prototype.moodle.net/usermenu/. You can use either of the following accounts:

student1 / Moodle!!1
manager1 / Moodle!!1

We've been getting great feedback from people so far, and we've already got new functionality requests for the new feature:

ability to change the order of the button contents (avatar, text, caret)
ability to disable avatars in the button

It's currently envisaged that we'll have it try to land in its current form before we work on these functionality requests as separate issues. Do give us your feedback and comments after you have read the specifications in MDL-45893 and tested our prototype. Thanks!

Average of ratings:Useful (2)

Re: User dropdown menu

by praveen gubbala - Wednesday, July 9, 2014, 5:16 PM

It's good. Can I apply this to Essential theme

Average of ratings:Useful (1)

Re: User dropdown menu

by Jetha Chan - Wednesday, July 9, 2014, 10:10 PM

The code behind it shares large parts of commonality with existing custom_menu renderables; if your theme has custom_menu support in it already, this shouldn't look too bad. That said, there are some minor tweaks that would probably need to be made - I'll look into it for Essential the next chance I get.

Average of ratings: -

Re: User dropdown menu

by David Bezemer - Wednesday, July 9, 2014, 10:11 PM

When Moodle 2.8 ships with this feature released yes.

Until then I have this feature planned to be integrated with the current release of Essential (for Moodle 2.6 and 2.7) as well.

Average of ratings:Useful (2)

Re: User dropdown menu

by Dan Poltawski - Wednesday, July 9, 2014, 7:42 PM

Hi Jetha,

Apologies as this comment comes without detailed analysis or any knowledge of the code/themeing/any analysis at all.

From the outline of what you have written it looks like the custom menu/bootstrap nav bar and this new user menu are tied together. If this is the case, please consider allowing them to be separating them more as I imagine there are many themers who do not want to se the navbar like this. (Look at this site for one example).

(more apologies for not actually checking if this is the case)

Average of ratings: -

Re: User dropdown menu

by Jetha Chan - Wednesday, July 9, 2014, 10:02 PM

Hey Dan,

The custom menu / bootstrap navbar and the new user menu are not, in fact, tied together! Apologies if I gave you that impression.

The new user menu is its own renderable, and can be used independently on base or as a part of the navbar on bootstrapbase themes; it is an extension of custom_menu and leverages everything that goes with that. The bootstrap navbar is a new renderable which has menus enqueued inside of it; one is the custom_menu, one is this new user_menu, and one is the page_heading_menu.

Hopefully that clears it up!

Average of ratings: -

Re: User dropdown menu

by Jetha Chan - Thursday, July 10, 2014, 10:38 AM

I've provisioned a new user on the prototype site such that you can see how it looks outside the bootstrap navbar, details are:

student2 / Moodle!!1

This user has been set up to use the Base theme, which doesn't have a bootstrap navbar; basing the user_menu code on the custom_menu code allows us to leverage the YUI-based javascript that powers our existing dropdowns.

Average of ratings: -

Re: User dropdown menu

by Chris Kenniburg - Wednesday, July 9, 2014, 8:07 PM

This looks great. Keep moving these navigation changes forward. I really hope you guys are able to push forward with the other changes described for course navigation and other stuff.

Average of ratings: -

Re: User dropdown menu

by Gavin Henrick - Thursday, July 10, 2014, 4:13 AM

Are you planning on having it with more options / configurable as to what is on it?

We have been implementing user menus that allow the admin to choose (theme config options) which features to have on it as below:

Average of ratings:Useful (1)

Re: User dropdown menu

by Jetha Chan - Thursday, July 10, 2014, 9:00 AM

Eventually, yes; the current three link contents is sort of the bare minimum we could put in and have it still be useful. I don't think there's a one-size-fits-all solution that's going to necessarily work best for every Moodle out there, so as you've been doing we're probably going to have to let admins decide what's most important for their site.

At the moment we're thinking that My home will still head up the list (as we're planning improvements to that page), and Log out / switch role will always be at the end; everything in between should be up for grabs though.

p.s. Great work! Good to see you meeting the need.

Average of ratings: -

Re: User dropdown menu

by Danny Wahl - Friday, July 11, 2014, 10:04 AM

Hi, this is nice - is there a place to look at the code? Without that I can't really wrap my brain around it.

Is it basically that there's a class with three methods now (or more...)

class core_renderer extends renderer_base {
    public function custom_menu() { ... }
    public function user_menu() { ... } // This is new and what you're showing us
    public function navbar() { ... } // This is new too!
}

So in the past theme developers were extending custom_menu() to add the functionality that's now been moved to user_menu(). If that's about what's happening I like it.

one comment on the output (I know it's a prototype) it's strange that the username is a link to the profile still, but clicking it drops the menu. Shouldn't it be a deep link to the dropdown or something? e.g. #user-menu instead of an actual anchor that (I assume) we're killing with javascript?

Overall this is great!

Average of ratings:Useful (1)

Re: User dropdown menu

by Jetha Chan - Friday, July 11, 2014, 12:40 PM

Hi Danny,

There is! I apologize if it wasn't entirely clear, but there's a sort of paper trail that leads from the issue tracker to my GitHub. The commit in question is: https://github.com/jethac/moodle/compare/7a4832e...MDL-45893-master

Is that what people have been doing? That's great - yeah, the new user_menu (lib/outputcomponents.php:3033) extends custom_menu so we can leverage existing YUI stuff on base themes and so that the bootstrapbase renderer doesn't have to do too much fancy.

The username(s) in the link maintain status as profile links not so much for the dropdown but so that people have right-click->open in new window access. Thought it'd be a good idea.

Thanks for your feedback!

Average of ratings: -

Re: User dropdown menu

by Danny Wahl - Sunday, July 13, 2014, 8:48 AM

Thank you very much, I really like this. I just have a few thoughts and questions- though I'm no developer so they're really more for my own education than anything

why not roll this into login_info() method- maybe as a parameter? e.g. login_info('menu') or login_info('text') [seriously, just curious- not suggesting it]

why not call login_info() in $returnstr in outputrenderers.php L#755 rather than reconstructing your own 'you are not logged in (login)'?

is it possible to create a method that allows for simple concatenation to the menu? user_menu::add_child($title, $link); that would be awesome! instead of extending the whole method.

Average of ratings:Useful (1)

Re: User dropdown menu

by Jetha Chan - Sunday, July 13, 2014, 7:19 PM

It's okay, I'll play ball

Why not roll this into login_info()?
login_info is already a very long method and I didn't want to make it longer or harder to read.
Why not call login_info from the new helper method?
You could totally do that! But, login_info would re-check every current login / user state flag again, so that'd adversely affect performance.
Is it possible to create a method that allows for simple concatenation to the menu?
Very possible; we'll probably do that as a separate issue - I know we at HQ are very interested to see what can go in this new menu. It'd probably take the form user_menu::add_child($title, $link, $class) as we're using targeted CSS to set icons and such.

It's great to see people excited about this! Very, very gratifying.

Average of ratings:Useful (1)

Re: User dropdown menu

by Jean-Luc Delghust - Sunday, July 13, 2014, 10:55 PM

This is great.. I'm just working on the theme for our upgrade to 2.7, which will be a slightly customised version of Clean...

Would it be advisable to try and integrate this now, on 2.7 (actually we'll be upgrading to 2.7.1) ? If yes, could you point me to the files I'd need to change? (I'm completely new to bootstrap, I understand how CSS works though..)

Average of ratings: -

Re: User dropdown menu

by Jetha Chan - Monday, July 14, 2014, 1:40 PM

Hi Jean-Luc,

Great to hear! You could try to integrate this, but bear in mind that that might make subsequent patches to 2.7.x harder for your institution - this patch makes changes to core Moodle files.

If you did try to integrate it, every time we release patches for 2.7.x, you'd have to roll back your integration, apply the patches, then reapply the user menu changes (and that's assuming that we don't identify issues with this). If you're 100% certain that that's what you want, you can do it, but I personally would advise against it.

Hope that helps!

Average of ratings: -

Re: User dropdown menu

by Jean-Luc Delghust - Monday, July 14, 2014, 7:06 PM

Hi,

Thanks for the sound advice, which I will follow - we'll just leave it be for now.
I guess I'll wait for it to get to core, I can live with that if it means easier upgrading later.

Thanks again for all the hard work!

Average of ratings:Useful (1)

Future major features

User dropdown menu