-
Notifications
You must be signed in to change notification settings - Fork 270
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui5-tabcontainer): refactor the component (#318)
Closes: #313 BREAKING CHANGE: 'selectedIndex' property is removed. Instead use 'selected' property of the Tab BREAKING CHANGE: 'headerMode' property is removed. All Tabs by Fiori guidelines are rendered in inline mode BREAKING CHANGE: 'headerBackgroundDesign' property is removed BREAKING CHANGE: 'backgroundDesign' property is removed BREAKING CHANGE: 'content' property is removed. Instead if you want to use the TabContainer as a filter just use it with 'collapsed' set to true and 'fixed' set to true BREAKING CHANGE: 'TabContainerDensityMode' is deleted. To set different size modes use ?sap-ui-compactSize=true BREAKING CHANGE: Tab's 'design' property is removed BREAKING CHANGE: Tab's 'count' property is removed. Instead use the additional-text property
- Loading branch information
1 parent
c1f4c9c
commit aa516ff
Showing
24 changed files
with
1,098 additions
and
1,052 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,155 +1,146 @@ | ||
| <div {{> controlData}} class="{{classes.main}}"> | ||
| <div role='tablist' class="{{classes.tablist}}"> | ||
| <ui5-icon | ||
| src="sap-icon://slim-arrow-left" | ||
| class="{{ctr._leftArrow.classes}}" | ||
| tabindex="-1"></ui5-icon> | ||
| <div id="{{ctr._id}}-scrollContainer" class="sapMITBScrollContainer"> | ||
| <div id="{{ctr._id}}-head" tabindex="-1" class="{{classes.head}}"> | ||
| {{#each ctr._headerItems}} | ||
| {{#if isSeparator}} | ||
| {{> renderTabSeparator}} | ||
| {{else}} | ||
| {{> renderTab}} | ||
| <div class="{{classes.header}}" id="{{ctr._id}}-header"> | ||
| <ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon> | ||
|
|
||
| <!-- tab items --> | ||
| <div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer"> | ||
| <ul role="tablist" class="{{classes.headerList}}"> | ||
| {{#each renderItems}} | ||
| {{#unless this.isSeparator}} | ||
| <li class="{{this.headerItemClasses}}" | ||
| id="{{this.item._id}}" | ||
| tabindex="{{this.item._tabIndex}}" | ||
| @click="{{../ctr._headerItem.click}}" | ||
| @keydown="{{../ctr._headerItem.keydown}}" | ||
| @keyup="{{../ctr._headerItem.keyup}}" | ||
| role="tab" | ||
| aria-posinset="{{this.position}}" | ||
| aria-setsize="{{../renderItems.length}}" | ||
| aria-controls="ui5-tc-contentItem-{{this.position}}" | ||
| aria-selected="{{this.selected}}" | ||
| aria-disabled="{{this.disabled}}" | ||
| disabled="{{this.disabled}}" | ||
| aria-labelledby="{{this.ariaLabelledBy}}" | ||
| > | ||
| {{#if this.isTextOnlyTab}} | ||
| {{> textOnlyTab}} | ||
| {{/if}} | ||
|
|
||
| {{#if this.isIconTab}} | ||
| {{> iconTab}} | ||
| {{/if}} | ||
|
|
||
| {{#if this.isMixedModeTab}} | ||
| {{> mixedModeTab}} | ||
| {{/if}} | ||
| </li> | ||
| {{/unless}} | ||
| {{#if this.isSeparator}} | ||
| <li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li> | ||
| {{/if}} | ||
| {{/each}} | ||
| </div> | ||
| </ul> | ||
| </div> | ||
| <ui5-icon | ||
| src="sap-icon://slim-arrow-right" | ||
| class="{{ctr._rightArrow.classes}}" | ||
| tabindex="-1"></ui5-icon> | ||
|
|
||
| <ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon> | ||
|
|
||
| <!-- overflow button --> | ||
| {{#if ctr.showOverflow}} | ||
| <ui5-button ._customAttributes="{{ctr._overflowButton._customAttributes}}" | ||
| id="{{ctr._id}}-overflow-button" | ||
| class="{{ctr._overflowButton.classes}}" | ||
| @press="{{ctr._overflowButton.onPress}}" | ||
| icon="sap-icon://slim-arrow-down" type="Transparent"></ui5-button> | ||
| <ui5-button | ||
| @press="{{ctr._overflowButton.click}}" | ||
| class="{{classes.overflowButton}}" | ||
| icon="sap-icon://slim-arrow-down" | ||
| type="Transparent" | ||
| ></ui5-button> | ||
| {{/if}} | ||
| </div> | ||
| <div id="{{ctr._id}}-containerContent" class="{{classes.content}}"> | ||
| <div id="{{ctr._id}}-content" class="sapMITBContent" role="tabpanel"> | ||
| {{#each ctr._selectedContent}} | ||
| <slot name="{{this._slot}}"></slot> | ||
| {{/each}} | ||
| </div> | ||
|
|
||
| <!-- content area --> | ||
| <div class="{{classes.content}}"> | ||
| {{#each renderItems}} | ||
| {{#unless this.isSeparator}} | ||
| <div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}"> | ||
| <slot name="{{this.item._slot}}"></slot> | ||
| </div> | ||
| {{/unless}} | ||
| {{/each}} | ||
| </div> | ||
| {{#if ctr.showOverflow}} | ||
| <ui5-popover id="{{ctr._id}}-popover" | ||
| hide-arrow | ||
| hide-header | ||
| placement-type="Bottom" | ||
| horizontal-align="Right"> | ||
| <ui5-list @itemPress="{{ctr._overflowList.onItemPress}}"> | ||
| {{#each ctr._overflowList.items}} | ||
| <ui5-li-custom id="{{this.id}}" | ||
| type="{{this.type}}" | ||
| selected="{{this.selected}}" | ||
| class="{{this.classes}}"> | ||
| <div class="{{this.innerClasses}}"> | ||
| {{#if this.content.icon}} | ||
| <ui5-icon src="{{this.content.icon}}" class="sapMITBSelectItemIcon"></ui5-icon> | ||
|
|
||
| <!-- overflow menu --> | ||
| <ui5-popover | ||
| id="{{ctr._id}}-overflowMenu" | ||
| hide-arrow | ||
| hide-header | ||
| placement-type="Bottom" | ||
| horizontal-align="Right"> | ||
| <ui5-list @itemPress="{{ctr._overflowList.click}}"> | ||
| {{#each renderItems}} | ||
| {{#unless this.isSeparator}} | ||
| <ui5-li-custom id="{{this.item._id}}" | ||
| class="{{this.overflowItemClasses}}" | ||
| type="{{this.overflowItemState}}" | ||
| selected="{{this.selected}}" | ||
| disabled="{{this.disabled}}" | ||
| > | ||
| <div class="{{this.overflowItemContentClasses}}"> | ||
| {{#if this.item.icon}} | ||
| <ui5-icon src="{{this.item.icon}}"></ui5-icon> | ||
| {{/if}} | ||
| {{#unless this.content._isNoText}} | ||
| <span class="sapMITBText sapMText sapMTextNoWrap">{{this.content.displayText}}</span> | ||
| {{/unless}} | ||
| {{#if this.content.isIconColorRead}} | ||
| <div id="{{this.content._id}}-iconColor" style="display: none;">{{this.content.iconColor}}</div> | ||
|
|
||
| {{this.item.text}} | ||
|
|
||
| {{#if this.item.additionalText}} | ||
| ({{this.item.additionalText}}) | ||
| {{/if}} | ||
| </div> | ||
| </ui5-li-custom> | ||
| {{/each}} | ||
| </ui5-list> | ||
| </ui5-popover> | ||
| {{/if}} | ||
| {{/unless}}s | ||
| {{/each}} | ||
| </ui5-list> | ||
| </ui5-popover> | ||
| </div> | ||
|
|
||
| {{#*inline "renderTab"}} | ||
| <div id="{{id}}" | ||
| tabindex="{{_tabIndex}}" | ||
| class="{{classes.main}}" | ||
| role="tab" | ||
| aria-selected="{{isSelected}}" | ||
| aria-disabled="{{isDisabled}}" | ||
| aria-posinset="{{posinset}}" | ||
| aria-setsize="{{setsize}}" | ||
| aria-controls="{{contentId}}" | ||
| aria-labelledby="{{labelledbyControls}}"> | ||
| {{#if showAll}} | ||
| <div id="{{id}}-tab" class="sapMITBTab"> | ||
| <span id="{{id}}-count" class="sapMITBCount"> | ||
| {{count}} | ||
| {{#*inline "textOnlyTab"}} | ||
| <div class="{{this.headerItemContentClasses}}"> | ||
| <span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text"> | ||
| <span class="{{this.headerItemSemanticIconClasses}}"></span> | ||
| {{this.item.text}} | ||
| </span> | ||
| </div> | ||
| {{#if displayText}} | ||
| <div id="{{id}}-text" class="sapMITBText"> | ||
| {{displayText}} | ||
| </div> | ||
| {{/if}} | ||
| {{else if isHorizontalDesign}} | ||
| <div id="{{id}}-tab" class="sapMITBTab"> | ||
| {{#if isIconColorRead}} | ||
| <div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div> | ||
| {{/if}} | ||
| {{#if icon}} | ||
| <ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon> | ||
| {{/if}} | ||
| </div> | ||
| <div class="sapMITBHorizontalWrapper"> | ||
| <span id="{{id}}-count" class="sapMITBCount"> | ||
| {{count}} | ||
| </span> | ||
| <div id="{{id}}-text" class="sapMITBText"> | ||
| {{displayText}} | ||
| </div> | ||
| </div> | ||
| {{else if isInline}} | ||
| <div id="{{id}}-text" class="sapMITBText"> | ||
| {{displayText}} | ||
| </div> | ||
| {{else if isNoIcon}} | ||
| <div id="{{id}}-tab" class="sapMITBTab"> | ||
| <span id="{{id}}-count" class="sapMITBCount"> | ||
| {{count}} | ||
|
|
||
| {{#if this.item.additionalText}} | ||
| <span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span> | ||
| {{/if}} | ||
| </div> | ||
| {{/inline}} | ||
|
|
||
| {{#*inline "iconTab"}} | ||
| <ui5-icon src="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon> | ||
|
|
||
| <div class="{{this.headerItemContentClasses}}"> | ||
| {{#if this.item.additionalText}} | ||
| <span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span> | ||
| {{/if}} | ||
|
|
||
| {{#if this.item.text}} | ||
| <span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text"> | ||
| <span class="{{this.headerItemSemanticIconClasses}}"></span> | ||
| {{this.item.text}} | ||
| </span> | ||
| </div> | ||
| {{#if displayText}} | ||
| <div id="{{id}}-text" class="sapMITBText"> | ||
| {{displayText}} | ||
| </div> | ||
| {{/if}} | ||
| {{else if isNoText}} | ||
| <div id="{{id}}-tab" class="sapMITBTab"> | ||
| {{#if isIconColorRead}} | ||
| <div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div> | ||
| {{/if}} | ||
| {{#if icon}} | ||
| <ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon> | ||
| {{/if}} | ||
| <span id="{{id}}-count" class="sapMITBCount"> | ||
| {{count}} | ||
| </span> | ||
| </div> | ||
| {{else}} | ||
| <div id="{{id}}-tab" class="sapMITBTab"> | ||
| {{#if isIconColorRead}} | ||
| <div id="{{id}}-iconColor" style="display: none;">{{iconColor}}</div> | ||
| {{/if}} | ||
| {{#if icon}} | ||
| <ui5-icon src="{{icon}}" class="sapMITBFilterIcon sapMITBFilter{{iconColor}}"></ui5-icon> | ||
| {{/if}} | ||
| <span id="{{id}}-count" class="sapMITBCount"> | ||
| {{count}} | ||
| </span> | ||
| </div> | ||
| <div id="{{id}}-text" class="sapMITBText"> | ||
| {{displayText}} | ||
| </div> | ||
| {{/if}} | ||
| <div class="sapMITBContentArrow"></div> | ||
| </div> | ||
| {{/inline}} | ||
|
|
||
| {{#*inline "renderTabSeparator"}} | ||
| <div role="separator" class="sapMITBItem sapMITBSep sapMITBSepLine"></div> | ||
| {{/inline}} | ||
| {{#*inline "mixedModeTab"}} | ||
| <div class="{{this.headerItemContentClasses}}"> | ||
| {{#if this.item.additionalText}} | ||
| <span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span> | ||
| {{/if}} | ||
|
|
||
| {{#if this.item.text}} | ||
| <span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text"> | ||
| <span class="{{this.headerItemSemanticIconClasses}}"></span> | ||
| {{this.item.text}} | ||
| </span> | ||
| {{/if}} | ||
| </div> | ||
| {{/inline}} |
Oops, something went wrong.