From ba6cc11bc1a24050ab2edac880023d0384452ff1 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 22 Jul 2015 10:49:54 -0500 Subject: [PATCH] toolbar scenario examples --- ionic/components/button/button.scss | 3 +- ionic/components/icon/icon.ts | 19 +++-- ionic/components/nav-bar/nav-bar.ts | 75 +----------------- ionic/components/toolbar/extensions/ios.scss | 6 -- .../toolbar/extensions/material.scss | 12 +-- .../components/toolbar/test/scenarios/e2e.ts | 1 + .../toolbar/test/scenarios/index.ts | 7 ++ .../toolbar/test/scenarios/main.html | 32 ++++++++ ionic/components/toolbar/toolbar-buttons.scss | 20 +++++ ionic/components/toolbar/toolbar.scss | 1 + ionic/components/toolbar/toolbar.ts | 77 +++++++++++-------- ionic/components/view/view-item.ts | 2 +- ionic/ionic.scss | 1 + 13 files changed, 121 insertions(+), 135 deletions(-) create mode 100644 ionic/components/toolbar/test/scenarios/e2e.ts create mode 100644 ionic/components/toolbar/test/scenarios/index.ts create mode 100644 ionic/components/toolbar/test/scenarios/main.html create mode 100644 ionic/components/toolbar/toolbar-buttons.scss diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss index 397cf9e2e6..907a49fab6 100644 --- a/ionic/components/button/button.scss +++ b/ionic/components/button/button.scss @@ -20,11 +20,12 @@ $button-small-height: 2.8rem !default; $button-small-padding: 1.1rem !default; $button-small-icon-size: 2.1rem !default; -$button-fab-size: 56px; +$button-fab-size: 56px; $button-round-border-radius: 64px !default; $button-round-padding: 0 2.6rem !default; + // Core Button // -------------------------------------------------- diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 4515030fbd..3801b54130 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -1,4 +1,4 @@ -import {Directive, View, CSSClass, onInit, ElementRef} from 'angular2/angular2'; +import {Directive, View, CSSClass, ElementRef} from 'angular2/angular2'; import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/annotations'; @@ -54,21 +54,20 @@ Custom Font Icon selector: 'icon', properties: [ 'name', + 'iconName' ], host: { '[attr.aria-label]': 'label', - 'role': 'img' - }, - lifecycle: [onInit] + 'role': 'img', + '[className]': 'className' + } }) export class IconDirective { - constructor(elementRef: ElementRef) { - this.ele = elementRef.nativeElement; - } onInit() { - if (this.name) { - this.ele.classList.add(this.name); - this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ''); + let name = this.name || this.iconName; + if (name) { + this.className = name; + this.label = name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ''); } } } diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index 2502b59eee..6788a80d28 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -1,12 +1,11 @@ import {Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2'; import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref'; -import {Ion} from '../ion'; +import {ToolbarBase} from '../toolbar/toolbar'; import {IonicConfig} from '../../config/config'; import {IonicComponent, IonicView} from '../../config/annotations'; import {IonicApp} from '../app/app'; import {ViewItem} from '../view/view-item'; -import * as dom from '../../util/dom'; @IonicComponent({ @@ -45,13 +44,11 @@ import * as dom from '../../util/dom'; forwardRef(() => NavbarItem) ] }) -export class Navbar extends Ion { +export class Navbar extends ToolbarBase { constructor(item: ViewItem, elementRef: ElementRef, config: IonicConfig, app: IonicApp) { super(elementRef, config); this.app = app; - this.eleRef = elementRef; - this.itemEles = []; item.navbarView(this); this.bbClass = config.setting('backButtonIcon'); @@ -59,10 +56,6 @@ export class Navbar extends Ion { this.bbText = ''; } - element() { - return this.eleRef; - } - backButtonElement(eleRef) { if (arguments.length) { this._bbEle = eleRef; @@ -77,71 +70,9 @@ export class Navbar extends Ion { return this._bbTxEle; } - titleElement(eleRef) { - if (arguments.length) { - this._nbTlEle = eleRef; - } - return this._nbTlEle; - } - - itemElements(eleRef) { - if (arguments.length) { - this.itemEles.push(eleRef); - } - return this.itemEles; - } - - titleText(eleRef) { - if (arguments.length) { - this._ttTxt.push(eleRef); - } - return this._ttTxt; - } - - alignTitle() { - // called after the navbar/title has had a moment to - // finish rendering in their correct locations - 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; - - // get the computed style of the title element - const titleStyle = this._ttStyle || (this._ttStyle = window.getComputedStyle(titleEle)); - - // don't bother if we're not trying to center align the title - if (titleStyle.textAlign !== 'center') return; - - // get all the dimensions - const titleOffsetLeft = titleEle.offsetLeft; - const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth); - - let marginLeft = 0; - let marginRight = 0; - if (titleOffsetLeft < titleOffsetRight) { - marginLeft = (titleOffsetRight - titleOffsetLeft) + 5; - - } else if (titleOffsetLeft > titleOffsetRight) { - marginRight = (titleOffsetLeft - titleOffsetRight) - 5; - } - - let margin = `0 ${marginRight}px 0 ${marginLeft}px`; - - if ((marginLeft || marginRight) && margin !== this._ttMargin) { - // only do an update if it has to - const innerTitleEle = this._innerTtEle || (this._innerTtEle = toolbarEle.querySelector('.toolbar-inner-title')); - innerTitleEle.style.margin = this._ttMargin = margin; - } - } - didEnter() { - const titleEle = this._ttEle || (this._ttEle = this.eleRef.nativeElement.querySelector('ion-title')); + const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title')); this.app.title(titleEle.textContent); - - setTimeout(() => { - //this.titleText((titleEle && titleEle.textContent) || ''); - }, 32); } } diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss index c37f4e3deb..a5e3fcf6df 100644 --- a/ionic/components/toolbar/extensions/ios.scss +++ b/ionic/components/toolbar/extensions/ios.scss @@ -42,12 +42,6 @@ $toolbar-ios-title-font-size: 1.7rem !default; button, [button] { - padding: 0; - margin: 0 1rem; - - min-width: 0; - min-height: $toolbar-ios-height; - font-size: $toolbar-ios-button-font-size; } diff --git a/ionic/components/toolbar/extensions/material.scss b/ionic/components/toolbar/extensions/material.scss index bce0617181..708a7a59b9 100644 --- a/ionic/components/toolbar/extensions/material.scss +++ b/ionic/components/toolbar/extensions/material.scss @@ -8,12 +8,8 @@ $toolbar-material-button-font-size: 24px !default; .toolbar[mode="md"] { - .toolbar-inner { - padding: 0px 16px; - } - .toolbar-inner-title { - padding: 0; + padding: 0px 16px; } ion-title { @@ -27,12 +23,6 @@ $toolbar-material-button-font-size: 24px !default; button, [button] { - padding: 0; - margin: 0 1rem; - - min-width: 0; - - box-shadow: none; font-size: $toolbar-material-button-font-size; } diff --git a/ionic/components/toolbar/test/scenarios/e2e.ts b/ionic/components/toolbar/test/scenarios/e2e.ts new file mode 100644 index 0000000000..8b13789179 --- /dev/null +++ b/ionic/components/toolbar/test/scenarios/e2e.ts @@ -0,0 +1 @@ + diff --git a/ionic/components/toolbar/test/scenarios/index.ts b/ionic/components/toolbar/test/scenarios/index.ts new file mode 100644 index 0000000000..2dac2b7a35 --- /dev/null +++ b/ionic/components/toolbar/test/scenarios/index.ts @@ -0,0 +1,7 @@ +import {App} from 'ionic/ionic'; + + +@App({ + templateUrl: 'main.html' +}) +class IonicApp {} diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html new file mode 100644 index 0000000000..66dfda16be --- /dev/null +++ b/ionic/components/toolbar/test/scenarios/main.html @@ -0,0 +1,32 @@ + +Title Only + + +This is the title that never ends. It just goes on and on my friend. + + +Title + + +Title + + +Title + + +Title + + +Title + +Title + + +Title + + + diff --git a/ionic/components/toolbar/toolbar-buttons.scss b/ionic/components/toolbar/toolbar-buttons.scss new file mode 100644 index 0000000000..0b72fee8c9 --- /dev/null +++ b/ionic/components/toolbar/toolbar-buttons.scss @@ -0,0 +1,20 @@ + +// Toolbar Buttons +// -------------------------------------------------- + + +.toolbar ion-nav-items { + display: block; + + button, + [button] { + margin: 0 4px; + padding: 0 4px; + + min-width: 3.2rem; + min-height: 2.8rem; + + box-shadow: none; + } +} + diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss index 34bbada9c1..4e37826d1d 100644 --- a/ionic/components/toolbar/toolbar.scss +++ b/ionic/components/toolbar/toolbar.scss @@ -21,6 +21,7 @@ $toolbar-title-text-color: #000 !default; width: 100%; height: 100%; min-height: 4.4rem; + padding: 5px; display: flex; flex-direction: row; diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index 07660a8ba1..7c12fb5034 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -3,45 +3,15 @@ import {Directive, View, Parent, onInit, ElementRef, forwardRef} from 'angular2/ import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; import {IonicComponent} from '../../config/annotations'; -import * as dom from '../../util/dom'; -@IonicComponent({ - selector: 'ion-toolbar' -}) -@View({ - template: ` -
-
-
- -
-
-
- -
-
- -
-
- `, - directives: [ - forwardRef(() => ToolbarTitle), - forwardRef(() => ToolbarItem) - ] -}) -export class Toolbar extends Ion { - constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { - super(elementRef, ionicConfig); +export class ToolbarBase extends Ion { - this.eleRef = elementRef; + constructor(elementRef: ElementRef, config: IonicConfig) { + super(elementRef, config); this.itemEles = []; } - element() { - return this.eleRef; - } - titleElement(eleRef) { if (arguments.length) { this._nbTlEle = eleRef; @@ -66,7 +36,7 @@ export class Toolbar extends Ion { alignTitle() { // called after the navbar/title has had a moment to // finish rendering in their correct locations - const toolbarEle = this.eleRef.nativeElement; + const toolbarEle = this.getNativeElement(); const titleEle = this._ttEle || (this._ttEle = toolbarEle.querySelector('ion-title')); // don't bother if there's no title element @@ -103,6 +73,45 @@ export class Toolbar extends Ion { } +@IonicComponent({ + selector: 'ion-toolbar' +}) +@View({ + template: ` +
+
+
+ +
+
+
+ +
+
+ +
+
+ `, + directives: [ + forwardRef(() => ToolbarTitle), + forwardRef(() => ToolbarItem) + ] +}) +export class Toolbar extends ToolbarBase { + constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + super(elementRef, ionicConfig); + this.itemEles = []; + } + + onIonInit() { + setTimeout(() => { + this.alignTitle() + }, 32); + } + +} + + @Directive({ selector: '.toolbar-title' }) diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts index ec7be2f67a..6a62933e71 100644 --- a/ionic/components/view/view-item.ts +++ b/ionic/components/view/view-item.ts @@ -206,7 +206,7 @@ export class ViewItem { navbarElement() { let navbarView = this.navbarView(); if (navbarView) { - return navbarView.element(); + return navbarView.getElementRef(); } } diff --git a/ionic/ionic.scss b/ionic/ionic.scss index d037af116c..1d83d05da0 100755 --- a/ionic/ionic.scss +++ b/ionic/ionic.scss @@ -24,6 +24,7 @@ // Core Components @import "components/toolbar/toolbar", + "components/toolbar/toolbar-buttons", "components/action-menu/action-menu", "components/alert/alert", "components/aside/aside",