I'll be resuming work on the plugin repository after 1.0.
Currently, the admin menus are organized as tabs. For "Plugins", I propose to add submenus:
Attachment: Mockups for a possible new AdminMenu
Attachment: Alternate patch to sort translated menu items
Attachment: New Admin Menu with Linear Gradient
This should be quite easy to add from the code point of view as AdminMenu extends the basic menu. I also suggest to redesign the Admin Menu from scratch as it gets very bloated if you have many plugins that add entries to the admin menu.
WordPress is doing this quite nice - but it wouldn't work that way because of our horizontal menu.
Something like this?
Another thing to consider is that a plugin may not want an entire settings screen of its own. We could:
Last minute idea - I'm developing a plugin that won't work unless its settings are properly configured. Maybe there is a good way to send a user to the plugin's admin page when they attempt to activate it and only commit the activation if the plugin settings are configured successfully. A framework for this type of activity may be helpful for other plugins that require some settings to function properly. Many examples can be found in WordPress.
I created a mockup for a new admin menu. It follows vipsofts vertical structure and uses a accordion plugin for jQuery. The plugin collapses/expands menu entries when you click or mouseover them.
Why a vertical menu?
The vertical menu gives us a lot more space for menu entries. Especially when plugins use an own menu entry the old admin menu tends to look crowded.
Why not the Superfish menu?
The superfish menu has the same limits as the old admin menu. Once there are a certain number of plugins the submenu will overflow and have impact on the design (consider small screens with 1024x768, they are still very common especially on subnotebooks).
Please let me know what you think. I can give you access to a dev-installation running the mockups if needed.
I like it! Currently selected menu could be highlighted for clarity.
Also all menus could be expanded by default, since only the super user will see all the menu entries and he can deal with few more displayed menus.
Sounds good. I haven't had a chance to look at the mockups but since you mentioned jquery accordion plugin, I should respond that there's an accordion included with jqueryUi.
matt: Thanks, we could of course consider expanding all the menus. Afaic common usability guideline say that you shouldn't show menus with more than about 5 elements at once (can't find a good source right now though). We can discuss this later.
vipsoft: Cool, haven't seen that one before. I rewrote my mockup to use the accordion from jQuery UI. This introduced a weird margin bug in IE8 (and probably earlier versions) but it should be fixable.
We're a couple of versions behind on jquery and jqueryUI. Hopefully, an update will fix positioning problems. (But I'm waiting on jquery 1.4.5 as it's critical for the Live mem leak fix.)
re: 1. Are you proposing changes to the CoreHome menu too? AFAIK Goals and Custom Alerts wouldn't appear in the admin menu.
re: 2. I would prefer we rename "order" to "weight", and then sort by weight+name.
re: 1. No! CoreHome menu is fine. You're right, Goals and Custom Alerts are unlikely to appear in the admin menu.
re: 2. Thats a good idea. Do you propose to sort by weight and name or weight or name?
Update to new jQuery + jQuery UI didn't fix the positioning issue. I'll see how I can fix this issue and post a alpha-version patch.
Any other ideas?
weight and name. I'd probably also add want a method to (re-)define the menu items weights (i.e.,for theming).
Hmmm... maybe I was thinking about positioning changes in jquery ui 1.9. scratch head It's up to you whether or not to fix the margin bug.
No other ideas at the moment (assuming you cleared the tmp/assets and browser cache after the update).
Positioning Issue is described in the jQuery bug tracker (http://bugs.jqueryui.com/ticket/5421), the Ticket is targeted for 1.9. There is a workaround in the ticket that works for me.
I'll provide a seperate patch for the weight in the menus in the next days (once 1.1 is stable).
Ok, I'll leave menu order as is, however, there is a bug where menu items with the same order may change position, depending on the current selection. The only fix is to sort by order+name, using either the translation ID (e.g., 'VisitorGenerator_VisitorGenerator') or the translated string ('Visitor Generator', 'Besuchergenerato', 'Kvijiden luonti', etc). Any preference? (The first is simpler, but after translation, may not appear to be sorted.)
jquery UI margin bug should be fixed in the latest jquery-ui.js in svn.
halfdan: I don't mind starting from scratch, but if you have a patch (even alpha), feel free to upload.
Once we have this menu in place, it would be useful to access the "system check" performed during Installation, under the Menu "Diagnostic". A few times users had issues that the server config changed, was updated incorrectly, resulting in Piwik appearing broken without reason. If users could access the Diagnostic page, they would sometimes find the error themselves.
Are you proposing to change current horizontal menu to vertical for the reports view? I would say no at this stage, but open to discuss... ;)
It would solve the "many goals" issue. I'll postpone changing CoreHome perhaps in conjunction with #1559 (which would be nice-to-have since GA recently implemented it).
To solve "too many goals" it would be easier to have the submenu span cleanly on multiple lines, I think it would look OK and that would be enough since this is a low occurrence issue. I don't think GA implemented #1559 ? (and imo it is not so useful)
It would be quite useful to finalize the Admin UI Piwik design and menu is a big part of it. Also there are quite a few tickets around new Admin features (SMS, System check page, View archive.php logs, etc.) so a better menu will be necessary.
This ticket has been hanging around here for quite some time now. Are you still interested in the changes I've made (see the AdminMenu.zip). I still got that stuff on my disk.
@halfdan, definitely let's do it! Would you mind submitting your final patch, for the new admin menu, with a nice CSS that give fresh and consistent look to the Piwik admin UI ? If you notice the UI looks quite good, except for the ugly menu. We are glad you are fixing it :-)
This enhancement was also requested, as the menu looks bad in Russian: see #3457
Also I was thinking that each Admin Setting page will match to a Help page on the site, so we could add Help URL on piwik.org as a metadata in the menu and display a Help icon somewhere to link to this page.
Here's a quick snapshot of the revamped Admin Menus.
The menu doesn't have much styling right now - I am currently trying different approaches to colorize the items (e.g. a linear gradient of the Piwik Logo colorset).
Note: This is just a snapshot. Visual appearance will improve. Just wanted to give an update since the ticket has been hanging around forever.
Please provide feedback and I'll finish it up until tomorrow.
Another Note: Previously I suggested to use the accordion plugin which I didn't use now. I think the accordion plugin won't improve the user experience and we should just display the expanded menu as it is.
admin_menu1.2.diff makes the content part auto-expand to full width. I personally find this more consistent and visually appealing. Also added some styling similar to the main menu.
Added 5px linear gradient to the admin menu. I think it looks pretty awesome that way. I also locally splitted the Plugin listing into Installed (activated=true) and Available (activated=false).
Any comments? Suggestions?
(Ordering is still an issue)
- Clicking on Geolocation/Privacy changes the order of the items regardless of their language (@vipsoft you provided a solution for translated items - not sure if it applies here)
What is the problem exactly? it's important that items are always in consistent orders across languages.
- @matt I like the idea of help pages, but I am not sure how to integrate them into the menu. I thought of tiny super scripted "[?]"-symbols, but adding them to each item doesn't look good.
I dont think they should be in the menu. The help box:
But we can do it in V2 (maybe you create a follow up ticket for this improvement)
- @vipsoft, I didn't add hooks to allow plugins to add content to another page and I am not sure if that is a good idea. A normal Piwik setup won't have that many plugins installed and I think we can safely just add them to the menu.
Sounds good! KISS
(In ) New admin menus, hooray!
New vertical admin menus are organized as follow:
The design is excellent & clever: Well done! :)