Left menu design

12 files changed, 61 insertions, 73 deletions

diff --git a/plugins/Dashboard/Dashboard.php b/plugins/Dashboard/Dashboard.php
index 9ccbb822e4..35b94743a3 100644
--- a/plugins/Dashboard/Dashboard.php
+++ b/plugins/Dashboard/Dashboard.php
@@ -240,6 +240,7 @@ class Dashboard extends \Piwik\Plugin
         $translationKeys[] = 'Dashboard_LoadingWidget';
         $translationKeys[] = 'Dashboard_WidgetNotFound';
         $translationKeys[] = 'Dashboard_DashboardCopied';
+        $translationKeys[] = 'Dashboard_Dashboard';
         $translationKeys[] = 'General_Close';
         $translationKeys[] = 'General_Refresh';
     }
diff --git a/plugins/Dashboard/DashboardManagerControl.php b/plugins/Dashboard/DashboardManagerControl.php
index fb119e0083..df573903b3 100644
--- a/plugins/Dashboard/DashboardManagerControl.php
+++ b/plugins/Dashboard/DashboardManagerControl.php
@@ -20,7 +20,7 @@ class DashboardManagerControl extends DashboardSettingsControlBase
         parent::__construct();
 
         $this->jsClass = "DashboardManagerControl";
-        $this->cssIdentifier = "dashboard-manager";
+        $this->cssIdentifier = "dashboard-manager piwikSelector";
 
         $this->addDashboardActions();
         $this->addGeneralActions();
diff --git a/plugins/Dashboard/DashboardSettingsControlBase.php b/plugins/Dashboard/DashboardSettingsControlBase.php
index 7275224082..dadd780f18 100644
--- a/plugins/Dashboard/DashboardSettingsControlBase.php
+++ b/plugins/Dashboard/DashboardSettingsControlBase.php
@@ -23,7 +23,7 @@ abstract class DashboardSettingsControlBase extends UIControl
     {
         parent::__construct();
 
-        $this->cssClass = "piwikTopControl dashboardSettings";
+        $this->cssClass = "borderedControl piwikTopControl dashboardSettings";
         $this->dashboardActions = array();
         $this->generalActions = array();
     }
