Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Better UI for Piwik 3, more responsive, faster, lots of other fixes #10397
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:
Some of the features explained
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.
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:
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:
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:
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.
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
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.
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: