tab bar updates

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;

ionic/components/tabs/extensions/material.scss

@@ -2,27 +2,23 @@
 // Material Design Tabs
 // --------------------------------------------------
 
-$tab-bar-material-item-padding:              4px 10px !default;
+$tab-bar-md-item-padding:             0 10px !default;
-$tab-bar-material-active-border-width:       3px !default;
+$tab-bar-md-item-font-size:           1.4rem !default;
-$tab-bar-material-active-border-color:       red !default;
-$tab-bar-material-text-transform:            uppercase !default;
-$tab-bar-material-text-font-weight:          500 !default;
 
 
 .tabs[mode="md"] {
 
-  .tab-bar-item {
+  button.tab-button {
-    padding: $tab-bar-material-item-padding;
+    padding: $tab-bar-md-item-padding;
-    text-transform: $tab-bar-material-text-transform;
+    font-size: $tab-bar-md-item-font-size;
-    font-weight: $tab-bar-material-text-font-weight;
+
+    box-shadow: none;
+    border-radius: 0;
+    white-space: normal;
   }
 
-  .tab-bar .tab-bar-item {
+  .tab-button-text {
-    border-bottom: $tab-bar-material-active-border-width solid transparent;
+    white-space: normal;
-  }
-
-  .tab-bar .tab-active {
-    border-bottom-color: $tab-bar-material-active-border-color;
   }
 
 }

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,
+.has-icon .tab-button-icon,
-.tab-bar-text-only .tab-button-icon {
+.has-title .tab-button-text {
-  display: none;
+  display: block;
 }
 
 button.tab-button[aria-selected="true"] {

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) {

ionic/components/tabs/test/tab-bar-bottom/main.html

@@ -1,5 +1,5 @@
 
-<ion-tabs placement="bottom">
+<ion-tabs tab-bar-placement="bottom">
 
   <ion-tab tab-title="Tab 1">
     <ion-view nav-title="Tab 1">

ionic/components/tabs/test/tab-bar-icons/main.html

@@ -1,112 +0,0 @@
-
-<div style="margin: 4px 0">
-
-  <h6>Icon Top of Text (Default)</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-  <h6>Icon Bottom of Text</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar tab-bar-icon-bottom">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-  <h6>Icon Left of Text</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar tab-bar-icon-left">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-  <h6>Icon Right of Text</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar tab-bar-icon-right">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-  <h6>Icon Only</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar tab-bar-icon-only">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-  <h6>Text Only</h6>
-  <div class="tab-bar-container toolbar-ios">
-    <div class="tab-bar tab-bar-text-only">
-      <a class="tab-bar-item tab-active">
-        <icon class="tab-bar-item-icon ion-home"></icon>
-        <span class="tab-bar-item-text">Home</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-star"></icon>
-        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
-      </a>
-      <a class="tab-bar-item">
-        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
-        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
-      </a>
-    </div>
-  </div>
-
-</div>

ionic/components/tabs/test/tab-bar-scenarios/main.html

@@ -0,0 +1,61 @@
+
+<ion-tabs>
+  <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
+  <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
+  <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
+  <ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs tab-bar-icons="bottom">
+  <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
+  <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
+  <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
+  <ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs tab-bar-icons="right">
+  <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
+  <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
+  <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
+  <ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs tab-bar-icons="left">
+  <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline"></ion-tab>
+  <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline"></ion-tab>
+  <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline"></ion-tab>
+  <ion-tab tab-title="Gear" tab-icon="ion-ios-gear-outline"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs>
+  <ion-tab tab-icon="ion-ios-heart-outline"></ion-tab>
+  <ion-tab tab-icon="ion-ios-star-outline"></ion-tab>
+  <ion-tab tab-icon="ion-ios-stopwatch-outline"></ion-tab>
+  <ion-tab tab-icon="ion-ios-gear-outline"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs>
+  <ion-tab tab-title="Heart"></ion-tab>
+  <ion-tab tab-title="Star"></ion-tab>
+  <ion-tab tab-title="Stopwatch"></ion-tab>
+  <ion-tab tab-title="Gear"></ion-tab>
+</ion-tabs>
+
+
+<ion-tabs>
+  <ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
+  <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
+  <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
+</ion-tabs>
+
+
+<style>
+  ion-tabs {
+    height: auto;
+  }
+</style>

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;
 

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