From ecd1ca168a97cbdb392f41a10c462e190b1e28f9 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 19 Mar 2015 11:07:18 -0500 Subject: [PATCH] tabs --- gulpfile.js | 4 +- playground/layouts/tabs.html | 8 +- playground/layouts/view.css | 8 +- playground/tabs/index.html | 37 +++++++++ playground/tabs/main.html | 16 ++++ playground/tabs/main.js | 18 +++++ src/components/app/_util.scss | 4 + src/components/app/ionic.scss | 12 +-- .../button/{_button.scss => button.scss} | 0 src/components/tabbar/_tabbar.scss | 0 .../tabbar/mixins/android/android-tabbar.html | 0 .../tabbar/mixins/android/android-tabbar.js | 9 --- .../tabbar/mixins/android/android-tabbar.scss | 8 -- .../tabbar/mixins/placement/placement.js | 0 .../tabbar/mixins/placement/placement.scss | 0 .../tabbar/mixins/placement/placement.spec.js | 0 src/components/tabbar/tabbar.js | 29 ------- src/components/tabs/tabs.js | 81 +++++++++++++++++++ src/components/tabs/tabs.scss | 2 + src/components/view/view.js | 1 + 20 files changed, 178 insertions(+), 59 deletions(-) create mode 100644 playground/tabs/index.html create mode 100644 playground/tabs/main.html create mode 100644 playground/tabs/main.js create mode 100644 src/components/app/_util.scss rename src/components/button/{_button.scss => button.scss} (100%) delete mode 100644 src/components/tabbar/_tabbar.scss delete mode 100644 src/components/tabbar/mixins/android/android-tabbar.html delete mode 100644 src/components/tabbar/mixins/android/android-tabbar.js delete mode 100644 src/components/tabbar/mixins/android/android-tabbar.scss delete mode 100644 src/components/tabbar/mixins/placement/placement.js delete mode 100644 src/components/tabbar/mixins/placement/placement.scss delete mode 100644 src/components/tabbar/mixins/placement/placement.spec.js delete mode 100644 src/components/tabbar/tabbar.js create mode 100644 src/components/tabs/tabs.js create mode 100644 src/components/tabs/tabs.scss diff --git a/gulpfile.js b/gulpfile.js index d5dda3105d..b92a8cb94e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,7 +17,7 @@ var config = { src: { js: ['src/**/*.js', '!src/**/*.spec.js'], html: 'src/**/*.html', - scss: 'src/**/*.scss', + scss: 'src/components/**/*.scss', playgroundJs: 'playground/**/*.js', playgroundFiles: ['playground/**/*', '!playground/**/*.js'], }, @@ -41,7 +41,7 @@ gulp.task('watch', ['default'], function () { gulp.watch(config.src.html, ['html']); gulp.watch(config.src.js, ['js']); - gulp.watch(config.src.sass, ['sass']); + gulp.watch(config.src.scss, ['sass']); gulp.watch(config.src.playgroundJs, ['playgroundJs']); gulp.watch(config.src.playgroundFiles, ['playgroundFiles']); diff --git a/playground/layouts/tabs.html b/playground/layouts/tabs.html index 186bcf5380..fd22f65eaa 100644 --- a/playground/layouts/tabs.html +++ b/playground/layouts/tabs.html @@ -10,10 +10,10 @@ Tabs -
- - - +
+ + +
diff --git a/playground/layouts/view.css b/playground/layouts/view.css index 85e493c297..4bf90f3d7e 100644 --- a/playground/layouts/view.css +++ b/playground/layouts/view.css @@ -3,8 +3,12 @@ body { } .tool-bar button { - position: absolute; - right: 0; + /*position: absolute; + right: 0;*/ +} + +.tab-bar .tab-item { + color: blue; } .tool-bar { diff --git a/playground/tabs/index.html b/playground/tabs/index.html new file mode 100644 index 0000000000..f0b649b71c --- /dev/null +++ b/playground/tabs/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + Loading... + + + + + diff --git a/playground/tabs/main.html b/playground/tabs/main.html new file mode 100644 index 0000000000..163d6cd8a8 --- /dev/null +++ b/playground/tabs/main.html @@ -0,0 +1,16 @@ + + + + Home Content + + + + + About Content + + + + Contact Content + + + diff --git a/playground/tabs/main.js b/playground/tabs/main.js new file mode 100644 index 0000000000..bc9228d33a --- /dev/null +++ b/playground/tabs/main.js @@ -0,0 +1,18 @@ +import {bootstrap} from 'angular2/core'; +import {Component, Template} from 'angular2/angular2'; +import {View, Content} from 'ionic/components/view/view'; +import {Tabs, Tab} from 'ionic/components/tabs/tabs'; + + +@Component({ selector: '[ion-app]' }) +@Template({ + url: 'main.html', + directives: [Tabs, Tab, View, Content] +}) +class IonicApp { + constructor() { + console.log('IonicApp Start'); + } +} + +bootstrap(IonicApp) diff --git a/src/components/app/_util.scss b/src/components/app/_util.scss new file mode 100644 index 0000000000..514a985cd0 --- /dev/null +++ b/src/components/app/_util.scss @@ -0,0 +1,4 @@ + +.hide.hide.hide { + display: none; +} diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index 49fe7c3028..1e1c60dd36 100644 --- a/src/components/app/ionic.scss +++ b/src/components/app/ionic.scss @@ -11,13 +11,15 @@ @import "normalize", "globals", + "util", "scaffolding", "typography"; // Components -@import "../button/button"; -@import "../tabbar/tabbar"; -@import "../modal/modal"; -@import "../sidemenu/sidemenu"; -@import "../switch/switch"; +@import + "../button/button", + "../modal/modal", + "../sidemenu/sidemenu", + "../switch/switch", + "../tabs/tabs"; diff --git a/src/components/button/_button.scss b/src/components/button/button.scss similarity index 100% rename from src/components/button/_button.scss rename to src/components/button/button.scss diff --git a/src/components/tabbar/_tabbar.scss b/src/components/tabbar/_tabbar.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabbar/mixins/android/android-tabbar.html b/src/components/tabbar/mixins/android/android-tabbar.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabbar/mixins/android/android-tabbar.js b/src/components/tabbar/mixins/android/android-tabbar.js deleted file mode 100644 index b4154d1519..0000000000 --- a/src/components/tabbar/mixins/android/android-tabbar.js +++ /dev/null @@ -1,9 +0,0 @@ - -import {TabbarConfig} from '../../tabbar'; -// import {Draggable} from '/behaviors/draggable' - -TabbarConfig.platform('android') - .template('./android-template.html') - .mixin(function(tabbar) { - }); - diff --git a/src/components/tabbar/mixins/android/android-tabbar.scss b/src/components/tabbar/mixins/android/android-tabbar.scss deleted file mode 100644 index 9e22e17461..0000000000 --- a/src/components/tabbar/mixins/android/android-tabbar.scss +++ /dev/null @@ -1,8 +0,0 @@ -.tabbar.with-inkbar { - - .inkbar { - bottom: 0; - height: 3px; - color: yellow; - } -} diff --git a/src/components/tabbar/mixins/placement/placement.js b/src/components/tabbar/mixins/placement/placement.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabbar/mixins/placement/placement.scss b/src/components/tabbar/mixins/placement/placement.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabbar/mixins/placement/placement.spec.js b/src/components/tabbar/mixins/placement/placement.spec.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/components/tabbar/tabbar.js b/src/components/tabbar/tabbar.js deleted file mode 100644 index 7989e08e3f..0000000000 --- a/src/components/tabbar/tabbar.js +++ /dev/null @@ -1,29 +0,0 @@ -import {Component, Template} from 'angular2/angular2'; -import {Inject} from 'angular2/di'; -import {Ion} from '../ion'; -import {IonConfigService} from '../../config'; - -export var TabbarConfig = new IonConfigService(); - -@Component({ - selector: 'ion-tabbar', - bind: { - title: 'view-title' - }, - services: [TabbarConfig] -}) -@Template({ - inline: `` -}) -export class Tabbar extends Ion { - constructor( - config: TabbarConfig - ) { - this.$config = config; - super(); - } -} - - diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js new file mode 100644 index 0000000000..802318b0af --- /dev/null +++ b/src/components/tabs/tabs.js @@ -0,0 +1,81 @@ +import {NgElement, Component, Template, Parent} from 'angular2/angular2'; +import {Ion} from '../ion'; + + +@Component({ + selector: 'ion-tabs' +}) +@Template({ + inline: ` +
+ Tabs +
+ +
+ 1 + 2 + 3 +
+ +
+ + + +
+ ` +}) +export class Tabs extends Ion { + + constructor(@NgElement() ele:NgElement) { + ele.domElement.classList.add('view'); + ele.domElement.classList.add('tabs-container'); + + this.tabs = []; + } + + add(tab) { + this.tabs.push(tab); + tab.show(this.tabs.length === 1); + } + +} + + +@Component({ + selector: 'ion-tab', + bind: { + tabTitle: 'tab-title' + } +}) +@Template({ + inline: ` +
+
+
+ +
+
+
+ ` +}) +export class Tab extends Ion { + + constructor(@NgElement() ele:NgElement, @Parent() tabs: Tabs) { + this.ele = ele; + + ele.domElement.classList.add('view'); + ele.domElement.classList.add('tab-view'); + + tabs.add(this); + + setTimeout(() => { + // HACK!!!!! "this" doesn't have tabTitle when not in setTimeout + console.log(this.tabTitle) + }) + + } + + show(shouldShow) { + this.ele.domElement.classList[shouldShow ? 'remove' : 'add']('hide'); + } +} diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss new file mode 100644 index 0000000000..139597f9cb --- /dev/null +++ b/src/components/tabs/tabs.scss @@ -0,0 +1,2 @@ + + diff --git a/src/components/view/view.js b/src/components/view/view.js index c9a4e018d8..f14397828c 100644 --- a/src/components/view/view.js +++ b/src/components/view/view.js @@ -37,6 +37,7 @@ export class View extends Ion { }) export class Content extends Ion { constructor(@NgElement() ele:NgElement) { + console.log('content!') ele.domElement.classList.add('content'); } }