diff --git a/plugins/Dashboard/Menu.php b/plugins/Dashboard/Menu.php
index f90c117e10..250807eca5 100644
--- a/plugins/Dashboard/Menu.php
+++ b/plugins/Dashboard/Menu.php
@@ -23,20 +23,31 @@ class Menu extends \Piwik\Plugin\Menu
     {
         $menu->addItem('Dashboard_Dashboard', '', $this->urlForAction('embeddedIndex', array('idDashboard' => 1)), 5);
 
-        if (!Piwik::isUserIsAnonymous()) {
+        if (Piwik::isUserIsAnonymous()) {
+            $this->addDefaultDashboard($menu);
+        } else {
             $login = Piwik::getCurrentUserLogin();
 
             $dashboard  = new Dashboard();
             $dashboards = $dashboard->getAllDashboards($login);
 
-            $pos = 0;
-            foreach ($dashboards as $dashboard) {
-                $menu->addItem('Dashboard_Dashboard', $dashboard['name'], $this->urlForAction('embeddedIndex', array('idDashboard' => $dashboard['iddashboard'])), $pos);
-                $pos++;
+            if (empty($dashboards)) {
+                $this->addDefaultDashboard($menu);
+            } else {
+                $pos = 0;
+                foreach ($dashboards as $dashboard) {
+                    $menu->addItem('Dashboard_Dashboard', $dashboard['name'], $this->urlForAction('embeddedIndex', array('idDashboard' => $dashboard['iddashboard'])), $pos);
+                    $pos++;
+                }
             }
         }
     }
 
+    private function addDefaultDashboard(MenuReporting $menu)
+    {
+        $menu->addItem('Dashboard_Dashboard', 'Dashboard_Dashboard', $this->urlForAction('embeddedIndex', array('idDashboard' => 1)));
+    }
+
     public function configureTopMenu(MenuTop $menu)
     {
         $userPreferences = new UserPreferences();
diff --git a/plugins/Dashboard/javascripts/dashboard.js b/plugins/Dashboard/javascripts/dashboard.js
index 238aca5197..4253069723 100644
--- a/plugins/Dashboard/javascripts/dashboard.js
+++ b/plugins/Dashboard/javascripts/dashboard.js
@@ -11,9 +11,9 @@ function initDashboard(dashboardId, dashboardLayout) {
     initTopControls();
 
     // Embed dashboard
-    if (!$('#topBars').length) {
+    if (!$('#header .navbar-right').length) {
         $('.dashboardSettings').after($('#Dashboard'));
-        $('#Dashboard_embeddedIndex_' + dashboardId).addClass('sfHover');
+        $('#Dashboard_embeddedIndex_' + dashboardId).addClass('sfActive');
     }
 
     widgetsHelper.getAvailableWidgets();
@@ -168,7 +168,7 @@ function copyDashboardToUser() {
         // on menu item click, trigger action event on this
         var self = this;
         this.$element.on('click', 'ul.submenu li[data-action]', function (e) {
-            self.$element.toggleClass('visible');
+            self.$element.toggleClass('expanded');
 
             $(self).trigger($(this).attr('data-action'));
         });
@@ -176,7 +176,7 @@ function copyDashboardToUser() {
         // open manager on open
         this.$element.on('click', function (e) {
             if ($(e.target).is('.dashboardSettings,.dashboardSettings>span')) {
-                self.$element.toggleClass('visible');
+                self.$element.toggleClass('expanded');
 
                 // fix position
                 self.$element
@@ -193,7 +193,7 @@ function copyDashboardToUser() {
                 && !$(e.target).is('.dashboardSettings')
             ) {
                 self.$element.widgetPreview('reset');
-                self.$element.removeClass('visible');
+                self.$element.removeClass('expanded');
             }
         };
 
@@ -206,7 +206,7 @@ function copyDashboardToUser() {
             },
             onSelect: function (widgetUniqueId) {
                 var widget = widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId);
-                self.$element.removeClass('visible');
+                self.$element.removeClass('expanded');
 
                 self.widgetSelected(widget);
             },
@@ -287,7 +287,7 @@ function copyDashboardToUser() {
         },
 
         hide: function () {
-            this.$element.removeClass('visible');
+            this.$element.removeClass('expanded');
         },
 
         isWidgetAvailable: function (widgetUniqueId) {
diff --git a/plugins/Dashboard/javascripts/dashboardObject.js b/plugins/Dashboard/javascripts/dashboardObject.js
index 7808d22c11..4c45d5a888 100644
--- a/plugins/Dashboard/javascripts/dashboardObject.js
+++ b/plugins/Dashboard/javascripts/dashboardObject.js
@@ -477,24 +477,26 @@
                 return $(this).attr('id').indexOf('Dashboard_embeddedIndex') == 0;
             }).remove();
 
+            if (dashboards.length === 0) {
+                dashboards = [{iddashboard: 1, name: _pk_translate('Dashboard_Dashboard')}];
+            }
+
             if (dashboards.length > 1
                 || dashboardMenuListItems.length >= 1
             ) {
                 var items = [];
                 for (var i = 0; i < dashboards.length; i++) {
-                    var $link = $('<a/>').attr('data-idDashboard', dashboards[i].iddashboard).text(dashboards[i].name);
+                    var $link = $('<a/>').attr('data-idDashboard', dashboards[i].iddashboard).text(dashboards[i].name).addClass('item title');
                     var $li = $('<li/>').attr('id', 'Dashboard_embeddedIndex_' + dashboards[i].iddashboard)
                                         .addClass('dashboardMenuItem').append($link);
                     items.push($li);
 
                     if (dashboards[i].iddashboard == dashboardId) {
                         dashboardName = dashboards[i].name;
-                        $li.addClass('sfHover');
+                        $li.addClass('sfActive');
                     }
                 }
                 dashboardMenuList.prepend(items);
-            } else {
-                dashboardMenuList.hide();
             }
 
             dashboardMenuList.find('a[data-idDashboard]').click(function (e) {
@@ -505,13 +507,13 @@
                 if (typeof piwikMenu != 'undefined') {
                     piwikMenu.activateMenu('Dashboard', 'embeddedIndex');
                 }
-                $('#Dashboard ul li').removeClass('sfHover');
+                $('#Dashboard ul li').removeClass('sfActive');
                 if ($(dashboardElement).length) {
                     $(dashboardElement).dashboard('loadDashboard', idDashboard);
                 } else {
                     broadcast.propagateAjax('module=Dashboard&action=embeddedIndex&idDashboard=' + idDashboard);
                 }
-                $(this).closest('li').addClass('sfHover');
+                $(this).closest('li').addClass('sfActive');
             });
         };
 
diff --git a/plugins/Dashboard/javascripts/widgetMenu.js b/plugins/Dashboard/javascripts/widgetMenu.js
index 6d58415cb9..66e033cf8e 100644
--- a/plugins/Dashboard/javascripts/widgetMenu.js
+++ b/plugins/Dashboard/javascripts/widgetMenu.js
@@ -227,7 +227,12 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
 
                 if ($('.' + settings.categorylistClass + ' .' + settings.choosenClass, widgetPreview).length) {
                     var position = $('.' + settings.categorylistClass + ' .' + settings.choosenClass, widgetPreview).position().top -
-                        $('.' + settings.categorylistClass, widgetPreview).position().top;
+                        $('.' + settings.categorylistClass, widgetPreview).position().top +
+                        $('.dashboard-manager .addWidget').outerHeight();
+
+                    if (!$('#content.admin').length) {
+                        position += 10; // + padding defined in dashboard view
+                    }
 
                     $('.' + settings.widgetlistClass, widgetPreview).css('top', position);
                     $('.' + settings.widgetlistClass, widgetPreview).css('marginBottom', position);
@@ -281,6 +286,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
                 $('li:not(.' + settings.unavailableClass + ')', widgetList).on('click', function () {
                     if (!$('.widgetLoading', widgetPreview).length) {
                         settings.onSelect($(this).attr('uniqueid'));
+                        $(widgetPreview).closest('.dashboard-manager').removeClass('expanded');
                         if (settings.resetOnSelect) {
                             resetWidgetPreview(widgetPreview);
                         }
@@ -341,6 +347,7 @@ widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWid
                     settings.onPreviewLoaded(widgetUniqueId, widgetElement);
                     $('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).on('click', function () {
                         settings.onSelect(widgetUniqueId);
+                        $(widgetPreview).closest('.dashboard-manager').removeClass('expanded');
                         if (settings.resetOnSelect) {
                             resetWidgetPreview(widgetPreview);
                         }
diff --git a/plugins/Dashboard/stylesheets/dashboard.less b/plugins/Dashboard/stylesheets/dashboard.less
index fad10183e7..cd928a97da 100644
--- a/plugins/Dashboard/stylesheets/dashboard.less
+++ b/plugins/Dashboard/stylesheets/dashboard.less
@@ -1,40 +1,17 @@
 #dashboard {
-  margin: 0 -7px;
+  margin: 0 -6px;
 }
 
-#root>.top_controls {
-  margin-left:15px;
-  margin-right:15px;
-}
-.top_controls {
-  position: relative;
-  height: 32px;
-  clear: left;
-}
-
-@media all and (max-width: 749px) {
-  .top_controls {
-    height: auto;
-  }
-
-  .top_controls #periodString,
-  .top_controls .dashboardSettings,
-  .top_controls .segmentEditorPanel {
-    position: static !important;
-    margin: 0 0 10px;
-    float: none;
-  }
-}
 
 #dashboard {
   .col {
     min-height: 100px;
     // Customize Bootstrap gutter between columns
-    padding-right: 7px;
-    padding-left: 7px;
+    padding-right: 6px;
+    padding-left: 6px;
 
     >.sortable {
-      padding: 5px 0 10px 0;
+      padding: 5px 0 8px 0;
     }
   }
 }
@@ -152,10 +129,8 @@
   z-index: 120;
   background: #f7f7f7;
   border: 1px solid #e4e5e4;
-  padding: 5px 10px 6px 10px;
   border-radius: 4px;
   color: @theme-color-text-light;
-  font-size: 14px;
   cursor: pointer;
   overflow: hidden;
 }
@@ -165,9 +140,9 @@
   border-color: #a9a399;
 }
 
-.dashboardSettings.visible {
+.dashboardSettings.expanded {
   z-index: 1020; /* More than .jqplot-seriespicker-popover (1010) */
-  min-width: 700px;
+  min-width: 800px;
 }
 
 .dashboardSettings > span {
@@ -182,10 +157,9 @@
   float: left;
 }
 
-.dashboardSettings.visible ul.submenu {
+.dashboardSettings.expanded ul.submenu {
   display: block;
   list-style: square outside none;
-  margin-left: 15px;
 }
 
 .dashboardSettings > ul.submenu > li {
@@ -328,7 +302,6 @@ div.widgetpreview-preview {
   min-height: 0;
   height: auto;
   margin-right: 10px;
-  min-width: 180px;
 }
 
 .dashboardSettings .submenu {
@@ -372,8 +345,8 @@ div.widgetpreview-preview {
   display: none;
 }
 
-.dashboardSettings.visible .widgetpreview-widgetlist,
-.dashboardSettings.visible .widgetpreview-preview {
+.dashboardSettings.expanded .widgetpreview-widgetlist,
+.dashboardSettings.expanded .widgetpreview-preview {
   display: block;
 }
 
@@ -416,7 +389,7 @@ div.widgetpreview-preview {
 }
 
 #dashboardWidgetsArea {
-  margin-top: 5px;
+  margin-top: -5px;
 }
 
 @media all and (max-width: 749px) {
diff --git a/plugins/Dashboard/stylesheets/standalone.css b/plugins/Dashboard/stylesheets/standalone.css
index 5a2b0d90d9..292d3e63c0 100644
--- a/plugins/Dashboard/stylesheets/standalone.css
+++ b/plugins/Dashboard/stylesheets/standalone.css
@@ -45,17 +45,10 @@ body {
 }
 
 #Dashboard > ul > li:hover,
-#Dashboard > ul > li:hover a,
-#Dashboard > ul > li.sfHover,
-#Dashboard > ul > li.sfHover a {
+#Dashboard > ul > li:hover a {
     color: #e87500;
 }
 
-#Dashboard > ul > li.sfHover,
-#Dashboard > ul > li.sfHover a {
-    font-weight: bold;
-}
-
 .top_controls > #Dashboard,
 .top_controls > #periodString,
 .top_controls > .dashboardSettings {
diff --git a/plugins/Dashboard/stylesheets/widget.less b/plugins/Dashboard/stylesheets/widget.less
index a06564f033..558da41ab9 100644
--- a/plugins/Dashboard/stylesheets/widget.less
+++ b/plugins/Dashboard/stylesheets/widget.less
@@ -16,7 +16,7 @@
         font-weight: normal;
         font-size: 15px;
         margin: 0;
-        color: #0D0D0D;
+        color: @theme-color-text;
         text-shadow: none;
         padding: 15px 15px 10px 12px;
     }
diff --git a/plugins/Dashboard/templates/_dashboardSettings.twig b/plugins/Dashboard/templates/_dashboardSettings.twig
index dc05a6dae1..b82e913743 100644
--- a/plugins/Dashboard/templates/_dashboardSettings.twig
+++ b/plugins/Dashboard/templates/_dashboardSettings.twig
@@ -1,12 +1,12 @@
-<span>{{ 'Dashboard_Dashboard'|translate }}</span>
-<ul class="submenu">
+<a class="title" title="{{ 'Dashboard_ManageDashboard'|translate|e('html_attr') }}"><span class="icon icon-arrow-bottom"></span>{{ 'Dashboard_Dashboard'|translate }} </a>
+<ul class="dropdown submenu">
     <li>
-        <div class="addWidget">{{ 'Dashboard_AddAWidget'|translate }} &darr;</div>
+        <div class="addWidget">{{ 'Dashboard_AddAWidget'|translate }}</div>
         <ul class="widgetpreview-categorylist"></ul>
     </li>
     {% if dashboardActions|length > 0 %}
     <li>
-        <div class="manageDashboard">{{ 'Dashboard_ManageDashboard'|translate }} &darr;</div>
+        <div class="manageDashboard">{{ 'Dashboard_ManageDashboard'|translate }}</div>
         <ul>
             {% for action, title in dashboardActions %}
             <li data-action="{{ action }}">{{ title|translate }}</li>
diff --git a/plugins/Dashboard/templates/index.twig b/plugins/Dashboard/templates/index.twig
index 0a8831fe3f..ddaac2428c 100644
--- a/plugins/Dashboard/templates/index.twig
+++ b/plugins/Dashboard/templates/index.twig
@@ -3,11 +3,12 @@
     {% include "@CoreHome/_periodSelect.twig" %}
     {{ postEvent("Template.nextToCalendar") }}
     {% render dashboardSettingsControl %}
-    <div id="Dashboard" class="piwikTopControl">
+    <div id="Dashboard" class="piwikTopControl borderedControl piwikSelector">
         <ul>
             {% for dashboard in dashboards %}
                 <li class="dashboardMenuItem" id="Dashboard_embeddedIndex_{{ dashboard.iddashboard }}">
-                    <a href="javascript:$('#dashboardWidgetsArea').dashboard('loadDashboard', {{ dashboard.iddashboard }});">{{ dashboard.name|escape }}</a>
+                    <a href="javascript:$('#dashboardWidgetsArea').dashboard('loadDashboard', {{ dashboard.iddashboard }});"
+                       class="title">{{ dashboard.name|escape }}</a>
                 </li>
             {% endfor %}
         </ul>