header menu items improvement

client/res/templates/header.tpl

@@ -25,7 +25,7 @@
             {{/if}}
 
             {{#if items.dropdown}}
-                <div class="btn-group" role="group">
+                <div class="btn-group dropdown-group{{#unless ../hasVisibleDropdownItems}} hidden{{/unless}}" role="group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                     <span class="fas fa-ellipsis-h"></span>
                 </button>

client/src/views/header.js

@@ -37,9 +37,17 @@ define('views/header', 'view', function (Dep) {
             if ('getHeader' in this.getParentView()) {
                 data.header = this.getParentView().getHeader();
             }
+
             data.scope = this.scope || this.getParentView().scope;
             data.items = this.getItems();
 
+            var dropdown = (data.items || {}).dropdown || [];
+
+            data.hasVisibleDropdownItems = false;
+            dropdown.forEach(function (item) {
+                if (!item.hidden) data.hasVisibleDropdownItems = true;
+            });
+
             data.noBreakWords = this.options.fontSizeFlexible;
 
             data.isXsSingleRow = this.options.isXsSingleRow;

client/src/views/main.js

@@ -49,13 +49,20 @@ define('views/main', 'view', function (Dep) {
             this.options.params = this.options.params || {};
 
             if (this.name && this.scope) {
-                this.menu = this.getMetadata().get('clientDefs.' + this.scope + '.menu.' + this.name.charAt(0).toLowerCase() + this.name.slice(1)) || {};
+                this.menu = this.getMetadata().get([
+                    'clientDefs', this.scope, 'menu', this.name.charAt(0).toLowerCase() + this.name.slice(1)
+                ]) || {};
             }
 
             this.menu = Espo.Utils.cloneDeep(this.menu);
 
+            var globalMenu = this.getMetadata().get([
+                'clientDefs', 'Global', 'menu', this.name.charAt(0).toLowerCase() + this.name.slice(1)
+            ]) || {};
+
             ['buttons', 'actions', 'dropdown'].forEach(function (type) {
                 this.menu[type] = this.menu[type] || [];
+                this.menu[type] = this.menu[type].concat(globalMenu[type] || []);
 
                 var itemList = this.menu[type];
                 itemList.forEach(function (item) {
@@ -237,6 +244,8 @@ define('views/main', 'view', function (Dep) {
             if (!this.isRendered()) return;
             this.$el.find('.page-header li > .action[data-name="'+name+'"]').parent().addClass('hidden');
             this.$el.find('.page-header a.action[data-name="'+name+'"]').addClass('hidden');
+
+            this.controlMenuDropdownVisibility();
         },
 
         showHeaderActionItem: function (name) {
@@ -251,7 +260,27 @@ define('views/main', 'view', function (Dep) {
             if (!this.isRendered()) return;
             this.$el.find('.page-header li > .action[data-name="'+name+'"]').parent().removeClass('hidden');
             this.$el.find('.page-header a.action[data-name="'+name+'"]').removeClass('hidden');
-        }
+
+            this.controlMenuDropdownVisibility();
+        },
+
+        hasMenuVisibleDropdownItems: function () {
+            var hasItems = false;
+            this.menu.dropdown.forEach(function (item) {
+                if (!item.hidden) hasItems = true;
+            });
+            return hasItems;
+        },
+
+        controlMenuDropdownVisibility: function () {
+            var $d = this.$el.find('.page-header .dropdown-group');
+
+            if (this.hasMenuVisibleDropdownItems()) {
+                $d.removeClass('hidden');
+            } else {
+                $d.addClass('hidden');
+            }
+        },
 
     });
 });