javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(icons): rename social- to -logo

Browse Source 
Closes #879 #612 #862 #864
This commit is contained in:
Adam Bradley
2016-01-06 20:36:12 -06:00
parent e8e0f83539
commit c2f67d12a3
6 changed files with 157 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
ionic/components/icon/icon.ts
View File

@ -1,4 +1,4 @@
import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core';
import {Directive, Input, ElementRef, Renderer} from 'angular2/core';
import {Config} from '../../config/config';
@ -16,7 +16,7 @@ import {Config} from '../../config/config';
* <ion-icon name="star"></ion-icon>
*
* <!-- explicity set the icon for each platform -->
* <ion-icon ios="ion-ios-home" md="ion-md-home"></ion-icon>
* <ion-icon ios="ios-home" md="md-home"></ion-icon>
* ```
*
* @property {string} [name] - Use the appropriate icon for the mode.
@ -47,6 +47,10 @@ export class Icon {
private _renderer: Renderer
) {
this.mode = config.get('iconMode');
this._name = '';
this._ios = '';
this._md = '';
this._css = '';
if (_elementRef.nativeElement.tagName === 'ICON') {
// deprecated warning
@ -59,30 +63,51 @@ export class Icon {
/**
* @private
*/
ngOnInit() {
if (this.mode == 'ios' && this.ios) {
this.name = this.ios;
get name() {
return this._name;
}
} else if (this.mode == 'md' && this.md) {
this.name = this.md;
/**
* @private
*/
set name(val) {
if (!(/md-|ios-|-logo/.test(val))) {
// this does not have one of the defaults
// so lets auto add in the mode prefix for them
val = this.mode + '-' + val;
}
if (!this.name) return;
if (!(/^ion-/.test(this.name))) {
// not an exact icon being used
// add mode specific prefix
this.name = 'ion-' + this.mode + '-' + this.name;
}
this._name = val;
this.update();
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
get ios() {
return this._ios;
}
/**
* @private
*/
set ios(val) {
this._ios = val;
this.update();
}
/**
* @private
*/
get md() {
return this._md;
}
/**
* @private
*/
set md(val) {
this._md = val;
this.update();
}
get isActive() {
@ -101,29 +126,39 @@ export class Icon {
* @private
*/
update() {
if (this.name && this.mode == 'ios') {
let css = 'ion-';
if (this.isActive) {
if (/-outline/.test(this.name)) {
this.name = this.name.replace('-outline', '');
}
if (this._ios && this.mode === 'ios') {
css += this._ios;
} else if (!(/-outline/.test(this.name))) {
this.name += '-outline';
}
} else if (this._md && this.mode === 'md') {
css += this._md;
} else {
css += this._name;
}
if (this._name !== this.name) {
if (this._name) {
this._renderer.setElementClass(this._elementRef, this._name, false);
if (this.mode == 'ios' && !this.isActive) {
css += '-outline';
}
if (this._css !== css) {
if (this._css) {
this._renderer.setElementClass(this._elementRef, this._css, false);
}
this._name = this.name;
this._renderer.setElementClass(this._elementRef, this.name, true);
this._css = css;
this._renderer.setElementClass(this._elementRef, css, true);
this._renderer.setElementAttribute(this._elementRef, 'aria-label',
this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' '));
}
}
/**
* @private
*/
addClass(className) {
this._renderer.setElementClass(this._elementRef, className, true);
}
}

18
ionic/components/icon/test/basic/index.ts
View File

@ -8,10 +8,24 @@ class E2EApp {
constructor() {
this.homeIcon = 'home';
this.isActive = false;
this.btnIcon = 'home';
this.iconIndex = 0;
this.icons = [
'home',
'star',
'ios-alert',
'ios-alert-outline',
'md-alert',
'apple-logo'
];
this.btnIcon = this.icons[0];
}
updateIcon() {
this.btnIcon = (this.btnIcon === 'home' ? 'star' : 'home');
this.iconIndex++;
if (this.iconIndex >= this.icons.length) {
this.iconIndex = 0;
}
this.btnIcon = this.icons[this.iconIndex];
}
}

38
ionic/components/icon/test/basic/main.html
View File

@ -10,49 +10,63 @@
<ion-item>
<ion-icon name="home" item-left></ion-icon>
<code>
&lt;ion-icon name="home">&lt;/ion-icon>
name="home"
</code>
</ion-item>
<ion-item>
<ion-icon [name]="homeIcon" item-left></ion-icon>
<code>
&lt;ion-icon [name]="homeIcon">&lt;/ion-icon>
[name]="homeIcon"
</code>
</ion-item>
<ion-item>
<ion-icon name="ion-social-twitter" item-left></ion-icon>
<ion-icon name="home" isActive="true" item-left></ion-icon>
<code>
&lt;ion-icon name="ion-social-twitter">&lt;/ion-icon>
name="home" isActive="true"
</code>
</ion-item>
<ion-item>
<ion-icon ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
<ion-icon name="home" [isActive]="isActive" item-left></ion-icon>
<code>
&lt;ion-icon ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
name="home" [isActive]="isActive"
</code>
</ion-item>
<ion-item>
<ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></ion-icon>
<ion-icon name="ios-home" item-left></ion-icon>
<code>
&lt;ion-icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android">&lt;/ion-icon>
name="ios-home"
</code>
</ion-item>
<ion-item>
<ion-icon ios="ion-social-apple" item-left></ion-icon>
<ion-icon name="ios-home-outline" item-left></ion-icon>
<code>
&lt;ion-icon ios="ion-social-apple">&lt;/ion-icon>
name="ios-home-outline"
</code>
</ion-item>
<ion-item>
<ion-icon md="ion-social-android" item-left></ion-icon>
<ion-icon name="md-home" item-left></ion-icon>
<code>
&lt;ion-icon md="ion-social-android">&lt;/ion-icon>
name="md-home"
</code>
</ion-item>
<ion-item>
<ion-icon name="twitter-logo" item-left></ion-icon>
<code>
name="twitter-logo"
</code>
</ion-item>
<ion-item>
<ion-icon ios="apple-logo" md="android-logo" item-left></ion-icon>
<code>
ios="apple-logo" md="android-logo"
</code>
</ion-item>