Merge pull request #8974 from piwik/left_menu_tweaks

Left menu tweaks

plugins/CoreHome/CoreHome.php

@@ -250,6 +250,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'Intl_Day_Min_StandAlone_5';
         $translationKeys[] = 'Intl_Day_Min_StandAlone_6';
         $translationKeys[] = 'Intl_Day_Min_StandAlone_7';
+        $translationKeys[] = 'General_And';
         $translationKeys[] = 'General_Search';
         $translationKeys[] = 'General_Clear';
         $translationKeys[] = 'General_MoreDetails';
@@ -272,5 +273,7 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'CoreHome_PivotBySubtable';
         $translationKeys[] = 'CoreHome_QuickAccessTitle';
         $translationKeys[] = 'CoreHome_Segments';
+        $translationKeys[] = 'CoreHome_MenuEntries';
+        $translationKeys[] = 'SitesManager_Sites';
     }
 }

plugins/CoreHome/angularjs/quick-access/quick-access.directive.html

-<div class="quick-access" title="{{ 'CoreHome_QuickAccessTitle' | translate }}"
+<div class="quick-access" title="{{ quickAccessTitle }}"
      ng-class="{active: view.searchActive, expanded: view.searchActive}"
      piwik-focus-anywhere-but-here="view.searchActive = false;">
     <span class="icon-search" ng-hide="search.term || view.searchActive"

plugins/CoreHome/angularjs/quick-access/quick-access.directive.js

