diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 7594a8a8c7..46354d4089 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -46,39 +46,6 @@ ion-app, } -@-webkit-keyframes rotation { - from { - -webkit-transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - } -} -@keyframes rotation { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } -} -ion-loading-icon { - display: flex; - align-self: center; - margin: auto; - - font-family: 'Ionicons'; - &:before { - content: "\f44e"; - } - font-size: 128px; - color: #666666; - - animation: rotation 45s infinite linear; - -webkit-animation: rotation 45s infinite linear; - -} - ion-nav { height: 100%; } @@ -115,9 +82,3 @@ ion-pane { flex: 1; order: $flex-order-view-content; } - -ion-toolbar { - display: flex; - min-height: 4.4rem; - background: white; -} diff --git a/ionic/components/app/util.scss b/ionic/components/app/util.scss index 2bd08cd556..fb39ef67ce 100755 --- a/ionic/components/app/util.scss +++ b/ionic/components/app/util.scss @@ -124,3 +124,30 @@ $swipe-handle-bottom: 70px !default; transform: translate3d(0px, 0px, 0px); } } + + +// Loading Icon +// -------------------------------------------------- + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} +ion-loading-icon { + display: flex; + align-self: center; + margin: auto; + + font-family: 'Ionicons'; + &:before { + content: "\f44e"; + } + font-size: 128px; + color: #666666; + + animation: rotation 45s infinite linear; +} diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index 03c6312507..85d34ade0e 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -9,7 +9,11 @@ $item-ios-accessory-color: #8e8e93 !default; $item-ios-border-color: $list-ios-border-color !default; -.item.item-ios { +.list-ios { + margin-top: -1px; +} + +.list-ios .item { background: $item-ios-background-color; min-height: $item-ios-min-height; padding-left: $item-ios-padding-left; diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 187dc929d9..8a94ee24c1 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -6,7 +6,10 @@ import {dom} from 'ionic/util'; @Component({ - selector: 'ion-item' + selector: 'ion-item', + host: { + 'class': 'item' + } }) @View({ template: ` diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index c12099f886..d5fb4eab06 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -1,5 +1,6 @@ import {ElementRef, onInit} from 'angular2/angular2'; +import {Ion} from '../ion'; import {IonicDirective} from '../../config/annotations'; import {ListVirtualScroll} from './virtual'; import * as util from 'ionic/util'; @@ -13,13 +14,15 @@ import * as util from 'ionic/util'; 'content' ] }) -export class List { +export class List extends Ion { constructor(elementRef: ElementRef) { + super(elementRef); this.ele = elementRef.nativeElement; } onInit() { - if(util.isDefined(this.virtual)) { + List.applyConfig(this); + if (util.isDefined(this.virtual)) { console.log('Content', this.content); console.log('Virtual?', this.virtual); console.log('Items?', this.items.length, 'of \'em'); diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss index 4aec6bc4fc..1ca46421c8 100644 --- a/ionic/components/nav-bar/nav-bar.scss +++ b/ionic/components/nav-bar/nav-bar.scss @@ -2,25 +2,10 @@ // Navbar // -------------------------------------------------- -$navbar-order: ( - back-button: 10, - title: 20, - primary: 30, - secondary: 40 -); - ion-navbar { + @extend ion-toolbar; position: absolute; - width: 100%; - height: 100%; - min-height: 4.4rem; - - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - order: $flex-order-toolbar-top; transform: translate3d(100%, 0px, 0px); &.show-navbar { @@ -28,13 +13,8 @@ ion-navbar { } } -.navbar-inner { - display: flex; - width: 100%; -} - .back-button { - order: map-get($navbar-order, 'back-button'); + order: 10; transform: translateZ(0px); display: none; @@ -47,43 +27,3 @@ ion-navbar { display: flex; align-items: center; } - -.navbar-title { - flex: 1; - order: map-get($navbar-order, 'title'); - - display: flex; - align-items: center; - - transform: translateZ(0px); -} - -.navbar-inner-title { - width: 100%; - padding: 0 15px; -} - -ion-title { - display: block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} - -.navbar-item { - transform: translateZ(0px); -} - -.navbar-primary-item { - order: map-get($navbar-order, 'primary'); -} - -.navbar-secondary-item { - order: map-get($navbar-order, 'secondary'); -} - -.navbar button, -.navbar [button] { - background: transparent; - border: none; -} diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index 2e9b11f9c2..4ff4e1cb2d 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -1,16 +1,18 @@ import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2'; import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref'; +import {Ion} from '../ion'; +import {IonicComponent} from '../../config/annotations'; import {ViewItem} from '../view/view-item'; import * as dom from '../../util/dom'; -@Component({ +@IonicComponent({ selector: 'ion-navbar' }) @View({ template: ` -
+
-
-
+
+
-
+
-
+
@@ -38,8 +40,9 @@ import * as dom from '../../util/dom'; forwardRef(() => NavbarItem) ] }) -export class Navbar { +export class Navbar extends Ion { constructor(item: ViewItem, elementRef: ElementRef) { + super(elementRef); this.eleRef = elementRef; this.itemEles = []; item.navbarView(this); @@ -48,6 +51,10 @@ export class Navbar { this.bbText = ''; } + onInit() { + Navbar.applyConfig(this); + } + element() { return this.eleRef; } @@ -90,8 +97,8 @@ export class Navbar { alignTitle() { // called after the navbar/title has had a moment to // finish rendering in their correct locations - const navbarEle = this.eleRef.nativeElement; - const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title')); + const toolbarEle = this.eleRef.nativeElement; + const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title')); // don't bother if there's no title element if (!titleEle) return; @@ -104,7 +111,7 @@ export class Navbar { // get all the dimensions const titleOffsetLeft = titleEle.offsetLeft; - const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); + const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); let marginLeft = 0; let marginRight = 0; @@ -119,7 +126,7 @@ export class Navbar { if ((marginLeft || marginRight) && margin !== this._ttMargin) { // only do an update if it has to - const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title')); + const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title')); innerTitleEle.style.margin = this._ttMargin = margin; } } @@ -161,20 +168,20 @@ class BackButtonText { } @Directive({ - selector: '.navbar-title' + selector: '.toolbar-title' }) class Title { - constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { - navbar.titleElement(elementRef); + constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) { + toolbar.titleElement(elementRef); } } @Directive({ - selector: '.navbar-item' + selector: '.toolbar-item' }) class NavbarItem { - constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { - navbar.itemElements(elementRef); + constructor(@Parent() toolbar: Navbar, elementRef: ElementRef) { + toolbar.itemElements(elementRef); } } diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index 4bce1df85a..32e7263f5e 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -54,8 +54,8 @@ export class Refresher { this.scrollChild = sc; this._touchMoveListener = this._handleTouchMove.bind(this); - this._touchEndListener = this._handleTouchEnd.bind(this)); - this._handleScrollListener = this._handleScroll.bind(this)); + this._touchEndListener = this._handleTouchEnd.bind(this); + this._handleScrollListener = this._handleScroll.bind(this); sc.addEventListener('touchmove', this._touchMoveListener); sc.addEventListener('touchend', this._touchEndListener); sc.addEventListener('scroll', this._handleScrollListener); diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index ec00d504c6..f79fb0d34c 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -1,5 +1,5 @@ -// Navbar +// Toolbar // -------------------------------------------------- $toolbar-order: ( @@ -10,14 +10,20 @@ $toolbar-order: ( ion-toolbar { + position: relative; + width: 100%; + height: 100%; + min-height: 4.4rem; + display: flex; flex-direction: row; align-items: center; justify-content: space-between; - position: relative; + order: $flex-order-toolbar-top; } .toolbar-inner { + display: flex; width: 100%; } @@ -27,7 +33,24 @@ ion-toolbar { display: flex; align-items: center; - margin: 0 0 2px; + + transform: translateZ(0px); +} + +.toolbar-inner-title { + width: 100%; + padding: 0 15px; +} + +ion-title { + display: block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.toolbar-item { + transform: translateZ(0px); } .toolbar-primary-item { @@ -38,24 +61,8 @@ ion-toolbar { order: map-get($toolbar-order, 'secondary'); } -ion-toolbar ion-title { - display: block; - overflow: hidden; -} - -.toolbar-inner-title { - width: 100%; - padding: 0 15px; - white-space: nowrap; - text-overflow: ellipsis; -} - .toolbar button, .toolbar [button] { background: transparent; border: none; } - -.toolbar-title-hide { - opacity: 0; -} diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 5383b6c9dd..98792089c6 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -10,23 +10,23 @@ import * as dom from '../../util/dom'; }) @View({ template: ` -
-
-
+
+
+
-
+
-
+
`, directives: [ - forwardRef(() => Title), - forwardRef(() => NavbarItem) + forwardRef(() => ToolbarTitle), + forwardRef(() => ToolbarItem) ] }) export class Toolbar extends Ion { @@ -68,8 +68,8 @@ export class Toolbar extends Ion { alignTitle() { // called after the navbar/title has had a moment to // finish rendering in their correct locations - const navbarEle = this.eleRef.nativeElement; - const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title')); + const toolbarEle = this.eleRef.nativeElement; + const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title')); // don't bother if there's no title element if (!titleEle) return; @@ -82,7 +82,7 @@ export class Toolbar extends Ion { // get all the dimensions const titleOffsetLeft = titleEle.offsetLeft; - const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); + const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); let marginLeft = 0; let marginRight = 0; @@ -97,7 +97,7 @@ export class Toolbar extends Ion { if ((marginLeft || marginRight) && margin !== this._ttMargin) { // only do an update if it has to - const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title')); + const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title')); innerTitleEle.style.margin = this._ttMargin = margin; } } @@ -106,9 +106,9 @@ export class Toolbar extends Ion { @Directive({ - selector: '.navbar-title' + selector: '.toolbar-title' }) -class Title { +class ToolbarTitle { constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) { toolbar.titleElement(elementRef); } @@ -116,9 +116,9 @@ class Title { @Directive({ - selector: '.navbar-item' + selector: '.toolbar-item' }) -class NavbarItem { +class ToolbarItem { constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) { toolbar.itemElements(elementRef); }