diff --git a/ionic/components/aside/test/basic/page1.html b/ionic/components/aside/test/basic/page1.html index ca39e5b495..c1926fe72b 100644 --- a/ionic/components/aside/test/basic/page1.html +++ b/ionic/components/aside/test/basic/page1.html @@ -3,7 +3,7 @@ diff --git a/ionic/components/aside/test/basic/page2.html b/ionic/components/aside/test/basic/page2.html index ae00865437..4e60d298e4 100644 --- a/ionic/components/aside/test/basic/page2.html +++ b/ionic/components/aside/test/basic/page2.html @@ -3,7 +3,7 @@ diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html index 336a214556..5850640add 100644 --- a/ionic/components/button/test/fab/main.html +++ b/ionic/components/button/test/fab/main.html @@ -1,24 +1,24 @@ diff --git a/ionic/components/button/test/icons/main.html b/ionic/components/button/test/icons/main.html index 1af779516d..71d426ccf4 100644 --- a/ionic/components/button/test/icons/main.html +++ b/ionic/components/button/test/icons/main.html @@ -7,11 +7,11 @@
- + Left Icon
@@ -19,30 +19,30 @@
Right Icon - +
- +
- + Left, Large
@@ -50,30 +50,30 @@
Right, Large - +
- +
- + Left, Small
@@ -81,20 +81,20 @@
Right, Small - +
- +
diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index a165042c68..459844ea62 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -20,12 +20,12 @@ diff --git a/ionic/components/card/test/basic/main.html b/ionic/components/card/test/basic/main.html index 2abb23648f..097d924445 100644 --- a/ionic/components/card/test/basic/main.html +++ b/ionic/components/card/test/basic/main.html @@ -19,7 +19,7 @@ - + ion-iteam in a card, icon left, button right @@ -35,25 +35,25 @@ - + Card Link Item 1 - + Card Link Item 2 diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 94128fa381..31550af586 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -14,7 +14,8 @@ import {Button} from '../button/button'; properties: [ 'name', 'ios', - 'md' + 'md', + 'isActive' ], host: { '[attr.aria-label]': 'label', @@ -42,11 +43,14 @@ export class Icon { this.iconLeft = this.iconRight = this.iconOnly = false; this.ariaHidden = true; - this.isInactive = ele.hasAttribute('inactive'); + + if (ele.hasAttribute('forward')) { + this.name = config.setting('forwardIcon'); + } this.iconAttr = null; for (let i = 0, l = ele.attributes.length; i < l; i++) { - if (ele.attributes[i].value === '' && /_|item-|inactive|class/.test(ele.attributes[i].name) !== true) { + if (ele.attributes[i].value === '' && /_|item-|is-active|class/.test(ele.attributes[i].name) !== true) { this.iconAttr = ele.attributes[i].name; } } @@ -83,25 +87,62 @@ export class Icon { } else if (this.mode == 'md' && this.md) { this.name = this.md; - } else if (!this.name && this.iconAttr) { - this.name = this.iconAttr; + } else { + this.name = (this.name ? this.name : this.iconAttr); + + if (!(/^ion-/.test(this.name))) { + // not an exact icon being used + // add mode specific prefix + this.name = 'ion-' + this.mode + '-' + this.name; + } } if (!this.name) return; - // add the css class to show the icon font - this.renderer.setElementClass(this.elementRef, this.name, true); - // hide the icon when it's within a button // and the button isn't an icon only button this.ariaHidden = (this.withinButton && !this.iconOnly); - if (!this.ariaHidden) { - // the icon is either not within a button - // or the icon is within a button, and its an icon only button - this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '); + this.update(); + } + + get isActive() { + return (this._isActive === undefined || this._isActive === true || this._isActive === 'true'); + } + + set isActive(val) { + this._isActive = val; + this.update(); + } + + + update() { + if (this.name && this.mode == 'ios') { + + if (this.isActive) { + if (/-outline/.test(this.name)) { + this.name = this.name.replace('-outline', ''); + } + + } else if (!(/-outline/.test(this.name))) { + this.name += '-outline'; + } + } + if (this._name !== this.name) { + if (this._name) { + this.renderer.setElementClass(this.elementRef, this._name, false); + } + this._name = this.name; + this.renderer.setElementClass(this.elementRef, this.name, true); + + if (!this.ariaHidden) { + // the icon is either not within a button + // or the icon is within a button, and its an icon only button + this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '); + } + } } } diff --git a/ionic/components/icon/test/basic/index.ts b/ionic/components/icon/test/basic/index.ts index cdec4abc70..7ed3233be0 100644 --- a/ionic/components/icon/test/basic/index.ts +++ b/ionic/components/icon/test/basic/index.ts @@ -6,6 +6,7 @@ import {App} from 'ionic/ionic'; }) class E2EApp { constructor() { - this.homeIcon = 'ion-home'; + this.homeIcon = 'home'; + this.isActive = false; } } diff --git a/ionic/components/icon/test/basic/main.html b/ionic/components/icon/test/basic/main.html index 2f2db26c03..7f94ed6db8 100644 --- a/ionic/components/icon/test/basic/main.html +++ b/ionic/components/icon/test/basic/main.html @@ -8,23 +8,30 @@ - + - <icon ion-home></icon> + <icon home></icon> - + - <icon inactive ion-home></icon> + <icon home is-active="true"></icon> - + - <icon name="ion-home"></icon> + <icon home is-active="false"></icon> + + + + + + + <icon name="home"></icon> @@ -35,6 +42,13 @@ + + + + <icon ion-social-twitter></icon> + + + @@ -43,12 +57,33 @@ - + - <icon inactive ios="ion-social-apple" md="ion-social-android"></icon> + <icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android"></icon> + + + + <icon ios="ion-social-apple"></icon> + + + + + + + <icon md="ion-social-android"></icon> + + + + + + <icon forward></icon> + + + + diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 011d9b7540..0c3a0d54b7 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -48,7 +48,7 @@ ion-item-content { white-space: normal; } -.list .item > icon:first-child { +.item > icon:first-child { min-width: 24px; text-align: center; } diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html index 9af8cefa9d..8144d11812 100644 --- a/ionic/components/item/test/buttons/main.html +++ b/ionic/components/item/test/buttons/main.html @@ -30,12 +30,12 @@ left icon buttons @@ -43,37 +43,37 @@ right icon buttons icon only buttons ion-item right icon/text button ion-item left clear button diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html index e34cb98c68..1156ee57d9 100644 --- a/ionic/components/item/test/icons/main.html +++ b/ionic/components/item/test/icons/main.html @@ -19,45 +19,45 @@ a[ion-item] w/ right side default icon - + a[ion-item] w/ right side large icon - + a[ion-item] w/ right side small icon - + - + ion-item w/ both side icons - + a[ion-item] w/ two right side icons - - + + diff --git a/ionic/components/item/test/images/main.html b/ionic/components/item/test/images/main.html index 46ffa05583..e5352083b1 100644 --- a/ionic/components/item/test/images/main.html +++ b/ionic/components/item/test/images/main.html @@ -7,12 +7,12 @@ - + One Line w/ Icon, div only text - +

Two Lines w/ Icon, H2 Header

Paragraph text.

 diff --git a/ionic/components/item/test/media/main.html b/ionic/components/item/test/media/main.html index a69352d7ed..47e290ed82 100644 --- a/ionic/components/item/test/media/main.html +++ b/ionic/components/item/test/media/main.html @@ -62,7 +62,7 @@

Icon on right

Vertically align top

button.item

- + diff --git a/ionic/components/list/test/headers/main.html b/ionic/components/list/test/headers/main.html index 062ca5986d..416774ddce 100644 --- a/ionic/components/list/test/headers/main.html +++ b/ionic/components/list/test/headers/main.html @@ -7,7 +7,7 @@ - + Wifi
Terrible @@ -15,7 +15,7 @@ - + Affection
Very Little @@ -23,7 +23,7 @@ - + Home
Where the heart is @@ -40,7 +40,7 @@ - + Magic
Activated @@ -48,7 +48,7 @@ - + Star status
Super @@ -65,7 +65,7 @@ - + Pizza
Always @@ -73,7 +73,7 @@ - + Beer
Yes Plz @@ -81,7 +81,7 @@ - + Wine
All the time @@ -94,12 +94,12 @@ - + New List, no header, Item 1 - + New List, no header, Item 2 diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html index cc98c74243..6d65518506 100644 --- a/ionic/components/list/test/inset/main.html +++ b/ionic/components/list/test/inset/main.html @@ -16,7 +16,7 @@ - + All Out Inset List diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 6bb0b85ce9..319add8899 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -20,7 +20,7 @@ import {IonicComponent, IonicView} from '../../config/annotations'; '