tab structure updates

This commit is contained in:
Adam Bradley
2015-04-10 13:45:04 -05:00
parent 737e311be5
commit a5aeaf41da
6 changed files with 58 additions and 46 deletions

View File

@ -14,7 +14,7 @@ html {
padding: 0;
.nav-viewport {
// container of many nav-views, which each contain one view
// container of many .nav-views, each .nav-view contains one view
position: absolute;
top: 0;
right: 0;
@ -22,18 +22,9 @@ html {
left: 0;
width: 100%;
height: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 50px;
@include flex-display();
@include flex-direction(column);
}
.toolbar-container {
@ -43,21 +34,42 @@ html {
min-height: 50px;
}
.toolbar {
// one view's toolbar, sibling to many view toolbars insde of .toolbar-container
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nav-pane-container {
// container of many .nav-pane's, each one containing one view
position: relative;
@include flex(1);
}
.tab-pane-container {
// container of each content for each tab component within a tabs component
position: relative;
width: 100%;
height: 100%;
}
.nav-pane {
// container of one view
// container of one .pane,
position: absolute;
width: 100%;
height: 100%;
background: white;
}
.nav-pane-cover-parent {
// .nav-pane that should completely cover siblings and parent
top: -50px;
height: 100vh;
}
.pane {
// user created view, contained by .nav-pane
position: absolute;

View File

@ -21,23 +21,11 @@ import {IonicComponent} from 'ionic2/config/component'
})
@Template({
inline: `
<header class="toolbar-container">
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
</header>
<nav class="nav-tab-bar">
<!-- SHARED TAB BAR FOR EACH TAB CONTAINER -->
</nav>
<div class="nav-pane-container">
<!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
<!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
<section class="nav-pane" *for="#item of getRawNavStack()" [item]="item"></section>
</div>
`,
directives: [For, NavPane]
})

View File

@ -11,9 +11,12 @@ import {IonicComponent} from 'ionic2/config/component'
})
@Template({
inline: `
<div class="tab-bar"
[class.tab-bar-top]="placement=='top'"
[class.tab-bar-bottom]="placement=='bottom'">
<header class="toolbar-container">
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
</header>
<nav class="tab-bar">
<div class="tab-bar-container">
<a *for="#tab of tabs"
class="tab-bar-item"
@ -26,8 +29,11 @@ import {IonicComponent} from 'ionic2/config/component'
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
</a>
</div>
</div>
</nav>
<section class="tab-pane-container">
<content></content>
</section>
`,
directives: [For]
})
@ -36,7 +42,11 @@ export class Tabs {
@NgElement() ngElement: NgElement
) {
this.domElement = ngElement.domElement
this.domElement.classList.add('pane')
// should be used to cover up sibling .nav-pane's and it's parent
this.domElement.classList.add('nav-pane-cover-parent')
// .tab-bar-top/bottom should be added to the entire element when specified
this.config = Tabs.config.invoke(this)
this.tabs = []

View File

@ -2,12 +2,22 @@
// Tabs
// --------------------------------------------------
$tab-bar-min-height: 66px !default;
$tab-bar-background-color: #f7f7f8 !default;
$tab-bar-item-padding: 10px !default;
$tab-bar-item-min-width: 100px !default;
.toolbar.tab-bar {
.tabs {
@include flex-display();
@include flex-direction(column);
height: 100%;
}
.tab-bar {
@include flex-justify-content(center);
min-height: $tab-bar-min-height;
background: $tab-bar-background-color;
}
.tab-bar-container {

View File

@ -30,7 +30,7 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
<content select="ion-nav-items[side=secondary]"></content>
</div>
</div>
<div class="shared-toolbar"></div>`,
`,
directives: [BackButton]
})
export class Toolbar {

View File

@ -71,11 +71,3 @@ $toolbar-background: #f7f7f8 !default;
@include flex-order(4);
}
.shared-toolbar {
display: none;
width: 100%;
height: 44px;
background: red;
}