Piwik 3 UI updates

Piwik UI just got a whole lot better, more responsive and faster :) I have worked on this for a couple of months so it fixes and references various issues. It wasn't really possible to separate them much as they are all independent:

• fixes Improve responsive layout header to use less space and look better #9250 Improve responsive layout header to use less space and look better
• fixes menubar cleanup @ 320px ~ 360px screens #9431 menubar cleanup @ 320px ~ 360px screens
• fixes Do not reload whole page when changing date, period, segment, or website #9899 Do not reload whole page when changing date, period, segment, or website
• fixes No search box in responsive mode #9249 No search box in responsive mode
• fixes Remove word "website" from website selector #9063 Remove word "website" from website selector
• fixes Half of the dashboard manager dropdown is cut off now due to it's placement in top controls #9100 Half of the dashboard manager dropdown is cut off now due to it's placement in top controls
• fixes New menu structure for Personal => Manage menu items #9354 New menu structure for Personal => Manage menu items
• fixes When one datatable label is very long it causes the table to stretch overlapping other reports #6121 When one datatable label is very long it causes the table to stretch overlapping other reports
• fixes Footer icons displayed by default in the footer or in the header #6362 Feature Request: Footer icons displayed by default
• fixes Introduce a new "admin" home page #10356 Introduce a new "admin" home page
• fixes Improve plugins settings structure #10098 Improve plugins settings structure
• fixes Remove "Personal Plugin Settings" page and menu entry and move these settings to "Personal Settings"  #9919 Remove "Personal Plugin Settings" page and menu entry and move these settings to "Personal Settings"
• fixes New widget "new plugins" / Marketplace  #10355 New widget "new plugins" / Marketplace
• fixes New widget "System check" #10354 New widget "System check"
• fixes New widget "System summary" #10353 New widget "System summary"
• fixes websites management page shouldn't reload entire page when site added #6421 websites management page shouldn't reload entire page when site added
• fixes alignment broken in movers and shakers widget #10308 alignment broken in movers and shakers widget
• fixes Deprecated getMock() methods used in tests #10295 Deprecated methods used in tests
• fixes Less compiler changes css value of calc #10173 Less compiler changes css value of calc
• fixes Use Phantomjs 2.0 for UI screenshot tests #8143 Use Phantomjs 2.0 for UI screenshot tests
• refs Make Piwik look nice on Apple Retina displays - better icons? #9292 Make Piwik look nice on Apple Retina displays - better icons
• refs Add possibility to toggle (show/hide) left menu #9263 Add possibility to toggle (show/hide) left menu (it works already with shortcut "z" but user cannot know about it, this needs to be improved to fix it)

This is quite a list. We have basically cleaned up / refactored lots of the HTML, JavaScript, CSS stack. For example we have ported most of the JavaScript to AngularJS. We have removed a lot of our CSS in favour of http://materializecss.com/ . Because of using MaterializeCSS we had to drop support for IE 9.

Some of the features explained

Updated UI

New UI based on material design as the current design of Piwik 2.X was a bit too flat. It will separate content cleaner and the UI is much more responsive.

Screenshot for desktop:

Screenshot for tablets:

Screenshot for smartphones:

Left and right menu on tablets and smartphones:

UI now uses native system fonts

In the last weeks GitHub and WordPress have switched to use native fonts and we do so as well. This means Piwik will look slightly different depending on the browser and operating system but in general it will look more "native" and more like your operating system does in general. Read more about WordPress' reasons to use native fonts.

We will release a theme on the Marketplace that uses Arial, Verdana so users could switch in case of any problem or if they prefer a different font: https://github.com/piwik/plugin-ClassicFontTheme

Selectors are now more responsible and arrange themselves in the visible area:

Themes

Plugins can change the colors, etc as usual. For example there is a new variable to change the top menu bar color and we might release some plugins with different top menu colors.

Further responsiveness improvements

Pretty much all pages became more responsive. Widgets, Settings, but also other pages became more responsive. For example Settings Page fullscreen:

