From e4cb9071d07429116772dbeadcabc42c83dfc229 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Tue, 3 Mar 2020 16:11:58 +0200
Subject: [PATCH] tabs extra delimiter

---
 client/res/templates/site/navbar.tpl         |  14 +-
 client/src/views/settings/fields/tab-list.js |   8 +-
 client/src/views/site/navbar.js              | 174 ++++++++++++++++---
 frontend/less/espo/custom.less               |  27 +++
 frontend/less/espo/layout.less               |   5 +-
 5 files changed, 199 insertions(+), 29 deletions(-)

diff --git a/client/res/templates/site/navbar.tpl b/client/res/templates/site/navbar.tpl
index b81c811c95..aabb287288 100644
--- a/client/res/templates/site/navbar.tpl
+++ b/client/res/templates/site/navbar.tpl
@@ -12,8 +12,8 @@
             {{#each tabDefsList}}
             {{#unless isInMore}}
             <li data-name="{{name}}" class="not-in-more tab">
-                <a href="{{link}}" class="nav-link"{{#if color}} style="border-color: {{color}}"{{/if}}>
-                    <span class="short-label" title="{{label}}"{{#if color}} style="color: {{color}}"{{/if}}>
+                <a href="{{link}}" class="{{aClassName}}"{{#if color}} style="border-color: {{color}}"{{/if}}>
+                    <span class="short-label"{{#if label}} title="{{label}}"{{/if}}{{#if color}} style="color: {{color}}"{{/if}}>
                         {{#if iconClass}}
                         <span class="{{iconClass}}"></span>
                         {{else}}
@@ -23,7 +23,10 @@
                         <span class="short-label-text">{{shortLabel}}</span>
                         {{/if}}
                     </span>
+                    {{#if label}}
                     <span class="full-label">{{label}}</span>
+                    {{/if}}
+                    {{#if html}}{{{html}}}{{/if}}
                 </a>
             </li>
             {{/unless}}
@@ -33,8 +36,8 @@
                 <ul class="dropdown-menu" role="menu" aria-labelledby="nav-more-tabs-dropdown">
                 {{#each tabDefsList}}
                 {{#if isInMore}}
-                    <li data-name="{{name}}" class="in-more tab">
-                        <a href="{{link}}" class="nav-link"{{#if color}} style="border-color: {{color}}"{{/if}}>
+                    <li data-name="{{name}}" class="in-more tab{{#if className}} {{className}}{{/if}}">
+                        <a href="{{link}}" class="{{aClassName}}"{{#if color}} style="border-color: {{color}}"{{/if}}>
                             <span class="short-label"{{#if color}} style="color: {{color}}"{{/if}}>
                                 {{#if iconClass}}
                                 <span class="{{iconClass}}"></span>
@@ -45,7 +48,10 @@
                                 <span class="short-label-text">&nbsp;</span>
                                 {{/if}}
                             </span>
+                            {{#if label}}
                             <span class="full-label">{{label}}</span>
+                            {{/if}}
+                            {{#if html}}{{{html}}}{{/if}}
                         </a>
                     </li>
                 {{/if}}
diff --git a/client/src/views/settings/fields/tab-list.js b/client/src/views/settings/fields/tab-list.js
index 4c2e037684..d97fd2c223 100644
--- a/client/src/views/settings/fields/tab-list.js
+++ b/client/src/views/settings/fields/tab-list.js
@@ -25,7 +25,8 @@
  * In accordance with Section 7(b) of the GNU General Public License version 3,
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
-Espo.define('views/settings/fields/tab-list', 'views/fields/array', function (Dep) {
+
+define('views/settings/fields/tab-list', 'views/fields/array', function (Dep) {
 
     return Dep.extend({
 
@@ -39,6 +40,7 @@ Espo.define('views/settings/fields/tab-list', 'views/fields/array', function (De
             }.bind(this));
 
             this.params.options.push('_delimiter_');
+            this.params.options.push('_delimiter-ext_');
 
             this.translatedOptions = {};
 
@@ -47,8 +49,8 @@ Espo.define('views/settings/fields/tab-list', 'views/fields/array', function (De
             }, this);
 
             this.translatedOptions['_delimiter_'] = '. . .';
-        }
+            this.translatedOptions['_delimiter-ext_'] = '. . .';
+        },
 
     });
-
 });
diff --git a/client/src/views/site/navbar.js b/client/src/views/site/navbar.js
index b6852400fb..a9e8e42a8a 100644
--- a/client/src/views/site/navbar.js
+++ b/client/src/views/site/navbar.js
@@ -87,6 +87,10 @@ define('views/site/navbar', 'view', function (Dep) {
             'click [data-action="toggleCollapsable"]': function () {
                 this.toggleCollapsable();
             },
+            'click li.show-more a': function (e) {
+                e.stopPropagation();
+                this.showMoreTabs();
+            },
         },
 
         isCollapsableVisible: function () {
@@ -206,7 +210,7 @@ define('views/site/navbar', 'view', function (Dep) {
             var scopes = this.getMetadata().get('scopes') || {};
 
             this.tabList = tabList.filter(function (scope) {
-                if (scope === '_delimiter_' || scope === 'Home') return true;
+                if (~['Home', '_delimiter_', '_delimiter-ext_'].indexOf(scope)) return true;
                 if (!scopes[scope]) return false;
 
                 var defs = scopes[scope] || {};
@@ -264,17 +268,49 @@ define('views/site/navbar', 'view', function (Dep) {
 
         adjustHorizontal: function () {
             var smallScreenWidth = this.getThemeManager().getParam('screenWidthXs');
+            var navbarHeight = this.getNavbarHeight();
 
             var $window = $(window);
 
-            var $tabs = this.$el.find('ul.tabs');
-            var $moreDropdown = $tabs.find('li.more');
-            var $more = $tabs.find('li.more > ul');
+            var $tabs = this.$tabs;
+            var $more = this.$more;
+            var $moreDropdown = this.$moreDropdown;
 
             $window.on('resize.navbar', function() {
                 updateWidth();
             });
 
+            $window.on('scroll.navbar', function () {
+                if (!this.isMoreDropdownShown) return;
+                $more.scrollTop($window.scrollTop());
+            }.bind(this));
+
+            this.$moreDropdown.on('shown.bs.dropdown', function () {
+                $more.scrollTop($window.scrollTop());
+            });
+
+            this.on('show-more-tabs', function () {
+                $more.scrollTop($window.scrollTop());
+            });
+
+            var updateMoreHeight = function () {
+                var windowHeight = window.innerHeight;
+                var windowWidth = window.innerWidth;
+
+                if (windowWidth < smallScreenWidth) {
+                    $more.css('max-height', '');
+                    $more.css('overflow-y', '');
+                } else {
+                    $more.css('overflow-y', 'hidden');
+                    $more.css('max-height', (windowHeight - navbarHeight) + 'px');
+                }
+            }.bind(this);
+
+            $window.on('resize.navbar', function() {
+                updateMoreHeight();
+            });
+            updateMoreHeight();
+
             var hideOneTab = function () {
                 var count = $tabs.children().length;
                 if (count <= 1) return;
@@ -298,13 +334,14 @@ define('views/site/navbar', 'view', function (Dep) {
                 $navbar.css('overflow', 'visible');
             }
 
-            var navbarHeight = this.getThemeManager().getParam('navbarHeight') || 43;
             var navbarBaseWidth = this.getThemeManager().getParam('navbarBaseWidth') || 556;
 
             var tabCount = this.tabList.length;
 
             var navbarNeededHeight = navbarHeight + 1;
 
+            this.adjustBodyMinHeightMethodName = 'adjustBodyMinHeightHorizontal';
+
             $moreDd = $('#nav-more-tabs-dropdown');
             $moreLi = $moreDd.closest('li');
 
@@ -368,7 +405,7 @@ define('views/site/navbar', 'view', function (Dep) {
                         processUpdateWidth(true);
                     }, 1000);
                 }
-            };
+            }.bind(this);
 
             if ($navbar.height() <= navbarNeededHeight && $more.children().length === 0) {
                 $more.parent().addClass('hidden');
@@ -379,29 +416,33 @@ define('views/site/navbar', 'view', function (Dep) {
 
         adjustVertical: function () {
             var smallScreenWidth = this.getThemeManager().getParam('screenWidthXs');
-            var navbarStaticItemsHeight = this.getThemeManager().getParam('navbarStaticItemsHeight') || 85;
+            var navbarStaticItemsHeight = this.getStaticItemsHeight();
 
             var $window = $(window);
 
-            var $tabs = this.$el.find('ul.tabs');
+            var $tabs = this.$tabs;
+            var $more = this.$more;
 
-            var minHeight = $tabs.height() + navbarStaticItemsHeight;
-
-            var $more = $tabs.find('li.more > ul');
-
-            minHeight = Math.max(minHeight, $more.height());
+            this.adjustBodyMinHeightMethodName = 'adjustBodyMinHeightVertical';
 
             if ($more.children().length === 0) {
                 $more.parent().addClass('hidden');
             }
 
-            $('body').css('minHeight', minHeight + 'px');
-
             $window.on('scroll.navbar', function () {
                 $tabs.scrollTop($window.scrollTop());
+                if (!this.isMoreDropdownShown) return;
                 $more.scrollTop($window.scrollTop());
             }.bind(this));
 
+            this.$moreDropdown.on('shown.bs.dropdown', function () {
+                $more.scrollTop($window.scrollTop());
+            });
+
+            this.on('show-more-tabs', function () {
+                $more.scrollTop($window.scrollTop());
+            });
+
             var updateSizeForVertical = function () {
                 var windowHeight = window.innerHeight;
                 var windowWidth = window.innerWidth;
@@ -423,8 +464,67 @@ define('views/site/navbar', 'view', function (Dep) {
             this.$el.find('.notifications-badge-container').insertAfter(this.$el.find('.quick-create-container'));
         },
 
+        getNavbarHeight: function () {
+            return this.getThemeManager().getParam('navbarHeight') || 43;
+        },
+
+        getStaticItemsHeight: function () {
+            return this.getThemeManager().getParam('navbarStaticItemsHeight') || 85;
+        },
+
+        adjustBodyMinHeight: function () {
+            if (!this.adjustBodyMinHeightMethodName) return;
+
+            this[this.adjustBodyMinHeightMethodName]();
+        },
+
+        adjustBodyMinHeightVertical: function () {
+            var minHeight = this.$tabs.height() + this.getStaticItemsHeight();
+
+            var moreHeight = 0;
+            this.$more.find('> li:visible').each(function (i, el) {
+                var $el = $(el);
+                moreHeight += $el.height();
+            }.bind(this));
+
+            minHeight = Math.max(minHeight, moreHeight);
+
+            this.$body.css('minHeight', minHeight + 'px');
+        },
+
+        adjustBodyMinHeightHorizontal: function () {
+            var height = this.getNavbarHeight();
+
+            this.$more.find('> li').each(function (i, el) {
+                var $el = $(el);
+                if (!this.isMoreTabsShown) {
+                    if ($el.hasClass('after-show-more')) return;
+                } else {
+                    if ($el.hasClass('show-more')) return;
+                }
+                height += $el.height();
+            }.bind(this));
+
+            this.$body.css('minHeight', height + 'px');
+        },
+
         afterRender: function () {
             this.$body = $('body');
+            this.$tabs = this.$el.find('ul.tabs');
+            this.$more = this.$tabs.find('li.more > ul');
+
+            var $moreDd = this.$moreDropdown = this.$tabs.find('li.more');
+
+            $moreDd.on('shown.bs.dropdown', function () {
+                this.isMoreDropdownShown = true;
+                this.adjustBodyMinHeight();
+            }.bind(this));
+
+            $moreDd.on('hidden.bs.dropdown', function () {
+                this.isMoreDropdownShown = false;
+                this.hideMoreTabs();
+                this.adjustBodyMinHeight();
+            }.bind(this));
 
             this.selectTab(this.getRouter().getLast().controller);
 
@@ -505,6 +605,8 @@ define('views/site/navbar', 'view', function (Dep) {
         setupTabDefsList: function () {
             var tabDefsList = [];
             var moreIsMet = false;
+            var isHidden = false;
+
             var colorsDisabled =
                 this.getPreferences().get('scopeColorsDisabled') ||
                 this.getPreferences().get('tabColorsDisabled') ||
@@ -513,9 +615,22 @@ define('views/site/navbar', 'view', function (Dep) {
             var tabIconsDisabled = this.getConfig().get('tabIconsDisabled');
 
             this.tabList.forEach(function (tab, i) {
-                if (tab === '_delimiter_') {
-                    moreIsMet = true;
-                    return;
+                if (tab === '_delimiter_' || tab === '_delimiter-ext_') {
+                    if (!moreIsMet) {
+                        moreIsMet = true;
+                        return;
+                    } else {
+                        if (i == this.tabList.length - 1) return;
+                        isHidden = true;
+                        tabDefsList.push({
+                            name: 'show-more',
+                            link: 'javascript:',
+                            isInMore: true,
+                            className: 'show-more',
+                            html: '<span class="fas fa-ellipsis-h more-icon"></span>',
+                        });
+                        return;
+                    }
                 }
 
                 var label;
@@ -548,8 +663,11 @@ define('views/site/navbar', 'view', function (Dep) {
                     name: tab,
                     isInMore: moreIsMet,
                     color: color,
-                    iconClass: iconClass
+                    iconClass: iconClass,
+                    isAfterShowMore: isHidden,
+                    aClassName: 'nav-link',
                 };
+                if (isHidden) o.className = 'after-show-more';
                 if (color && !iconClass) {
                     o.colorIconClass = 'color-icon fas fa-square-full';
                 }
@@ -642,7 +760,21 @@ define('views/site/navbar', 'view', function (Dep) {
                     this.clearView('dialog');
                 }, this);
             }, this);
-        }
-    });
+        },
 
+        showMoreTabs: function () {
+            this.isMoreTabsShown = true;
+            this.$more.addClass('more-expanded');
+            this.adjustBodyMinHeight();
+            this.trigger('show-more-tabs');
+        },
+
+        hideMoreTabs: function () {
+            if (!this.isMoreTabsShown) return;
+            this.$more.removeClass('more-expanded');
+            this.adjustBodyMinHeight();
+
+            this.isMoreTabsShown = false;
+        },
+    });
 });
diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index db923f12d7..40f2feeafd 100644
--- a/frontend/less/espo/custom.less
+++ b/frontend/less/espo/custom.less
@@ -29,6 +29,33 @@
         margin: 0;
         color: @navbar-inverse-link-color;
     }
+
+    @media screen and (min-width: @screen-sm-min) {
+        .tabs > .more {
+            li.show-more a {
+                text-align: center;
+            }
+
+            .after-show-more {
+                display: none;
+            }
+
+            .more-expanded {
+                .show-more {
+                    display: none;
+                }
+                .after-show-more {
+                    display: list-item;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: (@screen-sm-min - 1px)) {
+        li.show-more {
+            display: none;
+        }
+    }
 }
 
 @media screen and (min-width: @screen-sm-min) {
diff --git a/frontend/less/espo/layout.less b/frontend/less/espo/layout.less
index 82f157c67a..a788ba5747 100644
--- a/frontend/less/espo/layout.less
+++ b/frontend/less/espo/layout.less
@@ -33,7 +33,6 @@
         display: none;
     }
 
-
     ul.tabs {
 
         span.full-label {
@@ -51,6 +50,10 @@
         }
 
         > li.more {
+            > ul {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
             > ul > li > a {
                 padding-top: 9px;
                 padding-bottom: 9px;