javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

toolbar refactor wip

Browse Source
This commit is contained in:
Adam Bradley
2015-09-16 00:42:22 -05:00
parent a97d7300de
commit abff83a206
14 changed files with 261 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
ionic/components/toolbar/modes/ios.scss
View File

@ -20,53 +20,11 @@ $toolbar-ios-title-font-size: 1.7rem !default;
border-bottom-style: solid;
min-height: $toolbar-ios-height;
.toolbar-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0px 72px;
pointer-events: none;
}
.toolbar-primary-item {
flex: 1;
order: map-get($toolbar-order-ios, primary);
}
.toolbar-secondary-item {
flex: 1;
text-align: right;
order: map-get($toolbar-order-ios, secondary);
}
[menu-toggle] {
order: map-get($toolbar-order-ios, 'menu-toggle');
cursor: pointer;
}
ion-title {
font-size: $toolbar-ios-title-font-size;
font-weight: 500;
text-align: center;
pointer-events: auto;
}
.back-button {
margin: 0 4px;
min-height: 3.2rem;
line-height: 1;
order: map-get($toolbar-order-ios, 'back-button');
overflow: inherit;
}
.back-button-icon {
display: inherit;
min-width: 20px;
font-size: 3.2rem;
}
button,
[button] {
margin-top: 0;
@ -87,6 +45,47 @@ $toolbar-ios-title-font-size: 1.7rem !default;
min-width: 28px;
}
.back-button {
margin: 0 4px;
min-height: 3.2rem;
line-height: 1;
order: map-get($toolbar-order-ios, 'back-button');
overflow: inherit;
}
.back-button-icon {
display: inherit;
min-width: 20px;
font-size: 3.2rem;
}
}
ion-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0px 90px;
pointer-events: none;
}
.toolbar-title {
font-size: $toolbar-ios-title-font-size;
font-weight: 500;
text-align: center;
pointer-events: auto;
}
ion-nav-items {
flex: 1;
order: map-get($toolbar-order-ios, primary);
}
ion-nav-items[secondary] {
text-align: right;
order: map-get($toolbar-order-ios, secondary);
}
&.hairlines .toolbar {

24
ionic/components/toolbar/modes/material.scss
View File

@ -10,19 +10,6 @@ $toolbar-md-button-font-size: 1.4rem !default;
.toolbar {
min-height: $toolbar-md-height;
.toolbar-inner-title {
padding: 0px 12px;
}
ion-title {
font-size: $toolbar-md-title-font-size;
font-weight: 500;
}
.toolbar-primary-item button:first-child {
margin-left: 0;
}
button,
[button],
button.activated,
@ -48,9 +35,7 @@ $toolbar-md-button-font-size: 1.4rem !default;
[menu-toggle],
[menu-toggle].activated {
margin: ($toolbar-padding * -1) 0 ($toolbar-padding * -1) ($toolbar-padding * -1);
padding: 0 10px;
height: $toolbar-md-height;
min-width: 60px;
icon {
@ -59,3 +44,12 @@ $toolbar-md-button-font-size: 1.4rem !default;
}
}
ion-title {
font-size: $toolbar-md-title-font-size;
font-weight: 500;
}
ion-nav-items[primary] button:first-child {
margin-left: 0;
}

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

@ -55,23 +55,17 @@ $toolbar-order: (
width: 100%;
}
.toolbar-title {
ion-title {
flex: 1;
order: map-get($toolbar-order, title);
display: flex;
align-items: center;
transform: translateZ(0px);
}
.toolbar-inner-title {
width: 100%;
padding: 0 1.5rem;
}
ion-title {
.toolbar-title {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@ -93,20 +87,15 @@ ion-title {
font-size: 2.8rem;
}
.toolbar-item {
transform: translateZ(0px);
}
ion-nav-items {
display: block;
margin: 0 0.2rem;
}
.toolbar-primary-item {
transform: translateZ(0px);
pointer-events: none;
order: map-get($toolbar-order, primary);
}
.toolbar-secondary-item {
ion-nav-items[secondary] {
order: map-get($toolbar-order, secondary);
}

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

@ -1,102 +1,80 @@
import {Directive, View, Host, ElementRef, forwardRef} from 'angular2/angular2';
import {Component, Directive, View, Host, ElementRef, forwardRef, Query, QueryList} from 'angular2/angular2';
import {Ion} from '../ion';
import {IonicConfig} from '../../config/config';
import {IonicComponent} from '../../config/annotations';
import {IonicView} from '../../config/annotations';
import {MenuToggle} from '../menu/menu-toggle';
@Component({
selector: 'ion-title'
})
@View({
template:
'<div class="toolbar-title">' +
'<ng-content></ng-content>' +
'</div>'
})
export class ToolbarTitle extends Ion {
constructor(elementRef: ElementRef) {
super(elementRef, null);
}
}
@Directive({
selector: 'ion-nav-items,[menu-toggle]'
})
export class ToolbarItem extends Ion {
constructor(elementRef: ElementRef) {
super(elementRef, null);
}
}
/**
* TODO
*/
export class ToolbarBase extends Ion {
constructor(elementRef: ElementRef, config: IonicConfig) {
constructor(
elementRef: ElementRef,
config: IonicConfig,
titleQry: QueryList<ToolbarTitle>,
itemQry: QueryList<ToolbarItem>
) {
super(elementRef, config);
this.titleAlign = config.setting('navTitleAlign');
this.itemEles = [];
this.titleQry = titleQry;
this.itemQry = itemQry;
}
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
titleElement(eleRef) {
if (arguments.length) {
this._nbTlEle = eleRef;
}
return this._nbTlEle;
getTitle() {
return this.titleQry.first;
}
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
itemElements(eleRef) {
if (arguments.length) {
this.itemEles.push(eleRef);
}
return this.itemEles;
getTitleRef() {
return this.titleQry.first && this.titleQry.first.elementRef;
}
/**
* TODO
* @param {TODO} eleRef TODO
* @returns {TODO} TODO
* A toolbar items include the left and right side `ion-nav-items`,
* and every `menu-toggle`. It does not include the `ion-title`.
* @returns {TODO} Array of this toolbar's item ElementRefs.
*/
titleText(eleRef) {
if (arguments.length) {
this._ttTxt.push(eleRef);
}
return this._ttTxt;
}
afterViewChecked() {
// if (this._queueAlign) {
// this._queueAlign = false;
// this._alignTitle();
// }
}
/**
* TODO
*/
alignTitle() {
//this._queueAlign = (this.titleAlign === 'center');
}
_alignTitle() {
// don't bother if we're not trying to center align the title
if (this.aligned) return;
// called after the navbar/title has had a moment to
// finish rendering in their correct locations
const toolbarEle = this.getNativeElement();
const titleEle = toolbarEle.querySelector('ion-title');
// don't bother if there's no title element
if (!titleEle) 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;
}
if (marginLeft || marginRight) {
// only do an update if it has to
const innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title');
innerTitleEle.style.margin = `0 ${marginRight}px 0 ${marginLeft}px`;
}
this.aligned = true;
getItemRefs() {
let refs = [];
this.itemQry.map(function(itm) {
refs.push(itm.getElementRef());
});
return refs;
}
}
@ -104,69 +82,30 @@ export class ToolbarBase extends Ion {
/**
* TODO
*/
@IonicComponent({
selector: 'ion-toolbar'
@Component({
selector: 'ion-toolbar',
host: {
'class': 'toolbar'
}
})
@View({
template: `
<div class="toolbar-inner">
<ng-content select="[menu-toggle]"></ng-content>
<div class="toolbar-title">
<div class="toolbar-inner-title">
<ng-content select="ion-title"></ng-content>
</div>
</div>
<div class="toolbar-item toolbar-primary-item">
<ng-content select="[primary]"></ng-content>
</div>
<div class="toolbar-item toolbar-secondary-item">
<ng-content select="[secondary]"></ng-content>
</div>
</div>
`,
directives: [
forwardRef(() => ToolbarTitle),
forwardRef(() => ToolbarItem)
]
@IonicView({
template:
'<div class="toolbar-inner">' +
'<ng-content select="[menu-toggle]"></ng-content>' +
'<ng-content select="ion-title"></ng-content>' +
'<ng-content select="ion-nav-items[primary]"></ng-content>' +
'<ng-content select="ion-nav-items[secondary]"></ng-content>' +
'</div>'
})
export class Toolbar extends ToolbarBase {
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
this.itemEles = [];
}
onInit() {
super.onInit();
// TODO: THIS IS HORRIBLE, FIX
// setTimeout(() => {
// this.alignTitle();
// setTimeout(() => {
// this.alignTitle()
// }, 64);
// }, 32);
constructor(
elementRef: ElementRef ,
config: IonicConfig,
@Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
@Query(ToolbarItem) itemQry: QueryList<ToolbarItem>
) {
super(elementRef, config, titleQry, itemQry);
}
}
@Directive({
selector: '.toolbar-title'
})
class ToolbarTitle {
constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
toolbar.titleElement(elementRef);
}
}
@Directive({
selector: '.toolbar-item'
})
class ToolbarItem {
constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
toolbar.itemElements(elementRef);
}
}