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

3 files changed, 78 insertions, 67 deletions

diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index 20a5fbac92..7269aa23ed 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -2,13 +2,19 @@
   margin: 0 -6px;
 }
 
-#standalone #dashboard {
-  margin: -10px -6px 0;
-}
+body#standalone {
+  background-color: @theme-color-widget-exported-background-base;
 
+  .top_controls {
+    background-color: @theme-color-widget-exported-background-base;
+  }
+  #dashboard {
+    margin: -10px -6px 0;
+  }
+}
 
 #dashboard {
-  .col {
+  #dashboardWidgetsArea > .col {
     min-height: 100px;
     // Customize Bootstrap gutter between columns
     padding-right: 6px;
@@ -47,8 +53,6 @@
 
 .ui-confirm {
   display: none;
-  width: 630px;
-  background: @theme-color-background-base;
   color: @theme-color-text-light;
   cursor: default;
   font-size: 12px !important;
@@ -56,10 +60,15 @@
   padding: 20px 10px;
   border-radius: 4px;
   min-height: 0 !important;
+
+  textarea {
+    background-color: @theme-color-background-contrast;
+  }
 }
 
 .ui-confirm p {
-  margin-top:10px;
+  margin-top: 16px;
+  font-size: 14px;
 
 }
 .ui-confirm h2 {
@@ -138,27 +147,6 @@
   height: 30px;
 }
 
-.dashboardSettings {
-  position: absolute;
-  z-index: 120;
-  background: #f7f7f7;
-  border: 1px solid #e4e5e4;
-  border-radius: 4px;
-  color: @theme-color-text-light;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.dashboardSettings:hover {
-  background: #f1f0eb;
-  border-color: #a9a399;
-}
-
-.dashboardSettings.expanded {
-  z-index: 1020; /* More than .jqplot-seriespicker-popover (1010) */
-  min-width: 800px;
-}
-
 .dashboardSettings > span {
   background: url(plugins/Morpheus/images/sort_subtable_desc.png) right center no-repeat;
   padding-right: 20px;
@@ -166,7 +154,6 @@
 }
 
 .dashboardSettings ul.submenu {
-  padding-top: 5px;
   display: none;
   float: left;
 }
@@ -174,15 +161,17 @@
 .dashboardSettings.expanded ul.submenu {
   display: block;
   list-style: square outside none;
+  z-index: 1020; /* More than .jqplot-seriespicker-popover (1010) */
 }
 
-.dashboardSettings > ul.submenu > li {
-  padding: 5px 0;
-  clear: both;
+.dashboardSettings.expanded .dropdown {
+  min-width: 800px;
+  background-color: @theme-color-background-contrast;
 }
 
-.dashboardSettings > ul.submenu > li:hover {
-  color:@theme-color-link;
+.dashboardSettings ul.submenu > li {
+  padding: 5px 0;
+  clear: both;
 }
 
 #changeDashboardLayout h2 {
@@ -257,8 +246,6 @@
 
 .widgetpreview-base {
   clear: both;
-  min-height: 600px;
-  -height: 600px;
 }
 
 .addWidget, .manageDashboard {
@@ -308,14 +295,8 @@ ul.widgetpreview-widgetlist {
 }
 
 div.widgetpreview-preview {
-  float: left;
   width: 500px;
-}
-
-.dashboardSettings {
-  min-height: 0;
-  height: auto;
-  margin-right: 10px;
+  float: left;
 }
 
 .dashboardSettings .submenu {
@@ -339,10 +320,18 @@ div.widgetpreview-preview {
   line-height: 20px;
   padding: 0 25px 0 5px;
   color: @theme-color-text-light;
+  width: 200px;
 }
 
-.dashboardSettings .submenu ul li:hover {
+.dashboardSettings ul.submenu > li.generalAction:hover {
   color: @theme-color-link;
+  cursor:pointer;
+}
+
+.dashboardSettings .submenu ul li:not([disabled]):hover {
+  background: @theme-color-background-base;
+  border-radius: 2px;
+  cursor:pointer;
 }
 
 .dashboardSettings .submenu li[disabled],
@@ -367,6 +356,7 @@ div.widgetpreview-preview {
 .dashboardSettings.expanded .widgetpreview-widgetlist,
 .dashboardSettings.expanded .widgetpreview-preview {
   display: block;
+  z-index: 333999;
 }
 
 .widgetPlaceholder {
@@ -392,20 +382,15 @@ div.widgetpreview-preview {
 }
 
 #copyDashboardToUserConfirm .inputs {
-  width: 375px;
-  margin: 10px auto 0;
-}
+  width: 400px;
+  margin: 32px auto 0;
 
-#copyDashboardToUserConfirm .inputs select,
-#copyDashboardToUserConfirm .inputs input {
-  width: 150px;
-  float: left;
+  label {
+    margin-top: 18px;
+    display: inline-block;
+  }
 }
 
-#copyDashboardToUserConfirm .inputs label {
-  width: 200px;
-  float: left;
-}
 
 #dashboardWidgetsArea {
   margin-top: -5px;
diff --git a/plugins/Dashboard/stylesheets/standalone.css b/plugins/Dashboard/stylesheets/standalone.css
index 292d3e63c0..142abced53 100644
--- a/plugins/Dashboard/stylesheets/standalone.css
+++ b/plugins/Dashboard/stylesheets/standalone.css
@@ -3,6 +3,10 @@ body {
     padding-left: 7px;
 }
 
+#standalone strong {
+    font-weight: 700;
+}
+
 #dashboard {
     margin: 30px -6px 0 -12px;
     width: 100%;
@@ -17,6 +21,9 @@ body {
     position: relative;
 }
 
+#Dashboard > ul > li {
+    list-style: square inside none;
+}
 #Dashboard > ul {
     list-style: square inside none;
     background: #f7f7f7;
diff --git a/plugins/Dashboard/stylesheets/widget.less b/plugins/Dashboard/stylesheets/widget.less
index c6743eb559..8127de0547 100644
--- a/plugins/Dashboard/stylesheets/widget.less
+++ b/plugins/Dashboard/stylesheets/widget.less
@@ -2,9 +2,13 @@
     .font-default(13px, 18px);
     background: @theme-color-widget-background;
     border: 1px solid @theme-color-widget-border;
-    box-shadow: 0 1px 1px rgba(204,204,204,.5);
-    overflow: hidden;
-    z-index: 1;
+    border-radius: 2px;
+    position: relative;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 1px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.12);
+
+    &:hover, &:focus {
+        box-shadow: 0 1px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+    }
 
     h2 {
         font-weight: normal;
@@ -39,7 +43,7 @@
         padding-bottom: 4px;
         background: @theme-color-widget-title-background;
         h3 {
-            .font-default(15px, 18px);
+            .font-default(18px, 18px);
             color: @theme-color-widget-title-text;
         }
         .button {
@@ -71,16 +75,27 @@
     }
 
     .pk-emptyDataTable {
-        .font-default(12px, 16px);
+        .font-default(13px, 16px);
         text-transform: none;
     }
 
-    .dataTableFooterIcons {
-        border-top: 1px solid @color-silver-l85;
-    }
+    .widgetContent {
+        .widgetBody {
+            padding: 5px 12px 0;
+        }
+
+        /** We do not want to show a material-card in a widget which is already a card */
+        .card {
+            box-shadow: 0 0;
 
-    .widgetContent .jqplot-graph {
-        margin-top: 6px;
+            .card-content {
+                padding: 0;
+                border-radius: 0
+            }
+        }
+        .jqplot-graph {
+            margin-top: 6px;
+        }
     }
 
     .widgetContent.hidden {
@@ -106,8 +121,8 @@
     }
 
     .card {
-        margin: 0px;
-        border-radius: 0px;
+        margin: 0;
+        border-radius: 0;
     }
 }
 
@@ -125,6 +140,10 @@
   background-color: @theme-color-widget-background;
 }
 
+.widget .datatableFooterMessage {
+  padding-left: 12px;
+}
+
 .bar-graph-colors[data-name=grid-background] {
     color: @theme-color-widget-background !important;
 }