Skip to content
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
merged 98 commits into from Aug 29, 2016

Conversation

Projects
None yet
2 participants
@tsteur
Copy link
Member

tsteur commented Aug 14, 2016

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

newui_disconnectedselectors

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:

newui_settings_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:
menutop

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.

newwidgetsdashboard

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:

tsteur added some commits Apr 15, 2016

tsteur added some commits Aug 8, 2016

tsteur added some commits Aug 29, 2016

@tsteur tsteur merged commit 0c9c30b into 3.x-dev Aug 29, 2016

0 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details

@tsteur tsteur deleted the piwik3-ui-roboto2 branch Sep 1, 2016

@tsteur tsteur referenced this pull request Sep 27, 2016

Closed

Piwik 3 Blog post about some important changes #10454

3 of 3 tasks complete

@iMarkus iMarkus referenced this pull request Nov 15, 2017

Closed

Compatibility Piwik 3.x.x #3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.