diff options
-rw-r--r-- | core/Menu/Group.php | 31 | ||||
-rw-r--r-- | core/Menu/MenuReporting.php | 15 | ||||
-rw-r--r-- | lang/en.json | 2 | ||||
-rw-r--r-- | plugins/CoreHome/Controller.php | 3 | ||||
-rw-r--r-- | plugins/CoreHome/CoreHome.php | 1 | ||||
-rw-r--r-- | plugins/CoreHome/angularjs/menudropdown/menudropdown-directive.js | 41 | ||||
-rw-r--r-- | plugins/CoreHome/angularjs/menudropdown/menudropdown.html | 19 | ||||
-rw-r--r-- | plugins/CoreHome/angularjs/menudropdown/menudropdown.less | 35 | ||||
-rw-r--r-- | plugins/CoreHome/stylesheets/menu.less | 38 | ||||
-rw-r--r-- | plugins/CoreHome/templates/_menu.twig | 55 | ||||
-rw-r--r-- | plugins/Goals/Menu.php | 15 | ||||
-rw-r--r-- | plugins/Morpheus/stylesheets/uibase/_header.less | 1 |
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 { |