Many users which evaluated piwik say "wow", but please change the menustructure. Especially the horinzontal menu confused many of my customers, we should use vertical menus (as they are standard on many systems).
An other problem in my opinion is that there is too much space used for logo and the message, that piwik needs help.
Please have a look on the prototype attached.
I talked to customers and the would find this change usefull.
Keywords: Menu
Attachment: Preview
preview.png
Attachment: ExtJS based prototype, needs to be converted to jQuery to work with piwik
menu.zip
Attachment: Large preview as requested, but i think the prototype is better
preview_large.png
i added this as independet request, but said that before in #5597
Hey kaystrobach, can you please post a bigger screenshot? or even a URL with the demo if possible :) Thanks!
Marking as a dupe of #1028.
The screenshot isn't clear but your proposal appears to also move the nav bar links into the menu, and at the same time, drop the breadcrumb feature in the current menu system. What happened to the site & language selectors?
Please have a look into the menu.zip file, there is a complete extJS based prototype.
I will add a bigger screenshot, but i think the best is to download the zip and see it in action.
The language selector is a submenu of General.
I missed the site selector, because i use all my installations with EXT:piwinintegration for TYPO3 and idSite is set via TYPO3 ;).
But i think it could be an extra menu - like General which could be named sites.
can you please post a public URL with the demo so we can have a look? thanks
of course:
http://projects.kay-strobach.de/piwikMenuPrototype/
It's just a javascript prototype of the dashboard without any php. So you simply needed to extract the .zip archive. But please have a look on the above link.
Regards Kay
here is a piwik, with an menu changing extension. the code is in #177
This is interesting, but I think there's a big drawback: we lose the navigation feature that the current menu provides. The user needs to know, without clicking anywhere, which report > subreport he is currently looking at. I can think of two solutions
I like the compactness of this menu so I think it's worth trying the breadcrumb solution. thoughts?
please do not put the menu to the left! I moved it to the top to make it easy to integrate piwik in other webapplikations like TYPO3 and be as slim as possible.
Possible Solutions:
I've added highlighting of the last clicked element and it's parent to the prototype.
Best regards Kay
Kay, do you think you could try to add the breadcrumbs at the top too? I like the fact that the menu is highlighted but I'm curious how more usable it would be with the breadcrumbs. I would say they should be the size of the H2 title, and could read "Referers > Websites" with the referer being clickable to show the first submenu. Thoughts?
being clickable to show the first submenu
-> this would cause to have a redundant menu? -> see updated prototype (please do not forget to clear the cache.)
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php
SVN to test on your local maschine:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins
the language selector is a bit scared in webkit browsers, i know this issue but it's ok in ie, opera and firefox.
kaystrobach, would you be able to provide a demo where only the new menu would be provided but all other elements (language selector, calendar, etc.) would be at the same position (in the top bar). This would help us decide on going forward with your code and keep one modification at a time.
One small bug report: when you click on the main menu Visitors, it should
Thanks
hello matt,
my time is currently very limited. The code is commented very well (i think) and just modifies the standard html of piwik with some jQuery, please comment out the mod's you dislike to get an overview.
The Feedback from the users of the TYPO3 Extension EXT:piwikintegration is very positive on the complete menu change. (I've send a mail to hello@piwik.org with a small description and the request of getting a consultant but got no answer ...)
Interesting JS File:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins/TYPO3Menu/js
General SVN:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins/
Best regards
Kay
kaystrobach, I understand your time is limited. When you have more time to submit a patch, please do so. In the meantime, I decrease priority of the ticket. Thanks! (Also, I have replied to your email, sorry for the delay)
ok, just the menu - i will do that this evening.
i will send the rest via mail.
Best regards
Kay
current state:
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php
Problem:
I assumed, that any toolbar needs to be in the topbars div, that's why i transformed the #topLeftBar div into a expandable menu in my first version.
The same problem comes up with the language selector, for usability reasons there should be only one type of menu, so one solution would be a language menu near the username.
kaystrobach, I meant: do you think you can provide a standard Piwik install with only the new menu in it? all the colors would be the std piwik colors, the top bar would be the same, etc. just the menu would be updated (below the Piwik logo).
This would help us see if we can just change the main menu with your proposal. Thanks!
like that?
http://projects.kay-strobach.de/piwik/
How do you wanna get the code?
Problems: User can get confused where he is, a solution (other menu style) can be provided with a simple header:
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php
The Code is as comment in the following example:
$(document).ready(function(){
//make menu working
//unbind old menu
$('ul.nav').addClass('horizontalmenu');
$('ul.horizontalmenu').removeClass('nav');
$('ul.horizontalmenu li').unbind('mouseenter');
$('ul.horizontalmenu li').unbind('mouseleave');
//open event
$('ul.horizontalmenu li').bind('mouseenter',function(e) {
pos = $(this).offset();
$(this).children('ul').css('left' ,pos['left'])
$(this).children('ul').css('top' ,pos['top']+$(this).height());
$(this).children('ul').css('visibility' ,'visible');
$(this).children('ul').slideDown(120);
});
//close event
$('ul.horizontalmenu li').bind('mouseleave',function(e) {
$(this).children('ul').slideUp(120);
});
$('ul.horizontalmenu li').bind('click',function(e) {
$('ul.horizontalmenu li').removeClass('sfHover');
$(this).addClass('sfHover');
$('ul.horizontalmenu li:has(.sfHover)').addClass('sfHover');
//modifyHeader();
});
//hide items
$('ul.horizontalmenu li ul').hide();
//remove now senseless elements
$('#topRightBar a:first-child').width(80);
$('.sf-sub-indicator').remove();
//add header information
//modifyHeader();
});
kaystrobach, I quite like the concept...
Here are a few bug reports
what do others think of this new menu? Is it better than current menu?
after working a while on the concept, i found out that there is an entry on the jQuery Changelog, that they fixed quite a lot around the events, perhaps it's working with the new release.
@matt: do you have any replies to the last message
@matt: i added the h2 to represent the current menu state.
@matt: i dropped the slidedown effect and use show() and hide() to avoid the toogling, the other way would be to add a delay, but it's a concept ;)
I don't think it helps with vertical space though... Also, we are probably going to work very soon on the re-design of the UI: see screenshots in #1154 and they show the same horizontal menu. I agree this is not ideal though, but I can't think of a good solution. What do you think about these mockups?
Replying to matt:
I don't think it helps with vertical space though... Also, we are probably going to work very soon on the re-design of the UI: see screenshots in #1154 and they show the same horizontal menu. I agree this is not ideal though, but I can't think of a good solution. What do you think about these mockups?
I like the version of Kay very much, it would be great it his work could go into piwik! I think this is a very important point...
Take a look on the following screens:
http://typo3.org/documentation/document-library/extension-manuals/piwikintegration/2.3.2/view/1/1/#id2513224
This is a part of EXT:piwikintegration for TYPO3.
With some changes Piwik can be really great.
The greatest part would be to change the UI lib to ExtJS.
Then we can have really sortable grids HTML Bars and can go away from the anoying buggy flash.
Best regards
Kay
Replying to kaystrobach:
Take a look on the following screens:
http://typo3.org/documentation/document-library/extension-manuals/piwikintegration/2.3.2/view/1/1/#id2513224
Those patches are realy great, if you use this piwik version within a big projects and TYPO3 it just feels much better with those changes than stand-alone how it is in the official version.
have you used it already -> i would like to get some detailed feedback
is this something we could do with regards to new design? If so please comment here with suggestion :-)
see #6917