From 03246b672293e380acda74a3bcd7c06ff18fa852 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 21 Jul 2015 14:31:13 -0500 Subject: [PATCH] tab bar updates --- ionic/components/form/text-input.ts | 3 +- .../components/tabs/extensions/material.scss | 26 ++-- ionic/components/tabs/tabs.scss | 8 +- ionic/components/tabs/tabs.ts | 11 +- .../tabs/test/tab-bar-bottom/main.html | 2 +- .../tabs/test/tab-bar-icons/main.html | 112 ------------------ .../e2e.ts | 0 .../index.ts | 0 .../tabs/test/tab-bar-scenarios/main.html | 61 ++++++++++ ionic/components/toolbar/toolbar.scss | 1 + ionic/platform/registry.ts | 3 +- 11 files changed, 93 insertions(+), 134 deletions(-) delete mode 100644 ionic/components/tabs/test/tab-bar-icons/main.html rename ionic/components/tabs/test/{tab-bar-icons => tab-bar-scenarios}/e2e.ts (100%) rename ionic/components/tabs/test/{tab-bar-icons => tab-bar-scenarios}/index.ts (100%) create mode 100644 ionic/components/tabs/test/tab-bar-scenarios/main.html diff --git a/ionic/components/form/text-input.ts b/ionic/components/form/text-input.ts index 0fc17624ac..5fae28d999 100644 --- a/ionic/components/form/text-input.ts +++ b/ionic/components/form/text-input.ts @@ -95,7 +95,7 @@ export class TextInput extends IonInput { if (scrollView && this.scrollAssist) { // this input is inside of a scroll view // scroll the input to the top - let inputY = this.elementRef.nativeElement.offsetTop - 15; + let inputY = this.elementRef.nativeElement.offsetTop - SCROLL_Y_PADDING; // do not allow any clicks while it's scrolling ClickBlock(true, SCROLL_INTO_VIEW_DURATION + 200); @@ -158,3 +158,4 @@ export class TextInput extends IonInput { } const SCROLL_INTO_VIEW_DURATION = 500; +const SCROLL_Y_PADDING = 28; diff --git a/ionic/components/tabs/extensions/material.scss b/ionic/components/tabs/extensions/material.scss index 149cf6c2f4..eba6ba2170 100644 --- a/ionic/components/tabs/extensions/material.scss +++ b/ionic/components/tabs/extensions/material.scss @@ -2,27 +2,23 @@ // Material Design Tabs // -------------------------------------------------- -$tab-bar-material-item-padding: 4px 10px !default; -$tab-bar-material-active-border-width: 3px !default; -$tab-bar-material-active-border-color: red !default; -$tab-bar-material-text-transform: uppercase !default; -$tab-bar-material-text-font-weight: 500 !default; +$tab-bar-md-item-padding: 0 10px !default; +$tab-bar-md-item-font-size: 1.4rem !default; .tabs[mode="md"] { - .tab-bar-item { - padding: $tab-bar-material-item-padding; - text-transform: $tab-bar-material-text-transform; - font-weight: $tab-bar-material-text-font-weight; + button.tab-button { + padding: $tab-bar-md-item-padding; + font-size: $tab-bar-md-item-font-size; + + box-shadow: none; + border-radius: 0; + white-space: normal; } - .tab-bar .tab-bar-item { - border-bottom: $tab-bar-material-active-border-width solid transparent; - } - - .tab-bar .tab-active { - border-bottom-color: $tab-bar-material-active-border-color; + .tab-button-text { + white-space: normal; } } diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss index d01c8d3a9a..3da317ba08 100644 --- a/ionic/components/tabs/tabs.scss +++ b/ionic/components/tabs/tabs.scss @@ -116,11 +116,13 @@ button.tab-button { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + display: none; } -.tab-bar-icon-only .tab-button-text, -.tab-bar-text-only .tab-button-icon { - display: none; +.has-icon .tab-button-icon, +.has-title .tab-button-text { + display: block; } button.tab-button[aria-selected="true"] { diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index bb23f41f5f..fda654217f 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -119,6 +119,10 @@ export class Tabs extends ViewController { '[attr.id]': 'btnId', '[attr.aria-controls]': 'panelId', '[attr.aria-selected]': 'tab.isSelected', + '[class.has-title]': 'hasTitle', + '[class.has-icon]': 'hasIcon', + '[class.has-title-only]': 'hasTitleOnly', + '[class.has-icon-only]': 'hasIconOnly', '(^click)': 'onClick($event)' } }) @@ -128,9 +132,14 @@ class TabButton { } onInit() { - let id = this.tab.item.id + let id = this.tab.item.id; this.btnId = 'tab-button-' + id; this.panelId = 'tab-panel-' + id; + + this.hasTitle = !!this.tab.tabTitle; + this.hasIcon = !!this.tab.tabIcon; + this.hasTitleOnly = (this.hasTitle && !this.hasIcon); + this.hasIconOnly = (this.hasIcon && !this.hasTitle); } onClick(ev) { diff --git a/ionic/components/tabs/test/tab-bar-bottom/main.html b/ionic/components/tabs/test/tab-bar-bottom/main.html index 9f44e5d8ed..477a463388 100644 --- a/ionic/components/tabs/test/tab-bar-bottom/main.html +++ b/ionic/components/tabs/test/tab-bar-bottom/main.html @@ -1,5 +1,5 @@ - + diff --git a/ionic/components/tabs/test/tab-bar-icons/main.html b/ionic/components/tabs/test/tab-bar-icons/main.html deleted file mode 100644 index 9f8e5e1447..0000000000 --- a/ionic/components/tabs/test/tab-bar-icons/main.html +++ /dev/null @@ -1,112 +0,0 @@ - - diff --git a/ionic/components/tabs/test/tab-bar-icons/e2e.ts b/ionic/components/tabs/test/tab-bar-scenarios/e2e.ts similarity index 100% rename from ionic/components/tabs/test/tab-bar-icons/e2e.ts rename to ionic/components/tabs/test/tab-bar-scenarios/e2e.ts diff --git a/ionic/components/tabs/test/tab-bar-icons/index.ts b/ionic/components/tabs/test/tab-bar-scenarios/index.ts similarity index 100% rename from ionic/components/tabs/test/tab-bar-icons/index.ts rename to ionic/components/tabs/test/tab-bar-scenarios/index.ts diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html new file mode 100644 index 0000000000..3cc06eb384 --- /dev/null +++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index f4c8b2fb32..34bbada9c1 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -27,6 +27,7 @@ $toolbar-title-text-color: #000 !default; align-items: center; justify-content: space-between; order: $flex-order-toolbar-top; + flex: 0; background-color: $toolbar-background; diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index c97405599f..31b0ecc26f 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -57,7 +57,8 @@ Platform.register({ type: 'overlay', keyboardScrollAssist: true, viewTransition: 'md', - mdRipple: true + mdRipple: true, + tabBarPlacement: 'top' }, isMatch(p) { // "silk" is kindle fire