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

set button colors with style types

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 12:00:34 -06:00
parent 822141c420
commit 7506d197f3
2 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ionic/components/button/button.ts
View File

@ -37,7 +37,8 @@ export class Button {
) {
this._role = 'button'; // bar-button/item-button
this._size = null; // large/small
this._style = null; // outline/clear
this._style = null; // outline/clear/solid
this._shape = null; // round/fab
this._display = null; // block/full
this._colors = []; // primary/secondary
this._icon = null; // left/right/only
@ -118,6 +119,9 @@ export class Button {
} else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
this._display = attrName;
} else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
this._shape = attrName;
} else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
this._size = attrName;
@ -131,12 +135,17 @@ export class Button {
let role = this._role;
if (role) {
this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._shape, assignCssClass); // button-round
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
this._colors.forEach(color => {
this._setClass(color, assignCssClass); // button-secondary
this._setClass(colorStyle + color, assignCssClass); // button-secondary
});
}
}
@ -157,7 +166,8 @@ export class Button {
}
const BUTTON_SIZE_ATTRS = ['large', 'small'];
const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
const IGNORE_ATTRS = /_ng/;

57
ionic/components/button/test/button.spec.ts
View File

@ -31,7 +31,7 @@ export function run() {
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
expect(hasClass(b, 'bar-button-small')).toEqual(true);
expect(hasClass(b, 'bar-button-full')).toEqual(true);
expect(hasClass(b, 'bar-button-primary')).toEqual(true);
expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
expect(hasClass(b, 'button-outline')).toEqual(false);
expect(hasClass(b, 'button-small')).toEqual(false);
@ -45,13 +45,37 @@ export function run() {
expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-outline-primary')).toEqual(true);
b._assignCss(false);
expect(hasClass(b, 'button-outline')).toEqual(false);
expect(hasClass(b, 'button-small')).toEqual(false);
expect(hasClass(b, 'button-full')).toEqual(false);
expect(hasClass(b, 'button-primary')).toEqual(false);
expect(hasClass(b, 'button-outline-primary')).toEqual(false);
});
it('should read button color attributes with styles', () => {
let b = mockButton(['outline', 'small', 'full', 'primary']);
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true);
expect(hasClass(b, 'button-outline-primary')).toEqual(true);
b = mockButton(['clear', 'primary', 'secondary']);
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-clear')).toEqual(true);
expect(hasClass(b, 'button-clear-primary')).toEqual(true);
expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
b = mockButton(['solid', 'primary', 'secondary']);
b._assignCss(true);
expect(hasClass(b, 'button')).toEqual(true);
expect(hasClass(b, 'button-solid')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-secondary')).toEqual(true);
});
it('should read button color attributes', () => {
@ -63,21 +87,10 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
expect(hasClass(b, 'button-secondary')).toEqual(true);
b = mockButton(['outline', 'small', 'full', 'primary']);
b._assignCss(true);
expect(hasClass(b, 'button-outline')).toEqual(true);
expect(hasClass(b, 'button-small')).toEqual(true);
expect(hasClass(b, 'button-full')).toEqual(true);
expect(hasClass(b, 'button-primary')).toEqual(true);
});
it('should read button style attributes', () => {
let b = mockButton(['round']);
b._assignCss(true);
expect(hasClass(b, 'button-round')).toEqual(true);
b = mockButton(['clear']);
let b = mockButton(['clear']);
b._assignCss(true);
expect(hasClass(b, 'button-clear')).toEqual(true);
@ -85,10 +98,6 @@ export function run() {
b._assignCss(true);
expect(hasClass(b, 'button-outline')).toEqual(true);
b = mockButton(['fab']);
b._assignCss(true);
expect(hasClass(b, 'button-fab')).toEqual(true);
b = mockButton(['clear', 'outline', 'small', 'full']);
b._assignCss(true);
expect(hasClass(b, 'button-clear')).toEqual(false);
@ -97,6 +106,16 @@ export function run() {
expect(hasClass(b, 'button-full')).toEqual(true);
});
it('should read button shape attributes', () => {
let b = mockButton(['round']);
b._assignCss(true);
expect(hasClass(b, 'button-round')).toEqual(true);
b = mockButton(['fab']);
b._assignCss(true);
expect(hasClass(b, 'button-fab')).toEqual(true);
});
it('should read button display attributes', () => {
let b = mockButton(['block']);
b._assignCss(true);