refs #5977 group goals in a menu if there are more than 3 goals. I reused an existing menuDropDown component that was already used for Language and Usermenu. I removed the round border there as all our other components to not have round corners. Also had to add some z-index because Segment and Date picker define a z-index. So to make sure the components are correct visible I had to add a z-index to the submenu and therefore to the top menu. I hope this does not introduce any side effects. Tested with leftMenu and with ZenMode...

12 files changed, 237 insertions, 19 deletions

diff --git a/core/Menu/Group.php b/core/Menu/Group.php
new file mode 100644
index 0000000000..17e7c9bc5c
--- /dev/null
+++ b/core/Menu/Group.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ *
+ */
+namespace Piwik\Menu;
+
+/**
+ * @ignore
+ */
+class Group
+{
+    private $items;
+
+    public function add($subTitleMenu, $url, $tooltip = false)
+    {
+        $this->items[] = array(
+            'name' => $subTitleMenu,
+            'url'  => $url,
+            'tooltip' => $tooltip
+        );;
+    }
+
+    public function getItems()
+    {
+        return $this->items;
+    }
+}
diff --git a/core/Menu/MenuReporting.php b/core/Menu/MenuReporting.php
index c2d1801a8f..28fddd8313 100644
--- a/core/Menu/MenuReporting.php
+++ b/core/Menu/MenuReporting.php
@@ -63,6 +63,21 @@ class MenuReporting extends MenuAbstract
     }
 
     /**
+     * Should not be a public API yet. We probably have to change the API once we have another use case.
+     * @ignore
+     */
+    public function addGroup($menuName, $defaultTitle, Group $group, $order = 50, $tooltip = false)
+    {
+        $this->menuEntries[] = array(
+            $menuName,
+            $defaultTitle,
+            $group,
+            $order,
+            $tooltip
+        );
+    }
+
+    /**
      * See {@link add()}. Adds a new menu item to the referrers section of the reporting menu.
      * @param string $menuName
      * @param array $url
diff --git a/lang/en.json b/lang/en.json
index a6d14e5ce2..abd9d25e92 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -817,6 +817,7 @@
         "Save": "Save",
         "SaveImageOnYourComputer": "To save the image on your computer, right click on the image and select \"Save Image As...\"",
         "Search": "Search",
+        "Clear": "Clear",
         "SearchNoResults": "No results",
         "Seconds": "%ss",
         "SeeAll": "see all",
@@ -927,6 +928,7 @@
         "BestKeywords": "Your top converting keywords are:",
         "BestReferrers": "Your best converting websites referrers are:",
         "CaseSensitive": "Case sensitive match",
+        "ChooseGoal": "Choose Goal",
         "ClickOutlink": "Click on a Link to an external website",
         "ColumnAverageOrderRevenueDocumentation": "Average Order Value (AOV) is the total revenue from all Ecommerce Orders divided by the number of orders.",
         "ColumnAveragePriceDocumentation": "The average revenue for this %s.",
diff --git a/plugins/CoreHome/Controller.php b/plugins/CoreHome/Controller.php
index dae18b3ddf..b0d3770cbe 100644
--- a/plugins/CoreHome/Controller.php
+++ b/plugins/CoreHome/Controller.php
@@ -14,6 +14,7 @@ use Piwik\Common;
 use Piwik\Date;
 use Piwik\FrontController;
 use Piwik\Menu\MenuMain;
+use Piwik\Menu\MenuReporting;
 use Piwik\Notification\Manager as NotificationManager;
 use Piwik\Piwik;
 use Piwik\Plugin\Report;
@@ -131,7 +132,7 @@ class Controller extends \Piwik\Plugin\Controller
     {
         $view = new View('@CoreHome/getDefaultIndexView');
         $this->setGeneralVariablesView($view);
-        $view->menu = MenuMain::getInstance()->getMenu();
+        $view->menu = MenuReporting::getInstance()->getMenu();
         $view->dashboardSettingsControl = new DashboardManagerControl();
         $view->content = '';
         return $view;
diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 172ce8d5b8..b7b2ec80c6 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -195,6 +195,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_DaySa';
         $translationKeys[] = 'General_DaySu';
         $translationKeys[] = 'General_Search';
+        $translationKeys[] = 'General_Clear';
         $translationKeys[] = 'General_MoreDetails';
         $translationKeys[] = 'General_Help';
         $translationKeys[] = 'General_MoreDetails';
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown-directive.js b/plugins/CoreHome/angularjs/menudropdown/menudropdown-directive.js
index 918181ce21..21aa338b36 100644
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown-directive.js
+++ b/plugins/CoreHome/angularjs/menudropdown/menudropdown-directive.js
@@ -7,7 +7,7 @@
 
 /**
  * Usage:
- * <div piwik-menudropdown menu-title="MyMenuItem" tooltip="My Tooltip">
+ * <div piwik-menudropdown menu-title="MyMenuItem" tooltip="My Tooltip" show-search="false">
  *     <a class="item" href="/url">An Item</a>
  *     <a class="item disabled">Disabled</a>
  *     <a class="item active">Active item</a>
@@ -24,8 +24,43 @@ angular.module('piwikApp').directive('piwikMenudropdown', function(){
         restrict: 'A',
         scope: {
             menuTitle: '@',
-            tooltip: '@'
+            tooltip: '@',
+            showSearch: '='
         },
-        templateUrl: 'plugins/CoreHome/angularjs/menudropdown/menudropdown.html?cb=' + piwik.cacheBuster
+        templateUrl: 'plugins/CoreHome/angularjs/menudropdown/menudropdown.html?cb=' + piwik.cacheBuster,
+        link: function(scope, element, attrs) {
+
+            element.find('.item').on('click', function () {
+                var $self = angular.element(this);
+
+                if ($self.hasClass('disabled') || $self.hasClass('separator')) {
+                    return;
+                }
+
+                scope.menuTitle = $self.text().replace(/[\u0000-\u2666]/g, function(c) {
+                    return '&#'+c.charCodeAt(0)+';';
+                });
+                scope.$eval('view.showItems = false');
+                scope.$apply();
+
+                element.find('.item').removeClass('active');
+                $self.addClass('active');
+            });
+
+            scope.searchItems = function (searchTerm)
+            {
+                searchTerm = searchTerm.toLowerCase();
+
+                element.find('.item').each(function (index, node) {
+                    var $node = angular.element(node);
+
+                    if (-1 === $node.text().toLowerCase().indexOf(searchTerm)) {
+                        $node.hide();
+                    } else {
+                        $node.show();
+                    }
+                });
+            }
+        }
     };
 });
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.html b/plugins/CoreHome/angularjs/menudropdown/menudropdown.html
index 18ccda3669..d876cc5859 100644
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.html
+++ b/plugins/CoreHome/angularjs/menudropdown/menudropdown.html
@@ -5,6 +5,23 @@
           title="{{ tooltip }}"
           ng-bind-html="menuTitle"/>
 
-    <div class="items" ng-show="view.showItems" ng-transclude></div>
+    <div class="items" ng-show="view.showItems">
+        <div class="search" ng-if="showSearch && view.showItems">
+            <input type="text" ng-model="view.searchTerm" placeholder="{{ 'General_Search'|translate }}" ng-change="searchItems(view.searchTerm)">
+
+            <img title="{{ 'General_Search'|translate }}"
+                 ng-show="!view.searchTerm"
+                 class="search_ico"
+                 src="plugins/Morpheus/images/search_ico.png"/>
+            <img title="{{ 'General_Clear'|translate }}"
+                 ng-show="view.searchTerm"
+                 ng-click="view.searchTerm='';searchItems('')"
+                 class="reset"
+                 src="plugins/CoreHome/images/reset_search.png"/>
+        </div>
+        <div ng-transclude>
+
+        </div>
+    </div>
 
 </div>
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.less b/plugins/CoreHome/angularjs/menudropdown/menudropdown.less
index 4128615387..a2155872e4 100644
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.less
+++ b/plugins/CoreHome/angularjs/menudropdown/menudropdown.less
@@ -29,21 +29,50 @@
     z-index: 21;
     position: absolute;
     border: 1px solid @color-silver-l80 !important;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
     background: @theme-color-background-base;
     max-height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0 !important;
 
+    .search {
+      margin: 15px 6px 10px 6px;
+      display: block;
+
+      .search_ico {
+        position: absolute;
+        right: 25px;
+        top: 22px;
+        margin: 0px;
+        left: initial;
+      }
+      .reset {
+        position: absolute;
+        top: 25px;
+        cursor: pointer;
+        margin: 0px;
+        right: 25px;
+        left: initial;
+      }
+
+      input {
+        margin: 0px;
+        width: 100%;
+
+        &::-ms-clear {
+          display: none;
+        }
+      }
+    }
+
     .item {
       display: block;
       color: @theme-color-text !important;
       text-decoration: none !important;
       padding: 6px 25px 6px 6px !important;
       font-size: 11px;
+      float: none;
+      text-align: left;
 
       &:hover {
         background: @color-silver-l80;
diff --git a/plugins/CoreHome/stylesheets/menu.less b/plugins/CoreHome/stylesheets/menu.less
index 47ed717c2c..3a6717a494 100644
--- a/plugins/CoreHome/stylesheets/menu.less
+++ b/plugins/CoreHome/stylesheets/menu.less
@@ -1,5 +1,41 @@
 .Menu--dashboard {
   position: relative;
+
+  .menuDropdown {
+
+    .items {
+      width: 250px;
+
+      .search {
+        margin: 15px 16px 10px 17px;
+      }
+
+      .item {
+        padding: 10px 16px 4px !important;
+        min-height: 25px;
+        height: auto;
+      }
+    }
+
+    .title {
+      color: @theme-color-menu-contrast-text;
+      display: block;
+      padding: 15px 22px 11px;
+      font-size: 15px;
+      font-weight: normal;
+
+      &:hover {
+        color: @theme-color-menu-contrast-textActive;
+      }
+
+      &:after {
+        color: @theme-color-menu-contrast-text;
+        border-top: 5px solid @theme-color-menu-contrast-text;
+        top: 20px;
+        right: 3px;
+      }
+    }
+  }
 }
 
 .Menu--dashboard > .Menu-tabList {
@@ -91,7 +127,7 @@
 /* LEVEL2 HOVER */
 .Menu--dashboard > .Menu-tabList > li.sfHover ul,
 .Menu--dashboard > .Menu-tabList > li:hover ul {
-  z-index: 1;
+  z-index: 130;
   top: 100%;
   opacity: 1;
   -webkit-transition: opacity 300ms ease-out 10ms; /* property duration timing-function delay */
diff --git a/plugins/CoreHome/templates/_menu.twig b/plugins/CoreHome/templates/_menu.twig
index 1701d14f91..a4e53eb245 100644
--- a/plugins/CoreHome/templates/_menu.twig
+++ b/plugins/CoreHome/templates/_menu.twig
@@ -1,21 +1,58 @@
+{% macro submenuItem(name, url) %}
+    {% if name|slice(0,1) != '_' %}
+        <li>
+            <a href='#{{ url|urlRewriteWithParameters|slice(1) }}'
+               onclick='return piwikMenu.onItemClick(this);'>
+                {{ name|translate }}
+            </a>
+        </li>
+    {% endif %}
+{% endmacro %}
+
+{% macro groupedItem(name, group) %}
+    <li>
+        <div piwik-menudropdown show-search="true" menu-title="{{ name|translate|e('html_attr') }}">
+            {% for item in group.getItems %}
+                <a class="item"
+                   href='#{{ item.url|urlRewriteWithParameters|slice(1) }}'
+                   {% if item.tooltip %}title="{{ item.tooltip|e('html_attr') }}"{% endif %}
+                   onclick='return piwikMenu.onItemClick(this);'>
+                    {{ item.name|translate }}
+                </a>
+            {% endfor %}
+        </div>
+    </li>
+{% endmacro %}
+
+{% macro getId(urlParameters) -%}
+    {% if urlParameters is iterable -%}
+        {{ urlParameters|urlRewriteWithParameters }}
+    {%- endif %}
+{%- endmacro %}
+
+{% macro getFirstUrl(urlParameters) -%}
+    {% if urlParameters is iterable -%}
+        {{ urlParameters|urlRewriteWithParameters|slice(1)  }}
+    {%- endif %}
+{%- endmacro %}
+
 <div class="Menu--dashboard">
 
     <ul class="Menu-tabList">
         {% for level1,level2 in menu %}
-            <li id="{{ level2._url|urlRewriteWithParameters }}">
-                <a href="#{{ level2._url|urlRewriteWithParameters|slice(1) }}"
+            <li id="{{ _self.getId(level2._url) }}">
+                <a href="#{{ _self.getFirstUrl(level2._url) }}"
                    onclick="return piwikMenu.onItemClick(this);">{{ level1|translate }}</a>
                 <ul>
+
                 {% for name,urlParameters in level2 %}
-                    {% if name|slice(0,1) != '_' %}
-                        <li>
-                            <a href='#{{ urlParameters._url|urlRewriteWithParameters|slice(1) }}'
-                               onclick='return piwikMenu.onItemClick(this);'>
-                                {{ name|translate }}
-                            </a>
-                        </li>
+                    {% if urlParameters._url is defined and urlParameters._url is not iterable %}
+                        {{ _self.groupedItem(name,urlParameters._url) }}
+                    {% elseif name|slice(0,1) != '_' %}
+                        {{ _self.submenuItem(name,urlParameters._url) }}
                     {% endif %}
                 {% endfor %}
+
                 </ul>
             </li>
         {% endfor %}
diff --git a/plugins/Goals/Menu.php b/plugins/Goals/Menu.php
index 0b27a38179..efc0d024d9 100644
--- a/plugins/Goals/Menu.php
+++ b/plugins/Goals/Menu.php
@@ -9,6 +9,7 @@
 namespace Piwik\Plugins\Goals;
 
 use Piwik\Common;
+use Piwik\Menu\Group;
 use Piwik\Menu\MenuReporting;
 use Piwik\Piwik;
 use Piwik\Site;
@@ -55,8 +56,20 @@ class Menu extends \Piwik\Plugin\Menu
 
             $menu->add($mainGoalMenu, 'Goals_GoalsOverview', array('module' => 'Goals', 'action' => 'index'), true, 2);
 
+            $group = new Group();
             foreach ($goals as $goal) {
-                $menu->add($mainGoalMenu, str_replace('%', '%%', Translate::clean($goal['name'])), array('module' => 'Goals', 'action' => 'goalReport', 'idGoal' => $goal['idgoal']));
+                $subMenuName = str_replace('%', '%%', Translate::clean($goal['name']));
+                $params      = array('module' => 'Goals', 'action' => 'goalReport', 'idGoal' => $goal['idgoal']);
+
+                if (count($goals) <= 3) {
+                    $menu->add($mainGoalMenu, $subMenuName, $params);
+                } else {
+                    $group->add($subMenuName, $params, false);
+                }
+            }
+
+            if (count($goals) > 3) {
+                $menu->addGroup($mainGoalMenu, 'Goals_ChooseGoal', $group, $orderId = 50, $tooltip = false);
             }
         }
     }
diff --git a/plugins/Morpheus/stylesheets/uibase/_header.less b/plugins/Morpheus/stylesheets/uibase/_header.less
index be70269c67..3cbd2e4265 100644
--- a/plugins/Morpheus/stylesheets/uibase/_header.less
+++ b/plugins/Morpheus/stylesheets/uibase/_header.less
@@ -55,6 +55,7 @@
   color: #9c9c9c;
   margin: 4px 10px 8px;
   font-size: 13px;
+  z-index: 140;
 }
 
 #topRightBar {