@@ -15,9 +15,9 @@
 (function () {
     angular.module('piwikApp').directive('piwikQuickAccess', QuickAccessDirective);
 
-    QuickAccessDirective.$inject = ['$rootElement', '$timeout', 'piwik'];
+    QuickAccessDirective.$inject = ['$rootElement', '$timeout', 'piwik', '$filter'];
 
-    function QuickAccessDirective ($rootElement, $timeout, piwik) {
+    function QuickAccessDirective ($rootElement, $timeout, piwik, $filter) {
 
         return {
             restrict: 'A',
@@ -33,7 +33,31 @@
                 var leftMenuItems = []; // cache for left menu items
                 var segmentItems = []; // cache for segment items
                 var hasSegmentSelector = angular.element('.segmentEditorPanel').length;
-                scope.hasSitesSelector = angular.element('[piwik-siteselector]').length;
+                scope.hasSitesSelector = angular.element('.top_controls [piwik-siteselector]').length;
+
+
+                var translate = $filter('translate');
+                var searchAreasTitle = '';
+                var searchAreas = [translate('CoreHome_MenuEntries')]
+
+                if (hasSegmentSelector) {
+                    searchAreas.push(translate('CoreHome_Segments'))
+                }
+
+                if (scope.hasSitesSelector) {
+                    searchAreas.push(translate('SitesManager_Sites'))
+                }
+
+                while (searchAreas.length) {
+                    searchAreasTitle += searchAreas.shift();
+                    if (searchAreas.length >= 2) {
+                        searchAreasTitle += ', ';
+                    } else if (searchAreas.length === 1) {
+                        searchAreasTitle += ' ' + translate('General_And') + ' ';
+                    }
+                }
+
+                scope.quickAccessTitle = translate('CoreHome_QuickAccessTitle', searchAreasTitle);
 
                 function trim(str) {
                     return str.replace(/^\s+|\s+$/g,'');

plugins/CoreHome/javascripts/menu.js

@@ -56,9 +56,6 @@ menu.prototype =
 
             var href = link.attr('href');
             if (!href) {
-                if (main_menu && !$this.find('li').length) {
-                    $this.hide(); // no link and no child menu items -> hide it
-                }
                 return;
             }
             var url = href.substr(1);

plugins/CoreHome/javascripts/menu_init.js

@@ -15,12 +15,13 @@ $(function () {
         initTopControls();
     }
 
-    if(isPageIsAdmin) {
+    if (isPageIsAdmin) {
         // don't use broadcast in admin page
         initTopControls();
         return;
     }
-    if(isPageHasMenu) {
+
+    if (isPageHasMenu) {
         broadcast.init();
     } else {
         broadcast.init(true);

plugins/CoreHome/javascripts/top_controls.js

@@ -26,6 +26,8 @@ function initTopControls() {
     var $topControlsContainer = $('.top_controls'),
         left = 0;
 
+    var allRendered = true;
+
     if ($topControlsContainer.length) {
         $('.piwikTopControl').each(function () {
             var $control = $(this);
@@ -34,10 +36,22 @@ function initTopControls() {
             }
 
             $control.css('left', left);
+            var width = $control.outerWidth(true);
+
+            var isControlFullyRendered = width >= 30;
+            if (!isControlFullyRendered) {
+                allRendered = false;
+            }
 
-            left += $control.outerWidth(true);
+            left += width;
         });
 
+        if (allRendered) {
+            // we make top controls visible only after all selectors are rendered
+            $('.top_controls').css('visibility', 'visible');
+            $('.top_controls').css('opacity', '1');
+        }
+
         var header = $('#header_message.isPiwikDemo');
         if (header.length) {
             // make sure isPiwikDemo message is always fully visible, move it to the right if needed

plugins/CoreHome/lang/en.json

@@ -49,7 +49,8 @@
         "ClickRowToExpandOrContract": "Click this row to expand or contract the subtable.",
         "UndoPivotBySubtable": "This report has been pivoted %s Undo pivot",
         "PivotBySubtable": "This report is not pivoted %s Pivot by %s",
-        "QuickAccessTitle": "Search for menu entries, segments and websites. Shortcut: Press 'f' to search.",
+        "QuickAccessTitle": "Search for %s. Shortcut: Press 'f' to search.",
+        "MenuEntries": "Menu entries",
         "Segments": "Segments",
         "AdblockIsMaybeUsed": "In case you are using an ad blocker, please disable it for this site to make sure Piwik works without any issues."
     }

plugins/CoreHome/stylesheets/layout.less

@@ -352,6 +352,8 @@
 
 #root {
   .top_controls {
+    visibility: hidden;
+    opacity: 0;
     .piwikTopControl {
       margin-top: 8px;
       margin-bottom: 8px;

plugins/CoreHome/templates/_menu.twig

@@ -41,24 +41,37 @@
         </div>
         <ul class="navbar">
             {% for level1,level2 in menu %}
-                <li id="{% if level2._url is defined and level2._url is not empty %}{{ _self.getId(level2._url) }}{% endif %}" class="menuTab">
+                {% set hasMainCategoryUrl = level2._url is defined and level2._url is not empty %}
 
-                    <a class="item" {% if level2._url is defined and level2._url is not empty %}href="{% if anchorlink %}#{% else %}index.php?{% endif %}{{ _self.getFirstUrl(level2._url) }}"{% endif %}>
-                        <span class="menu-icon {{ level2._icon|default('icon-arrow-right') }}"></span>{{ level1|translate }}
-                        <span class="hidden">
-                         {{ 'CoreHome_Menu'|translate }}
-                       </span>
-                    </a>
-                    <ul>
-                        {% for name,urlParameters in level2 %}
-                            {% if urlParameters._url is defined and urlParameters._url is not iterable %}
-                                {{ _self.groupedItem(name,urlParameters._url, anchorlink) }}
-                            {% elseif name|slice(0,1) != '_' %}
-                                {{ _self.submenuItem(name,urlParameters._url, anchorlink) }}
-                            {% endif %}
-                        {% endfor %}
-                    </ul>
-                </li>
+                {% set hasSubmenuItem = false %}
+                {% for name,urlParameters in level2 %}
+                    {% if urlParameters._url is defined and urlParameters._url is not iterable %}
+                        {% set hasSubmenuItem = true %}
+                    {% elseif name|slice(0,1) != '_' %}
+                        {% set hasSubmenuItem = true %}
+                    {% endif %}
+                {% endfor %}
+
+                {% if hasMainCategoryUrl or hasSubmenuItem %}
+                    <li id="{% if level2._url is defined and level2._url is not empty %}{{ _self.getId(level2._url) }}{% endif %}" class="menuTab">
+
+                        <a class="item" {% if hasMainCategoryUrl %}href="{% if anchorlink %}#{% else %}index.php?{% endif %}{{ _self.getFirstUrl(level2._url) }}"{% endif %}>
+                            <span class="menu-icon {{ level2._icon|default('icon-arrow-right') }}"></span>{{ level1|translate }}
+                            <span class="hidden">
+                             {{ 'CoreHome_Menu'|translate }}
+                           </span>
+                        </a>
+                        <ul>
+                            {% for name,urlParameters in level2 %}
+                                {% if urlParameters._url is defined and urlParameters._url is not iterable %}
+                                    {{ _self.groupedItem(name,urlParameters._url, anchorlink) }}
+                                {% elseif name|slice(0,1) != '_' %}
+                                    {{ _self.submenuItem(name,urlParameters._url, anchorlink) }}
+                                {% endif %}
+                            {% endfor %}
+                        </ul>
+                    </li>
+                {% endif %}
             {% endfor %}
         </ul>
     </div>