and the settings page on smartphones:

Better data table footers

In the past we had this "expandable footer" to let you change the visualization, export a report or change the shown limit etc. We have removed this and now show them always when hovering a report. This makes a report look much cleaner:

Report by default:

When hovering the icons appear:

And the menu can be opened:

### The return of the "Zen mode"

By pressing the key "z" the zen mode will be activated and makes a very clean UI by removing several menus. We have enhanced the search a little so you basically do not need the menus on the top and left anymore. The only thing missing is to decide how to let users know that they can activate the zen mode.

## Usability Improvements ### Menu Structure

In the past the separation between the "Personal" menu and the "Administration" menu has always been confusing, even for us. So we made it simpler and merged those two menus into one menu. Depending on the user access only a few menu items will be there or for users having super user access a few more. Further improvements are:

• New Admin landing page. It has always been difficult for us to pick a good page to load when clicking on the administration link in the top menu and it even varied lots depending on the user access and the enabled plugins. We solved it by showing some useful information when going to the Administration page. The shown widgets depend on the user access, which plugins are enabled and whether other plugins disable some of the widgets.
• We have merged all "website" related settings into a new category in this menu so it is easier to find and we have splitted the "websites management" and the "websites global settings" into two different pages.

New combined personal and admin left menu:

Top menu now shows only one icon for personal and admin menu:

New admin landing page

### When one datatable label is very long it causes the table to stretch overlapping other reports

In Piwik 2.X when switching for example to the "all columns view" of a report it may have overlapped another report on the right. We have fixed this and now show scroll bars when it otherwise would overlap another report.

Plugin Settings pages

In the past we had a "User => Plugin Settings" page and an "Admin => Plugin Settings" page. We have removed both pages and now show "User => Plugin Settings" pages under "Personal Settings" and "Admin => Plugin Settings" under "General Settings". The plugin settings are now also more clearly separated from each other.

Faster UI

• We load widgets shown in the UI in parallel instead of rendering one after another
• We do no longer reload the whole page when changing the date or segment.
• We have updated AngularJS and jQuery which should make the UI quite a bit faster

New Widgets

• We have added new widgets that can be added to the dashboard. They are available to users with super user access and this way it is easier to see possible problems with the system etc.

Technical changes

• As mentioned because we moved to MaterializeCSS we had to drop support for IE9
• For our UI tests we have updated to PhantomJS 2.X as PhantomJS 1.X uses like a 9 years old rendering engine and wasn't able to render the UI anymore. The advantage is for example much more accurate and nicer looking screenshot tests. Making this work was quite a big challenge and we may still have to resolve some issues as some tests seem to fail randomly.
• Removed lots of technical debt and improved JavaScript, CSS, ... which improves the user experience
• FIY: We will possibly add caching for the API.getReportingPage method later

Better ability to change the UI in the future

I want to explain this one in a bit more detail. It was a lot of work to migrate all pages into the new "Look" of Piwik 3 because the markup for example for form fields was defined in each plugin again and again. In the future we will be able to globally change the markup much more easily by just changing eg one component for form fields and it will be applied to all of them. Also for "content blocks", headlines etc we have now components which should make it easier for us, and for anyone else to change the UI.

There are many other changes and it is hard to mention them all. We invite you to use the new UI once it was merged and to give us feedback. This PR is dependent on several other PR's for our plugins and I will create these PRs soon and add links to the corresponding PRs soon:

• Compatibility with Piwik 3 plugin-QueuedTracking#41
• Compatibility with Piwik 3  plugin-CustomDimensions#39
• Compatibility with Piwik 3 plugin-CustomAlerts#34
• Compatibility with Piwik 3 plugin-AnonymousPiwikUsageMeasurement#32
• Compatibility with Piwik 3 plugin-VisitorGenerator#13
• Compatibility with Piwik 3 plugin-SecurityInfo#14
• Compatibility with Piwik 3 plugin-LogViewer#9
• Compatibility with Piwik 3 plugin-TasksTimetable#8