navbar: more delimiter

application/Espo/Resources/metadata/entityDefs/Preferences.json

@@ -135,7 +135,6 @@
         },
         "tabList": {
             "type": "array",
-            "translation": "Global.scopeNamesPlural",
             "view": "views/preferences/fields/tab-list"
         },
         "emailReplyToAllByDefault": {

application/Espo/Resources/metadata/entityDefs/Settings.json

@@ -115,7 +115,6 @@
         },
         "tabList": {
             "type": "array",
-            "translation": "Global.scopeNamesPlural",
             "view": "views/settings/fields/tab-list"
         },
         "quickCreateList": {

client/res/templates/site/navbar.tpl

@@ -13,12 +13,20 @@
 
     <div class="collapse navbar-collapse navbar-body">
         <ul class="nav navbar-nav tabs">
-            {{#each tabListDefs}}
-            <li data-name="{{name}}"><a href="{{link}}" class="nav-link"><span class="full-label">{{label}}</span><span class="short-label" title="{{label}}">{{shortLabel}}</span></a></li>
+            {{#each tabDefsList}}
+            {{#unless isInMore}}
+            <li data-name="{{name}}" class="not-in-more"><a href="{{link}}" class="nav-link"><span class="full-label">{{label}}</span><span class="short-label" title="{{label}}">{{shortLabel}}</span></a></li>
+            {{/unless}}
             {{/each}}
             <li class="dropdown more">
-                <a id="nav-more-tabs-dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#">{{translate 'More'}} <b class="caret"></b></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="nav-more-tabs-dropdown"></ul>
+                <a id="nav-more-tabs-dropdown" class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="more-label">{{translate 'More'}} <b class="caret"></b></span><span class="glyphicon glyphicon glyphicon-option-horizontal more-icon"></span></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="nav-more-tabs-dropdown">
+                {{#each tabDefsList}}
+                {{#if isInMore}}
+                    <li data-name="{{name}}" class="in-more"><a href="{{link}}" class="nav-link"><span class="full-label">{{label}}</span></a></li>
+                {{/if}}
+                {{/each}}
+                </ul>
             </li>
         </ul>
         <ul class="nav navbar-nav navbar-right">

client/src/views/settings/fields/tab-list.js

@@ -29,7 +29,7 @@ Espo.define('views/settings/fields/tab-list', 'views/fields/array', function (De
 
     return Dep.extend({
 
-        setup: function () {
+        setupOptions: function () {
 
             this.params.options = Object.keys(this.getMetadata().get('scopes')).filter(function (scope) {
                 if (this.getMetadata().get('scopes.' + scope + '.disabled')) return;
@@ -38,7 +38,15 @@ Espo.define('views/settings/fields/tab-list', 'views/fields/array', function (De
                 return this.translate(v1, 'scopeNamesPlural').localeCompare(this.translate(v2, 'scopeNamesPlural'));
             }.bind(this));
 
-            Dep.prototype.setup.call(this);
+            this.params.options.push('_delimiter_');
+
+            this.translatedOptions = {};
+
+            this.params.options.forEach(function (item) {
+                this.translatedOptions[item] = this.translate(item, 'scopeNamesPlural');
+            }, this);
+
+            this.translatedOptions['_delimiter_'] = '. . .';
         }
 
     });

client/src/views/site/navbar.js

@@ -36,7 +36,7 @@ Espo.define('views/site/navbar', 'view', function (Dep) {
 
         data: function () {
             return {
-                tabListDefs: this.tabListDefs,
+                tabDefsList: this.tabDefsList,
                 title: this.options.title,
                 menu: this.getMenuDefs(),
                 quickCreateList: this.quickCreateList,
@@ -126,7 +126,7 @@ Espo.define('views/site/navbar', 'view', function (Dep) {
             this.setupGlobalSearch();
 
 
-            this.setupTabListDefs();
+            this.setupTabDefsList();
 
             this.once('remove', function () {
                 $(window).off('resize.navbar');
@@ -192,16 +192,16 @@ Espo.define('views/site/navbar', 'view', function (Dep) {
                     var windowWidth = window.innerWidth;
                     var moreWidth = $moreDd.width();
 
-                    $more.children('li').each(function (i, li) {
+                    $more.children('li.not-in-more').each(function (i, li) {
                         unhideOneTab();
                     });
 
-                    $more.parent().addClass('hidden');
-
                     if (windowWidth < smallScreenWidth) {
                         return;
                     }
 
+                    $more.parent().addClass('hidden');
+
                     var headerWidth = this.$el.width();
 
                     var maxWidth = headerWidth - navbarBaseWidth - moreWidth;
@@ -238,38 +238,48 @@ Espo.define('views/site/navbar', 'view', function (Dep) {
                     }
                 };
 
-                if ($navbar.height() <= navbarNeededHeight) {
+                if ($navbar.height() <= navbarNeededHeight && $more.children().size() === 0) {
                     $more.parent().addClass('hidden');
                 }
 
                 processUpdateWidth();
 
-
             } else {
                 var $tabs = this.$el.find('ul.tabs');
 
                 var minHeight = $tabs.height() + navbarStaticItemsHeight;
+
+                var $more = $tabs.find('li.more > ul');
+
+                if ($more.children().size() === 0) {
+                    $more.parent().addClass('hidden');
+                }
+
                 $('body').css('minHeight', minHeight + 'px');
+
                 $window.on('scroll.navbar', function () {
                     $tabs.scrollTop($window.scrollTop());
+                    $more.scrollTop($window.scrollTop());
                 }.bind(this));
 
-                var updateHeight = function () {
+                var updateSizeForVertical = function () {
                     var windowHeight = window.innerHeight;
                     var windowWidth = window.innerWidth;
 
                     if (windowWidth < smallScreenWidth) {
-                        $tabs.css('height', 'none');
-                        return;
+                        $tabs.css('height', 'auto');
+                        $tabs.css('max-height', '');
+                    } else {
+                        $tabs.css('height', (windowHeight - navbarStaticItemsHeight) + 'px');
+                        $more.css('max-height', windowHeight + 'px');
                     }
 
-                    $tabs.css('height', (windowHeight - navbarStaticItemsHeight) + 'px');
                 }.bind(this);
 
                 $(window).on('resize.navbar', function() {
-                    updateHeight();
+                    updateSizeForVertical();
                 });
-                updateHeight();
+                updateSizeForVertical();
             }
         },
 
@@ -329,19 +339,25 @@ Espo.define('views/site/navbar', 'view', function (Dep) {
             }
         },
 
-        setupTabListDefs: function () {
-            var tabListDefs = [];
+        setupTabDefsList: function () {
+            var tabDefsList = [];
+            var moreIsMet = false;;
             this.tabList.forEach(function (tab, i) {
+                if (tab === '_delimiter_') {
+                    moreIsMet = true;
+                    return;
+                }
                 var label = this.getLanguage().translate(tab, 'scopeNamesPlural');
                 var o = {
                     link: '#' + tab,
                     label: label,
                     shortLabel: label.substr(0, 2),
-                    name: tab
+                    name: tab,
+                    isInMore: moreIsMet
                 };
-                tabListDefs.push(o);
+                tabDefsList.push(o);
             }, this);
-            this.tabListDefs = tabListDefs;
+            this.tabDefsList = tabDefsList;
         },
 
         getMenuDefs: function () {

frontend/less/espo-vertical/layout.less

@@ -8,18 +8,27 @@
 }
 
 #header ul.tabs li.dropdown {
-  display: none;
+
 }
 
 @media screen and (max-width: @screen-sm-min) {
   #header .navbar-header > a.minimizer {
     display: none;
   }
+
+  body > #header .more-icon {
+    display: none;
+  }
+
+  body > #header .more-label {
+    display: inline;
+  }
 }
 
 body > #header ul.tabs > li > a > span.short-label {
   display: none;
 }
+
 body > #header ul.tabs > li > a > span.full-label {
   display: inline;
 }
@@ -28,13 +37,43 @@ body > #header .navbar-brand span.home-icon {
   display: none;
 }
 
+#header .more-icon {
+  display: inline;
+}
+
+#header .more-label {
+  display: none;
+}
+
+
 @media screen and (min-width: @screen-sm-min) {
 
+  #header .nav > li.more > .dropdown-menu {
+    top: 0;
+    left: @navbar-width;
+    padding-top: 0;
+    padding-bottom: 0;
+    position: fixed;
+    border-left-width: 0;
+    border-top-width: 0;
+    overflow-y: hidden;
+  }
+
+  #header ul.tabs {
+    width: @navbar-width;
+    margin-left: -8px;
+    overflow-y: hidden;
+  }
+
   body.minimized {
     #header {
       width: @navbar-minimized-width;
     }
 
+    #header .nav > li.more > ul.dropdown-menu {
+      left: @navbar-minimized-width;
+    }
+
     #header .navbar-brand img {
       display: none;
     }
@@ -184,13 +223,6 @@ body > #header .navbar-brand span.home-icon {
     float: none;
   }
 
-  #header ul.tabs {
-    width: @navbar-width;
-    margin-left: -8px;
-    overflow-y: hidden;
-    overflow-x: hidden;
-  }
-
   #header .navbar-right {
     position: fixed;
     bottom: 20px;

frontend/less/espo/layout.less

@@ -80,6 +80,10 @@ body > footer {
   display: none;
 }
 
+#header .more-icon {
+  display: none;
+}
+
 body > #header ul.tabs span.short-label {
   display: none;
 }