Skip to content

Commit

Permalink
feat(tabs): Expand striped android style tab functionality. Closes 1694
Browse files Browse the repository at this point in the history
  • Loading branch information
@perrygovier
perrygovier committed Jul 30, 2014
1 parent 848c78d commit ddda809
Show file tree
Hide file tree
Showing 8 changed files with 367 additions and 49 deletions.
3 changes: 2 additions & 1 deletion js/angular/directive/headerFooterBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
3 changes: 3 additions & 0 deletions scss/_bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,6 +312,9 @@
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
&.has-tabs-top{
border-bottom-width: 0px;
}
}

// Footer at bottom
Expand Down
180 changes: 134 additions & 46 deletions scss/_tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}
}
}
}

.tabs-striped {
@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);
@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-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-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;
}
}
}
}
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
39 changes: 39 additions & 0 deletions test/css/headers-android.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit ddda809

Please sign in to comment.