mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
that whole nav overhaul thing again
This commit is contained in:
Adam Bradley
@@ -1,58 +0,0 @@
|
||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
|
||||
import {IonicComponent} from 'ionic/config/component';
|
||||
import {NavItem} from '../nav/nav-item';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'back-button',
|
||||
hostListeners: {
|
||||
'^click': 'onClick($event)'
|
||||
},
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<icon class="back-button-icon ion-ios-arrow-back"></icon>
|
||||
<span class="back-button-text">
|
||||
<span class="back-default">Back</span>
|
||||
<span class="back-title"></span>
|
||||
</span>`
|
||||
})
|
||||
export class BackButton {
|
||||
constructor(navItem: NavItem, @ElementRef() element:ElementRef) {
|
||||
this.navItem = navItem;
|
||||
this.domElement = element.domElement;
|
||||
|
||||
setTimeout(() => {
|
||||
// HACK!
|
||||
this.config = BackButton.config.invoke(this);
|
||||
});
|
||||
}
|
||||
|
||||
onClick(ev) {
|
||||
this.navItem.nav.pop();
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(BackButton, {
|
||||
properties: {
|
||||
icon: {
|
||||
defaults: {
|
||||
ios: 'ion-ios-arrow-back',
|
||||
android: 'ion-android-arrow-back',
|
||||
core: 'ion-chevron-left'
|
||||
}
|
||||
},
|
||||
text: {
|
||||
defaults: {
|
||||
ios: 'Back',
|
||||
android: '',
|
||||
core: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,73 +0,0 @@
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-order-ios: (
|
||||
back-button: 10,
|
||||
primary: 20,
|
||||
title: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
$toolbar-ios-height: 4.4rem !default;
|
||||
$toolbar-ios-background: #f7f7f8 !default;
|
||||
$toolbar-ios-border-color: #c4c4c4 !default;
|
||||
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
$toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-button-text-color: #007aff !default;
|
||||
$toolbar-ios-button-background-color: transparent !default;
|
||||
|
||||
|
||||
.toolbar-container-ios {
|
||||
height: $toolbar-ios-height;
|
||||
background: $toolbar-ios-background;
|
||||
|
||||
// toolbar on top, border on bottom (default)
|
||||
@include hairline(bottom, $toolbar-ios-border-color);
|
||||
|
||||
// toolbar on bottom, border on top
|
||||
&.toolbar-bottom:after {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar-ios {
|
||||
|
||||
.toolbar [side="primary"] {
|
||||
order: map-get($toolbar-order-ios, 'primary');
|
||||
}
|
||||
|
||||
.toolbar [side="secondary"] {
|
||||
order: map-get($toolbar-order-ios, 'secondary');
|
||||
}
|
||||
|
||||
ion-title {
|
||||
order: map-get($toolbar-order-ios, 'title');
|
||||
text-align: center;
|
||||
font-size: $toolbar-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-back-button {
|
||||
order: map-get($toolbar-order-ios, 'back-button');
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: $toolbar-ios-button-font-size;
|
||||
color: $toolbar-ios-button-text-color;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
min-height: $toolbar-ios-height;
|
||||
min-width: 0;
|
||||
background: $toolbar-ios-button-background-color;
|
||||
}
|
||||
|
||||
.back-button-icon {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-material-height: 6.4rem !default;
|
||||
$toolbar-material-background: #f7f7f8 !default;
|
||||
|
||||
$toolbar-material-title-font-size: 2rem !default;
|
||||
$toolbar-material-button-font-size: 2rem !default;
|
||||
$toolbar-material-button-text-color: #007aff !default;
|
||||
|
||||
|
||||
.toolbar-md {
|
||||
height: $toolbar-material-height;
|
||||
background: $toolbar-material-background;
|
||||
|
||||
.toolbar-title {
|
||||
font-size: $toolbar-material-title-font-size;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: $toolbar-material-button-font-size;
|
||||
color: $toolbar-material-button-text-color;
|
||||
border: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
|
||||
min-height: $toolbar-material-height;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import {bootstrap} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-app' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: []
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function main() {
|
||||
bootstrap(IonicApp);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
|
||||
<ion-view>
|
||||
|
||||
<ion-nav-title>
|
||||
<span style="color:red">Awesome</span>
|
||||
<strong style="color:green">HTML</strong>
|
||||
<em style="color:purple">Title</em>
|
||||
</ion-nav-title>
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
</ion-view>
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import {bootstrap} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-app' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: []
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function main() {
|
||||
bootstrap(IonicApp);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
|
||||
<ion-view nav-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
<button class="button">p2</button>
|
||||
<button class="button">p3</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
</ion-view>
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import {bootstrap} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-app' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: []
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function main() {
|
||||
bootstrap(IonicApp);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
|
||||
<ion-view nav-title="Attribute Title">
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
<button class="button">p2</button>
|
||||
<button class="button">p3</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-content class="padding" style="text-align:center">
|
||||
<p>
|
||||
A long time ago, in a galaxy far,<br>
|
||||
far away....<br>
|
||||
</p>
|
||||
<p>
|
||||
It is a period of civil war.<br>
|
||||
Rebel spaceships, striking<br>
|
||||
from a hidden base, have won<br>
|
||||
their first victory against<br>
|
||||
the evil Galactic Empire.<br>
|
||||
</p>
|
||||
<p>
|
||||
During the battle, rebel<br>
|
||||
spies managed to steal secret<br>
|
||||
plans to the Empire's<br>
|
||||
ultimate weapon, the DEATH<br>
|
||||
STAR, an armored space<br>
|
||||
station with enough power to<br>
|
||||
destroy an entire planet.<br>
|
||||
</p>
|
||||
<p>
|
||||
Pursued by the Empire's<br>
|
||||
sinister agents, Princess<br>
|
||||
Leia races home aboard her<br>
|
||||
starship, custodian of the<br>
|
||||
stolen plans that can save<br>
|
||||
her people and restore<br>
|
||||
freedom to the galaxy....<br>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
@@ -1,18 +0,0 @@
|
||||
import {ElementRef} from 'angular2/angular2'
|
||||
import {Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: '.toolbar-container'
|
||||
})
|
||||
export class ToolbarContainer {
|
||||
constructor(elementRef: ElementRef) {
|
||||
this.domElement = elementRef.domElement;
|
||||
this.config = ToolbarContainer.config.invoke(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
new IonicComponent(ToolbarContainer, {})
|
||||
@@ -1,96 +0,0 @@
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
|
||||
|
||||
import * as dom from 'ionic/util/dom';
|
||||
import {IonicComponent} from 'ionic/config/component';
|
||||
import {NavItem} from 'ionic/ionic';
|
||||
import {Platform} from 'ionic/platform/platform';
|
||||
import {BackButton} from './back-button';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-toolbar'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<div class="toolbar-inner">
|
||||
<back-button class="button toolbar-item" [hidden]="!navItem.enableBack"></back-button>
|
||||
<div class="toolbar-title">
|
||||
<div class="toolbar-inner-title toolbar-title-hide">
|
||||
<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: [BackButton]
|
||||
})
|
||||
export class Toolbar {
|
||||
constructor(navItem: NavItem, elementRef: ElementRef) {
|
||||
this.navItem = navItem;
|
||||
this.domElement = elementRef.domElement;
|
||||
this.config = Toolbar.config.invoke(this);
|
||||
|
||||
// http://davidwalsh.name/detect-node-insertion
|
||||
dom.animationStart(this.domElement, 'nodeInserted').then(() => {
|
||||
this.alignTitle();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
alignTitle() {
|
||||
const toolbarEle = this.domElement;
|
||||
const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
|
||||
const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
|
||||
const style = this._style || (this._style = window.getComputedStyle(titleEle));
|
||||
|
||||
const titleOffsetWidth = titleEle.offsetWidth;
|
||||
const titleOffsetLeft = titleEle.offsetLeft;
|
||||
const titleScrollWidth = titleEle.scrollWidth;
|
||||
const toolbarOffsetWidth = toolbarEle.offsetWidth;
|
||||
|
||||
// TODO!!! When an element is being reused by angular2, it'll sometimes keep the
|
||||
// styles from the original element's use, causing these calculations to be wrong
|
||||
if (window.getComputedStyle(innerTitleEle).margin !== '0px') {
|
||||
this._showTitle();
|
||||
return;
|
||||
}
|
||||
|
||||
// only align if the title is center and if it isn't already overflowing
|
||||
if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) {
|
||||
this._showTitle();
|
||||
|
||||
} else {
|
||||
let rightMargin = toolbarOffsetWidth - (titleOffsetLeft + titleOffsetWidth);
|
||||
let centerMargin = titleOffsetLeft - rightMargin;
|
||||
|
||||
innerTitleEle.style.margin = `0 ${centerMargin}px 0 0`;
|
||||
|
||||
dom.raf(() => {
|
||||
if (titleEle.offsetWidth < titleEle.scrollWidth) {
|
||||
// not enough room yet, just left align title
|
||||
innerTitleEle.style.margin = '';
|
||||
innerTitleEle.style.textAlign = 'left';
|
||||
}
|
||||
this._showTitle();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
_showTitle() {
|
||||
if (!this._shown) {
|
||||
this._shown = true;
|
||||
this._innerTitleEle.classList.remove('toolbar-title-hide');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
new IonicComponent(Toolbar, {});
|
||||
@@ -1,73 +0,0 @@
|
||||
|
||||
// Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-background-color: #fff !default;
|
||||
|
||||
$toolbar-order: (
|
||||
back-button: 10,
|
||||
title: 20,
|
||||
primary: 30,
|
||||
secondary: 40
|
||||
);
|
||||
|
||||
|
||||
ion-toolbar {
|
||||
background: $toolbar-background-color;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toolbar-inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-toolbar back-button.toolbar-item {
|
||||
order: map-get($toolbar-order, 'back-button');
|
||||
}
|
||||
|
||||
.toolbar-title {
|
||||
flex: 1;
|
||||
order: map-get($toolbar-order, 'title');
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
|
||||
// buttons are primary by default
|
||||
ion-toolbar .button,
|
||||
ion-toolbar [side="primary"] {
|
||||
order: map-get($toolbar-order, 'primary');
|
||||
}
|
||||
|
||||
ion-toolbar [side="secondary"] {
|
||||
order: map-get($toolbar-order, 'secondary');
|
||||
}
|
||||
|
||||
ion-title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
// used to notify JS when the title has been rendered
|
||||
animation-duration: 1ms;
|
||||
animation-name: nodeInserted;
|
||||
}
|
||||
|
||||
.toolbar-inner-title {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toolbar .button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.toolbar-title-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user