Element Library for Moodle

Element Library for Moodle

by Simon Coggins -
Number of replies: 34

At the recent hackfest in Perth there was an interesting discussion on responsive design and how it could potentially be added to moodle's core themes. One of the difficulties is that there is a lack on consistency in how UI elements are created in Moodle, which makes it really hard for theme designers to ensure that all pages across the site are correctly styled. This lack of UI consistency also has an impact on overall usability.

In order to try to tackle this problem in our distribution of Moodle (called Totara) we've developed an "Element library" which we distribute with the code. It provides a set of linked pages with examples of common UI elements. It provides theme designers with a single place to go to check their themes and developers with commented examples, so they can see the best way to implement a particular UI element.

I demoed what we have at the hackfest and there was interest in integrating it into core Moodle, so I've created a bug and shared the code here:

http://tracker.moodle.org/browse/MDL-36558
https://github.com/totara/moodle/tree/mdl-feature-element-library

If you're a theme designer or UI guru and you've got any interest in this concept, or you've got some ideas on how you'd like it to develop, or some time to help identify common UI elements to improve the library, I'd love to hear from you!

Simon

Average of ratings: Useful (2)
In reply to Simon Coggins

Re: Element Library for Moodle

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I think this is a really great idea, and I can't wait until it gets into Moodle core.

Or, I suppose we might ultimately decide that admin/tool/elementlibrary/ should remain as an optional ad-on, like local/codechecker. Either way, this is a really useful thing, and I think it is useful to enough different people, so it should go into Moodle core. Also, if it is in core, then Integrators can insist that it is kept up-to-date.

For those who did not get a chance to see this in WA, could you attach some screen-grabs here?

Average of ratings: Useful (1)
In reply to Simon Coggins

Re: Element Library for Moodle

by David Scotson -
I'm just in the process of installing this now, as it sounds like something I've been looking for for a while.

Yes, this looks very handy, already spotted one issue thanks to it and can see it's going to save me a bunch of time.

Where did you come up with the list of styles to include e.g. I never knew about table.invisible or a.link-as-button. Are you automatically generating these in some way or is it just a list of ones you've learned about over time?

I've also been trying to approach this problem from the opposite direction. I think that if you provide two or three radically different themes, that all expect the same core HTML, then it become easier for the developers to see if their code is working as expected. If you have only one theme, or a lot of very similar themes then it's easy for bugs to slip through because it "looks" okay e.g. not using the right classname, but faking the same visual appearence with inline styles.

I've also (in various MDL tracker issues) advocated adopting Bootstrap's conventions whenever the current practice is using many different styles and classes.

edit: you appear to have a small bug in notifications.php and pagelayouts.php where it's not looking in the right place for config.php.



Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Amy Groshek -
Also, to follow up here, I'm currently working on/gathering information toward a standardization of existing markup for Moodle page views. My focus is a bit different than what is already contained in Totara's component library; I'm looking more at identifying page elements and outlining markup for them, but the idea is that eventually those elements would become a part of / build off of what's already in Totara's library.

http://docs.moodle.org/dev/Standardize_classnames_and_layout_to_facilitate_theming
Average of ratings: Useful (2)
In reply to Amy Groshek

Re: Element Library for Moodle

by Simon Coggins -

That's really excellent, thanks Amy. I agree that having sensible page level structure guidelines would be a good addition and would help with the overall aim of consistency across the interface.

Also related are issues like all the classes in custom menu.

