New Menu system?

[graeme]

Greetings,

There have been a number of bugs to do with the current menu system. Many have been fixed but there are still several outstanding ones.

There is also a blueprint to upgrade the menu system http://eden.sahanafoundation.org/wiki/BluePrintMenu

So I have spent some time looking at this. I looked at ext-core which had a nice simple CSS UL/LI style menu that worked well and fixed many of the current problems but ext-core is not part of ExtJS and (quite rightly) Fran was reluctant to add another JavaScript library dependency. I tried several JQuery menus but failed to get one working to the same level of the Ext-core. Next I bit the bullet and put together a menu system using ExtJS. This uses a completely different approach from all the other menu systems is not built up using HTML but JavaScript, I can see several benefits with this approach which I will try and summarise but what I would like is feedback.

I have a demo at http://demo.eden.sahanafoundation.org/extjs/


Benefits:

• It uses an action approach. This means that the actions are set up and then linked to the menu system. Given that the actions are unlikely to change (in a production system) they can be generated and stored in a static JS file. Also the actions can be reused, so they can be linked to context menus, dash-boards etc.
• Whilst the demo reloads the entire page the ExtJS system is basically designed to use AJAX calls to just load the bits that matter. That would possibly require a redesign of how the data is delivered to the browser but the bandwidth saved may make a compelling case for such a change
• The menu system is fairly easy to configure through properties of the elements so for example adding icons to each menu item is trivial adjusting spacing is also quite easy.
• For those tweaks for which there isn't a property there is always CSS ;)
• Reorganising the menu is fairly easy and to make maximum use of the library we may want to change the way that the controllers currently create the menu data (although that is not necessary)
• Sub-menus are properly resized and stay within the bounds of the screen

Issues:

• Hover over a menu and it used to drop down, now you need to click... I didn't like the change it nor did Fran but this is how the library works, however it should be possible to add a listen event to replicate this behaviour. I've not looked into generating a solution but if that was to be a must have before this was to gio any further then I'm happy to delve deeper :)
• The look and feel is a bit ragged. I've not done anything to try and make it look good. That should be possible via CSS and I'd do that before any commit to trunk, but that is where I need some feedback on which areas would need improving.

Okay, please take a look and let's see if this could be a solution that we adopt.

Graeme.

[Dominic König]

fredagen den 25 mars 2011 16.16.03 skrev graeme:
> Given that the actions are unlikely to
> change (in a production system) they can be generated and stored in a
> static JS file.

That is not true!
Especially the application menus change dynamically on various conditions.

Dominic

[graeme]

But the point that I was trying to make is that the actions and the menus are separated and so the actions (which is most of the JavaScript) can be held statically because most of them will not be changing and if some do then please tell me which ones and that can be properly considered.

Graeme

2011/3/25 Dominic König <dom...@nursix.org>

[Fran Boon]

On 25 March 2011 15:41, graeme <foster...@gmail.com> wrote:
> But the point that I was trying to make is that the actions and the menus
> are separated and so the actions (which is most of the JavaScript) can be
> held statically because most of them will not be changing and if some do
> then please tell me which ones and that can be properly considered.

Look at the Vol system which provides a per-record menu for the
most-recently worked-on Person, Project or Team...

Also menus change based on role - e.g. see Inventory Management with
the Item Categories (& the main Administration menu, of course)

F

> Graeme
>
> 2011/3/25 Dominic König <dom...@nursix.org>
>>
>> fredagen den 25 mars 2011 16.16.03 skrev  graeme:
>> > Given that the actions are unlikely to
>> >    change (in a production system) they can be generated and stored in a
>> > static JS file.
>>
>> That is not true!
>> Especially the application menus change dynamically on various conditions.
>>
>> Dominic
>

> --
> You received this message because you are subscribed to the Google Groups
> "Sahana-Eden" group.
> To post to this group, send email to sahan...@googlegroups.com.
> To unsubscribe from this group, send email to
> sahana-eden...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/sahana-eden?hl=en.
>

[graeme]

Greetings,

I have added another menu system. This one is a more traditional system using JQuery. It's look is very raw at the moment. But I wanted to have a second option so that people can make a better comparison. This has been set up at http://demo.eden.sahanafoundation.org/jquery/ (Thanks Fran)

What I was looking to achieve with the various systems was to address the 'self adjusting' problem of the menu widths. Both appear to do this. I wanted a system that appeared correctly with little of no modification such as the menus off to the right (Help, language and login) and their sub menus appearing within the viewport, rather than floating off to the right which many appeared to do. Additionally, I wanted a system that is easily configurable and expandable. I believe that both meet this but are very different in how they work.

Any feedback welcome and any votes on which system to go for would be wonderful:

Graeme.

[Michael Howden]

Hey,

Sorry about the hugely late response. This is a great initiative! The UI design of Sahana Eden is one of the major things which I think that we need to address and there’s a bit of work being done to try and secure some funding to support this on some of the projects AidIQ is involved in (watch this space!)

 

Just some feedback:

* From a user’s perspective I found both the menus fairly similar. The design of the extjs version was prettier – but I’m assuming that this isn’t what I should have been focusing on.

* I would like to ensure that the design maintains

* +1 to jquery if it means not requiring another JS library

* +1 to jquery for allowing me to explore the menu: more >> Documents & Photos >> Documents >> List

* -1 to jquery for the fisheye (expanded margins) hover formatting for the menu list items

* +1 to being able to load pages using Ajax

* I’m not 100% sure about icons in the menus

* I would like to see the removal of the “list” and “add” buttons from the menu – both of these functions can be accessed from the default view for a resource.

 

Other thoughts:

* I think there were discussions about making the top level (application) menus less prominent (like Google’s interface).

* Could the menu somehow indicate where in the system we were?

* Would it be possible to load the second tier (menu_options) via JS?

* How could we make it so that the menu was less dependent on what application (controller)  was being called. Eg Usually I would want to display the Inv menu for Request.

 

Cheers

 

Michael

 

--