Better UI for Piwik 3, more responsive, faster, lots of other fixes (#10397)

* improved ui and responsiveness

* improve rss widget

* commit changes for ui again, got lost after the last commit

* fix more tests

* restoring files

* fix fonts

* fix more tests

* more test fixes

* fix some system tests

* fix tests

* fix system and ui tests

* fix updater tests

* make a page as loaded once the callback is called

* enable verbose

* more verbose output

* enable phantomjs debug flag

* debug should be a phantomjs option

* trying to fix installation tests

* fixes #10173 to not compile css files as less

* trying to minimize js/css requests to hopefully prevent random ui test fails

* disable verbose mode

* fix updater and installation

* lots of bugfixes and ui tweaks

* fix reset dashboard

* various bugfixes

* fix integration tests

* fix text color

* hoping to fix installation tests this way

* cache css/js resources for an hour, should speed up tests and prevent some random issues

* we need to avoid installing plugins multiple times at the same time when requesting resources

* finally getting the colors right again

* fix most tests, more tests for theme

* use an h2 element for titles for better accessibility

* fix headline color

* use actual theme text color (piwik-black)

* fix small font size was applied on all p elements

* fix tests

* now improving all the datatables

* trying to ignore images for visitor log

* Revert "trying to ignore images for visitor log"

This reverts commit ad1ff7267aae14ad905bef130e956c8593c4fb22.

* fix tests

* fix we had always ignored a max label width

* trying to fix file permissions

* fix more file permissions

* Improved plugins update API (#10028)

* refs #7983 let plugins add or remove fields to websites and better settings api

* * Hide CorePluginsAdmin API methods
* More documentation
* Added some more tests

* improved updates API for plugins

* better error code as duplicate column cannot really happen when not actually renaming a colum

Conflicts:
	core/Updates/3.0.0-b1.php
	plugins/CoreUpdater/Commands/Update/CliUpdateObserver.php

* fix DB field piwik_log_visit.location_provider too small (#10003)

* fixes #9564 fix DB field piwik_log_visit.location_provider too small

* use new plugins updater API

* DB field piwik_log_visit.visit_total_actions too small (#10002)

* fixes #9565 DB field piwik_log_visit.visit_total_actions too small

* change type of some db columns that are too small

* fix tests (#10040)
Conflicts:
	plugins/CoreAdminHome/Menu.php
	plugins/Goals/Menu.php
	plugins/MobileMessaging/Menu.php
	plugins/SitesManager/Menu.php
	plugins/UsersManager/Menu.php
	tests/PHPUnit/System/expected/test_apiGetReportMetadata__API.getWidgetMetadata.xml

* fix more file permissions

* repair more file permissions

* repair more file permissions

* trying to make ui tests work again, the table was missing

* fix some encoding issues

* cross browser fixes and usability improvement

* move back the config icon, need to find a better solution later

* more cross browser fixes

* bugfixes

* fix ui tests

* fix encoding issue

* fix various issues with the ui tests when a test gets aborted

* also skip this visitor log test when aborted

* there were 3 css files that were loaded separately, merge them instead into one css

* forgot to add the actual manifest

* do not add manifest if custom logo is specified

* load font css files first as it was before merging them into big css

* fix link icon was not aligned anymore

* minor fixes

* setting it back to 4px

* in popovers the font variable was always ignored and a different font loaded

* forgot to update screenshots

* fix remaining tests

* this should fix an update error

* added 3 new widgets system check, system summary and plugin updates

* tweak new widgets content

* no page reload when changing date or segment

* in admin home show only enabled widgets

* refs #10295 use getMockBuilder instead of deprecated getMock

* fix some ui tests

* fix various bugs

* fix more tests

* fix ui tests

* add a space between loading image and loading message

* fix docs so they appear on developer.piwik.org

* improved documentation

* introduce new Widget::renderTemplate method for consistency with controllers

* remove no longer needed files

* testing system fonts

* fix strong was not really bold

* more useful system summary

* remove ubuntu font

* fix most tests and removed most em elements

* fix tests

* fix headline was very thin

* update submodule

* update submodules

* update submodule

* fix failing ui tests

* update submodules

4 files changed, 86 insertions, 101 deletions

diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js b/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js
index d90d0f0aec..0cc399c464 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard-model.service.js
@@ -24,6 +24,7 @@
             lastVisits   : '?',
             lastVisitsDate : '?',
             numberOfSites : 0,
+            loadingMessage: _pk_translate('MultiSites_LoadingWebsites'),
             updateWebsitesList: updateWebsitesList,
             getNumberOfFilteredSites: getNumberOfFilteredSites,
             getNumberOfPages: getNumberOfPages,
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
index 06a7fb6613..46bba85aad 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
@@ -1,5 +1,6 @@
 <div>
     <h2 piwik-enriched-headline
+        class="card-title"
         help-url="http://piwik.org/docs/manage-websites/#all-websites-dashboard"
         feature-name="{{ 'General_AllWebsitesDashboard'|translate }}">
         {{ 'General_AllWebsitesDashboard'|translate }}
@@ -34,7 +35,7 @@
                 <span class="arrow" ng-class="{multisites_asc: !model.reverse && evolutionSelector == model.sortColumn, multisites_desc: model.reverse && evolutionSelector == model.sortColumn}"></span>
                 <span class="evolution"
                       ng-click="model.sortBy(evolutionSelector)"> {{ 'MultiSites_Evolution'|translate }}</span>
-                <select class="selector native-select" id="evolution_selector" ng-model="evolutionSelector"
+                <select class="selector browser-default" id="evolution_selector" ng-model="evolutionSelector"
                         ng-change="model.sortBy(evolutionSelector)">
                     <option value="visits_evolution">{{ 'General_ColumnNbVisits'|translate }}</option>
                     <option value="pageviews_evolution">{{ 'General_ColumnPageviews'|translate }}</option>
@@ -47,8 +48,7 @@
         <tbody id="tb" ng-if="model.isLoading">
             <tr>
                 <td colspan="7" class="allWebsitesLoading">
-                    {{ 'MultiSites_LoadingWebsites' | translate }}
-                    <span class="allWebsitesLoadingIndicator"> </span>
+                    <div piwik-activity-indicator loading-message="model.loadingMessage" loading="model.isLoading"></div>
                 </td>
             </tr>
         </tbody>
@@ -85,44 +85,41 @@
 
         <tfoot>
 
-        <tr ng-if="hasSuperUserAccess">
-            <td colspan="8" class="add_new_site">
-                <a href="{{ url }}?module=SitesManager&action=index&showaddsite=1&period={{ period }}&date={{ date }}&idSite={{ idSite }}">
-                    <img src='plugins/Morpheus/images/add.png' alt=""/> {{ 'SitesManager_AddSite'|translate }}
-                </a>
-            </td>
-        </tr>
-
-        <tr ng-if="!hasSuperUserAccess">
-            <td colspan="8" class="empty-row">
-                <br/>
-            </td>
-        </tr>
         <tr>
             <td colspan="8" class="paging" ng-hide="model.numberOfPages() <= 1">
-                <span id="prev" class="previous" ng-hide="model.currentPage == 0" ng-click="model.previousPage()">
-                    <span style="cursor:pointer;">&#171; {{ 'General_Previous'|translate }}</span>
-                </span>
-                <span class="dataTablePages">
-                    <span id="counter">
-                        {{ 'General_Pagination'|translate:model.getCurrentPagingOffsetStart():model.getCurrentPagingOffsetEnd():model.getNumberOfFilteredSites() }}
-                    </span>
-                </span>
-                <span id="next" class="next" ng-hide="model.currentPage >= model.getNumberOfPages()" ng-click="model.nextPage()">
-                    <span style="cursor:pointer;" class="pointer">{{ 'General_Next'|translate }} &#187;</span>
-                </span>
+                <div class="row">
+                    <div class="col s3 add_new_site">
+                        <a ng-if="hasSuperUserAccess" href="{{ url }}?module=SitesManager&action=index&showaddsite=1&period={{ period }}&date={{ date }}&idSite={{ idSite }}">
+                            <span class="icon-add"></span> {{ 'SitesManager_AddSite'|translate }}
+                        </a>
+                    </div>
+                    <div class="col s6">
+                        <span id="prev" class="previous dataTablePrevious" ng-hide="model.currentPage == 0" ng-click="model.previousPage()">
+                            <span style="cursor:pointer;">&#171; {{ 'General_Previous'|translate }}</span>
+                        </span>
+                        <span class="dataTablePages">
+                            <span id="counter">
+                                {{ 'General_Pagination'|translate:model.getCurrentPagingOffsetStart():model.getCurrentPagingOffsetEnd():model.getNumberOfFilteredSites() }}
+                            </span>
+                        </span>
+                        <span id="next" class="next dataTableNext" ng-hide="model.currentPage >= model.getNumberOfPages()" ng-click="model.nextPage()">
+                            <span style="cursor:pointer;" class="pointer">{{ 'General_Next'|translate }} &#187;</span>
+                        </span>
+                    </div>
+                    <div class="col s3">&nbsp;</div>
+                </div>
             </td>
         </tr>
         <tr row_id="last">
-            <td colspan="8" class="site_search">
+            <td colspan="8" class="input-field site_search">
                 <input type="text"
                        ng-model="searchTerm"
+                       class="browser-default"
                        piwik-onenter="model.searchSite(searchTerm)"
                        placeholder="{{ 'Actions_SubmenuSitesearch' | translate }}">
-                <img title="{{ 'General_ClickToSearch' | translate }}"
+                <span title="{{ 'General_ClickToSearch' | translate }}"
                      ng-click="model.searchSite(searchTerm)"
-                     class="search_ico"
-                     src="plugins/Morpheus/images/search_ico.png"/>
+                     class="icon-search search_ico"></span>
             </td>
         </tr>
 
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
index c83ab162aa..4616cedbc2 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
@@ -10,14 +10,7 @@
 }
 
 #multisites {
-  border: 0;
-  padding: 0 15px;
-  font-size: 14px;
-
-  h2 {
-    border-bottom: 0px;
-    font-size: 24px;
-  }
+  width: 80%;
 
   .notification-error {
     margin-top: 15px;
@@ -26,20 +19,29 @@
     }
   }
 
-  .add_new_site,
-  .clean {
+  .add_new_site {
     border: 0 !important;
-    text-align: right; padding-top: 15px;padding-right:10px;
-  }
+    font-size: 13px;
+    text-align: left;
 
-  .add_new_site {
-    img {
-      margin: 0px;
+    a {
+      color: @theme-color-text;
+      &:hover {
+        text-decoration: underline !important;
+      }
     }
   }
 
+  .clean {
+    border: 0 !important;
+    text-align: right;
+    padding-right:10px;
+    padding-top: 19px;
+    padding-bottom: 5px;
+  }
+
   .site_search {
-    padding: 0px;
+    padding: 0;
     text-align: center;
     border: 0 !important;
   }
@@ -56,48 +58,37 @@
   td, tr, .sparkline {
     text-align: center;
     vertical-align: middle;
-    padding: 2px 6px 2px 12px;
-    margin: 0;
-  }
-
-  th {
-    padding: 12px 6px 12px 12px;
   }
 
   td.empty-row {
     border-bottom: none !important;
   }
 
-  .indicator {
-    background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat center;
-    height: 20px;
-    width: 60px;
-    margin: auto;
-    border: 0 !important;
-  }
-
   .paging {
     padding: 5px;
-    font-size: 10px;
-    border-bottom: 0px !important;
+    border-bottom: 0 !important;
+
+    .row {
+      margin-top: 16px;
+    }
 
     .previous {
-      padding-right: 20px;
+      visibility: visible;
     }
     .next {
-      padding-left: 20px;
+      visibility: visible;
     }
   }
 
   th:first-child {
     text-align:left;
+    padding-left: 12px;
   }
 
   th {
     cursor: pointer;
-    border-left: 0px;
     text-align: right;
-    border-bottom: 0px;
+    padding-right: 0 !important;
 
     &#evolution {
       text-align: center;
@@ -109,23 +100,25 @@
   }
 
   .site_search input {
-    margin-right: 0px;
+    margin-right: 0;
     margin-left: 25px;
     padding-right: 25px;
+    width: 250px;
+    height: 3rem;
   }
 
   .search_ico {
     position: relative;
-    left: -25px;
-    margin-right: 0px;
-    margin-top: -1px;
+    left: -20px;
+    top: 1px;
     cursor: pointer;
+    font-size: 16px;
   }
   .reset {
     position: relative;
     left: -25px;
     cursor: pointer;
-    margin-right: 0px;
+    margin-right: 0;
   }
 
   tr.group {
@@ -178,13 +171,6 @@
     padding:20px
   }
 
-  .allWebsitesLoadingIndicator {
-    background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat right 3px;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-  }
-
   .heading {
     display: inline;
     margin-top: 4px;
@@ -192,6 +178,9 @@
 
   #evolution_selector {
     margin: -6px 0 0 5px;
+    height: 20px;
+    width: 70px;
+    display: inline-block;
   }
 
   .label .arrow {
@@ -203,7 +192,7 @@
     float: none;
     display: inline-block;
     vertical-align: top;
-    margin: 0px;
+    margin: 0;
     margin-left: 6px;
     margin-top: -1px;
   }
@@ -212,7 +201,7 @@
     .multisites_asc,
     .multisites_desc {
       margin-right: 6px;
-      margin-left: 0px;
+      margin-left: 0;
     }
     .evolution {
       vertical-align: top;
@@ -246,18 +235,6 @@
   }
 
   tfoot td {
-    border-bottom: 0px;
+    border-bottom: 0;
   }
 }
-
-#mt thead {
-  line-height: 2.5em;
-}
-
-#mt thead *:first-child {
-  border-top-left-radius: 7px
-}
-
-#mt thead *:last-child {
-  border-top-right-radius: 7px;
-}
diff --git a/plugins/MultiSites/templates/getSitesInfo.twig b/plugins/MultiSites/templates/getSitesInfo.twig
index 94d13ee702..ff3ca882bf 100644
--- a/plugins/MultiSites/templates/getSitesInfo.twig
+++ b/plugins/MultiSites/templates/getSitesInfo.twig
@@ -10,14 +10,24 @@
 {% block content %}
 <div class="container" id="multisites">
 
-    <div id="main">
-        <div piwik-multisites-dashboard
-             display-revenue-column="{% if displayRevenueColumn %}true{% else %}false{%endif%}"
-             page-size="{{ limit }}"
-             show-sparklines="{% if show_sparklines %}true{% else %}false{%endif%}"
-             date-sparkline="{{ dateSparkline }}"
-             auto-refresh-today-report="{{ autoRefreshTodayReport }}">
+    {% if isWidgetized %}
+        <div id="main">
+    {% else %}
+        <div id="main" class="card">
+            <div class="card-content">
+    {% endif %}
+            <div piwik-multisites-dashboard
+                 display-revenue-column="{% if displayRevenueColumn %}true{% else %}false{%endif%}"
+                 page-size="{{ limit }}"
+                 show-sparklines="{% if show_sparklines %}true{% else %}false{%endif%}"
+                 date-sparkline="{{ dateSparkline }}"
+                 auto-refresh-today-report="{{ autoRefreshTodayReport }}">
+            </div>
+    {% if isWidgetized %}
         </div>
+    {% else %}
+        </div></div>
+    {% endif %}
     </div>
 </div>
 {% endblock %}