back button updates

This commit is contained in:
Adam Bradley
2015-07-20 16:19:45 -05:00
parent 0dfd091eef
commit e30cfed8d4
5 changed files with 35 additions and 18 deletions

View File

@ -68,11 +68,13 @@ export class IconDirective {
onInit() { onInit() {
if (this.name) { if (this.name) {
this.ele.classList.add(this.name); this.ele.classList.add(this.name);
this.label = this.name; this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
} }
} }
} }
@IonicComponent({ @IonicComponent({
selector: 'ion-icon', selector: 'ion-icon',
properties: [ properties: [

View File

@ -9,8 +9,8 @@ $navbar-order-material: (
secondary: 40 secondary: 40
); );
$navbar-material-height: 6.4rem !default; $navbar-material-height: 5.6rem !default;
$navbar-material-background: get-color(primary, base) !default;//#f7f7f8 !default; $navbar-material-background: get-color(primary, base) !default;
$navbar-material-title-font-size: 2rem !default; $navbar-material-title-font-size: 2rem !default;
$navbar-material-button-font-size: 24px !default; $navbar-material-button-font-size: 24px !default;
@ -22,7 +22,7 @@ $navbar-material-button-text-color: #fff !default; //#007aff !default;
background: $navbar-material-background; background: $navbar-material-background;
.toolbar-inner-title { .toolbar-inner-title {
padding: 0px 16px; padding: 0;
} }
.toolbar-inner { .toolbar-inner {
@ -57,7 +57,6 @@ $navbar-material-button-text-color: #fff !default; //#007aff !default;
border: none; border: none;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;
margin: 0 10px; margin: 0 10px;
@ -65,4 +64,16 @@ $navbar-material-button-text-color: #fff !default; //#007aff !default;
min-width: 0; min-width: 0;
} }
.back-button {
margin: 0;
}
.back-button-icon {
margin: 0;
font-weight: normal;
font-size: 24px;
min-width: 56px;
text-align: left;
}
} }

View File

@ -45,12 +45,10 @@
.navbar[#{$color}] { .navbar[#{$color}] {
background-color: get-color($color, base); background-color: get-color($color, base);
ion-title { ion-title,
color: white;
}
button, button,
[button] { [button] {
color: white; color: get-color($color, inverse);
} }
} }

View File

@ -15,8 +15,8 @@ import * as dom from '../../util/dom';
@IonicView({ @IonicView({
template: ` template: `
<div class="toolbar-inner"> <div class="toolbar-inner">
<button class="back-button button"> <button class="back-button">
<icon class="back-button-icon ion-ios-arrow-back"></icon> <icon class="back-button-icon" [name]="bbClass"></icon>
<span class="back-button-text"> <span class="back-button-text">
<span class="back-default" [inner-text]="bbDefault"></span> <span class="back-default" [inner-text]="bbDefault"></span>
<span class="back-title" [inner-text]="bbText"></span> <span class="back-title" [inner-text]="bbText"></span>
@ -43,15 +43,16 @@ import * as dom from '../../util/dom';
] ]
}) })
export class Navbar extends Ion { export class Navbar extends Ion {
constructor(item: ViewItem, elementRef: ElementRef, ionicConfig: IonicConfig, app: IonicApp) { constructor(item: ViewItem, elementRef: ElementRef, config: IonicConfig, app: IonicApp) {
super(elementRef, ionicConfig); super(elementRef, config);
this.app = app; this.app = app;
this.eleRef = elementRef; this.eleRef = elementRef;
this.itemEles = []; this.itemEles = [];
item.navbarView(this); item.navbarView(this);
this.bbDefault = 'Back'; this.bbClass = config.setting('backButtonIcon');
this.bbDefault = config.setting('backButtonText');
this.bbText = ''; this.bbText = '';
} }

View File

@ -4,6 +4,7 @@ import {Platform} from './platform';
Platform.register({ Platform.register({
name: 'core', name: 'core',
settings: { settings: {
backButtonText: 'Back',
mode: 'ios', mode: 'ios',
iconMode: 'ios', iconMode: 'ios',
viewTransition: 'ios' viewTransition: 'ios'
@ -49,6 +50,8 @@ Platform.register({
'tablet' 'tablet'
], ],
settings: { settings: {
backButtonText: '',
backButtonIcon: 'ion-android-arrow-back',
mode: 'md', mode: 'md',
iconMode: 'md', iconMode: 'md',
type: 'overlay', type: 'overlay',
@ -74,6 +77,8 @@ Platform.register({
'iphone' 'iphone'
], ],
settings: { settings: {
backButtonText: 'Back',
backButtonIcon: 'ion-ios-arrow-back',
mode: 'ios', mode: 'ios',
iconMode: 'ios', iconMode: 'ios',
tapPolyfill: true, tapPolyfill: true,