Simon

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by Amy Groshek -
Yes, I agree custommenu really needs improvement. I was just testing out the two twitter bootstrap themes. Both use renderers to alter the custommenu markup. It looks like neither supports the third-level custommenu items. (I'm more than willing to throw the third level under the bus for the sake of a menu that can be easily styled. Be interesting to hear what others have to say about that.) I will put custommenu on the list of things in the wiki.
Average of ratings: -
In reply to Amy Groshek

Re: Element Library for Moodle

by David Scotson -
My custom menu renderer based on Bootstrap does multiple levels.

You can see it in action here:

http://moodle.iyware.com/?theme=bootstrap_renderers

On the other hand, I personally wouldn't even use 2 level menus if I could avoid it, and thought about only supporting a single level, but I'm trying to stick close to what people expect from Moodle (and/or Bootstrap) before going off and trying anything radical based on my opinions.
Average of ratings: Useful (1)
In reply to David Scotson

Re: Element Library for Moodle

by Amy Groshek -

As I stated earlier, neither of the Bootstrap themes available to the community fully support a multi-level custommenu. The drop-down works, but additional levels do not. I suspect that if we're going to change custommenu we need to preserve those levels. As you say:

trying to stick close to what people expect from Moodle (and/or Bootstrap) before going off and trying anything radical

Bootstrap should be discussed, and it should be considered by an audience much larger than just theme developers. It would make sense to adopt a framework. But legitimate implementation involves the whole community of developers, including everyone supporting any module. But as we go through and standardize markup, it sure would make sense to use an existing framework where possible. We would still probably have to extend bootstrap a bit. Moodle has some conventions that bootstrap doesn't really cover. But Bootstrap covers a lot of bases.

Attachment bootstrap-menu.png
Average of ratings: -
In reply to Amy Groshek

Re: Element Library for Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I'm fascinated reading everyone comments in this discussion, and especially yours Amy, regarding the custom menu.

One thing you also need to keep in mind is ACCESSIBILITY which is KEY to a good menu system. The link David provided goes to Danny Wahl's iWare site and is full of innovation, yet although the bootstrap menu works fantastically well, sadly it is not fully accessible when using the Keyboard only. I am not sure about the screen-reader side as I have not tested that. So that's something else we need to look at.

Thanks for all your input.

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Element Library for Moodle

by David Scotson -
Mary can you provide more details on what kind of accessability you think is missing?

I use a weird browser extension called Pentadactyl (and/or Vimperator, it's two forks of the same project) which allows you to navigate via keyboard commands and, while it's not technically an accessability aid, it's usually a pretty good analogue. And I can navigate the menu with that.

Trying with more traditional keyboard controls, I can tab through the links and use 'enter' to trigger the pop-ups, at least in Firefox on Ubuntu. I'll happily fix any such problems reported to me. I've started adding aria- tags such as labelled by, based on the Bootstrap documentation, but to be honest I'm not that familiar with how those are supposed to work, and the Bootrap docs don't go into great detail with them.

I'd be interested to hear about screen-readers, but since it's just a nested list of links I'm assuming it at least works, even if some better aria labelling might be more helpful.

edit: some more testing with the tabbing suggests that the second level links don't work because the pop-up trigger remains a link and that takes precedent over popping up the next level. I'd actually been wondering what to do with links if there's also a popup (e.g. just ignore them), this might tip that decision over the edge.
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi David,

I use Win7 and Firefox. If I TAB in any Moodle page I start of at the top which gives me a Skip to whatever, if I continue hitting the TAB key I eventually get to the menu. This is where the tabbing and arrow keys are useful. Using Tab and Left arrow I am access the first menu and it's submenu items. The one where it falters is when the top menu item has no link so it is passed. This happens if you use the Custommenu example given in the Themes setting page. So with that in mind the accessibility of the Custommenu is flawed in Moodle depending on how you populate it.

However, better ARIA labeling would/should overcome this. We also need a second order numbering system in the menu so that you can tab in the correct sequence.

I found Terrill Thompson's Blog very useful too. This will give you some idea about what we need.

http://terrillthompson.com/blog/202

This is really all new to me, but being partially sighted myself, I thought it was time I personally got to grips with it.

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Element Library for Moodle

by David Scotson -
Thanks for that blog link, very informative (though it made my head hurt a little, just when I thought I maybe understood what the best thing to do was I made the mistake of reading the comments).

I can't get the YUI custom-menu stuff to work on Moodle.org, in Firefox and Chrome the only link I can follow via the keyboard is the first one. Am I doing something wrong, I thought just the arrow keys should work?

I found a blog post by the Bootstrap designers about the usability ideas behind their drop-down menus and it confirmed my hunch that in Bootstrap the list items should either be links, or clickable, but not both.

http://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

Once I fix that, I think the menu will be mostly accessible by keyboard just using tab and enter, but I'll try to apply the aria stuff from that blog as well and get the arrow keys working too.
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

I can get the menu in the Tiny (Bootstrap)  theme to work using the keyboard, in fact I think the tab and arrow navigation works really well in Bootstrap generally.

Cheers

Mary

Average of ratings: -
In reply to Amy Groshek

Re: Element Library for Moodle

by David Scotson -
What does "available to the community" mean in this context? The stuff I've done is available on github and there's a link (in the dropdown menu approprately enough to the source code). And although it's not a pre-packaged theme available for end-users to install, I'm very happy if the people creating those kind of themes (or Moodle core, or people creating their own them, or anyone really) re-uses the stuff I've done, in fact that's kind of the point as i don't really want to have to test and support it all myself, and more uses means less bugs.
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Danny Wahl -

I believe that she's talking specifically about the plugin section.

Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Simon Coggins -

Ah table.invisible and a.link-as-button are both totara-specific classes that I must have missed when I was removing totara-specific code. I'll have another look through and remove anything else I missed. Thanks for spotting the other bugs, I'll fix them at the same time.

Simon

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by Simon Coggins -

I've pushed an updated version that should fix those issues.

Simon

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Simon,

Thank you for starting this discussion thread.

The Element Library seems a good start in the right direction, especially in conjunction with Bootstrap. I've been toying with similar ideas, but don't have the coding skills, or know how, to orchestrate them in such a vast system of files and directories which Moodle has. So thank you for sharing your ideas with us here.

Cheers

Mary

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by David Scotson -
I've submitted a pull request via github with some example paging bars that I found useful when working on a renderer to change the look. (And in general this concept of "live" examples works very well with renderers, and saves a lot of clicking around when you make changes).

A couple of screen shots to demonstrate:

http://imgur.com/a/EjL3D
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Simon Coggins -

Hi David,

Sorry, for some reason I missed your pull request when you first made it. This is a really nice addition - I've merged it in now.

Thanks!

Simon

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by David Scotson -
No problem,

some discussions from the MoodleMoot over in Ireland the other day seem to suggest your tool is going to be adopted into core. That'll really help with the development of new themes. I'd love to see it expand to cover each and every renderer in Moodle. I think of it as a visual unit test.

cheers,

dave
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I had another idea that achieves a similar result. I think we should keep the element library abstract. It should just show common things. When you want to see exactly what the quiz renderer (for example) does, you should go and look at the acutaly pages in the quiz. To help with this, one part of the element library should be a set of links for each module, to all the different types of pages that module might generate.

For example:

  • Forum
    • Forum with discussions
    • Forum with no discussions yet
    • Forum thread
    • ...
  • Quiz
    • Quiz with attempts: intro page, review page, edit quiz page, grades report, reponess report, statistics, manual grading page, ...
    • Quiz with no attempts yet: ... ditto ...
    • Quiz that has not yet had any questions added yet: ... ditto ...
    • ...
  • ...

This would work by finding these examples in the database, rather than constructing them. So, if there is no quiz with attempts in your DB, then those examples could no link anywhere.

This sort of thing would not just help themers check all types of pages, it would also help me when I am looking for the right example quiz to test some new feature or bug fix.

It would require a callback in each plugin, that would return the list of links to display.

What do people think?

Average of ratings: -
In reply to Tim Hunt

Re: Element Library for Moodle

by Amy Groshek -
Hi Tim,

The idea of pulling up existing examples from the db makes sense for a production site, but I am never developing themes on a site with existing activities in the db, unless I manually create them. Quizzes take even more time, since the quiz has to be created, then the questions created. So that won't save theme developers work unless we provide some way of quickly importing a course with all the necessary mods to test against. Is there some way to automate generation of the db examples?

~A
Average of ratings: -
In reply to Amy Groshek

Re: Element Library for Moodle

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

There is a generator system that is used by the unit tests and behat tests. It does not have a UI, at least not yet, but it could be used to build examples, with a little extra work.

Average of ratings: -
In reply to Tim Hunt

Re: Element Library for Moodle

by David Scotson -
I just noticed you said this generator doesn't have a UI. So is this a replacement for the generator found at :

/admin/tool/generator/index.php

(which also has a CLI interface). If it is something different, do you have a link to where it's being worked on?
Average of ratings: -
In reply to Tim Hunt

Re: Element Library for Moodle

by David Scotson -
If we continue the analogy to Unit Tests (where you test each thing in isolation) then Tim's idea is more of an integration test (where you combine the smaller units into something bigger). Both are complementary and have unique capabilities to find problems.

As an example, the page I added was for the paging bar renderer. This is used in various places in Moodle e.g. course logs or lists of students but should work the same in each place. As shown in my screenshot link above, I create page 1 through 7 out of 7, 1-20 out of 20, and 50-60 out of 60 for a total of 37 paging bars all on one page (it should really include a few more short bars as well e.g. page 1 of 2 etc.) Seeing that all in one place is vital to get an overview of this little component and how it behaves along a couple of dimensions of change (number of total pages and current page). Changing one bit of markup could effect any and all of those states, so you need to see them all in order to have the confidence to iterate quickly without breaking things.

But, if that paging bar looks out of place when used in the logs, or the student lists, then it's still not right. So links to actual usages, and a data generator to create them if necessary would be good too. It would probably be a good way to check that the data generator is actually creating useful data for development and testing. For example I noticed recently when looking at editing categories that the generator doesn't create any. I feel this might have been a factor in people putting some buttons at the bottom of a list which, when the list of categories grows, get pushed off the bottom of the screen.
Average of ratings: -
In reply to David Scotson

Re: Element Library for Moodle

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Your first paragraph sums it up nicely.

The new generator infrastructure is not meant to replace any old generator UI, but a new UI could be built on the foundation it provides.

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by Danny Wahl -

is this tool dropin or does it require the full custom moodle instance to be able to use it?  I'd like to install it on my dev site - but I pull from moodle master.

Average of ratings: -
In reply to Danny Wahl

Re: Element Library for Moodle

by David Scotson -
I think it's self-contained. I just copied the relevant folder (admintool/elementlibrary) into my Moodle. I have a vague recollection of it not working (or perhaps just complaining about version requirements) on a specific version of Moodle (maybe 2.3?) but it's working for me on master.
Average of ratings: -
In reply to Danny Wahl

Re: Element Library for Moodle

by Amy Groshek -
I'm not sure which repo you're referencing, but if it's https://github.com/amygroshek/totara-element-library then yes, as the README says, it's just a drop-in tool. I separated it from the totara repo so I could quickly drop it into sites. I haven't tested it on master, and there were some buggy things with the layouts.
Average of ratings: -
In reply to Amy Groshek

Re: Element Library for Moodle

by Danny Wahl -

One last question - is there a way to set permissions for access to elementlibrary?  I would like to make it guest accessible since it doesn't "do" anything - but I don't want to compromise /admin/

Average of ratings: -
In reply to Simon Coggins

Re: Element Library for Moodle

by Nadav Kavalerchik -
Picture of Core developers Picture of Plugin developers Picture of Testers Picture of Translators

Checkout Google's Polymer which was introduced last year and has come a long way since.

YouTube: Google I/O 2014 - Polymer and the Web Components revolution 

And this one too: 

Google I/O 2014 - Polymer and Web Components change everything you know about Web development

Average of ratings: Useful (2)
In reply to Nadav Kavalerchik

Re: Element Library for Moodle

by Jon Jack -

I had no idea this existed, but its so useful. This will save a lot of headaches when testing themes. 

Average of ratings: -