feat(tabs): Expand striped android style tab functionality. Closes 1694

js/angular/directive/headerFooterBar.js

@@ -125,7 +125,8 @@ function headerFooterBarDirective(isHeader) {
       restrict: 'E',
       compile: function($element, $attr) {
         $element.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer');
-
+        var parent = $element[0].parentNode;
+        if(parent.querySelector('.tabs-top'))$element.addClass('has-tabs-top');
         return { pre: prelink };
         function prelink($scope, $element, $attr) {
           var hb = new ionic.views.HeaderBar({

scss/_bar.scss

@@ -312,6 +312,9 @@
   top: 0;
   border-top-width: 0;
   border-bottom-width: 1px;
+  &.has-tabs-top{
+    border-bottom-width: 0px;
+  }
 }
 
 // Footer at bottom

scss/_tabs.scss

@@ -88,65 +88,143 @@
   @include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
 }
 
-@mixin tabs-striped($style, $color) {
+@mixin tabs-striped($style, $color, $background) {
   &.#{$style} {
-    .tab-item.tab-item-active,
-    .tab-item.active,
-    .tab-item.activated {
-      margin-top: -4px;
-      color: $color;
-      border-style: solid;
-      border-width: $tabs-striped-border-width 0 0 0;
-      border-color: $color;
+    .tabs{
+      background-color: $background;
+    }
+    .tab-item {
+      color: rgba($color, $tabs-striped-off-opacity);
+      opacity: 1;
+      .badge{
+        opacity:$tabs-striped-off-opacity;
+      }
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: -$tabs-striped-border-width;
+        color: $color;
+        border-style: solid;
+        border-width: $tabs-striped-border-width 0 0 0;
+        border-color: $color;
+        .badge{
+          top:$tabs-striped-border-width;
+          opacity: 1;
+        }
+      }
+    }
+  }
+  &.tabs-top{
+    .tab-item {
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        .badge {
+          top: 4%;
+        }
+      }
+    }
+  }
+}
+
+@mixin tabs-background($style, $color) {
+  &.#{$style} {
+    .tabs {
+      background-color: $color;
+    }
+  }
+}
+
+@mixin tabs-color($style, $color) {
+  &.#{$style} {
+    .tab-item {
+      color: rgba($color, $tabs-striped-off-opacity);
+      opacity: 1;
+      .badge{
+        opacity:$tabs-striped-off-opacity;
+      }
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: -$tabs-striped-border-width;
+        color: $color;
+        border: 0 solid $color;
+        border-top-width: $tabs-striped-border-width;
+        .badge{
+          top:$tabs-striped-border-width;
+          opacity: 1;
+        }
+      }
     }
   }
 }
 
 .tabs-striped {
-
   .tabs {
     background-color: white;
     background-image: none;
     border: none;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
+    padding-top: $tabs-striped-border-width;
   }
+  @include tabs-striped('tabs-light', $light, $dark);
+  @include tabs-striped('tabs-stable', $stable, $dark);
+  @include tabs-striped('tabs-positive', $positive, $light);
+  @include tabs-striped('tabs-calm', $calm, $light);
+  @include tabs-striped('tabs-assertive', $assertive, $light);
+  @include tabs-striped('tabs-balanced', $balanced, $light);
+  @include tabs-striped('tabs-energized', $energized, $light);
+  @include tabs-striped('tabs-royal', $royal, $light);
+  @include tabs-striped('tabs-dark', $dark, $light);
 
-  @include tabs-striped('tabs-light', $light);
-  @include tabs-striped('tabs-stable', $stable);
-  @include tabs-striped('tabs-positive', $positive);
-  @include tabs-striped('tabs-calm', $calm);
-  @include tabs-striped('tabs-assertive', $assertive);
-  @include tabs-striped('tabs-balanced', $balanced);
-  @include tabs-striped('tabs-energized', $energized);
-  @include tabs-striped('tabs-royal', $royal);
-  @include tabs-striped('tabs-dark', $dark);
 
-  &.tabs-icon-only .icon {
-  }
-
-  .tab-item {
-    color: $tabs-striped-off-color;
-    opacity: $tabs-striped-off-opacity;
-  }
-  .tab-item + .tab-item:before {
-    border-left: 1px solid #ccc;
-    display: block;
-    float: left;
-    width: 2px;
-    height: 26px;
-    margin: 11px auto;
-    content: " ";
-  }
+  @include tabs-background('tabs-background-light', $light);
+  @include tabs-background('tabs-background-stable', $stable);
+  @include tabs-background('tabs-background-positive', $positive);
+  @include tabs-background('tabs-background-calm', $calm);
+  @include tabs-background('tabs-background-assertive', $assertive);
+  @include tabs-background('tabs-background-balanced', $balanced);
+  @include tabs-background('tabs-background-energized',$energized);
+  @include tabs-background('tabs-background-royal', $royal);
+  @include tabs-background('tabs-background-dark', $dark);
 
+  @include tabs-color('tabs-color-light', $light);
+  @include tabs-color('tabs-color-stable', $stable);
+  @include tabs-color('tabs-color-positive', $positive);
+  @include tabs-color('tabs-color-calm', $calm);
+  @include tabs-color('tabs-color-assertive', $assertive);
+  @include tabs-color('tabs-color-balanced', $balanced);
+  @include tabs-color('tabs-color-energized',$energized);
+  @include tabs-color('tabs-color-royal', $royal);
+  @include tabs-color('tabs-color-dark', $dark);
 }
 
 .tabs-top {
   &.tabs-striped {
-    .tab-item.tab-item-active,
-    .tab-item.active,
-    .tab-item.activated {
-      margin-top: 0;
-      margin-bottom: -4px;
-      border-width: 0px 0px $tabs-striped-border-width 0px !important;
+    padding-bottom:0;
+    .tab-item{
+      background: transparent;
+      // animate the top bar, leave bottom for platform consistency
+      -webkit-transition: all .1s ease;
+      -moz-transition: all .1s ease;
+      -ms-transition: all .1s ease;
+      -o-transition: all .1s ease;
+      transition: all .1s ease;
+      &.tab-item-active,
+      &.active,
+      &.activated {
+        margin-top: 0;
+        margin-bottom: -$tabs-striped-border-width;
+        border-width: 0px 0px $tabs-striped-border-width 0px !important;
+        border-style: solid;
+      }
+      .badge{
+        -webkit-transition: all .2s ease;
+        -moz-transition: all .2s ease;
+        -ms-transition: all .2s ease;
+        -o-transition: all .2s ease;
+        transition: all .2s ease;
+      }
     }
   }
 }
@@ -157,9 +235,19 @@
 .tabs.tabs-top {
   top: $bar-height;
   padding-top: 0;
-  padding-bottom: 2px;
   background-position: bottom;
-
+  .tab-item {
+    &.tab-item-active,
+    &.active,
+    &.activated {
+      .badge {
+        top: 4%;
+      }
+    }
+  }
+}
+.tabs-top ~ .bar-header {
+  border-bottom-width: 0;
 }
 
 .tab-item {

scss/_variables.scss

@@ -278,7 +278,7 @@ $tab-item-max-width:              150px !default;
 
 $tabs-striped-off-color: #000;
 $tabs-striped-off-opacity: 0.4;
-$tabs-striped-border-width: 4px;
+$tabs-striped-border-width: 2px;
 
 
 // Items

test/css/headers-android.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Header</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+    <script src="../../dist/js/ionic.bundle.js"></script>
+  </head>
+  <body>
+
+  <ion-header-bar align-title="left" class="bar-positive">
+    <div class="buttons">
+      <button class="button" ng-click="doSomething()">Left Button</button>
+    </div>
+    <h1 class="title">Title!</h1>
+    <div class="buttons">
+      <button class="button">Right Button</button>
+    </div>
+  </ion-header-bar>
+  <div class="tabs-background-positive tabs-color-stable tabs-top tabs-striped">
+    <nav class="tabs">
+      <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+      <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+      <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+      <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+    </nav>
+  </div>
+  <div class="view tabs-dark tabs-striped">
+    <nav class="tabs">
+      <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+      <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+      <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+      <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+    </nav>
+  </div>
+  </body>
+</html>

test/css/tabs-android.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Tabs: Android Colors</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      .tabs, .view{
+        position:relative !important;
+      }
+      .spacer{
+        margin-top: 100px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-positive has-tabs-top">
+      <h1 class="title">Android Tab Bars</h1>
+    </header>
+
+    <div class="tabs-background-positive tabs-color-energized tabs-top tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+
+    <div class="tabs-light tabs-top  tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-stable tabs-top tabs-background-balanced tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-positive tabs-top tabs-background-assertive tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-calm tabs-top tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-assertive tabs-top tabs-background-dark tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-balanced tabs-top tabs-background-calm tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-energized tabs-top tabs-background-royal tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-royal tabs-top tabs-background-stable tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="tabs-dark tabs-top tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+
+
+
+    <div class="view tabs-light tabs-striped spacer">
+      <nav class="tabs ">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-stable tabs-background-balanced tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-color-positive tabs-background-dark tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-calm tabs-background-royal tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-assertive tabs-background-energized tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-color-balanced tabs-background-positive tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-energized tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-royal tabs-background-assertive tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+    <div class="view tabs-dark tabs-striped">
+      <nav class="tabs">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
+  </body>
+</html>

test/css/test.scenario.js

@@ -29,6 +29,7 @@ describe('css', function() {
     "form-simple",
     "grid",
     "headers",
+    "headers-android",
     "input-checkbox",
     "input-radio",
     "input-range",
@@ -48,6 +49,7 @@ describe('css', function() {
     "search",
     "split-pane",
     "tabs-and-cards",
+    "tabs-android",
     "tabs-default",
     "tabs-icons-bottom",
     "tabs-icons-left",

test/unit/angular/directive/headerFooterBar.unit.js

@@ -97,7 +97,7 @@ describe('bar directives', function() {
           this.align = jasmine.createSpy('align');
         };
         inject(function($compile, $rootScope) {
-          el = angular.element('<'+data.tag+' '+(attrs||'')+'>');
+          el = angular.element('<'+data.tag+' '+(attrs||'')+'></'+data.tag+'><div class="tabs-top"></div>');
           el = $compile(el)($rootScope.$new());
           $rootScope.$apply();
         });
@@ -159,6 +159,10 @@ describe('bar directives', function() {
           scope.$apply('$hasTabs = false');
           expect(el.hasClass('has-tabs')).toBe(false);
         });
+        it('.has-tabs-top', function() {
+          var el = setup();
+          expect(el.hasClass('has-tabs-top')).toBe(true);
+        });
       }
 
       it('should compile to ' + data.className, function() {