Merge branch 'master' of github.com:piwik/piwik2.2.0-rc1

20 files changed, 288 insertions, 74 deletions

diff --git a/lang/en.json b/lang/en.json
index d4603ee3db..aad07031a3 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -138,6 +138,7 @@
         "RefreshPage": "Refresh the page",
         "Refresh": "Refresh",
         "Visitors": "Visitors",
+        "ExpandDataTableFooter": "Change the visualization or configure the report",
         "ExportThisReport": "Export this dataset in other formats",
         "ExportAsImage": "Export as Image",
         "Export": "Export",
@@ -1063,8 +1064,7 @@
         "TitleConsideredMoversAndShakersGrowth": "%1$s changed from %2$s to %3$s compared to %4$s. Based on this an evolution of each row of %5$s%% is expected.",
         "TitleConsideredMoversAndShakersChanges": "Considered movers only if they grew by more than %1$s%% visits or shrank by less than %2$s%% visits, new entries only if they increased by more than %3$s%% visits (%4$s), and disappeared rows if they shrank by less than %5$s%% visits (%6$s).",
         "DatePeriodCombinationNotSupported": "It is not possible to generate insights for this date and period combination.",
-        "ControlGrowthDescription": "Minimum growth of",
-        "ControlComparedToDescription": "compared to the",
+        "ControlComparedToDescription": "Growth compared to the",
         "ControlFilterByDescription": "Show all, only movers, only new or only disappeared",
         "DayComparedToPreviousDay": "previous day",
         "DayComparedToPreviousWeek": "same day in the previous week",
diff --git a/plugins/Actions/javascripts/actionsDataTable.js b/plugins/Actions/javascripts/actionsDataTable.js
index a8e5ff85dd..209c33093f 100644
--- a/plugins/Actions/javascripts/actionsDataTable.js
+++ b/plugins/Actions/javascripts/actionsDataTable.js
@@ -88,6 +88,7 @@
             self.handleRelatedReports(domElem);
             self.handleTriggeredEvents(domElem);
             self.handleCellTooltips(domElem);
+            self.handleExpandFooter(domElem);
             self.setFixWidthToMakeEllipsisWork(domElem);
         },
 
diff --git a/plugins/Annotations/javascripts/annotations.js b/plugins/Annotations/javascripts/annotations.js
index 85b70f070c..8ab218ef22 100755
--- a/plugins/Annotations/javascripts/annotations.js
+++ b/plugins/Annotations/javascripts/annotations.js
@@ -519,6 +519,12 @@
 
             loadingAnnotationManager = true;
 
+            var isDashboard = !!$('#dashboardWidgetsArea').length;
+
+            if (isDashboard) {
+                $('.loadingPiwikBelow', domElem).insertAfter($('.evolution-annotations', domElem));
+            }
+
             var loading = $('.loadingPiwikBelow', domElem).css({display: 'block'});
 
             // the annotations for this report have not been retrieved yet, so do an ajax request
@@ -539,7 +545,12 @@
                 loading.css('visibility', 'hidden');
 
                 // add & show annotation manager
-                $('.dataTableFeatures', domElem).append(manager);
+                if (isDashboard) {
+                    manager.insertAfter($('.evolution-annotations', domElem));
+                } else {
+                    $('.dataTableFeatures', domElem).append(manager);
+                }
+
                 manager.slideDown('slow', function () {
                     loading.hide().css('visibility', 'visible');
                     loadingAnnotationManager = false;
diff --git a/plugins/Annotations/stylesheets/annotations.less b/plugins/Annotations/stylesheets/annotations.less
index 3a01ca398d..c848328dab 100755
--- a/plugins/Annotations/stylesheets/annotations.less
+++ b/plugins/Annotations/stylesheets/annotations.less
@@ -12,6 +12,20 @@
     top:10px;
 }
 
+#dashboard, .ui-dialog {
+  .evolution-annotations  {
+    margin-top: -5px;
+    margin-bottom: -5px;
+  }
+  .evolution-annotations > span {
+    top: -1px;
+    position: absolute;
+  }
+  .annotation-manager {
+    margin-top: 15px;
+  }
+}
+
 .annotation-manager {
     text-align: left;
     margin-top: -18px;
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 869965a12a..7fb018cc1d 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -122,6 +122,14 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         this.param.columns = columnName;
     },
 
