Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-tabcontainer): add tabLayout property #1214

Merged
merged 8 commits into from
Feb 18, 2020
Merged

feat(ui5-tabcontainer): add tabLayout property #1214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
215e0bc
feat(ui5-tab): add design property
ilhan007 Feb 12, 2020
9eaec00
add playground sample
ilhan007 Feb 12, 2020
6059b27
address comments
ilhan007 Feb 17, 2020
e57f9d9
fix typos
ilhan007 Feb 17, 2020
1a7002e
typo
ilhan007 Feb 17, 2020
c8a6f0f
update samples
ilhan007 Feb 17, 2020
b7235e9
update API doc
ilhan007 Feb 17, 2020
5e50d1c
update sample
ilhan007 Feb 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 22 additions & 33 deletions packages/main/src/TabContainer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,10 @@
?disabled="{{this.disabled}}"
aria-labelledby="{{this.ariaLabelledBy}}"
>
{{#if this.isTextOnlyTab}}
{{> textOnlyTab}}
{{/if}}

{{#if this.isIconTab}}
{{> iconTab}}
{{/if}}

{{#if this.isMixedModeTab}}
{{> mixedModeTab}}
{{#if this.isInline}}
{{> inlineTab}}
{{else}}
{{> standardTab}}
{{/if}}
</li>
{{/unless}}
Expand Down Expand Up @@ -71,23 +65,12 @@
</div>
</div>

{{#*inline "textOnlyTab"}}
<div class="{{this.headerItemContentClasses}}">
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
<span class="{{this.headerItemSemanticIconClasses}}"></span>
{{this.item.text}}
</span>

{{#if this.item.additionalText}}
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span>
{{/if}}
</div>
{{/inline}}

{{#*inline "iconTab"}}
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
</div>
{{#*inline "standardTab"}}
{{#if this.item.icon}}
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
</div>
{{/if}}

<div class="{{this.headerItemContentClasses}}">
{{#if this.item.additionalText}}
Expand All @@ -103,17 +86,23 @@
</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}}
{{#*inline "inlineTab"}}
{{#if this.item.icon}}
fifoosid marked this conversation as resolved.
Show resolved Hide resolved
<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
</div>
{{/if}}

<div class="{{this.headerItemContentClasses}}">
{{#if this.item.text}}
<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
<span class="{{this.headerItemSemanticIconClasses}}"></span>
{{this.item.text}}
</span>
{{/if}}

{{#if this.item.additionalText}}
<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
{{/if}}
</div>
{{/inline}}
{{/inline}}
34 changes: 31 additions & 3 deletions packages/main/src/TabContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopov
import tabContainerCss from "./generated/themes/TabContainer.css.js";
import tabContainerPopoverCss from "./generated/themes/TabContainerPopup.css.js";
import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
import TabLayout from "./types/TabLayout.js";

const SCROLL_STEP = 128;

Expand All @@ -51,7 +52,7 @@ const metadata = {
},
properties: /** @lends sap.ui.webcomponents.main.TabContainer.prototype */ {
/**
* Determines whether the tabs are in a fixed state that is not
* Defines whether the tabs are in a fixed state that is not
* expandable/collapsible by user interaction.
*
* @type {Boolean}
Expand All @@ -63,7 +64,7 @@ const metadata = {
},

/**
* Determines whether the tab content is collapsed.
* Defines whether the tab content is collapsed.
*
* @type {Boolean}
* @defaultvalue false
Expand All @@ -74,7 +75,7 @@ const metadata = {
},

/**
* Specifies if the overflow select list is displayed.
* Defines whether the overflow select list is displayed.
* <br><br>
* The overflow select list represents a list, where all tab filters are displayed
* so that it's easier for the user to select a specific tab filter.
Expand All @@ -87,6 +88,28 @@ const metadata = {
type: Boolean,
},

/**
* Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.
* <br>
* <b>Note:</b>
* The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt,
* but when set to <code>Inline</code>, they would be displayed horizontally.
* <br><br>
* Available options are:
* <ul>
* <li><code>Standard</code></li>
* <li><code>Inline</code></li>
* <ul>
*
* @type {String}
* @defaultvalue "Standard"
* @public
*/
tabLayout: {
type: String,
defaultValue: TabLayout.Standard,
},

_selectedTab: {
type: Object,
},
Expand Down Expand Up @@ -226,6 +249,7 @@ class TabContainer extends UI5Element {

return {
item,
isInline: this.tabLayout === TabLayout.Inline,
isMixedModeTab: !item.icon && this.mixedMode,
isTextOnlyTab: !item.icon && !this.mixedMode,
isIconTab: item.icon,
Expand Down Expand Up @@ -491,6 +515,10 @@ const calculateHeaderItemClasses = (item, mixedMode) => {
classes.push("ui5-tc__headerItem--disabled");
}

if (item.tabLayout === TabLayout.Inline) {
classes.push("ui5-tc__headerItem--inline");
}

if (!item.icon && !mixedMode) {
classes.push("ui5-tc__headerItem--textOnly");
}
Expand Down
16 changes: 14 additions & 2 deletions packages/main/src/themes/TabContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,12 @@
}

.ui5-tc__headerItem--withIcon:focus .ui5-tc-headerItemIcon-outer,
.ui5-tc__headerItem--textOnly:not(.ui5-tc__headerItem--inline):focus .ui5-tc__headerItemText {
ilhan007 marked this conversation as resolved.
Show resolved Hide resolved
outline: var(--_ui5_tc_headerItem_focus_border);
}

.ui5-tc__headerItem--mixedMode:focus .ui5-tc__headerItemContent,
.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
.ui5-tc__headerItem--inline.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
outline: var(--_ui5_tc_headerItem_focus_border);
}

Expand Down Expand Up @@ -161,10 +165,18 @@
text-shadow: none;
}

.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
.ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
display: block;
}

.ui5-tc__headerItem--inline .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
display: inline;
}

.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
margin-top: var(--_ui5_tc_item_add_text_margin_top);
}

/*** END Icon and text Tab styles ***/

/*** TextOnly Tab styles ***/
Expand Down
40 changes: 40 additions & 0 deletions packages/main/src/types/TabLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";

/**
* @lends sap.ui.webcomponents.main.types.TabLayout.prototype
* @public
*/
const TabLayouts = {
/**
* Inline type, the tab <code>main text</code> and <code>additionalText</code> are displayed horizotally.
* @public
* @type {Inline}
*/
Inline: "Inline",

/**
* Standard type, the tab <code>main text</code> and <code>additionalText</code> are displayed vertically.
* @public
* @type {Standard}
*/
Standard: "Standard",
};

/**
* @class
* Different types of Tab layouts.
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.types.TabLayout
* @public
* @enum {string}
*/
class TabLayout extends DataType {
static isValid(value) {
return !!TabLayouts[value];
}
}

TabLayout.generataTypeAcessors(TabLayouts);

export default TabLayout;
45 changes: 41 additions & 4 deletions packages/main/test/pages/TabContainer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,34 @@ <h2>Text only</h2>
<h2>Icon and Text</h2>

<ui5-tabcontainer show-overflow="true">
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123" selected>
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
<div style="height: 300px">
<h4>Content with set height: 300px</h4>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</div>
</ui5-tab>
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444">
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</section>

<section>
<h2>Icon and Text with tabLayout="Inline"</h2>

<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
<div style="height: 300px">
<h4>Content with set height: 300px</h4>
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</div>
</ui5-tab>
<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
Expand All @@ -246,11 +266,11 @@ <h4>Content with set height: 300px</h4>
<h2>Text and additional text</h2>

<ui5-tabcontainer show-overflow="true">
<ui5-tab text="Tab 1" additional-text="additional" selected>
<ui5-tab text="Tab 1" additional-text="additional">
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 2" additional-text="additional">
<ui5-tab text="Tab 2" additional-text="additional" selected>
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Tab 3" additional-text="additional">
Expand All @@ -259,6 +279,23 @@ <h2>Text and additional text</h2>
</ui5-tabcontainer>
</section>

<section>
<h2>Text and additional text with tabLayout="Inline"</h2>

<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
<ui5-tab text="Monitors" additional-text="10">
<ui5-button>Button 11</ui5-button>
<ui5-button>Button 12</ui5-button>
</ui5-tab>
<ui5-tab text="Cameras" additional-text="2" selected>
<ui5-button>Button 2</ui5-button>
</ui5-tab>
<ui5-tab text="Rooms" additional-text="16">
<ui5-button>Button 3</ui5-button>
</ui5-tab>
</ui5-tabcontainer>
</section>

<section>
<h2>Tabs with input elements</h2>

Expand Down
Loading