espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabs extra delimiter

Browse Source
This commit is contained in:
Yuri Kuznetsov
2020-03-03 16:11:58 +02:00
parent 2b2777b3da
commit e4cb9071d0
5 changed files with 199 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/res/templates/site/navbar.tpl
+10 -4
View File
@@ -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}}
client/src/views/settings/fields/tab-list.js
+5 -3
View File
@@ -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_'] = '. . .';
},
});
});
client/src/views/site/navbar.js
+153 -21
View File
@@ -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;
},
});
});
frontend/less/espo/custom.less
+27
View File
@@ -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) {
frontend/less/espo/layout.less
+4 -1
View File
@@ -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;