javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): add a mode agnostic css class (#9133)

Browse Source 
Fixes #8545
This commit is contained in:
Alan
2016-11-14 13:50:01 -05:00
committed by Brandy Carney
parent d3ef28d3ec
commit 025c5cc646
30 changed files with 148 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/app/test/ion.spec.ts
View File

@ -7,34 +7,34 @@ describe('Ion', () => {
describe('color', () => {
it('should set color when it hasnt been set yet', () => {
ion._setMode('icon', 'md');
ion._setColor('icon', 'primary');
expect(className(ion)).toEqual('icon-md icon-md-primary');
ion._setMode('md');
ion._setColor('primary');
expect(className(ion)).toEqual('icon icon-md icon-md-primary');
});
it('should remove color when it has already been set', () => {
ion._setMode('icon', 'md');
ion._setColor('icon', 'primary');
ion._setColor('icon', null);
expect(className(ion)).toEqual('icon-md');
ion._setMode('md');
ion._setColor('primary');
ion._setColor(null);
expect(className(ion)).toEqual('icon icon-md');
});
it('should update color when it has already been set', () => {
ion._setMode('icon', 'md');
ion._setColor('icon', 'primary');
ion._setColor('icon', 'secondary');
expect(className(ion)).toEqual('icon-md icon-md-secondary');
ion._setMode('md');
ion._setColor('primary');
ion._setColor('secondary');
expect(className(ion)).toEqual('icon icon-md icon-md-secondary');
});
it('should not setElementClass if its the same value', () => {
ion._setMode('icon', 'ios');
ion._setColor('icon', 'primary');
ion._setMode('ios');
ion._setColor('primary');
spyOn(ion, 'setElementClass');
expect(ion.setElementClass).not.toHaveBeenCalled();
ion._setColor('icon', 'primary');
ion._setColor('primary');
expect(className(ion)).toEqual('icon-ios icon-ios-primary');
expect(className(ion)).toEqual('icon icon-ios icon-ios-primary');
});
});
@ -42,7 +42,7 @@ describe('Ion', () => {
var ion: Ion;
beforeEach(() => {
ion = new Ion(mockConfig(), mockElementRef(), mockRenderer());
ion = new Ion(mockConfig(), mockElementRef(), mockRenderer(), 'icon');
});
function className(ion: Ion) {

8
src/components/badge/badge.ts
View File

@ -21,7 +21,7 @@ export class Badge extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('badge', val);
this._setColor(val);
}
/**
@ -29,13 +29,11 @@ export class Badge extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('badge', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'badge');
}
}

32
src/components/card/card.ts
View File

@ -17,7 +17,7 @@ export class Card extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('card', val);
this._setColor(val);
}
/**
@ -25,13 +25,11 @@ export class Card extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('card', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'card');
}
}
@ -50,7 +48,7 @@ export class CardContent extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('card-content', val);
this._setColor(val);
}
/**
@ -58,13 +56,11 @@ export class CardContent extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('card-content', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'card-content');
}
}
@ -83,7 +79,7 @@ export class CardHeader extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('card-header', val);
this._setColor(val);
}
/**
@ -91,13 +87,11 @@ export class CardHeader extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('card-header', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'card-header');
}
}
@ -115,7 +109,7 @@ export class CardTitle extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('card-title', val);
this._setColor(val);
}
/**
@ -123,13 +117,11 @@ export class CardTitle extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('card-title', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'card-title');
}
}

12
src/components/checkbox/checkbox.ts
View File

@ -91,7 +91,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
*/
@Input()
set color(val: string) {
this._setColor('checkbox', val);
this._setColor(val);
}
/**
@ -99,7 +99,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
*/
@Input()
set mode(val: string) {
this._setMode('checkbox', val);
this._setMode(val);
}
/**
@ -114,9 +114,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
elementRef: ElementRef,
renderer: Renderer
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'checkbox');
_form.register(this);
@ -168,7 +166,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
* @private
*/
writeValue(val: any) {
this._setChecked( isTrueProperty(val) );
this._setChecked(isTrueProperty(val));
}
/**
@ -215,7 +213,7 @@ export class Checkbox extends Ion implements AfterContentInit, ControlValueAcces
/**
* @private
*/
onTouched() {}
onTouched() { }
/**
* @private

8
src/components/chip/chip.ts
View File

@ -100,7 +100,7 @@ export class Chip extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('chip', val);
this._setColor(val);
}
/**
@ -108,13 +108,11 @@ export class Chip extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('chip', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'chip');
}
}

4
src/components/content/content.ts
View File

@ -165,9 +165,7 @@ export class Content extends Ion {
@Optional() viewCtrl: ViewController,
@Optional() public _tabs: Tabs
) {
super(config, elementRef, renderer);
this._setMode('content', config.get('mode'));
super(config, elementRef, renderer, 'content');
this._sbPadding = config.getBoolean('statusbarPadding', false);

11
src/components/datetime/datetime.ts
View File

@ -412,7 +412,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
*/
@Input()
set mode(val: string) {
this._setMode('datetime', val);
this._setMode(val);
}
/**
@ -433,9 +433,8 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
@Optional() private _item: Item,
@Optional() private _pickerCtrl: PickerController
) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'datetime');
this.mode = config.get('mode');
_form.register(this);
if (_item) {
@ -632,7 +631,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
// loop through each month and see if it
// is within the min/max date range
monthOpt.disabled = (dateSortValue(selectedYear, monthOpt.value, 31) < minCompareVal ||
dateSortValue(selectedYear, monthOpt.value, 1) > maxCompareVal);
dateSortValue(selectedYear, monthOpt.value, 1) > maxCompareVal);
}
}
@ -648,8 +647,8 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
var compareVal = dateSortValue(selectedYear, selectedMonth, dayOpt.value);
dayOpt.disabled = (compareVal < minCompareVal ||
compareVal > maxCompareVal ||
numDaysInMonth <= i);
compareVal > maxCompareVal ||
numDaysInMonth <= i);
}
} else {

12
src/components/fab/fab.ts
View File

@ -63,14 +63,14 @@ import { nativeTimeout } from '../../util/dom';
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
})
export class FabButton extends Ion {
export class FabButton extends Ion {
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
set color(val: string) {
this._setColor('fab', val);
this._setColor(val);
}
/**
@ -78,7 +78,7 @@ export class FabButton extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('fab', val);
this._setMode(val);
}
constructor(
@ -86,9 +86,7 @@ export class FabButton extends Ion {
elementRef: ElementRef,
renderer: Renderer,
) {
super(config, elementRef, renderer);
this.setElementClass('fab', true); // set role
this.mode = config.get('mode');
super(config, elementRef, renderer, 'fab');
}
@ -324,7 +322,7 @@ export class FabContainer {
return;
}
let lists = this._fabLists.toArray();
for (let list of lists) {
for (let list of lists) {
list.setVisible(isActive);
}
this._mainButton.setActiveClose(isActive);

8
src/components/icon/icon.ts
View File

@ -64,7 +64,7 @@ export class Icon extends Ion {
return this._color;
}
set color(value: string) {
this._setColor('icon', value);
this._setColor(value);
}
/**
@ -72,7 +72,7 @@ export class Icon extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('icon', val);
this._setMode(val);
}
constructor(
@ -80,9 +80,7 @@ export class Icon extends Ion {
elementRef: ElementRef,
renderer: Renderer
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'icon');
this._iconMode = config.get('iconMode');
}

2
src/components/input/input-base.ts
View File

@ -46,7 +46,7 @@ export class InputBase extends Ion {
nav: NavController,
ngControl: NgControl
) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'input');
this._nav = <NavControllerBase>nav;
this._useAssist = config.getBoolean('scrollAssist', false);

4
src/components/input/input.ts
View File

@ -157,7 +157,7 @@ export class TextInput extends InputBase {
*/
@Input()
set mode(val: string) {
this._setMode('input', val);
this._setMode(val);
}
/**
@ -336,7 +336,7 @@ export class TextArea extends InputBase {
*/
@Input()
set mode(val: string) {
this._setMode('input', val);
this._setMode(val);
}
/**

38
src/components/ion.ts
View File

@ -26,10 +26,19 @@ export class Ion {
/** @private */
_mode: string;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
/** @private */
_componentName: string;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, componentName?: string) {
this._config = config;
this._elementRef = elementRef;
this._renderer = renderer;
this._componentName = componentName;
if (componentName) {
this._setComponentName();
this._setMode(config.get('mode'));
}
}
/** @private */
@ -48,32 +57,41 @@ export class Ion {
}
/** @private */
_setColor(componentName: string, newColor: string) {
_setColor(newColor: string, componentName?: string) {
if (componentName) {
// This is needed for the item-radio
this._componentName = componentName;
}
if (this._color) {
this.setElementClass(`${componentName}-${this._mode}-${this._color}`, false);
this.setElementClass(`${this._componentName}-${this._mode}-${this._color}`, false);
}
if (newColor) {
this.setElementClass(`${componentName}-${this._mode}-${newColor}`, true);
this.setElementClass(`${this._componentName}-${this._mode}-${newColor}`, true);
this._color = newColor;
}
}
/** @private */
_setMode(componentName: string, newMode: string) {
_setMode(newMode: string) {
if (this._mode) {
this.setElementClass(`${componentName}-${this._mode}`, false);
this.setElementClass(`${this._componentName}-${this._mode}`, false);
}
if (newMode) {
this.setElementClass(`${componentName}-${newMode}`, true);
this.setElementClass(`${this._componentName}-${newMode}`, true);
// Remove the color class associated with the previous mode,
// change the mode, then add the new color class
this._setColor(componentName, null);
this._setColor(null);
this._mode = newMode;
this._setColor(componentName, this._color);
this._setColor(this._color);
}
}
/** @private */
_setComponentName() {
this.setElementClass(this._componentName, true);
}
/** @private */
getElementRef(): ElementRef {
return this._elementRef;
@ -85,7 +103,7 @@ export class Ion {
}
/** @private */
getDimensions(): { width: number, height: number, left: number, top: number} {
getDimensions(): { width: number, height: number, left: number, top: number } {
return getDimensions(this.getNativeElement(), this._getId());
}

23
src/components/item/item.ts
View File

@ -324,7 +324,7 @@ export class Item extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('item', val);
this._setMode(val);
}
constructor(
@ -334,11 +334,10 @@ export class Item extends Ion {
renderer: Renderer,
@Optional() reorder: ItemReorder
) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'item');
this._setName(elementRef);
this._shouldHaveReorder = !!reorder;
this.mode = config.get('mode');
this.id = form.nextId().toString();
}
@ -367,9 +366,9 @@ export class Item extends Ion {
/**
* @private
*/
_updateColor(newColor: string, colorClass?: string) {
colorClass = colorClass || 'item'; // item-radio
this._setColor(colorClass, newColor);
_updateColor(newColor: string, componentName?: string) {
componentName = componentName || 'item'; // item-radio
this._setColor(newColor, componentName);
}
/**
@ -454,7 +453,7 @@ export class ItemDivider extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('item-divider', val);
this._setColor(val);
}
/**
@ -462,13 +461,11 @@ export class ItemDivider extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('item-divider', val);
this._setMode(val);
}
constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'item-divider');
}
}
@ -482,7 +479,7 @@ export class ItemDivider extends Ion {
'class': 'item-block'
}
})
export class ItemContent {}
export class ItemContent { }
/**
@ -491,4 +488,4 @@ export class ItemContent {}
@Directive({
selector: 'ion-item-group'
})
export class ItemGroup {}
export class ItemGroup { }

8
src/components/label/label.ts
View File

@ -65,7 +65,7 @@ export class Label extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('label', val);
this._setColor(val);
}
/**
@ -73,7 +73,7 @@ export class Label extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('label', val);
this._setMode(val);
}
/**
@ -90,9 +90,7 @@ export class Label extends Ion {
@Attribute('fixed') isFixed: string,
@Attribute('inset') isInset: string
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'label');
this.type = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
}

8
src/components/list/list-header.ts
View File

@ -16,7 +16,7 @@ export class ListHeader extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('list-header', val);
this._setColor(val);
}
/**
@ -24,13 +24,11 @@ export class ListHeader extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('list-header', val);
this._setMode(val);
}
constructor(config: Config, renderer: Renderer, elementRef: ElementRef, @Attribute('id') private _id: string) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'list-header');
}
get id(): string {

6
src/components/list/list.ts
View File

@ -55,9 +55,7 @@ export class List extends Ion {
renderer: Renderer,
public _gestureCtrl: GestureController
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'list');
}
/**
@ -65,7 +63,7 @@ export class List extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('list', val);
this._setMode(val);
}
/**

6
src/components/navbar/navbar.ts
View File

@ -93,7 +93,7 @@ export class Navbar extends ToolbarBase {
*/
@Input()
set color(val: string) {
this._setColor('toolbar', val);
this._setColor(val);
}
/**
@ -101,7 +101,7 @@ export class Navbar extends ToolbarBase {
*/
@Input()
set mode(val: string) {
this._setMode('toolbar', val);
this._setMode(val);
}
/**
@ -125,8 +125,6 @@ export class Navbar extends ToolbarBase {
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
viewCtrl && viewCtrl._setNavbar(this);
this._bbIcon = config.get('backButtonIcon');

8
src/components/radio/radio-button.ts
View File

@ -95,7 +95,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
*/
@Input()
set color(val: string) {
this._setColor('radio', val);
this._setColor(val);
if (this._item) {
this._item._updateColor(val, 'item-radio');
@ -107,7 +107,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
*/
@Input()
set mode(val: string) {
this._setMode('radio', val);
this._setMode(val);
}
/**
@ -123,9 +123,7 @@ export class RadioButton extends Ion implements OnDestroy, OnInit {
@Optional() private _item: Item,
@Optional() private _group: RadioGroup
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'radio');
_form.register(this);
if (_group) {

12
src/components/range/range.ts
View File

@ -45,7 +45,7 @@ export class RangeKnob implements OnInit {
@Input() upper: boolean;
constructor(@Inject(forwardRef(() => Range)) public range: Range) {}
constructor( @Inject(forwardRef(() => Range)) public range: Range) { }
get ratio(): number {
return this._ratio;
@ -229,7 +229,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
*/
@Input()
set color(val: string) {
this._setColor('range', val);
this._setColor(val);
}
/**
@ -237,7 +237,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
*/
@Input()
set mode(val: string) {
this._setMode('range', val);
this._setMode(val);
}
@ViewChild('bar') public _bar: ElementRef;
@ -350,9 +350,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
elementRef: ElementRef,
renderer: Renderer
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'range');
_form.register(this);
if (_item) {
@ -700,7 +698,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
/**
* @private
*/
onTouched() {}
onTouched() { }
/**
* @private

8
src/components/searchbar/searchbar.ts
View File

@ -68,7 +68,7 @@ export class Searchbar extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('searchbar', val);
this._setColor( val);
}
/**
@ -76,7 +76,7 @@ export class Searchbar extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('searchbar', val);
this._setMode( val);
}
/**
@ -175,9 +175,7 @@ export class Searchbar extends Ion {
renderer: Renderer,
@Optional() ngControl: NgControl
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'searchbar');
// If the user passed a ngControl we need to set the valueAccessor
if (ngControl) {

8
src/components/segment/segment.ts
View File

@ -191,7 +191,7 @@ export class Segment extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('segment', val);
this._setColor(val);
}
/**
@ -199,7 +199,7 @@ export class Segment extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('segment', val);
this._setMode( val);
}
/**
@ -219,9 +219,7 @@ export class Segment extends Ion {
renderer: Renderer,
@Optional() ngControl: NgControl
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'segment');
if (ngControl) {
ngControl.valueAccessor = this;

6
src/components/select/select.ts
View File

@ -195,7 +195,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
*/
@Input()
set mode(val: string) {
this._setMode('select', val);
this._setMode(val);
}
/**
@ -217,9 +217,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
@Optional() public _item: Item,
@Optional() private _nav: NavController
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'select');
_form.register(this);

2
src/components/slides/slides.ts
View File

@ -324,7 +324,7 @@ export class Slides extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'slides');
this.rapidUpdate = debounce(() => {
this.update();
}, 10);

24
src/components/spinner/spinner.ts
View File

@ -127,7 +127,7 @@ export class Spinner extends Ion {
return this._color;
}
set color(value: string) {
this._setColor('spinner', value);
this._setColor(value);
}
/**
@ -135,7 +135,7 @@ export class Spinner extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('spinner', val);
this._setMode(val);
}
/**
@ -170,9 +170,7 @@ export class Spinner extends Ion {
@Input() paused: boolean = false;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'spinner');
}
/**
@ -199,12 +197,12 @@ export class Spinner extends Ion {
if (spinner.lines) {
for (var i = 0, l = spinner.lines; i < l; i++) {
this._l.push( this._loadEle(spinner, i, l) );
this._l.push(this._loadEle(spinner, i, l));
}
} else if (spinner.circles) {
for (var i = 0, l = spinner.circles; i < l; i++) {
this._c.push( this._loadEle(spinner, i, l) );
this._c.push(this._loadEle(spinner, i, l));
}
}
@ -227,7 +225,7 @@ const SPINNERS: any = {
ios: {
dur: 1000,
lines: 12,
fn: function(dur: number, index: number, total: number) {
fn: function (dur: number, index: number, total: number) {
return {
y1: 17,
y2: 29,
@ -242,7 +240,7 @@ const SPINNERS: any = {
'ios-small': {
dur: 1000,
lines: 12,
fn: function(dur: number, index: number, total: number) {
fn: function (dur: number, index: number, total: number) {
return {
y1: 12,
y2: 20,
@ -257,7 +255,7 @@ const SPINNERS: any = {
bubbles: {
dur: 1000,
circles: 9,
fn: function(dur: number, index: number, total: number) {
fn: function (dur: number, index: number, total: number) {
return {
r: 5,
style: {
@ -272,7 +270,7 @@ const SPINNERS: any = {
circles: {
dur: 1000,
circles: 8,
fn: function(dur: number, index: number, total: number) {
fn: function (dur: number, index: number, total: number) {
return {
r: 5,
style: {
@ -287,7 +285,7 @@ const SPINNERS: any = {
crescent: {
dur: 750,
circles: 1,
fn: function(dur: number) {
fn: function (dur: number) {
return {
r: 26,
style: {}
@ -298,7 +296,7 @@ const SPINNERS: any = {
dots: {
dur: 750,
circles: 3,
fn: function(dur: number, index: number, total: number) {
fn: function (dur: number, index: number, total: number) {
return {
r: 6,
style: {

7
src/components/tabs/tabs.ts
View File

@ -184,7 +184,7 @@ export class Tabs extends Ion implements AfterViewInit {
*/
@Input()
set color(value: string) {
this._setColor('tabs', value);
this._setColor( value);
}
/**
@ -192,7 +192,7 @@ export class Tabs extends Ion implements AfterViewInit {
*/
@Input()
set mode(val: string) {
this._setMode('tabs', val);
this._setMode( val);
}
/**
@ -250,9 +250,8 @@ export class Tabs extends Ion implements AfterViewInit {
renderer: Renderer,
private _linker: DeepLinker
) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'tabs');
this.mode = config.get('mode');
this.parent = <NavControllerBase>parent;
this.id = 't' + (++tabIds);
this._sbPadding = config.getBoolean('statusbarPadding');

8
src/components/toggle/toggle.ts
View File

@ -104,7 +104,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
*/
@Input()
set color(val: string) {
this._setColor('toggle', val);
this._setColor(val);
}
/**
@ -112,7 +112,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
*/
@Input()
set mode(val: string) {
this._setMode('toggle', val);
this._setMode(val);
}
/**
@ -128,9 +128,7 @@ export class Toggle extends Ion implements AfterContentInit, ControlValueAccesso
public _haptic: Haptic,
@Optional() public _item: Item
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'toggle');
_form.register(this);
if (_item) {

4
src/components/toolbar/toolbar-item.ts
View File

@ -23,9 +23,7 @@ export class ToolbarItem extends Ion {
@Optional() toolbar: Toolbar,
@Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
) {
super(config, elementRef, renderer);
this._setMode('bar-buttons', config.get('mode'));
super(config, elementRef, renderer, 'bar-buttons');
this.inToolbar = !!(toolbar || navbar);
}

3
src/components/toolbar/toolbar-title.ts
View File

@ -58,8 +58,7 @@ export class ToolbarTitle extends Ion {
@Optional() toolbar: Toolbar,
@Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
) {
super(config, elementRef, renderer);
this._setMode('title', this._mode = config.get('mode'));
super(config, elementRef, renderer, 'title');
toolbar && toolbar._setTitle(this);
navbar && navbar._setTitle(this);

14
src/components/toolbar/toolbar.ts
View File

@ -39,8 +39,7 @@ import { ViewController } from '../../navigation/view-controller';
export class Header extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
super(config, elementRef, renderer);
this._setMode('header', config.get('mode'));
super(config, elementRef, renderer, 'header');
viewCtrl && viewCtrl._setHeader(this);
}
@ -75,8 +74,7 @@ export class Header extends Ion {
export class Footer extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Optional() viewCtrl: ViewController) {
super(config, elementRef, renderer);
this._setMode('footer', config.get('mode'));
super(config, elementRef, renderer, 'footer');
viewCtrl && viewCtrl._setFooter(this);
}
@ -90,7 +88,7 @@ export class ToolbarBase extends Ion {
private _title: ToolbarTitle;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
super(config, elementRef, renderer);
super(config, elementRef, renderer, 'toolbar');
}
/**
@ -269,7 +267,7 @@ export class Toolbar extends ToolbarBase {
*/
@Input()
set color(val: string) {
this._setColor('toolbar', val);
this._setColor(val);
}
/**
@ -277,7 +275,7 @@ export class Toolbar extends ToolbarBase {
*/
@Input()
set mode(val: string) {
this._setMode('toolbar', val);
this._setMode( val);
}
constructor(
@ -287,8 +285,6 @@ export class Toolbar extends ToolbarBase {
renderer: Renderer
) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
this._sbPadding = config.getBoolean('statusbarPadding');
}

8
src/components/typography/typography.ts
View File

@ -56,7 +56,7 @@ export class Typography extends Ion {
*/
@Input()
set color(val: string) {
this._setColor('text', val);
this._setColor(val);
}
/**
@ -64,13 +64,11 @@ export class Typography extends Ion {
*/
@Input()
set mode(val: string) {
this._setMode('text', val);
this._setMode(val);
}
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, @Attribute('ion-text') ionText: string) {
super(config, elementRef, renderer);
this.mode = config.get('mode');
super(config, elementRef, renderer, 'text');
// TODO: Deprecated: all selectors besides `[ion-text]` rc.3
// Remove all other selectors and the `ionText` attribute