-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Better UI for Piwik 3, more responsive, faster, lots of other fixes #10397
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… some random issues
…hen requesting resources
tsteur
added
Enhancement
For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
c: Design / UI
For issues that impact Matomo's user interface or the design overall.
Needs Review
PRs that need a code review
labels
Aug 14, 2016
This was referenced Aug 14, 2016
mattab
added
the
Major
Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
label
Aug 16, 2016
8 tasks
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
c: Design / UI
For issues that impact Matomo's user interface or the design overall.
Enhancement
For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc.
Major
Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Needs Review
PRs that need a code review
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
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 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
New Widgets
Technical changes
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: