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

10 files changed, 191 insertions, 159 deletions

diff --git a/plugins/Dashboard/Dashboard.php b/plugins/Dashboard/Dashboard.php
index 44814f6800..da7a8507d9 100644
--- a/plugins/Dashboard/Dashboard.php
+++ b/plugins/Dashboard/Dashboard.php
@@ -154,12 +154,12 @@ class Dashboard extends \Piwik\Plugin
                 [
                     {"uniqueId":"widgetVisitsSummarygetEvolutionGraphforceView1viewDataTablegraphEvolution","parameters":{"forceView":"1","viewDataTable":"graphEvolution","module":"VisitsSummary","action":"getEvolutionGraph"}},
                     {"uniqueId":"widgetLivewidget","parameters":{"module":"Live","action":"widget"}},
-                    {"uniqueId":"widgetVisitorInterestgetNumberOfVisitsPerVisitDurationviewDataTablecloud","parameters":{"viewDataTable":"cloud","module":"VisitorInterest","action":"getNumberOfVisitsPerVisitDuration"}}
+                    {"uniqueId":"widgetVisitorInterestgetNumberOfVisitsPerVisitDuration","parameters":{"viewDataTable":"cloud","module":"VisitorInterest","action":"getNumberOfVisitsPerVisitDuration"}}
                 ],
                 [
                     ' . $topWidget . '
                     {"uniqueId":"widgetReferrersgetWebsites","parameters":{"module":"Referrers","action":"getWebsites"}},
-                    {"uniqueId":"widgetVisitTimegetVisitInformationPerServerTimeviewDataTablegraphVerticalBar","parameters":{"viewDataTable": "graphVerticalBar","module":"VisitTime","action":"getVisitInformationPerServerTime"}}
+                    {"uniqueId":"widgetVisitTimegetVisitInformationPerServerTime","parameters":{"viewDataTable": "graphVerticalBar","module":"VisitTime","action":"getVisitInformationPerServerTime"}}
                 ],
                 [
                     {"uniqueId":"widgetUserCountryMapvisitorMap","parameters":{"module":"UserCountryMap","action":"visitorMap"}},
diff --git a/plugins/Dashboard/javascripts/dashboard.js b/plugins/Dashboard/javascripts/dashboard.js
index 582ad1b79a..48c3430824 100644
--- a/plugins/Dashboard/javascripts/dashboard.js
+++ b/plugins/Dashboard/javascripts/dashboard.js
@@ -73,8 +73,9 @@ function showChangeDashboardLayoutDialog() {
 
     var id = makeSelectorLastId('changeDashboardLayout');
     piwikHelper.modalConfirm(id, {yes: function () {
-        $('#dashboardWidgetsArea').dashboard('setColumnLayout', $(id).find('.choosen').attr('layout'));
-    }});
+        var layout = $(id).find('.choosen').attr('layout');
+        $('#dashboardWidgetsArea').dashboard('setColumnLayout', layout);
+    }}, {fixedFooter: true});
 }
 
 function showEmptyDashboardNotification() {
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index 3bdd50662c..13862ecd5b 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -6,6 +6,8 @@
  */
 (function ($) {
 
+    var layoutColumnSelector = '#dashboardWidgetsArea > .col';
+
     /**
      * Current dashboard column layout
      * @type {object}
@@ -80,14 +82,14 @@
          *
          * @param {int} dashboardIdToLoad
          */
-        loadDashboard: function (dashboardIdToLoad) {
+        loadDashboard: function (dashboardIdToLoad, forceReload) {
 
             $(dashboardElement).empty();
             dashboardName = '';
             dashboardLayout = null;
             dashboardId = dashboardIdToLoad;
 
-            if (piwikHelper.isAngularRenderingThePage()) {
+            if (!forceReload && piwikHelper.isAngularRenderingThePage()) {
                 angular.element(document).injector().invoke(function ($location) {
                     $location.search('subcategory', '' + dashboardIdToLoad);
                 });
@@ -175,7 +177,7 @@
             ajaxRequest.withTokenInUrl();
             ajaxRequest.setCallback(
                 function () {
-                    methods.loadDashboard.apply(this, [dashboardId])
+                    methods.loadDashboard.apply(this, [dashboardId, true])
                 }
             );
             ajaxRequest.setLoadingElement();
@@ -314,7 +316,7 @@
         var columnWidth = layout.split('-');
         var columnCount = columnWidth.length;
 
-        var currentCount = $('.col', dashboardElement).length;
+        var currentCount = $('> .col', dashboardElement).length;
 
         if (currentCount < columnCount) {
             $('.menuClear', dashboardElement).remove();
@@ -331,8 +333,8 @@
                     dashboardLayout.columns.pop();
                 }
                 // move widgets to other columns depending on columns height
-                $('[widgetId]', $('.col:last')).each(function (id, elem) {
-                    var cols = $('.col').slice(0, columnCount);
+                $('[widgetId]', $(layoutColumnSelector + ':last')).each(function (id, elem) {
+                    var cols = $(layoutColumnSelector).slice(0, columnCount);
                     var smallestColumn = $(cols[0]);
                     var smallestColumnHeight = null;
                     cols.each(function (colId, col) {
@@ -345,52 +347,56 @@
                     $(elem).appendTo(smallestColumn);
                 });
 
-                $('.col:last').remove();
+                $(layoutColumnSelector + ':last').remove();
             }
         }
 
+        var $dashboardElement = $(' > .col', dashboardElement);
+
+        if (!$dashboardElement.size()) {
+            return;
+        }
+
         switch (layout) {
             case '100':
-                $('.col', dashboardElement).removeClass()
-                    .addClass('col col-sm-12');
+                $dashboardElement.removeClass().addClass('col s12');
                 break;
             case '50-50':
-                $('.col', dashboardElement).removeClass()
-                    .addClass('col col-sm-6');
+                $dashboardElement.removeClass().addClass('col s12 m6');
                 break;
             case '67-33':
-                $('.col', dashboardElement)[0].className = 'col col-sm-8';
-                $('.col', dashboardElement)[1].className = 'col col-sm-4';
+                $dashboardElement[0].className = 'col s12 m8';
+                $dashboardElement[1].className = 'col s12 m4';
                 break;
             case '33-67':
-                $('.col', dashboardElement)[0].className = 'col col-sm-4';
-                $('.col', dashboardElement)[1].className = 'col col-sm-8';
+                $dashboardElement[0].className = 'col s12 m4';
+                $dashboardElement[1].className = 'col s12 m8';
                 break;
             case '33-33-33':
-                $('.col', dashboardElement)[0].className = 'col col-sm-4';
-                $('.col', dashboardElement)[1].className = 'col col-sm-4';
-                $('.col', dashboardElement)[2].className = 'col col-sm-4';
+                $dashboardElement[0].className = 'col s12 m4';
+                $dashboardElement[1].className = 'col s12 m4';
+                $dashboardElement[2].className = 'col s12 m4';
                 break;
             case '40-30-30':
-                $('.col', dashboardElement)[0].className = 'col col-sm-6';
-                $('.col', dashboardElement)[1].className = 'col col-sm-3';
-                $('.col', dashboardElement)[2].className = 'col col-sm-3';
+                $dashboardElement[0].className = 'col s12 m6';
+                $dashboardElement[1].className = 'col s12 m3';
+                $dashboardElement[2].className = 'col s12 m3';
                 break;
             case '30-40-30':
-                $('.col', dashboardElement)[0].className = 'col col-sm-3';
-                $('.col', dashboardElement)[1].className = 'col col-sm-6';
-                $('.col', dashboardElement)[2].className = 'col col-sm-3';
+                $dashboardElement[0].className = 'col s12 m3';
+                $dashboardElement[1].className = 'col s12 m6';
+                $dashboardElement[2].className = 'col s12 m3';
                 break;
             case '30-30-40':
-                $('.col', dashboardElement)[0].className = 'col col-sm-3';
-                $('.col', dashboardElement)[1].className = 'col col-sm-3';
-                $('.col', dashboardElement)[2].className = 'col col-sm-6';
+                $dashboardElement[0].className = 'col s12 m3';
+                $dashboardElement[1].className = 'col s12 m3';
+                $dashboardElement[2].className = 'col s12 m6';
                 break;
             case '25-25-25-25':
-                $('.col', dashboardElement)[0].className = 'col col-sm-3';
-                $('.col', dashboardElement)[1].className = 'col col-sm-3';
-                $('.col', dashboardElement)[2].className = 'col col-sm-3';
-                $('.col', dashboardElement)[3].className = 'col col-sm-3';
+                $dashboardElement[0].className = 'col s12 m3';
+                $dashboardElement[1].className = 'col s12 m3';
+                $dashboardElement[2].className = 'col s12 m3';
+                $dashboardElement[3].className = 'col s12 m3';
                 break;
         }
 
@@ -457,16 +463,16 @@
         }
 
         // do not try to add widget if given column number is to high
-        if (columnNumber > $('.col', dashboardElement).length) {
+        if (columnNumber > $('> .col', dashboardElement).length) {
             return;
         }
 
         var widgetContent = '<div class="sortable" widgetId="' + uniqueId + '"></div>';
 
         if (addWidgetOnTop) {
-            $('.col:nth-child(' + columnNumber + ')', dashboardElement).prepend(widgetContent);
+            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).prepend(widgetContent);
         } else {
-            $('.col:nth-child(' + columnNumber + ')', dashboardElement).append(widgetContent);
+            $('> .col:nth-child(' + columnNumber + ')', dashboardElement).append(widgetContent);
         }
 
         $('[widgetId="' + uniqueId + '"]', dashboardElement).dashboardWidget({
@@ -500,9 +506,9 @@
         }
 
         //launch 'sortable' property on every dashboard widgets
-        $( "div.col:data('ui-sortable')", dashboardElement ).sortable('destroy');
+        $( layoutColumnSelector + ":data('ui-sortable')", dashboardElement ).sortable('destroy');
 
-        $('div.col', dashboardElement)
+        $('> .col', dashboardElement)
                     .sortable({
                         items: 'div.sortable',
                         opacity: 0.6,
@@ -513,7 +519,7 @@
                         helper: 'clone',
                         start: onStart,
                         stop: onStop,
-                        connectWith: 'div.col'
+                        connectWith: layoutColumnSelector
                     });
     }
 
@@ -594,7 +600,8 @@
         var columns = [];
 
         var columnNumber = 0;
-        $('.col').each(function () {
+
+        $(layoutColumnSelector).each(function () {
             columns[columnNumber] = [];
             var items = $('[widgetId]', this);
             for (var j = 0; j < items.size(); j++) {
diff --git a/plugins/Dashboard/javascripts/dashboardWidget.js b/plugins/Dashboard/javascripts/dashboardWidget.js
index b3e78dcea3..995223e86f 100755
--- a/plugins/Dashboard/javascripts/dashboardWidget.js
+++ b/plugins/Dashboard/javascripts/dashboardWidget.js
@@ -122,6 +122,14 @@
 
                 $widgetContent.html(loadedContent);
 
+                /* move widget icons into datatable top actions
+                var $buttons = currentWidget.find('.buttons .button');
+                var $controls = currentWidget.find('.dataTableControls .dataTableAction').first();
+                if ($buttons.size() && $controls.size()) {
+                    $buttons.find('.button').addClass('dataTableAction');
+                    $buttons.insertBefore($controls);
+                }*/
+
                 if (currentWidget.parents('body').size()) {
                     // there might be race conditions, eg widget might be just refreshed while whole dashboard is also
                     // removed from DOM
@@ -303,8 +311,6 @@
 
             var width = Math.floor($('body').width() * 0.7);
 
-            var isFooterExpanded = $('.dataTableFeatures', this.element).hasClass('expanded');
-
             var self = this;
             this.element.dialog({
                 title: '',
@@ -315,9 +321,6 @@
                 autoOpen: true,
                 close: function (event, ui) {
                     self.isMaximised = false;
-                    if (!isFooterExpanded) {
-                        $('.dataTableFeatures', self.element).removeClass('expanded');
-                    }
                     $('body').off('.dashboardWidget');
                     $(this).dialog("destroy");
                     $('[id="' + self.uniqueId + '-placeholder"]').replaceWith(this);
@@ -328,7 +331,6 @@
                 }
             });
             this.element.find('div.piwik-graph').trigger('resizeGraph');
-            $('.dataTableFeatures', this.element).addClass('expanded');
 
             var currentWidget = this.element;
             $('body').on('click.dashboardWidget', function (ev) {
diff --git a/plugins/Dashboard/javascripts/widgetMenu.js b/plugins/Dashboard/javascripts/widgetMenu.js
index 7190f342a5..100674ce00 100644
--- a/plugins/Dashboard/javascripts/widgetMenu.js
+++ b/plugins/Dashboard/javascripts/widgetMenu.js
@@ -292,7 +292,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
                         $('.dashboard-manager .addWidget').outerHeight();
 
                     if (!$('#content.admin').length) {
-                        position += 10; // + padding defined in dashboard view
+                        position += 5; // + padding defined in dashboard view
                     }
 
                     $('.' + settings.widgetlistClass, widgetPreview).css('top', position);
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;
 }
diff --git a/plugins/Dashboard/templates/_dashboardSettings.twig b/plugins/Dashboard/templates/_dashboardSettings.twig
index db21def819..9dc4bd2458 100644
--- a/plugins/Dashboard/templates/_dashboardSettings.twig
+++ b/plugins/Dashboard/templates/_dashboardSettings.twig
@@ -1,22 +1,24 @@
 <a class="title" title="{{ 'Dashboard_ManageDashboard'|translate|e('html_attr') }}" tabindex="4"><span class="icon icon-arrow-bottom"></span>{{ 'Dashboard_Dashboard'|translate }} </a>
-<ul class="dropdown submenu">
-    <li>
-        <div class="addWidget">{{ 'Dashboard_AddAWidget'|translate }}</div>
-        <ul class="widgetpreview-categorylist"></ul>
-    </li>
-    {% if dashboardActions|length > 0 %}
-    <li>
-        <div class="manageDashboard">{{ 'Dashboard_ManageDashboard'|translate }}</div>
-        <ul>
-            {% for action, title in dashboardActions %}
-            <li data-action="{{ action }}">{{ title|translate }}</li>
-            {% endfor %}
-        </ul>
-    </li>
-    {% endif %}
-    {% for action, title in generalActions %}
-    <li data-action="{{ action }}">{{ title|translate }}</li>
-    {% endfor %}
-</ul>
-<ul class="widgetpreview-widgetlist"></ul>
-<div class="widgetpreview-preview"></div>
\ No newline at end of file
+<div class="dropdown positionInViewport">
+    <ul class="submenu">
+        <li>
+            <div class="addWidget">{{ 'Dashboard_AddAWidget'|translate }}</div>
+            <ul class="widgetpreview-categorylist"></ul>
+        </li>
+        {% if dashboardActions|length > 0 %}
+            <li>
+                <div class="manageDashboard">{{ 'Dashboard_ManageDashboard'|translate }}</div>
+                <ul>
+                    {% for action, title in dashboardActions %}
+                        <li data-action="{{ action }}">{{ title|translate }}</li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+        {% for action, title in generalActions %}
+            <li class="generalAction" data-action="{{ action }}">{{ title|translate }}</li>
+        {% endfor %}
+    </ul>
+    <ul class="widgetpreview-widgetlist"></ul>
+    <div class="widgetpreview-preview"></div>
+</div>
diff --git a/plugins/Dashboard/templates/embeddedIndex.twig b/plugins/Dashboard/templates/embeddedIndex.twig
index a7633ca193..77d6fe4bb3 100644
--- a/plugins/Dashboard/templates/embeddedIndex.twig
+++ b/plugins/Dashboard/templates/embeddedIndex.twig
@@ -2,7 +2,7 @@
     <div class="ui-confirm" id="confirm">
         <h2>{{ 'Dashboard_DeleteWidgetConfirm'|translate }}</h2>
         <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
+        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
     </div>
 
     <div class="ui-confirm" id="setAsDefaultWidgetsConfirm">
@@ -10,13 +10,13 @@
         {% set resetDashboard %}{{ 'Dashboard_ResetDashboard'|translate }}{% endset %}
         <div class="popoverSubMessage">{{ 'Dashboard_SetAsDefaultWidgetsConfirmHelp'|translate(resetDashboard) }}</div>
         <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
+        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
     </div>
 
     <div class="ui-confirm" id="resetDashboardConfirm">
         <h2>{{ 'Dashboard_ResetDashboardConfirm'|translate }}</h2>
         <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
+        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
     </div>
 
     <div class="ui-confirm" id="dashboardEmptyNotification">
@@ -36,15 +36,18 @@
                 {% endfor %}
             </div>
             {% endfor %}
+            <br class="clearfix" />
         </div>
         <input role="yes" type="button" value="{{ 'General_Save'|translate }}"/>
+        <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
     </div>
 
     <div class="ui-confirm" id="renameDashboardConfirm">
         <h2>{{ 'Dashboard_RenameDashboard'|translate }}</h2>
 
-        <div id="newDashboardNameInput"><label for="newDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label>
-            <input type="input" name="newDashboardName" id="newDashboardName" value=""/>
+        <div id="newDashboardNameInput">
+            <label for="newDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label>
+            <input type="text" name="newDashboardName" id="newDashboardName" value=""/>
         </div>
         <input role="yes" type="button" value="{{ 'General_Save'|translate }}"/>
         <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
@@ -55,11 +58,16 @@
             <h2>{{ 'Dashboard_CopyDashboardToUser'|translate }}</h2>
 
             <div class="inputs">
-                <label for="copyDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label>
-                <input type="input" name="copyDashboardName" id="copyDashboardName" value=""/>
-                <label for="copyDashboardUser">{{ 'General_Username'|translate }} </label>
-                <select name="copyDashboardUser" id="copyDashboardUser"></select>
+                <div class="row">
+                    <div class="col s12 m6"><label for="copyDashboardName">{{ 'Dashboard_DashboardName'|translate }} </label></div>
+                    <div class="col s12 m6"><input type="text" name="copyDashboardName" id="copyDashboardName" value=""/></div>
+                </div>
+                <div class="row">
+                    <div class="col s12 m6"><label for="copyDashboardUser">{{ 'General_Username'|translate }} </label></div>
+                    <div class="col s12 m6"><select class="browser-default" name="copyDashboardUser" id="copyDashboardUser"></select></div>
+                </div>
             </div>
+
             <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
             <input role="cancel" type="button" value="{{ 'General_Cancel'|translate }}"/>
         </div>
@@ -69,20 +77,21 @@
         <h2>{{ 'Dashboard_CreateNewDashboard'|translate }}</h2>
 
         <div id="createDashboardNameInput">
-            <label>{{ 'Dashboard_DashboardName'|translate }} <input type="input" name="newDashboardName" id="createDashboardName" value=""/></label><br/>
-
-            <label for="dashboard_type_default">
+            <p>
+                <label>{{ 'Dashboard_DashboardName'|translate }} </label>
+                <input type="text" name="newDashboardName" id="createDashboardName" value=""/>
+            </p>
+            <p>
                 <input type="radio" checked="checked" name="type" value="default" id="dashboard_type_default" />
-                {{ 'Dashboard_DefaultDashboard'|translate }}
-            </label>
-            <br/><br/>
-
-            <label for="dashboard_type_empty">
+                <label for="dashboard_type_default">{{ 'Dashboard_DefaultDashboard'|translate }}</label>
+            </p>
+            <p>
                 <input type="radio" name="type" value="empty" id="dashboard_type_empty" />
-                {{ 'Dashboard_EmptyDashboard'|translate }}
-            </label>
+                <label for="dashboard_type_empty">{{ 'Dashboard_EmptyDashboard'|translate }}</label>
+            </p>
+
         </div>
-        <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
+        <input role="yes" type="button" value="{{ 'General_Ok'|translate }}"/>
         <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
     </div>
 
@@ -91,10 +100,10 @@
 
         <div class="popoverSubMessage">{{ 'Dashboard_NotUndo'|translate(resetDashboard) }}</div>
         <input role="yes" type="button" value="{{ 'General_Yes'|translate }}"/>
-        <input role="no" type="button" value="{{ 'General_Cancel'|translate }}"/>
+        <input role="no" type="button" value="{{ 'General_No'|translate }}"/>
     </div>
 
     {% include "@Dashboard/_widgetFactoryTemplate.twig" %}
 
-    <div id="dashboardWidgetsArea"></div>
+    <div id="dashboardWidgetsArea" class="row"></div>
 </div>
\ No newline at end of file