+    isWithinDialog: function (domElem) {
+        return !!$(domElem).parents('.ui-dialog').length;
+    },
+
+    isDashboard: function () {
+        return !!$('#dashboardWidgetsArea').length;
+    },
+
     //Reset DataTable filters (used before a reload or view change)
     resetAllFilters: function () {
         var self = this;
@@ -285,10 +293,13 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         self.handleRelatedReports(domElem);
         self.handleTriggeredEvents(domElem);
         self.handleColumnHighlighting(domElem);
+        self.handleExpandFooter(domElem);
         self.setFixWidthToMakeEllipsisWork(domElem);
     },
 
     setFixWidthToMakeEllipsisWork: function (domElem) {
+        var self = this;
+
         function getTableWidth(domElem) {
             var totalWidth      = $(domElem).width();
             var totalWidthTable = $('table.dataTable', domElem).width(); // fixes tables in dbstats, referrers, ...
@@ -322,11 +333,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             }
 
             var isWidgetized  = -1 !== location.search.indexOf('module=Widgetize');
-            var isInDashboard = !!domElem.parents('#dashboardWidgetsArea').length;
 
             if (labelWidth > maxLabelWidth
                 && !isWidgetized
-                && !isInDashboard) {
+                && !self.isDashboard()) {
                 labelWidth = maxLabelWidth; // prevent for instance table in Actions-Pages is not too wide
             }
 
@@ -386,7 +396,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             $('td.label', domElem).width(labelColumnWidth);
         }
 
-        var self = this;
         $('td span.label', domElem).each(function () { self.tooltip($(this)); });
     },
 
@@ -602,6 +611,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 }
             }
         );
+
+        if (this.isEmpty && !currentPattern) {
+            $('.dataTableSearchPattern', domElem).hide();
+        }
     },
 
     //behaviour for '< prev' 'next >' links and page count
@@ -623,6 +636,8 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 if (totalRows != 0) {
                     var str = sprintf(_pk_translate('CoreHome_PageOf'), offset + '-' + offsetEndDisp, totalRows);
                     $(this).text(str);
+                } else {
+                    $(this).hide();
                 }
             }
         );
