Skip to content

Commit ddda809

Browse files
perrygovierperrygovier
committed
feat(tabs): Expand striped android style tab functionality. Closes 1694
1 parent 848c78d commit ddda809

File tree

8 files changed

+367
-49
lines changed

8 files changed

+367
-49
lines changed

Diff for: ‎js/angular/directive/headerFooterBar.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ function headerFooterBarDirective(isHeader) {
125125
restrict: 'E',
126126
compile: function($element, $attr) {
127127
$element.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer');
128-
128+
var parent = $element[0].parentNode;
129+
if(parent.querySelector('.tabs-top'))$element.addClass('has-tabs-top');
129130
return { pre: prelink };
130131
function prelink($scope, $element, $attr) {
131132
var hb = new ionic.views.HeaderBar({

Diff for: ‎scss/_bar.scss

+3
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,9 @@
312312
top: 0;
313313
border-top-width: 0;
314314
border-bottom-width: 1px;
315+
&.has-tabs-top{
316+
border-bottom-width: 0px;
317+
}
315318
}
316319

317320
// Footer at bottom

Diff for: ‎scss/_tabs.scss

+134-46
Original file line numberDiff line numberDiff line change
@@ -88,65 +88,143 @@
8888
@include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
8989
}
9090

91-
@mixin tabs-striped($style, $color) {
91+
@mixin tabs-striped($style, $color, $background) {
9292
&.#{$style} {
93-
.tab-item.tab-item-active,
94-
.tab-item.active,
95-
.tab-item.activated {
96-
margin-top: -4px;
97-
color: $color;
98-
border-style: solid;
99-
border-width: $tabs-striped-border-width 0 0 0;
100-
border-color: $color;
93+
.tabs{
94+
background-color: $background;
95+
}
96+
.tab-item {
97+
color: rgba($color, $tabs-striped-off-opacity);
98+
opacity: 1;
99+
.badge{
100+
opacity:$tabs-striped-off-opacity;
101+
}
102+
&.tab-item-active,
103+
&.active,
104+
&.activated {
105+
margin-top: -$tabs-striped-border-width;
106+
color: $color;
107+
border-style: solid;
108+
border-width: $tabs-striped-border-width 0 0 0;
109+
border-color: $color;
110+
.badge{
111+
top:$tabs-striped-border-width;
112+
opacity: 1;
113+
}
114+
}
115+
}
116+
}
117+
&.tabs-top{
118+
.tab-item {
119+
&.tab-item-active,
120+
&.active,
121+
&.activated {
122+
.badge {
123+
top: 4%;
124+
}
125+
}
101126
}
102127
}
103128
}
104129

105-
.tabs-striped {
130+
@mixin tabs-background($style, $color) {
131+
&.#{$style} {
132+
.tabs {
133+
background-color: $color;
134+
}
135+
}
136+
}
137+
138+
@mixin tabs-color($style, $color) {
139+
&.#{$style} {
140+
.tab-item {
141+
color: rgba($color, $tabs-striped-off-opacity);
142+
opacity: 1;
143+
.badge{
144+
opacity:$tabs-striped-off-opacity;
145+
}
146+
&.tab-item-active,
147+
&.active,
148+
&.activated {
149+
margin-top: -$tabs-striped-border-width;
150+
color: $color;
151+
border: 0 solid $color;
152+
border-top-width: $tabs-striped-border-width;
153+
.badge{
154+
top:$tabs-striped-border-width;
155+
opacity: 1;
156+
}
157+
}
158+
}
159+
}
160+
}
106161

162+
.tabs-striped {
107163
.tabs {
108164
background-color: white;
109165
background-image: none;
110166
border: none;
167+
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
168+
padding-top: $tabs-striped-border-width;
111169
}
112-
113-
@include tabs-striped('tabs-light', $light);
114-
@include tabs-striped('tabs-stable', $stable);
115-
@include tabs-striped('tabs-positive', $positive);
116-
@include tabs-striped('tabs-calm', $calm);
117-
@include tabs-striped('tabs-assertive', $assertive);
118-
@include tabs-striped('tabs-balanced', $balanced);
119-
@include tabs-striped('tabs-energized', $energized);
120-
@include tabs-striped('tabs-royal', $royal);
121-
@include tabs-striped('tabs-dark', $dark);
122-
123-
&.tabs-icon-only .icon {
124-
}
125-
126-
.tab-item {
127-
color: $tabs-striped-off-color;
128-
opacity: $tabs-striped-off-opacity;
129-
}
130-
.tab-item + .tab-item:before {
131-
border-left: 1px solid #ccc;
132-
display: block;
133-
float: left;
134-
width: 2px;
135-
height: 26px;
136-
margin: 11px auto;
137-
content: " ";
138-
}
139-
170+
@include tabs-striped('tabs-light', $light, $dark);
171+
@include tabs-striped('tabs-stable', $stable, $dark);
172+
@include tabs-striped('tabs-positive', $positive, $light);
173+
@include tabs-striped('tabs-calm', $calm, $light);
174+
@include tabs-striped('tabs-assertive', $assertive, $light);
175+
@include tabs-striped('tabs-balanced', $balanced, $light);
176+
@include tabs-striped('tabs-energized', $energized, $light);
177+
@include tabs-striped('tabs-royal', $royal, $light);
178+
@include tabs-striped('tabs-dark', $dark, $light);
179+
180+
181+
@include tabs-background('tabs-background-light', $light);
182+
@include tabs-background('tabs-background-stable', $stable);
183+
@include tabs-background('tabs-background-positive', $positive);
184+
@include tabs-background('tabs-background-calm', $calm);
185+
@include tabs-background('tabs-background-assertive', $assertive);
186+
@include tabs-background('tabs-background-balanced', $balanced);
187+
@include tabs-background('tabs-background-energized',$energized);
188+
@include tabs-background('tabs-background-royal', $royal);
189+
@include tabs-background('tabs-background-dark', $dark);
190+
191+
@include tabs-color('tabs-color-light', $light);
192+
@include tabs-color('tabs-color-stable', $stable);
193+
@include tabs-color('tabs-color-positive', $positive);
194+
@include tabs-color('tabs-color-calm', $calm);
195+
@include tabs-color('tabs-color-assertive', $assertive);
196+
@include tabs-color('tabs-color-balanced', $balanced);
197+
@include tabs-color('tabs-color-energized',$energized);
198+
@include tabs-color('tabs-color-royal', $royal);
199+
@include tabs-color('tabs-color-dark', $dark);
140200
}
141201

142202
.tabs-top {
143203
&.tabs-striped {
144-
.tab-item.tab-item-active,
145-
.tab-item.active,
146-
.tab-item.activated {
147-
margin-top: 0;
148-
margin-bottom: -4px;
149-
border-width: 0px 0px $tabs-striped-border-width 0px !important;
204+
padding-bottom:0;
205+
.tab-item{
206+
background: transparent;
207+
// animate the top bar, leave bottom for platform consistency
208+
-webkit-transition: all .1s ease;
209+
-moz-transition: all .1s ease;
210+
-ms-transition: all .1s ease;
211+
-o-transition: all .1s ease;
212+
transition: all .1s ease;
213+
&.tab-item-active,
214+
&.active,
215+
&.activated {
216+
margin-top: 0;
217+
margin-bottom: -$tabs-striped-border-width;
218+
border-width: 0px 0px $tabs-striped-border-width 0px !important;
219+
border-style: solid;
220+
}
221+
.badge{
222+
-webkit-transition: all .2s ease;
223+
-moz-transition: all .2s ease;
224+
-ms-transition: all .2s ease;
225+
-o-transition: all .2s ease;
226+
transition: all .2s ease;
227+
}
150228
}
151229
}
152230
}
@@ -157,9 +235,19 @@
157235
.tabs.tabs-top {
158236
top: $bar-height;
159237
padding-top: 0;
160-
padding-bottom: 2px;
161238
background-position: bottom;
162-
239+
.tab-item {
240+
&.tab-item-active,
241+
&.active,
242+
&.activated {
243+
.badge {
244+
top: 4%;
245+
}
246+
}
247+
}
248+
}
249+
.tabs-top ~ .bar-header {
250+
border-bottom-width: 0;
163251
}
164252

165253
.tab-item {

Diff for: ‎scss/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ $tab-item-max-width: 150px !default;
278278

279279
$tabs-striped-off-color: #000;
280280
$tabs-striped-off-opacity: 0.4;
281-
$tabs-striped-border-width: 4px;
281+
$tabs-striped-border-width: 2px;
282282

283283

284284
// Items

Diff for: ‎test/css/headers-android.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html ng-app="ionic">
3+
<head>
4+
<script src="../../dist/js/ionic.bundle.js"></script>
5+
<meta charset="utf-8">
6+
<title>Header</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
8+
<link href="../../dist/css/ionic.css" rel="stylesheet">
9+
<script src="../../dist/js/ionic.bundle.js"></script>
10+
</head>
11+
<body>
12+
13+
<ion-header-bar align-title="left" class="bar-positive">
14+
<div class="buttons">
15+
<button class="button" ng-click="doSomething()">Left Button</button>
16+
</div>
17+
<h1 class="title">Title!</h1>
18+
<div class="buttons">
19+
<button class="button">Right Button</button>
20+
</div>
21+
</ion-header-bar>
22+
<div class="tabs-background-positive tabs-color-stable tabs-top tabs-striped">
23+
<nav class="tabs">
24+
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
25+
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
26+
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
27+
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
28+
</nav>
29+
</div>
30+
<div class="view tabs-dark tabs-striped">
31+
<nav class="tabs">
32+
<a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
33+
<a class="tab-item"><i class="icon ion-locked"></i>Security</a>
34+
<a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
35+
<a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
36+
</nav>
37+
</div>
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)