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

refactor(cssClass): update/cleanup css class usage

Browse Source
This commit is contained in:
Adam Bradley
2015-10-08 21:32:14 -05:00
parent 7ccdfed018
commit 18519d1576
25 changed files with 96 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demos/yerk/main.html
View File

@ -1,10 +1,10 @@
<ion-nav [root]="root"></ion-nav> <ion-nav [root]="root"></ion-nav>
<style> <style>
.md .nav .navbar-container { .md .navbar-container {
background-color: #2FD9BB !important; background-color: #2FD9BB !important;
} }
.md .nav .navbar-title { .md .navbar-title {
color: #FDFEFE; color: #FDFEFE;
} }
#tabs tab-bar:before { #tabs tab-bar:before {

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

@ -1,4 +1,4 @@
import {Directive, ElementRef, Renderer} from 'angular2/angular2'; import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
@ -14,7 +14,8 @@ export class Button {
constructor( constructor(
config: IonicConfig, config: IonicConfig,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer renderer: Renderer,
@Attribute('type') type: string
) { ) {
let element = elementRef.nativeElement; let element = elementRef.nativeElement;
@ -22,10 +23,8 @@ export class Button {
element.classList.add('disable-hover'); element.classList.add('disable-hover');
} }
// TODO this isn't working in the popup if (type) {
if (element.hasAttribute('type')) { renderer.setElementAttribute(elementRef, type, '');
let type = element.getAttribute("type");
renderer.setElementAttribute(elementRef, type, "");
} }
if (element.hasAttribute('ion-item')) { if (element.hasAttribute('ion-item')) {

8
ionic/components/checkbox/checkbox.ts
View File

@ -1,4 +1,4 @@
import {Component, View, Directive, Optional, NgControl} from 'angular2/angular2'; import {Component, View, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
import {Ion} from '../ion'; import {Ion} from '../ion';
import {IonicForm} from '../form/form'; import {IonicForm} from '../form/form';
@ -24,7 +24,6 @@ import {IonicForm} from '../form/form';
'id' 'id'
], ],
host: { host: {
'class': 'item',
'role': 'checkbox', 'role': 'checkbox',
'tappable': 'true', 'tappable': 'true',
'[attr.tab-index]': 'tabIndex', '[attr.tab-index]': 'tabIndex',
@ -47,8 +46,11 @@ export class Checkbox {
constructor( constructor(
form: IonicForm, form: IonicForm,
@Optional() ngControl: NgControl @Optional() ngControl: NgControl,
elementRef: ElementRef,
renderer: Renderer
) { ) {
renderer.setElementClass(elementRef, 'item', true);
this.form = form; this.form = form;
form.register(this); form.register(this);

11
ionic/components/item/item-sliding.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, View, ElementRef, NgIf, Host, Optional} from 'angular2/angular2'; import {Component, Directive, View, ElementRef, NgIf, Host, Optional, Renderer} from 'angular2/angular2';
import {Gesture} from 'ionic/gestures/gesture'; import {Gesture} from 'ionic/gestures/gesture';
import {DragGesture} from 'ionic/gestures/drag-gesture'; import {DragGesture} from 'ionic/gestures/drag-gesture';
@ -30,10 +30,7 @@ import {CSS, raf} from 'ionic/util/dom';
*/ */
@Component({ @Component({
selector: 'ion-item-sliding,[ion-item-sliding]', selector: 'ion-item-sliding,[ion-item-sliding]',
host: { inputs: [
'class': 'item'
},
properties: [
'sliding' 'sliding'
] ]
}) })
@ -53,7 +50,9 @@ export class ItemSliding {
* TODO * TODO
* @param {ElementRef} elementRef A reference to the component's DOM element. * @param {ElementRef} elementRef A reference to the component's DOM element.
*/ */
constructor(elementRef: ElementRef, @Optional() @Host() list: List) { constructor(elementRef: ElementRef, renderer: Renderer, @Optional() @Host() list: List) {
renderer.setElementClass(elementRef, 'item', true);
this._isOpen = false; this._isOpen = false;
this._isSlideActive = false; this._isSlideActive = false;
this._isTransitioning = false; this._isTransitioning = false;

2
ionic/components/item/modes/md.scss
View File

@ -149,7 +149,7 @@ $item-md-sliding-transition: transform 250ms ease-in-out !default;
} }
icon[item-left] + ion-item-content, icon[item-left] + ion-item-content,
icon[item-left] + .text-input { icon[item-left] + [text-input] {
margin-left: $item-md-padding-left + ($item-md-padding-left / 2); margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
} }

10
ionic/components/list/list.ts
View File

@ -1,4 +1,4 @@
import {Directive, ElementRef} from 'angular2/angular2'; import {Directive, ElementRef, Renderer} from 'angular2/angular2';
import {Ion} from '../ion'; import {Ion} from '../ion';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
@ -22,10 +22,7 @@ import * as util from 'ionic/util';
'items', 'items',
'virtual', 'virtual',
'content' 'content'
], ]
host: {
'class': 'list'
}
}) })
export class List extends Ion { export class List extends Ion {
/** /**
@ -33,8 +30,9 @@ export class List extends Ion {
* @param {ElementRef} elementRef TODO * @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO * @param {IonicConfig} config TODO
*/ */
constructor(elementRef: ElementRef, config: IonicConfig) { constructor(elementRef: ElementRef, config: IonicConfig, renderer: Renderer) {
super(elementRef, config); super(elementRef, config);
renderer.setElementClass(elementRef, 'list', true);
this.ele = elementRef.nativeElement; this.ele = elementRef.nativeElement;
} }
/** /**

2
ionic/components/nav-bar/modes/ios.scss
View File

@ -5,6 +5,6 @@
$navbar-ios-height: 4.4rem !default; $navbar-ios-height: 4.4rem !default;
.nav .navbar-container { .navbar-container {
min-height: $navbar-ios-height; min-height: $navbar-ios-height;
} }

34
ionic/components/nav-bar/modes/md.scss
View File

@ -5,23 +5,19 @@
$navbar-md-height: 5.6rem !default; $navbar-md-height: 5.6rem !default;
.nav { .navbar-container {
min-height: $navbar-md-height;
.navbar-container { }
min-height: $navbar-md-height;
} .toolbar .back-button {
margin: 0 0 0 12px;
.back-button { box-shadow: none;
margin: 0 0 0 12px; }
box-shadow: none;
} .toolbar .back-button-icon {
margin: 0;
.back-button-icon { min-width: 44px;
margin: 0; font-size: 2.4rem;
min-width: 44px; font-weight: normal;
font-size: 2.4rem; text-align: left;
font-weight: normal;
text-align: left;
}
} }

11
ionic/components/nav-bar/nav-bar.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, View, Optional, ElementRef, TemplateRef, forwardRef, Inject} from 'angular2/angular2'; import {Component, Directive, View, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
import {Ion} from '../ion'; import {Ion} from '../ion';
import {Icon} from '../icon/icon'; import {Icon} from '../icon/icon';
@ -50,10 +50,7 @@ class BackButtonText extends Ion {
@Component({ @Component({
selector: 'ion-navbar', selector: 'ion-navbar'
host: {
'class': 'toolbar'
}
}) })
@View({ @View({
template: template:
@ -77,9 +74,11 @@ export class Navbar extends ToolbarBase {
app: IonicApp, app: IonicApp,
@Optional() viewCtrl: ViewController, @Optional() viewCtrl: ViewController,
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig config: IonicConfig,
renderer: Renderer
) { ) {
super(elementRef, config); super(elementRef, config);
renderer.setElementClass(elementRef, 'toolbar', true);
this.app = app; this.app = app;
viewCtrl && viewCtrl.navbarView(this); viewCtrl && viewCtrl.navbarView(this);

7
ionic/components/nav/nav.ts
View File

@ -405,13 +405,10 @@ class ContentAnchor {
* @private * @private
*/ */
@Component({ @Component({
selector: 'ion-pane', selector: 'ion-pane'
host: {
'class': 'nav'
}
}) })
@View({ @View({
template: '' + template:
'<section class="navbar-container">' + '<section class="navbar-container">' +
'<template navbar-anchor></template>' + '<template navbar-anchor></template>' +
'</section>' + '</section>' +

14
ionic/components/radio/radio.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2'; import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
import {Ion} from '../ion'; import {Ion} from '../ion';
@ -45,7 +45,6 @@ import {ListHeader} from '../list/list';
@Directive({ @Directive({
selector: 'ion-radio-group', selector: 'ion-radio-group',
host: { host: {
'class': 'list',
'role': 'radiogroup', 'role': 'radiogroup',
'[attr.aria-activedescendant]': 'activeId', '[attr.aria-activedescendant]': 'activeId',
'[attr.aria-describedby]': 'describedById' '[attr.aria-describedby]': 'describedById'
@ -64,10 +63,13 @@ export class RadioGroup extends Ion {
constructor( constructor(
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig, config: IonicConfig,
renderer: Renderer,
@Optional() ngControl: NgControl, @Optional() ngControl: NgControl,
@Query(ListHeader) private headerQuery: QueryList<ListHeader> @Query(ListHeader) private headerQuery: QueryList<ListHeader>
) { ) {
super(elementRef, config); super(elementRef, config);
renderer.setElementClass(elementRef, 'list', true);
this.id = ++radioGroupIds; this.id = ++radioGroupIds;
this.radioIds = -1; this.radioIds = -1;
this.onChange = (_) => {}; this.onChange = (_) => {};
@ -170,7 +172,6 @@ export class RadioGroup extends Ion {
'id' 'id'
], ],
host: { host: {
'class': 'item',
'role': 'radio', 'role': 'radio',
'tappable': 'true', 'tappable': 'true',
'[attr.id]': 'id', '[attr.id]': 'id',
@ -200,9 +201,12 @@ export class RadioButton extends Ion {
constructor( constructor(
@Host() @Optional() group: RadioGroup, @Host() @Optional() group: RadioGroup,
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig config: IonicConfig,
renderer: Renderer
) { ) {
super(elementRef, config) super(elementRef, config);
renderer.setElementClass(elementRef, 'item', true);
this.group = group; this.group = group;
this.tabIndex = 0; this.tabIndex = 0;
} }

4
ionic/components/search-bar/modes/ios.scss
View File

@ -23,7 +23,7 @@ $search-bar-ios-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/sv
$search-bar-ios-input-close-icon-size: 17px !default; $search-bar-ios-input-close-icon-size: 17px !default;
.search-bar { ion-search-bar {
padding: $search-bar-ios-padding; padding: $search-bar-ios-padding;
background: $search-bar-ios-background-color; background: $search-bar-ios-background-color;
border-bottom: 1px solid $search-bar-ios-border-color; border-bottom: 1px solid $search-bar-ios-border-color;
@ -95,6 +95,6 @@ $search-bar-ios-input-close-icon-size: 17px !default;
padding-right: 0; padding-right: 0;
} }
&.hairlines .search-bar { &.hairlines ion-search-bar {
border-bottom-width: 0.55px; border-bottom-width: 0.55px;
} }

2
ionic/components/search-bar/modes/md.scss
View File

@ -21,7 +21,7 @@ $search-bar-md-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg
$search-bar-md-input-close-icon-size: 22px !default; $search-bar-md-input-close-icon-size: 22px !default;
.search-bar { ion-search-bar {
padding: $search-bar-md-padding; padding: $search-bar-md-padding;
background: $search-bar-md-background-color; background: $search-bar-md-background-color;
} }

2
ionic/components/search-bar/search-bar.scss
View File

@ -3,7 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
.search-bar { ion-search-bar {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;

5
ionic/components/switch/switch.ts
View File

@ -3,6 +3,7 @@ import {
View, View,
Directive, Directive,
ElementRef, ElementRef,
Renderer,
Host, Host,
Optional, Optional,
NgControl, NgControl,
@ -84,7 +85,6 @@ class MediaSwitch {
'id' 'id'
], ],
host: { host: {
'class': 'item',
'role': 'checkbox', 'role': 'checkbox',
'tappable': 'true', 'tappable': 'true',
'[attr.tab-index]': 'tabIndex', '[attr.tab-index]': 'tabIndex',
@ -119,11 +119,14 @@ export class Switch {
form: IonicForm, form: IonicForm,
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig, config: IonicConfig,
renderer: Renderer,
@Optional() private ngControl: NgControl @Optional() private ngControl: NgControl
) { ) {
this.form = form; this.form = form;
form.register(this); form.register(this);
renderer.setElementClass(elementRef, 'item', true);
this.lastTouch = 0; this.lastTouch = 0;
this.mode = config.get('mode'); this.mode = config.get('mode');

2
ionic/components/tabs/tabs.ts
View File

@ -68,7 +68,7 @@ import * as dom from 'ionic/util/dom';
} }
}) })
@View({ @View({
template: '' + template:
'<section class="navbar-container">' + '<section class="navbar-container">' +
'<template navbar-anchor></template>' + '<template navbar-anchor></template>' +
'</section>' + '</section>' +

2
ionic/components/text-input/label.scss
View File

@ -32,7 +32,7 @@ ion-input[floating-label] {
max-width: 100%; max-width: 100%;
} }
.text-input { [text-input] {
align-self: stretch; align-self: stretch;
width: auto; width: auto;
} }

1
ionic/components/text-input/label.ts
View File

@ -14,7 +14,6 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom';
], ],
host: { host: {
'[attr.id]': 'id', '[attr.id]': 'id',
'class': 'input-label',
'(touchstart)': 'pointerStart($event)', '(touchstart)': 'pointerStart($event)',
'(touchend)': 'pointerEnd($event)', '(touchend)': 'pointerEnd($event)',
'(mousedown)': 'pointerStart($event)', '(mousedown)': 'pointerStart($event)',

8
ionic/components/text-input/modes/ios.scss
View File

@ -8,12 +8,12 @@ $input-label-ios-color: #7f7f7f !default;
.list, .list,
ion-card { ion-card {
.text-input { [text-input] {
margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2);
padding: 0; padding: 0;
} }
ion-input[inset] .text-input { ion-input[inset] [text-input] {
margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left; margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
} }
@ -28,8 +28,8 @@ ion-card {
margin-bottom: 4px; margin-bottom: 4px;
} }
[stacked-label] .text-input, [stacked-label] [text-input],
[floating-label] .text-input { [floating-label] [text-input] {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }

8
ionic/components/text-input/modes/md.scss
View File

@ -9,7 +9,7 @@ $input-label-md-color: #999 !default;
.list, .list,
ion-card { ion-card {
.text-input { [text-input] {
margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2); margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
padding: 0; padding: 0;
} }
@ -19,7 +19,7 @@ ion-card {
left: 0; left: 0;
} }
ion-input[inset] .text-input { ion-input[inset] [text-input] {
margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2); padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
} }
@ -48,8 +48,8 @@ ion-card {
color: $text-input-highlight-color; color: $text-input-highlight-color;
} }
[stacked-label] .text-input, [stacked-label] [text-input],
[floating-label] .text-input { [floating-label] [text-input] {
margin-bottom: 8px; margin-bottom: 8px;
margin-top: 8px; margin-top: 8px;
} }

4
ionic/components/text-input/text-input.scss
View File

@ -24,13 +24,13 @@ ion-input.item {
} }
} }
ion-input .text-input { ion-input [text-input] {
flex: 1; flex: 1;
background-color: $text-input-background-color; background-color: $text-input-background-color;
pointer-events: none; pointer-events: none;
} }
ion-input.has-focus .text-input { ion-input.has-focus [text-input] {
pointer-events: auto; pointer-events: auto;
} }

23
ionic/components/text-input/text-input.ts
View File

@ -1,4 +1,4 @@
import {Directive, View, Host, Optional, ElementRef, Attribute, Query, QueryList, NgZone} from 'angular2/angular2'; import {Directive, View, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
import {IonicForm} from '../form/form'; import {IonicForm} from '../form/form';
@ -21,8 +21,7 @@ import {IonicPlatform} from '../../platform/platform';
'(touchend)': 'pointerEnd($event)', '(touchend)': 'pointerEnd($event)',
'(mouseup)': 'pointerEnd($event)', '(mouseup)': 'pointerEnd($event)',
'[class.has-focus]': 'hasFocus', '[class.has-focus]': 'hasFocus',
'[class.has-value]': 'hasValue', '[class.has-value]': 'hasValue'
'class': 'item'
} }
}) })
export class TextInput { export class TextInput {
@ -40,11 +39,14 @@ export class TextInput {
form: IonicForm, form: IonicForm,
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig, config: IonicConfig,
renderer: Renderer,
app: IonicApp, app: IonicApp,
zone: NgZone, zone: NgZone,
platform: IonicPlatform, platform: IonicPlatform,
@Optional() @Host() scrollView: Content @Optional() @Host() scrollView: Content
) { ) {
renderer.setElementClass(elementRef, 'item', true);
this.form = form; this.form = form;
form.register(this); form.register(this);
@ -72,7 +74,8 @@ export class TextInput {
*/ */
onInit() { onInit() {
if (this.input && this.label) { if (this.input && this.label) {
this.input.labelledBy = this.label.id = (this.label.id || 'label-' + this.inputId); this.label.id = (this.label.id || 'label-' + this.inputId)
this.input.labelledBy(this.label.id);
} }
let self = this; let self = this;
@ -384,9 +387,7 @@ export class TextInput {
'tabIndex' 'tabIndex'
], ],
host: { host: {
'[tabIndex]': 'tabIndex', '[tabIndex]': 'tabIndex'
'[attr.aria-labelledby]': 'labelledBy',
'class': 'text-input'
} }
}) })
export class TextInputElement { export class TextInputElement {
@ -395,6 +396,7 @@ export class TextInputElement {
form: IonicForm, form: IonicForm,
@Attribute('type') type: string, @Attribute('type') type: string,
elementRef: ElementRef, elementRef: ElementRef,
renderer: Renderer,
@Optional() textInputWrapper: TextInput @Optional() textInputWrapper: TextInput
) { ) {
this.form = form; this.form = form;
@ -402,6 +404,9 @@ export class TextInputElement {
this.elementRef = elementRef; this.elementRef = elementRef;
this.tabIndex = 0; this.tabIndex = 0;
this.renderer = renderer;
renderer.setElementAttribute(this.elementRef, 'text-input', '');
if (textInputWrapper) { if (textInputWrapper) {
// it's within ionic's ion-input, let ion-input handle what's up // it's within ionic's ion-input, let ion-input handle what's up
textInputWrapper.registerInput(this); textInputWrapper.registerInput(this);
@ -412,6 +417,10 @@ export class TextInputElement {
} }
} }
labelledBy(val) {
this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', val);
}
initFocus() { initFocus() {
this.elementRef.nativeElement.focus(); this.elementRef.nativeElement.focus();
} }

11
ionic/components/toolbar/toolbar.ts
View File

@ -1,4 +1,4 @@
import {Component, Directive, View, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2'; import {Component, Directive, View, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
import {Ion} from '../ion'; import {Ion} from '../ion';
import {IonicConfig} from '../../config/config'; import {IonicConfig} from '../../config/config';
@ -56,10 +56,7 @@ export class ToolbarBase extends Ion {
* TODO * TODO
*/ */
@Component({ @Component({
selector: 'ion-toolbar', selector: 'ion-toolbar'
host: {
'class': 'toolbar'
}
}) })
@View({ @View({
template: template:
@ -74,9 +71,11 @@ export class ToolbarBase extends Ion {
export class Toolbar extends ToolbarBase { export class Toolbar extends ToolbarBase {
constructor( constructor(
elementRef: ElementRef, elementRef: ElementRef,
config: IonicConfig config: IonicConfig,
renderer: Renderer
) { ) {
super(elementRef, config); super(elementRef, config);
renderer.setElementClass(elementRef, 'toolbar', true);
} }
} }

3
ionic/config/decorators.ts
View File

@ -114,9 +114,6 @@ function appendConfig(cls, config) {
cls.delegates = config.delegates; cls.delegates = config.delegates;
let componentId = (config.selector && config.selector.replace('ion-', ''));
config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
return config; return config;
} }

2
scripts/snapshot/snapshot.config.js
View File

@ -11,7 +11,7 @@ exports.config = {
specs: 'dist/e2e/**/*e2e.js', specs: 'dist/e2e/**/*e2e.js',
//specs: 'dist/e2e/tabs/**/*e2e.js', //specs: 'dist/e2e/tabs/**/*e2e.js',
sleepBetweenSpecs: 1400, sleepBetweenSpecs: 1000,
platformDefauls: { platformDefauls: {
browser: 'chrome', browser: 'chrome',