navbar divider in group tab

This commit is contained in:
Yuri Kuznetsov
2023-11-16 14:37:10 +02:00
parent c73930c27d
commit bc03276a53
2 changed files with 94 additions and 54 deletions

View File

@@ -54,31 +54,35 @@
{{#if isGroup}}
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-tab-group-{{name}}">
{{#each itemList}}
<li data-name="{{name}}" class="in-group tab">
<a
{{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
class="{{aClassName}}"
{{#if color}}
style="border-color: {{color}}"
{{/if}}
{{#if isGroup}}
id="nav-tab-group-{{name}}"
data-toggle="dropdown"
{{/if}}
>
{{#if isDivider}}
<li class="divider"></li>
{{else}}
<li data-name="{{name}}" class="in-group tab">
<a
{{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
class="{{aClassName}}"
{{#if color}}
style="border-color: {{color}}"
{{/if}}
{{#if isGroup}}
id="nav-tab-group-{{name}}"
data-toggle="dropdown"
{{/if}}
>
<span class="short-label"{{#if color}} style="color: {{color}}"{{/if}}>
{{#if iconClass}}
<span class="{{iconClass}}"></span>
<span class="{{iconClass}}"></span>
{{else}}
{{#if colorIconClass}}
<span class="{{colorIconClass}}" style="color: {{color}}"></span>
{{/if}}
<span class="short-label-text">&nbsp;</span>
{{#if colorIconClass}}
<span class="{{colorIconClass}}" style="color: {{color}}"></span>
{{/if}}
<span class="short-label-text">&nbsp;</span>
{{/if}}
</span>
<span class="full-label">{{label}}</span>
</a>
</li>
<span class="full-label">{{label}}</span>
</a>
</li>
{{/if}}
{{/each}}
</ul>
{{/if}}
@@ -135,32 +139,36 @@
{{#if isGroup}}
<ul class="dropdown-menu" role="menu" aria-labelledby="nav-tab-group-{{name}}">
{{#each itemList}}
<li data-name="{{name}}" class="in-group tab">
<a
{{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
tabindex="0"
class="{{aClassName}}"
{{#if color}}
style="border-color: {{color}}"
{{/if}}
{{#if isGroup}}
id="nav-tab-group-{{name}}"
data-toggle="dropdown"
{{/if}}
>
{{#if isDivider}}
<li class="divider"></li>
{{else}}
<li data-name="{{name}}" class="in-group tab">
<a
{{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
tabindex="0"
class="{{aClassName}}"
{{#if color}}
style="border-color: {{color}}"
{{/if}}
{{#if isGroup}}
id="nav-tab-group-{{name}}"
data-toggle="dropdown"
{{/if}}
>
<span class="short-label"{{#if color}} style="color: {{color}}"{{/if}}>
{{#if iconClass}}
<span class="{{iconClass}}"></span>
<span class="{{iconClass}}"></span>
{{else}}
{{#if colorIconClass}}
<span class="{{colorIconClass}}" style="color: {{color}}"></span>
{{/if}}
<span class="short-label-text">&nbsp;</span>
{{#if colorIconClass}}
<span class="{{colorIconClass}}" style="color: {{color}}"></span>
{{/if}}
<span class="short-label-text">&nbsp;</span>
{{/if}}
</span>
<span class="full-label">{{label}}</span>
</a>
</li>
<span class="full-label">{{label}}</span>
</a>
</li>
{{/if}}
{{/each}}
</ul>
{{/if}}

View File

@@ -952,9 +952,15 @@ class NavbarSiteView extends View {
}
setupTabDefsList() {
const tabList = this.getTabList();
function isMoreDelimiter(item) {
return item === '_delimiter_' || item === '_delimiter-ext_';
}
this.tabList = tabList.filter(item => {
function isDivider(item) {
return typeof item === 'object' && item.type === 'divider';
}
this.tabList = this.getTabList().filter(item => {
if (!item) {
return false;
}
@@ -968,26 +974,52 @@ class NavbarSiteView extends View {
return true;
}
item.itemList = item.itemList || [];
let itemList = (item.itemList || []).filter((item) => {
if (isDivider(item)) {
return true;
}
item.itemList = item.itemList.filter(item => {
return this.filterTabItem(item);
});
return !!item.itemList.length;
itemList = itemList.filter((item, i) => {
if (!isDivider(item)) {
return true;
}
const nextItem = itemList[i + 1];
if (!nextItem) {
return true;
}
if (isDivider(nextItem)) {
return false;
}
return true;
});
itemList = itemList.filter((item, i) => {
if (!isDivider(item)) {
return true;
}
if (i === 0 || i === itemList.length - 1) {
return false;
}
return true;
});
item.itemList = itemList;
return !!itemList.length;
}
return this.filterTabItem(item);
});
function isMoreDelimiter(item) {
return item === '_delimiter_' || item === '_delimiter-ext_';
}
function isDivider(item) {
return typeof item === 'object' && item.type === 'divider';
}
let moreIsMet = false;
this.tabList = this.tabList.filter((item, i) => {