@@ -675,6 +690,9 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             && $('.annotationView', domElem).length > 0) {
             // get dates w/ annotations across evolution period (have to do it through AJAX since we
             // determine placement using the elements created by jqplot)
+
+            $('.dataTableFeatures', domElem).addClass('hasEvolution');
+
             piwik.annotations.api.getEvolutionIcons(
                 self.param.idSite,
                 self.param.date,
@@ -687,16 +705,22 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                         annotationAxisHeight = 30 // css height + padding + margin
                         ;
 
+                    var annotationsCss = {left: 6}; // padding-left of .jqplot-graph element (in _dataTableViz_jqplotGraph.tpl)
+                    if (!self.isDashboard() && !self.isWithinDialog(domElem)) {
+                        annotationsCss['top'] = -datatableFeatures.height() - annotationAxisHeight + noteSize / 2;
+                    }
+
                     // set position of evolution annotation icons
-                    annotations.css({
-                        top: -datatableFeatures.height() - annotationAxisHeight + noteSize / 2,
-                        left: 6 // padding-left of .jqplot-graph element (in _dataTableViz_jqplotGraph.tpl)
-                    });
+                    annotations.css(annotationsCss);
 
                     piwik.annotations.placeEvolutionIcons(annotations, domElem);
 
                     // add new section under axis
-                    datatableFeatures.append(annotations);
+                    if (self.isDashboard() || self.isWithinDialog(domElem)) {
+                        annotations.insertAfter($('.datatableRelatedReports', domElem));
+                    } else {
+                        datatableFeatures.append(annotations);
+                    }
 
                     // reposition annotation icons every time the graph is resized
                     $('.piwik-graph', domElem).on('resizeGraph', function () {
@@ -1251,6 +1275,54 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         $("tr:even td", domElem).slice(1).addClass('column columneven');
     },
 
+    handleExpandFooter: function (domElem) {
+        if (!this.isDashboard() && !this.isWithinDialog(domElem)) {
+            return;
+        }
+
+        var footerIcons = $('.dataTableFooterIcons', domElem);
+
+        if (!footerIcons.length) {
+            return;
+        }
+
+        var self = this;
+        function toggleFooter()
+        {
+            var icons = $('.dataTableFooterIcons', domElem);
+            $('.dataTableFeatures', domElem).toggleClass('expanded');
+
+            self.notifyWidgetParametersChange(domElem, {
+                isFooterExpandedInDashboard: icons.is(':visible')
+            });
+        }
+
+        var moveNode = $('.datatableFooterMessage', domElem);
+        if (!moveNode.length) {
+            moveNode = $('.datatableRelatedReports', domElem);
+        }
+
+        footerIcons.after(moveNode);
+
+        $('.expandDataTableFooterDrawer', domElem).after(footerIcons);
+
+        var controls = $('.controls', domElem);
+        if (controls.length) {
+            $('.foldDataTableFooterDrawer', domElem).after(controls);
+        }
+
+        var loadingPiwikBelow = $('.loadingPiwikBelow', domElem);
+        if (loadingPiwikBelow.length) {
+            loadingPiwikBelow.insertBefore(moveNode);
+        }
+
+        if (this.param.isFooterExpandedInDashboard) {
+            toggleFooter();
+        }
+
+        $('.foldDataTableFooterDrawer, .expandDataTableFooterDrawer', domElem).on('click', toggleFooter);
+    },
+
     handleColumnHighlighting: function (domElem) {
 
         var maxWidth = {};
@@ -1370,7 +1442,7 @@ $.extend(DataTable.prototype, UIControl.prototype, {
 
     // tooltip for column documentation
     handleColumnDocumentation: function (domElem) {
-        if ($('#dashboard').size() > 0) {
+        if (this.isDashboard()) {
             // don't display column documentation in dashboard
             // it causes trouble in full screen view
             return;
@@ -1433,7 +1505,14 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             thisReport = $('.datatableRelatedReports span:hidden', domElem)[0];
 
         hideShowRelatedReports(thisReport);
-        $('.datatableRelatedReports span', domElem).each(function () {
+
+        var relatedReports = $('.datatableRelatedReports span', domElem);
+
+        if (!relatedReports.length) {
+            $('.datatableRelatedReports', domElem).hide();
+        }
+
+        relatedReports.each(function () {
             var clicked = this;
             $(this).unbind('click').click(function (e) {
                 var url = $(this).attr('href');
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 77f75b54cc..6cdcea04ca 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -81,7 +81,6 @@ table.dataTable td {
   padding: 5px 5px 5px 12px;
   background: #fff;
   border-left: 1px solid #e7e7e7;
-  border-bottom: 1px solid #e7e7e7;
 }
 
 table.dataTable td,
@@ -122,14 +121,6 @@ table.dataTable td.columnodd {
   background: #f6f5f3;
 }
 
-table.dataTable td.labeleven {
-  background: #F9FAFA url(plugins/CoreHome/images/bullet2.gif) no-repeat;
-}
-
-table.dataTable td.labelodd {
-  background: #fff url(plugins/CoreHome/images/bullet1.gif) no-repeat;
-}
-
 .dataTable tr.highlight td {
   background-color: #ECF9DD;
   font-weight: bold;
@@ -250,6 +241,11 @@ table.dataTable img {
   color: #888;
   font-size: 11px;
   padding-bottom: 5px;
+  margin-top: 6px;
+}
+
+#dashboard .datatableRelatedReports {
+  margin-top: 0px;
 }
 
 .datatableRelatedReports span {
@@ -285,8 +281,111 @@ table.dataTable img {
   text-align: center;
 }
 
-.dataTableFooterIcons {
+.dataTableFooterIcons div {
+  padding-bottom: 4px;
+}
+
+#dashboard .dataTableFeatures.expanded {
+  .dataTableFooterIcons {
+    display: block;
+  }
+
+  .expandDataTableFooterDrawer {
+    display: none;
+  }
+}
+
+.dataTableFooterIcons .foldDataTableFooterDrawer,
+.dataTableFeatures .expandDataTableFooterDrawer {
+  display: none;
+  cursor: pointer;
+}
+
+#dashboard .dataTableFooterIcons .foldDataTableFooterDrawer {
+  margin-top: 0px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #D9D9D9;
+  -webkit-border-bottom-right-radius: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -moz-border-radius-bottomright: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  line-height: 0px;
+  height: 4px;
+  width: 70px;
+
+  img {
+    margin-top: -1px;
+    margin-bottom: 0px;
+    line-height: 0px;
+  }
+}
+
+#dashboard .dataTableFeatures.hasEvolution .dataTableFooterIcons {
+  margin-top: 17px;
+}
+
+#dashboard .dataTableFeatures.hasEvolution .expandDataTableFooterDrawer {
+  margin-top: 20px;
+}
+
+#dashboard .dataTableFeatures .expandDataTableFooterDrawer {
+  margin-top: 5px;
+  margin-bottom: 0px;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #D9D9D9;
+  height: 7px;
+  width: 70px;
+  -webkit-border-top-left-radius: 10px;
+  -webkit-border-top-right-radius: 10px;
+  -moz-border-radius-topleft: 10px;
+  -moz-border-radius-topright: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  line-height: 0px;
+
+  img {
+    margin-bottom: -2px;
+    line-height: 0px;
+  }
+}
+
+@-moz-document url-prefix() {
+
+  #dashboard .dataTableFeatures .expandDataTableFooterDrawer {
+    line-height: 1px;
+
+    img {
+      margin-bottom: -1px;
+      line-height: 1px;
+    }
+  }
+}
+
+#dashboard .dataTableFooterIcons {
+  height: auto;
+}
+
+#dashboard .dataTableFooterIcons .foldDataTableFooterDrawer,
+#dashboard .dataTableFeatures .expandDataTableFooterDrawer {
   display: block;
+}
+
+#dashboard .dataTableFooterIcons {
+  display: none;
+  margin-top: 5px;
+
+  .controls {
+    padding: 15px 0px;
+    text-align: left;
+    color: #333;
+  }
+}
+
+.dataTableFooterIcons {
   height: 20px;
   white-space: nowrap;
   font-size: 10px;
diff --git a/plugins/CoreHome/templates/_dataTableFooter.twig b/plugins/CoreHome/templates/_dataTableFooter.twig
index d891a62c30..f48e3f5d25 100644
--- a/plugins/CoreHome/templates/_dataTableFooter.twig
+++ b/plugins/CoreHome/templates/_dataTableFooter.twig
@@ -23,16 +23,19 @@
     </div>
 
     <span class="loadingPiwik" style="display:none;"><img src="plugins/Zeitgeist/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}</span>
+
     {% if properties.show_footer_icons %}
         <div class="dataTableFooterIcons">
+            <div class="foldDataTableFooterDrawer" title="{{ 'General_Close'|translate|e('html_attr') }}"
+                    ><img width="7" height="4" src="plugins/Morpheus/images/sortdesc_dark.png"></div>
             <div class="dataTableFooterWrap">
                 {% for footerIconGroup in footerIcons %}
-                <div class="tableIconsGroup">
+                    <div class="tableIconsGroup">
                     <span class="{{ footerIconGroup.class }}">
                     {% for footerIcon in footerIconGroup.buttons %}
                         <span>
                             {% if properties.show_active_view_icon and clientSideParameters.viewDataTable == footerIcon.id %}
-                            <img src="plugins/Zeitgeist/images/data_table_footer_active_item.png" class="dataTableFooterActiveItem"/>
+                                <img src="plugins/Zeitgeist/images/data_table_footer_active_item.png" class="dataTableFooterActiveItem"/>
                             {% endif %}
                             <a class="tableIcon {% if clientSideParameters.viewDataTable == footerIcon.id %}activeIcon{% endif %}" data-footer-icon-id="{{ footerIcon.id }}">
                                 <img width="16" height="16" title="{{ footerIcon.title }}" src="{{ footerIcon.icon }}"/>
@@ -41,11 +44,11 @@
                         </span>
                     {% endfor %}
                     </span>
-                </div>
+                    </div>
                 {% endfor %}
                 <div class="tableIconsGroup">
                     {% if footerIcons is empty %}
-                    <img src="plugins/Zeitgeist/images/data_table_footer_active_item.png" class="dataTableFooterActiveItem"/>
+                        <img src="plugins/Zeitgeist/images/data_table_footer_active_item.png" class="dataTableFooterActiveItem"/>
                     {% endif %}
                     <span class="exportToFormatIcons">
                         <a class="tableIcon" var="export">
@@ -59,12 +62,12 @@
 					<a target="_blank" methodToCall="{{ properties.apiMethodToRequestDataTable }}" format="XML" filter_limit="{{ properties.export_limit }}">XML</a> |
 					<a target="_blank" methodToCall="{{ properties.apiMethodToRequestDataTable }}" format="JSON" filter_limit="{{ properties.export_limit }}">Json</a> |
 					<a target="_blank" methodToCall="{{ properties.apiMethodToRequestDataTable }}" format="PHP" filter_limit="{{ properties.export_limit }}">Php</a>
-                    {% if properties.show_export_as_rss_feed %}
-                        |
-                        <a target="_blank" methodToCall="{{ properties.apiMethodToRequestDataTable }}" format="RSS" filter_limit="{{ properties.export_limit }}" date="last10">
-                            <img border="0" src="plugins/Zeitgeist/images/feed.png"/>
-                        </a>
-                    {% endif %}
+                        {% if properties.show_export_as_rss_feed %}
+                            |
+                            <a target="_blank" methodToCall="{{ properties.apiMethodToRequestDataTable }}" format="RSS" filter_limit="{{ properties.export_limit }}" date="last10">
+                                <img border="0" src="plugins/Zeitgeist/images/feed.png"/>
+                            </a>
+                        {% endif %}
 				    </span>
                     {% if properties.show_export_as_image_icon %}
                         <span id="dataTableFooterExportAsImageIcon">
@@ -83,9 +86,9 @@
                 <ul>
                     {% if properties.show_flatten_table %}
                         {% if clientSideParameters.flat is defined and clientSideParameters.flat == 1 %}
-                        <li>
-                            <div class="configItem dataTableIncludeAggregateRows"></div>
-                        </li>
+                            <li>
+                                <div class="configItem dataTableIncludeAggregateRows"></div>
+                            </li>
                         {% endif %}
                         <li>
                             <div class="configItem dataTableFlatten"></div>
@@ -107,6 +110,8 @@
                 </div>
             {% endif %}
         </div>
+        <div class="expandDataTableFooterDrawer" title="{{ 'General_ExpandDataTableFooter'|translate|e('html_attr') }}"
+                ><img width="7" height="4" src="plugins/Morpheus/images/sortasc_dark.png" style=""></div>
     {% endif %}
 
     <div class="datatableRelatedReports">
diff --git a/plugins/Insights/InsightReport.php b/plugins/Insights/InsightReport.php
index e7937a4f55..5310ff1185 100644
--- a/plugins/Insights/InsightReport.php
+++ b/plugins/Insights/InsightReport.php
@@ -218,9 +218,14 @@ class InsightReport
             )
         );
 
+        $metricName = $metric;
+        if (!empty($reportMetadata['metrics'][$metric])) {
+            $metricName = $reportMetadata['metrics'][$metric];
+        }
+
         $dataTable->setMetadataValues(array(
             'reportName' => $reportMetadata['name'],
-            'metricName' => $reportMetadata['metrics'][$metric],
+            'metricName' => $metricName,
             'date' => $date,
             'lastDate' => $lastDate,
             'period' => $period,
diff --git a/plugins/Insights/Visualizations/Insight/RequestConfig.php b/plugins/Insights/Visualizations/Insight/RequestConfig.php
index 43aea4b766..ab771a51de 100644
--- a/plugins/Insights/Visualizations/Insight/RequestConfig.php
+++ b/plugins/Insights/Visualizations/Insight/RequestConfig.php
@@ -16,7 +16,7 @@ use Piwik\ViewDataTable\RequestConfig as VisualizationRequestConfig;
 class RequestConfig extends VisualizationRequestConfig
 {
     public $min_impact_percent = '0.1';
-    public $min_growth_percent = 20;
+    public $min_growth_percent = 1;
     public $compared_to_x_periods_ago = 1;
     public $order_by = InsightReport::ORDER_BY_ABSOLUTE;
     public $filter_by = '';
diff --git a/plugins/Insights/javascripts/insightsDataTable.js b/plugins/Insights/javascripts/insightsDataTable.js
index 2ebfe04a72..7c2ca331a2 100644
--- a/plugins/Insights/javascripts/insightsDataTable.js
+++ b/plugins/Insights/javascripts/insightsDataTable.js
@@ -45,7 +45,6 @@
         handleRowActions: function () {},
 
         _init: function (domElem) {
-            this.initMinGrowthPercentage(domElem);
             this.initShowIncreaseOrDecrease(domElem);
             this.initOrderBy(domElem);
             this.initComparedToXPeriodsAgo(domElem);
@@ -91,13 +90,6 @@
             });
         },
 
-        initMinGrowthPercentage: function (domElem) {
-            var self = this;
-            $('[name=minGrowthPercent]', domElem).bind('change', function (event) {
-                self._changeParameterAndReload({min_growth_percent: getValueFromEvent(event)});
-            });
-        },
-
         initOrderBy: function (domElem) {
             var self = this;
             $('[name=orderBy]', domElem).bind('change', function (event) {
diff --git a/plugins/Insights/stylesheets/insightVisualization.less b/plugins/Insights/stylesheets/insightVisualization.less
index fb79bbe8be..0d09f17944 100644
--- a/plugins/Insights/stylesheets/insightVisualization.less
+++ b/plugins/Insights/stylesheets/insightVisualization.less
@@ -4,6 +4,7 @@
   }
 }
 
+.dataTableVizInsight .dataTableFeatures,
 .insightsDataTable {
 
   .controls {
diff --git a/plugins/Insights/templates/insightControls.twig b/plugins/Insights/templates/insightControls.twig
index 3efd62acb2..e5fe930c20 100644
--- a/plugins/Insights/templates/insightControls.twig
+++ b/plugins/Insights/templates/insightControls.twig
@@ -1,19 +1,5 @@
 <div class="controls">
 
-    {{ 'Insights_ControlGrowthDescription'|translate }}
-
-    <select size="1" name="minGrowthPercent">
-        {% for i in range(0, 1, 1) %}
-            <option {% if i == properties.min_growth_percent %}selected{% endif %} value="{{ i }}">{{ i }}%</option>
-        {% endfor %}
-        {% for i in range(5, 100, 5) %}
-            <option {% if i == properties.min_growth_percent %}selected{% endif %} value="{{ i }}">{{ i }}%</option>
-        {% endfor %}
-        {% for i in range(200, 1000, 100) %}
-            <option {% if i == properties.min_growth_percent %}selected{% endif %} value="{{ i }}">{{ i }}%</option>
-        {% endfor %}
-    </select>
-
     {% if period != 'range' %}
 
         {{ 'Insights_ControlComparedToDescription'|translate }}
diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
index 1df3a58399..6dc6c43a5b 100644
--- a/plugins/Live/stylesheets/live.less
+++ b/plugins/Live/stylesheets/live.less
@@ -173,6 +173,7 @@ ol.visitorLog p {
 
 .dataTableVizVisitorLog table.dataTable .column {
   white-space: normal;
+  padding: 12px 5px;
 }
 .dataTableVizVisitorLog table.dataTable .label {
   white-space: nowrap;
diff --git a/plugins/Morpheus/images/sortasc_dark.png b/plugins/Morpheus/images/sortasc_dark.png
new file mode 100644
index 0000000000..31fbd9b654
--- /dev/null
+++ b/plugins/Morpheus/images/sortasc_dark.png
diff --git a/plugins/Morpheus/images/sortdesc_dark.png b/plugins/Morpheus/images/sortdesc_dark.png
new file mode 100644
index 0000000000..bc0b68e29b
--- /dev/null
+++ b/plugins/Morpheus/images/sortdesc_dark.png
diff --git a/plugins/Morpheus/stylesheets/colors.less b/plugins/Morpheus/stylesheets/colors.less
index f32fea52c6..b5d973fa0f 100644
--- a/plugins/Morpheus/stylesheets/colors.less
+++ b/plugins/Morpheus/stylesheets/colors.less
@@ -19,6 +19,7 @@
 @silver-60: lighten(@black, 60%);
 @silver-70: lighten(@black, 70%);
 @silver-80: lighten(@black, 80%);
+@silver-85: lighten(@black, 85%);
 @silver-90: lighten(@black, 90%);
 @silver-95: lighten(@black, 95%);
 
diff --git a/plugins/Morpheus/stylesheets/theme.less b/plugins/Morpheus/stylesheets/theme.less
index 2eb7f8c82c..e763398e30 100644
--- a/plugins/Morpheus/stylesheets/theme.less
+++ b/plugins/Morpheus/stylesheets/theme.less
@@ -395,7 +395,7 @@ table.dataTable {
                 .font-default(10px, 12px);
                 padding-top: 12px;
                 padding-bottom: 12px;
-                border-bottom: 1px solid @silver-80;
+                border-bottom: 1px solid @silver-85;
                 &.columnSorted {
                     background:  @silver-95 !important;
                     .sortIcon {
@@ -407,7 +407,7 @@ table.dataTable {
     }
     tr {
         td {
-            border-color: @silver-80 !important;
+            border-color: @silver-85 !important;
             color: @brand-black;
             background: @silver-95;
 
@@ -493,8 +493,12 @@ table.dataTable .dataTableRowActions {
 }
 
 .dataTableFooterIcons {
-    padding: 6px 8px;
-    border-top: 1px solid @silver-80;
+  padding: 6px 8px;
+  border-top: 1px solid @silver-80;
+}
+
+#dashboard .dataTableFooterIcons {
+    padding: 0px 8px 6px;
 }
 
 div.sparkline {
@@ -900,13 +904,13 @@ table#editSites {
 
 #multisites table.dataTable {
     thead tr th {
-        background: @silver-95 !important;
+        background: @theme-color-background-base;
     }
     td {
         background: white;
     }
     tr:hover td {
-        background: #f8f8f8;
+        background: #f2f2f2;
     }
     tfoot tr:hover td {
         background: white;
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.html b/plugins/MultiSites/angularjs/dashboard/dashboard.html
index 6c1074b336..dd7149d360 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.html
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.html
@@ -12,25 +12,25 @@
     <table id="mt" class="dataTable" cellspacing="0">
         <thead>
         <tr>
-            <th id="names" class="label" ng-click="sortBy('label')">
+            <th id="names" class="label" ng-click="sortBy('label')" ng-class="{columnSorted: 'label' == predicate}">
                 <span class="heading">{{ 'General_Website'|translate }}</span>
                 <span ng-class="{multisites_asc: !reverse && 'label' == predicate, multisites_desc: reverse && 'label' == predicate}" class="arrow"></span>
             </th>
-            <th id="visits" class="multisites-column" ng-click="sortBy('nb_visits')">
+            <th id="visits" class="multisites-column" ng-click="sortBy('nb_visits')" ng-class="{columnSorted: 'nb_visits' == predicate}">
                 <span class="heading">{{ 'General_ColumnNbVisits'|translate }}</span>
                 <span ng-class="{multisites_asc: !reverse && 'nb_visits' == predicate, multisites_desc: reverse && 'nb_visits' == predicate}" class="arrow"></span>
             </th>
-            <th id="pageviews" class="multisites-column" ng-click="sortBy('nb_pageviews')">
+            <th id="pageviews" class="multisites-column" ng-click="sortBy('nb_pageviews')" ng-class="{columnSorted: 'nb_pageviews' == predicate}">
                 <span class="heading">{{ 'General_ColumnPageviews'|translate }}</span>
                 <span ng-class="{multisites_asc: !reverse && 'nb_pageviews' == predicate, multisites_desc: reverse && 'nb_pageviews' == predicate}" class="arrow"></span>
             </th>
 
-            <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="sortBy('revenue')">
+            <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="sortBy('revenue')" ng-class="{columnSorted: 'revenue' == predicate}">
                 <span class="heading">{{ 'General_ColumnRevenue'|translate }}</span>
                 <span ng-class="{multisites_asc: !reverse && 'revenue' == predicate, multisites_desc: reverse && 'revenue' == predicate}" class="arrow"></span>
             </th>
 
-            <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}">
+            <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}" ng-class="{columnSorted: evolutionSelector == predicate}">
                 <span class="arrow" ng-class="{multisites_asc: !reverse && evolutionSelector == predicate, multisites_desc: reverse && evolutionSelector == predicate}"></span>
                 <span class="evolution"
                       ng-click="sortBy(evolutionSelector)"> {{ 'MultiSites_Evolution'|translate }}</span>
@@ -69,6 +69,7 @@
                 date-sparkline="dateSparkline"
                 show-sparklines="showSparklines"
                 metric="predicate"
+                ng-class-odd="'columnodd'"
                 display-revenue-column="displayRevenueColumn"
                 ng-repeat="website in model.sites | orderBy:predicate:reverse | multiSitesGroupFilter:model.getCurrentPagingOffsetStart():model.pageSize">
             </tr>
@@ -84,6 +85,11 @@
             </td>
         </tr>
 
+        <tr ng-if="!hasSuperUserAccess">
+            <td colspan="8">
+                <br/>
+            </td>
+        </tr>
         <tr>
             <td colspan="8" class="site_search">
                 <input type="text"
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.less b/plugins/MultiSites/angularjs/dashboard/dashboard.less
index 09388bd8e3..0638e1315a 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.less
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.less
@@ -80,6 +80,15 @@
     cursor: pointer;
     margin-right: 0px;
   }
+
+  tr.columnodd:hover td, tr.columnodd td {
+    background: #F2F2F2 !important;
+  }
+
+  tr:hover td {
+    background: #FFF !important;
+  }
+
   tr.group {
     font-weight: bold;
     height: 30px;
diff --git a/plugins/MultiSites/angularjs/site/site.html b/plugins/MultiSites/angularjs/site/site.html
index a20c6bb34e..2c6ab30c3d 100644
--- a/plugins/MultiSites/angularjs/site/site.html
+++ b/plugins/MultiSites/angularjs/site/site.html
@@ -22,9 +22,9 @@
 
     <td ng-if="period != 'range'" style="width:170px;">
         <div class="visits" ng-if="!website.isGroup">
-            <span ng-show="parseInt(website[evolutionMetric]) > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <strong style="color: green;">{{ website[evolutionMetric] }}&nbsp;</strong></span>
-            <span ng-show="parseInt(website[evolutionMetric]) == 0"><img src="plugins/MultiSites/images/stop.png" alt="" /> <strong>{{ website[evolutionMetric] }}</strong></span>
-            <span ng-show="parseInt(website[evolutionMetric]) < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <strong style="color: red;">{{ website[evolutionMetric] }}&nbsp;</strong></span>
+            <span ng-show="parseInt(website[evolutionMetric]) > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <span style="color: green;">{{ website[evolutionMetric] }}&nbsp;</span></span>
+            <span ng-show="parseInt(website[evolutionMetric]) == 0"><img src="plugins/MultiSites/images/stop.png" alt="" /> <span>{{ website[evolutionMetric] }}</span></span>
+            <span ng-show="parseInt(website[evolutionMetric]) < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <span style="color: red;">{{ website[evolutionMetric] }}&nbsp;</span></span>
         </div>
     </td>