diff --git a/src/components/tabs/extensions/android.scss b/src/components/tabs/extensions/android.scss index fbe17abcfb..ae043e25e1 100644 --- a/src/components/tabs/extensions/android.scss +++ b/src/components/tabs/extensions/android.scss @@ -2,7 +2,9 @@ // Android Toolbar // -------------------------------------------------- -$tab-bar-android-item-padding: 4px 10px !default; +$tab-bar-android-item-padding: 4px 10px !default; +$tab-bar-android-active-border-width: 3px !default; +$tab-bar-android-active-border-color: red !default; .tabs-android { @@ -11,4 +13,12 @@ $tab-bar-android-item-padding: 4px 10px !default; padding: $tab-bar-item-padding; } + .tab-bar .tab-bar-item { + border-bottom: $tab-bar-android-active-border-width solid transparent; + } + + .tab-bar .tab-active { + border-bottom-color: $tab-bar-android-active-border-color; + } + } diff --git a/src/components/tabs/extensions/ios.scss b/src/components/tabs/extensions/ios.scss index bc03a842a7..13d92c6a66 100644 --- a/src/components/tabs/extensions/ios.scss +++ b/src/components/tabs/extensions/ios.scss @@ -3,8 +3,8 @@ // -------------------------------------------------- $tab-bar-ios-item-padding: 3px 10px !default; -$tab-bar-ios-item-font-size: 11px !default; -$tab-bar-ios-item-icon-size: 28px !default; +$tab-bar-ios-item-font-size: 1.1rem !default; +$tab-bar-ios-item-icon-size: 2.8rem !default; .tabs-ios { @@ -25,4 +25,8 @@ $tab-bar-ios-item-icon-size: 28px !default; @include hairline(top, $toolbar-ios-border-color); } + > .tab-bar.toolbar-top { + @include hairline(bottom, $toolbar-ios-border-color); + } + } diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index e3a18ba80d..f936b28e6f 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -22,16 +22,20 @@ import {IonicComponent} from 'ionic2/config/component' - +
+ +
`, directives: [For] }) export class Tabs { constructor( - element: NgElement + @NgElement() ngElement: NgElement ) { - this.domElement = element.domElement + this.domElement = ngElement.domElement + this.domElement.classList.add('pane') + this.config = Tabs.config.invoke(this) this.tabs = [] diff --git a/src/components/tabs/test/tab-bar-bottom/e2e.js b/src/components/tabs/test/tab-bar-bottom/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/tabs/test/tab-bar-bottom/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/tabs/test/tab-bar-bottom/main.html b/src/components/tabs/test/tab-bar-bottom/main.html new file mode 100644 index 0000000000..557f1017cd --- /dev/null +++ b/src/components/tabs/test/tab-bar-bottom/main.html @@ -0,0 +1,20 @@ + + + + + + + + Tab 1 Content + + + + + + Tab 2 Content + + + + + + diff --git a/src/components/tabs/test/tab-bar-bottom/main.js b/src/components/tabs/test/tab-bar-bottom/main.js new file mode 100644 index 0000000000..7e020f891a --- /dev/null +++ b/src/components/tabs/test/tab-bar-bottom/main.js @@ -0,0 +1,17 @@ +import {bootstrap} from 'angular2/core'; +import {Component, Template} from 'angular2/angular2'; +import {View, Tabs, Tab} from 'ionic2/components'; + + +@Component({ selector: '[ion-app]' }) +@Template({ + url: 'main.html', + directives: [View, Tabs, Tab] +}) +class IonicApp { + constructor() { + console.log('IonicApp Start') + } +} + +bootstrap(IonicApp) diff --git a/src/components/tabs/test/tab-bar-top/e2e.js b/src/components/tabs/test/tab-bar-top/e2e.js new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/src/components/tabs/test/tab-bar-top/e2e.js @@ -0,0 +1 @@ + diff --git a/src/components/tabs/test/tab-bar-top/main.html b/src/components/tabs/test/tab-bar-top/main.html new file mode 100644 index 0000000000..1240876476 --- /dev/null +++ b/src/components/tabs/test/tab-bar-top/main.html @@ -0,0 +1,16 @@ + + + + + + Tab 1 Content + + + + + + Tab 2 Content + + + + diff --git a/src/components/tabs/test/tab-bar-top/main.js b/src/components/tabs/test/tab-bar-top/main.js new file mode 100644 index 0000000000..7e020f891a --- /dev/null +++ b/src/components/tabs/test/tab-bar-top/main.js @@ -0,0 +1,17 @@ +import {bootstrap} from 'angular2/core'; +import {Component, Template} from 'angular2/angular2'; +import {View, Tabs, Tab} from 'ionic2/components'; + + +@Component({ selector: '[ion-app]' }) +@Template({ + url: 'main.html', + directives: [View, Tabs, Tab] +}) +class IonicApp { + constructor() { + console.log('IonicApp Start') + } +} + +bootstrap(IonicApp) diff --git a/src/components/toolbar/test/lopsided-buttons/main.html b/src/components/toolbar/test/lopsided-buttons/main.html index 312ece973d..00e38757a8 100644 --- a/src/components/toolbar/test/lopsided-buttons/main.html +++ b/src/components/toolbar/test/lopsided-buttons/main.html @@ -11,4 +11,36 @@ + +

+ A long time ago, in a galaxy far, + far away.... +

+

+ It is a period of civil war. + Rebel spaceships, striking + from a hidden base, have won + their first victory against + the evil Galactic Empire. +

+

+ During the battle, rebel + spies managed to steal secret + plans to the Empire's + ultimate weapon, the DEATH + STAR, an armored space + station with enough power to + destroy an entire planet. +

+

+ Pursued by the Empire's + sinister agents, Princess + Leia races home aboard her + starship, custodian of the + stolen plans that can save + her people and restore + freedom to the galaxy.... +

+ + diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js index b0724df570..ad580d5339 100644 --- a/src/components/toolbar/toolbar.js +++ b/src/components/toolbar/toolbar.js @@ -29,12 +29,13 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
- `, + +
`, directives: [BackButton] }) export class Toolbar { constructor( - @NgElement() ngEle:NgElement, + @NgElement() ngEle:NgElement, configFactory: ToolbarConfig ) { this.domElement = ngEle.domElement diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index b91a3d8055..b76f19b448 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -71,3 +71,12 @@ $toolbar-background: #f7f7f8 !default; .toolbar-secondary-item { @include flex-order(4); } + + + +.shared-toolbar { + display: none; + width: 100%; + height: 44px; + background: red; +} diff --git a/src/components/view/view.js b/src/components/view/view.js index 2d4df09b27..afacb89ad5 100644 --- a/src/components/view/view.js +++ b/src/components/view/view.js @@ -13,7 +13,7 @@ export let ViewConfig = new ComponentConfig('view') }) @Template({ inline: ` - + diff --git a/src/webview/browser/browser.js b/src/webview/node-webkit/node-webkit.js similarity index 100% rename from src/webview/browser/browser.js rename to src/webview/node-webkit/node-webkit.js diff --git a/src/webview/node-webkit/node-webkit.scss b/src/webview/node-webkit/node-webkit.scss new file mode 100644 index 0000000000..e69de29bb2