From 8cfebe13866f44fca176de2f1de787c1e565d642 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 26 Feb 2016 16:44:32 -0500 Subject: [PATCH] refactor(tabs): remove tabbarIcons and add tabbarLayout which accepts different values BREAKING CHANGES: `tabbarIcons` has been replaced with `tabbarLayout` with the following values: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`. closes #5625 --- demos/tabs/main.html | 8 +++---- ionic/components/tabs/tabs.ios.scss | 11 ++++----- ionic/components/tabs/tabs.md.scss | 8 ++++--- ionic/components/tabs/tabs.scss | 18 ++++++++------ ionic/components/tabs/tabs.ts | 22 ++++++++++++----- ionic/components/tabs/test/badges/main.html | 8 +++---- .../tabs/test/tab-bar-scenarios/main.html | 24 +++++++++---------- ionic/config/config.ts | 1 + 8 files changed, 57 insertions(+), 43 deletions(-) diff --git a/demos/tabs/main.html b/demos/tabs/main.html index 710fea0b3a..6a0f7adaa0 100644 --- a/demos/tabs/main.html +++ b/demos/tabs/main.html @@ -28,7 +28,7 @@ - + @@ -36,7 +36,7 @@ - + @@ -44,7 +44,7 @@ - + @@ -52,7 +52,7 @@ - + diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss index 5360743cb4..4842e4439e 100644 --- a/ionic/components/tabs/tabs.ios.scss +++ b/ionic/components/tabs/tabs.ios.scss @@ -59,8 +59,8 @@ ion-tabs[tabbarPlacement=top] tabbar { } } -[tabbarIcons=right] .tab-button, -[tabbarIcons=left] .tab-button { +[tabbarLayout=icon-right] .tab-button, +[tabbarLayout=icon-left] .tab-button { .tab-button-text { font-size: 1.4rem; @@ -76,11 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar { } } -[tabbarIcons=hide] .tab-button-text { - font-size: 1.4rem; - line-height: 1.1; -} - +[tabbarLayout=icon-hide] .tab-button, .tab-button.has-title-only { min-height: $tabbar-ios-height - 8; @@ -90,6 +86,7 @@ ion-tabs[tabbarPlacement=top] tabbar { } } +[tabbarLayout=title-hide] .tab-button, .tab-button.icon-only { min-height: $tabbar-ios-height - 8; } diff --git a/ionic/components/tabs/tabs.md.scss b/ionic/components/tabs/tabs.md.scss index 502df86763..ff7430c2ac 100644 --- a/ionic/components/tabs/tabs.md.scss +++ b/ionic/components/tabs/tabs.md.scss @@ -49,13 +49,13 @@ tabbar { min-width: $tabbar-md-item-icon-size + 5; } -[tabbarIcons=bottom] .tab-button { +[tabbarLayout=icon-bottom] .tab-button { padding-top: 8px; padding-bottom: 8px; } -[tabbarIcons=right] .tab-button, -[tabbarIcons=left] .tab-button { +[tabbarLayout=icon-right] .tab-button, +[tabbarLayout=icon-left] .tab-button { padding-bottom: 10px; ion-icon { @@ -63,6 +63,8 @@ tabbar { } } +[tabbarLayout=icon-hide] .tab-button, +[tabbarLayout=title-hide] .tab-button, .tab-button.icon-only, .tab-button.has-title-only { padding: 6px 10px 6px 10px; diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index 535ae3d866..7d5866ceba 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -108,13 +108,13 @@ tab-highlight { display: none; } -[tabbarIcons=bottom] .tab-button { +[tabbarLayout=icon-bottom] .tab-button { .tab-button-icon { order: 10; } } -[tabbarIcons=left] .tab-button { +[tabbarLayout=icon-left] .tab-button { flex-direction: row; .tab-button-icon { @@ -123,7 +123,7 @@ tab-highlight { } } -[tabbarIcons=right] .tab-button { +[tabbarLayout=icon-right] .tab-button { flex-direction: row; .tab-button-icon { @@ -133,7 +133,11 @@ tab-highlight { } } -[tabbarIcons=hide] .tab-button-icon { +[tabbarLayout=icon-hide] .tab-button-icon { + display: none; +} + +[tabbarLayout=title-hide] .tab-button-text { display: none; } @@ -155,8 +159,8 @@ tab-highlight { right: calc(50% - 30px); } -[tabbarIcons=bottom] .tab-badge, -[tabbarIcons=left] .tab-badge, -[tabbarIcons=right] .tab-badge { +[tabbarLayout=icon-bottom] .tab-badge, +[tabbarLayout=icon-left] .tab-badge, +[tabbarLayout=icon-right] .tab-badge { right: calc(50% - 50px); } diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index f9321583c9..a9996a8afa 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -90,27 +90,32 @@ export class Tabs extends Ion { subPages: boolean; /** - * @input {number} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab. + * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab. */ @Input() selectedIndex: any; /** - * @input {boolean} Sets whether to preload all the tabs, true or false + * @input {boolean} Set whether to preload all the tabs: `true`, `false`. */ @Input() preloadTabs: any; /** - * @input {string} set the position of the tabbar's icons: top, bottom, left, right, hide + * @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`. */ @Input() tabbarIcons: string; /** - * @input {string} Set position of the tabbar, top or bottom + * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`. + */ + @Input() tabbarLayout: string; + + /** + * @input {string} Set position of the tabbar: `top`, `bottom`. */ @Input() tabbarPlacement: string; /** - * @input {any} expression you want to evaluate when the tabs change + * @input {any} Expression to evaluate when the tab changes. */ @Output() change: EventEmitter = new EventEmitter(); @@ -162,8 +167,13 @@ export class Tabs extends Ion { */ ngAfterViewInit() { this._setConfig('tabbarPlacement', 'bottom'); + this._setConfig('tabbarLayout', 'icon-top'); this._setConfig('tabbarIcons', 'top'); + if (this.tabbarIcons) { + console.warn("DEPRECATION WARNING: 'tabbarIcons' is no longer supported and will be removed in next major release. Use 'tabbarLayout' instead. Available values: 'icon-top', 'icon-left', 'icon-right', 'icon-bottom', 'icon-hide', 'title-hide'."); + } + if (this._useHighlight) { this._platform.onResize(() => { this._highlight.select(this.getSelected()); @@ -201,7 +211,7 @@ export class Tabs extends Ion { private _setConfig(attrKey, fallback) { var val = this[attrKey]; if (isUndefined(val)) { - val = this._config.get(attrKey); + val = this._config.get(attrKey, fallback); } this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val); } diff --git a/ionic/components/tabs/test/badges/main.html b/ionic/components/tabs/test/badges/main.html index 736b4c8dc7..521d7607c8 100644 --- a/ionic/components/tabs/test/badges/main.html +++ b/ionic/components/tabs/test/badges/main.html @@ -24,7 +24,7 @@ - + @@ -32,21 +32,21 @@ - + - + - + diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html index a221a414d3..e71c0bd045 100644 --- a/ionic/components/tabs/test/tab-bar-scenarios/main.html +++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html @@ -24,7 +24,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -40,7 +40,7 @@ - + @@ -48,7 +48,15 @@ - + + + + + + + + + @@ -61,11 +69,3 @@ - - - - - - - - diff --git a/ionic/config/config.ts b/ionic/config/config.ts index d098fb6c70..0f11e5e377 100644 --- a/ionic/config/config.ts +++ b/ionic/config/config.ts @@ -101,6 +101,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util'; * | pageTransitionDelay | 16 | 120 | * | tabbarPlacement | bottom | top | * | tabbarHighlight | | top | + * | tabbarLayout | | | * | tabSubPages | | true | * **/