javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

toolbar scenario examples

Browse Source
This commit is contained in:
Adam Bradley
2015-07-22 10:49:54 -05:00
parent da268e6480
commit ba6cc11bc1
13 changed files with 121 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ionic/components/button/button.scss
View File

@@ -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
// --------------------------------------------------

19
ionic/components/icon/icon.ts
View File

@@ -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('-', '');
}
}
}

75
ionic/components/nav-bar/nav-bar.ts
View File

@@ -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);
}
}

6
ionic/components/toolbar/extensions/ios.scss
View File

@@ -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;
}

12
ionic/components/toolbar/extensions/material.scss
View File

@@ -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;
}

1
ionic/components/toolbar/test/scenarios/e2e.ts Normal file
View File

@@ -0,0 +1 @@

7
ionic/components/toolbar/test/scenarios/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

32
ionic/components/toolbar/test/scenarios/main.html Normal file
View File

@@ -0,0 +1,32 @@
<ion-toolbar><ion-title>Title Only</ion-title></ion-toolbar>
<ion-toolbar><ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button>Pri. Item</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items secondary><button>Sec. Item</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-title>Title</ion-title><ion-nav-items secondary><button secondary>Btn</button><button secondary>Btn</button><button secondary>Btn</button></ion-nav-items></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-home"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon></button primary><button primary><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary><icon name="ion-ionic"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Title</ion-title></ion-toolbar>
<style>
ion-toolbar {
border-bottom: 1px solid black;
}
</style>

20
ionic/components/toolbar/toolbar-buttons.scss Normal file
View File

@@ -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;
}
}

1
ionic/components/toolbar/toolbar.scss
View File

@@ -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;

77
ionic/components/toolbar/toolbar.ts
View File

@@ -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: `
<div class="toolbar-inner">
<div class="toolbar-title">
<div class="toolbar-inner-title">
<content select="ion-title"></content>
</div>
</div>
<div class="toolbar-item toolbar-primary-item">
<content select="[primary]"></content>
</div>
<div class="toolbar-item toolbar-secondary-item">
<content select="[secondary]"></content>
</div>
</div>
`,
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: `
<div class="toolbar-inner">
<div class="toolbar-title">
<div class="toolbar-inner-title">
<content select="ion-title"></content>
</div>
</div>
<div class="toolbar-item toolbar-primary-item">
<content select="[primary]"></content>
</div>
<div class="toolbar-item toolbar-secondary-item">
<content select="[secondary]"></content>
</div>
</div>
`,
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'
})

2
ionic/components/view/view-item.ts
View File

@@ -206,7 +206,7 @@ export class ViewItem {
navbarElement() {
let navbarView = this.navbarView();
if (navbarView) {
return navbarView.element();
return navbarView.getElementRef();
}
}

1
ionic/ionic.scss
View File

@@ -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",