Skip to content

Commit b646157

Browse files
georgimkvkskondovTeodorTaushanov
authored
feat(ui5-tabcontainer): show separators in overflow (#4507)
Show separators in overflow Co-authored-by: Konstantin Kondov <konstantin.kondov@sap.com> Co-authored-by: Teodor Taushanov <teodor.taushanov@sap.com>
1 parent 0c060aa commit b646157

13 files changed

+168
-238
lines changed

‎packages/main/src/Tab.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const metadata = {
5656
},
5757

5858
/**
59-
* Represents the "additionalText" text, which is displayed in the tab filter.
59+
* Represents the "additionalText" text, which is displayed in the tab.
6060
* @type {string}
6161
* @defaultvalue ""
6262
* @public

‎packages/main/src/TabContainer.hbs

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
{{#if tabsAtTheBottom}}
66
{{> contentArea}}
77
{{/if}}
8-
98
<div class="{{classes.header}}" id="{{_id}}-header">
109
<div
1110
class="ui5-tc__overflow ui5-tc__overflow--start"
@@ -35,17 +34,7 @@
3534
@keyup="{{_onTabStripKeyUp}}"
3635
>
3736
{{#each items}}
38-
{{#unless this.isSeparator}}
39-
{{this.stripPresentation}}
40-
{{/unless}}
41-
{{#if this.isSeparator}}
42-
<div
43-
id="{{this._id}}"
44-
data-ui5-stable="{{this.stableDomRef}}"
45-
role="separator"
46-
class="{{../classes.separator}}"
47-
></div>
48-
{{/if}}
37+
{{this.stripPresentation}}
4938
{{/each}}
5039
</div>
5140

‎packages/main/src/TabContainer.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,8 @@ const metadata = {
146146
/**
147147
* Defines whether the overflow select list is displayed.
148148
* <br><br>
149-
* The overflow select list represents a list, where all tab filters are displayed
150-
* so that it's easier for the user to select a specific tab filter.
149+
* The overflow select list represents a list, where all tabs are displayed
150+
* so that it's easier for the user to select a specific tab.
151151
*
152152
* @type {boolean}
153153
* @defaultvalue false
@@ -461,14 +461,15 @@ class TabContainer extends UI5Element {
461461
const selectedTab = this.items[selectedIndex];
462462

463463
// update selected items
464-
this._getTabs().forEach((item, index) => {
465-
const selected = selectedIndex === index;
466-
item.selected = selected;
464+
this.items
465+
.forEach((item, index) => {
466+
const selected = selectedIndex === index;
467+
item.selected = selected;
467468

468-
if (item._selected) {
469-
item._selected = false;
470-
}
471-
});
469+
if (item._selected) {
470+
item._selected = false;
471+
}
472+
});
472473

473474
if (this.fixed) {
474475
this.selectTab(selectedTab, selectedTabIndex);
@@ -568,7 +569,7 @@ class TabContainer extends UI5Element {
568569
if (this.responsivePopover.opened) {
569570
this.responsivePopover.close();
570571
} else {
571-
this.responsivePopover.initialFocus = this.responsivePopover.content[0].items[0].id;
572+
this.responsivePopover.initialFocus = this.responsivePopover.content[0].items.filter(item => item.classList.contains("ui5-tab-overflow-item"))[0].id;
572573
this.responsivePopover.showAt(button);
573574
}
574575
}
@@ -586,6 +587,9 @@ class TabContainer extends UI5Element {
586587
}
587588

588589
_handleResize() {
590+
if (this.responsivePopover && this.responsivePopover.opened) {
591+
this.responsivePopover.close();
592+
}
589593
this._updateMediaRange();
590594
this._setItemsForStrip();
591595
}

‎packages/main/src/TabContainerPopover.hbs

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,11 @@
1010
<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
1111
{{#if _endOverflowItems.length}}
1212
{{#each _endOverflowItems}}
13-
{{#unless this.isSeparator}}
14-
{{this.overflowPresentation}}
15-
{{/unless}}
13+
{{this.overflowPresentation}}
1614
{{/each}}
17-
{{else }}
15+
{{else}}
1816
{{#each _startOverflowItems}}
19-
{{#unless this.isSeparator}}
20-
{{this.overflowPresentation}}
21-
{{/unless}}
17+
{{this.overflowPresentation}}
2218
{{/each}}
2319
{{/if}}
2420
</ui5-list>

‎packages/main/src/TabSeparator.hbs

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/main/src/TabSeparator.js

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3-
import TabSeparatorTemplate from "./generated/templates/TabSeparatorTemplate.lit.js";
3+
import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
4+
5+
import TabContainer from "./TabContainer.js";
6+
7+
// Templates
8+
import TabSeparatorInStripTemplate from "./generated/templates/TabSeparatorInStripTemplate.lit.js";
9+
import TabSeparatorInOverflowTemplate from "./generated/templates/TabSeparatorInOverflowTemplate.lit.js";
10+
11+
// Styles
12+
import stripCss from "./generated/themes/TabSeparatorInStrip.css.js";
13+
import overflowCss from "./generated/themes/TabSeparatorInOverflow.css.js";
414

515
/**
616
* @public
@@ -30,8 +40,18 @@ class TabSeparator extends UI5Element {
3040
return litRender;
3141
}
3242

33-
static get template() {
34-
return TabSeparatorTemplate;
43+
static get stripTemplate() {
44+
return TabSeparatorInStripTemplate;
45+
}
46+
47+
static get overflowTemplate() {
48+
return TabSeparatorInOverflowTemplate;
49+
}
50+
51+
get classes() {
52+
return {
53+
"ui5-tc__separator": true,
54+
};
3555
}
3656

3757
get isSeparator() {
@@ -45,8 +65,19 @@ class TabSeparator extends UI5Element {
4565
get stableDomRef() {
4666
return `${this._id}-stable-dom-ref`;
4767
}
68+
69+
get stripPresentation() {
70+
return executeTemplate(this.constructor.stripTemplate, this);
71+
}
72+
73+
get overflowPresentation() {
74+
return executeTemplate(this.constructor.overflowTemplate, this);
75+
}
4876
}
4977

5078
TabSeparator.define();
5179

80+
TabContainer.registerTabStyles(stripCss);
81+
TabContainer.registerStaticAreaTabStyles(overflowCss);
82+
5283
export default TabSeparator;

‎packages/main/src/TabSeparatorInOverflow.hbs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<ui5-li-custom
2+
id="{{this._id}}"
3+
data-ui5-stable="{{this.stableDomRef}}"
4+
role="separator"
5+
class="{{classes}}"
6+
disabled
7+
>
8+
</ui5-li-custom>

‎packages/main/src/TabSeparatorInStrip.hbs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div
2+
id="{{this._id}}"
3+
data-ui5-stable="{{this.stableDomRef}}"
4+
role="separator"
5+
class="{{classes}}"
6+
></div>

‎packages/main/src/themes/TabContainer.css

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -47,46 +47,10 @@
4747
white-space: nowrap;
4848
}
4949

50-
.ui5-tc__separator {
51-
width: 0;
52-
border-left: 2px solid var(--sapList_BorderColor);
53-
margin: 0.5rem 0.25rem;
54-
}
55-
5650
.ui5-tc__separator:focus {
5751
outline: none;
5852
}
5953

60-
.ui5-tc__headerArrow {
61-
position: absolute;
62-
top: 0;
63-
bottom: 1px;
64-
z-index: 1;
65-
display: flex;
66-
align-items: center;
67-
color: var(--sapContent_IconColor);
68-
background-color: var(--sapObjectHeader_Background);
69-
padding: 0 0.25rem;
70-
visibility: hidden;
71-
}
72-
73-
.ui5-tc__headerArrowLeft {
74-
left: 0;
75-
}
76-
77-
.ui5-tc__headerArrowRight {
78-
right: 0;
79-
}
80-
81-
.ui5-tc__headerArrow:hover,
82-
.ui5-tc__headerArrow:active {
83-
color: var(--sapHighlightColor);
84-
}
85-
86-
.ui5-tc__headerArrow--visible {
87-
visibility: visible;
88-
}
89-
9054
.ui5-tc__overflow {
9155
flex: 0 0 0;
9256
margin: 0 0.25rem;
@@ -117,7 +81,7 @@
11781
}
11882

11983
:host([tabs-placement="Bottom"]) .ui5-tc__content {
120-
border-top: var(--_ui5_tc_content_border_bottom);
84+
border-top: var(--_ui5_tc_content_border_bottom);
12185
}
12286

12387
.ui5-tc__content--collapsed {

‎packages/main/src/themes/TabSeparatorInOverflow.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.ui5-tc__separator {
2+
min-height: 0.25rem;
3+
border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
4+
margin: 0 0.5rem;
5+
}
6+
ui5-list>.ui5-tc__separator:first-child {
7+
min-height: 0.5rem;
8+
}

0 commit comments

Comments
 (0)