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(radio): converted ion-radio-group to an ion-list with radio-group attribute

Browse Source 
Changed Sass to style ion-list instead of the list class. Removed list
class from radios and lists. Closes #650
This commit is contained in:
Brandy Carney
2015-11-25 17:00:37 -05:00
parent 1db6e45494
commit 79bd85c8c8
11 changed files with 33 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demos/component-docs/inputs/radio/template.html
View File

@ -7,7 +7,7 @@
</ion-navbar>
<ion-content>
<ion-radio-group>
<ion-list radio-group>
<ion-list-header>
Language
@ -61,5 +61,5 @@
Erlang
</ion-radio>
</ion-radio-group>
</ion-list>
</ion-content>

2
ionic/components/card/modes/ios.scss
View File

@ -40,7 +40,7 @@ ion-card {
box-shadow: $card-ios-box-shadow;
border-radius: $card-ios-border-radius;
.list {
ion-list {
margin-bottom: 0;
.item {

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

@ -43,7 +43,7 @@ ion-card {
box-shadow: $card-md-box-shadow;
border-radius: $card-md-border-radius;
.list {
ion-list {
margin-bottom: 0;
ion-item-content {

4
ionic/components/list/list.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
.list {
ion-list {
display: block;
margin: 0;
padding: 0;
@ -18,7 +18,7 @@
}
}
.list[inset] {
ion-list[inset] {
overflow: hidden;
transform: translateZ(0);

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

@ -23,10 +23,7 @@ import * as util from 'ionic/util';
'items',
'virtual',
'content'
],
host: {
'class': 'list'
}
]
})
export class List extends Ion {

16
ionic/components/list/modes/ios.scss
View File

@ -27,7 +27,7 @@ $list-ios-border-color: $list-border-color !default;
/* DEFAULT LIST */
/****************/
.list {
ion-list {
margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left;
ion-list-header {
@ -87,7 +87,7 @@ $list-ios-border-color: $list-border-color !default;
}
}
.list + .list {
ion-list + ion-list {
margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
ion-list-header {
@ -96,7 +96,7 @@ $list-ios-border-color: $list-border-color !default;
}
}
&.hairlines .list {
&.hairlines ion-list {
ion-item-options {
border-width: 0.55px;
@ -127,7 +127,7 @@ $list-ios-border-color: $list-border-color !default;
/* INSET LIST */
/**************/
.list[inset] {
ion-list[inset] {
margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
border-radius: $list-inset-ios-border-radius;
@ -150,11 +150,11 @@ $list-ios-border-color: $list-border-color !default;
}
}
.list[inset] + .list[inset] {
ion-list[inset] + ion-list[inset] {
margin-top: 0;
}
&.hairlines .list[inset] {
&.hairlines ion-list[inset] {
.item {
border-width: 0.55px;
}
@ -165,8 +165,8 @@ $list-ios-border-color: $list-border-color !default;
/* NO LINES LIST */
/*****************/
.list[no-lines],
&.hairlines .list[no-lines] {
ion-list[no-lines],
&.hairlines ion-list[no-lines] {
ion-list-header,
.item,
.item .item-inner {

10
ionic/components/list/modes/md.scss
View File

@ -25,7 +25,7 @@ $list-md-border-color: $item-md-border-color !default;
/* DEFAULT LIST */
/****************/
.list {
ion-list {
margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-list-header,
@ -82,7 +82,7 @@ $list-md-border-color: $item-md-border-color !default;
border-width: 0;
}
+ .list {
+ ion-list {
margin-top: $list-md-margin-top + $list-md-margin-bottom;
ion-list-header {
@ -97,7 +97,7 @@ $list-md-border-color: $item-md-border-color !default;
/* INSET LIST */
/**************/
.list[inset] {
ion-list[inset] {
margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left;
border-radius: $list-inset-md-border-radius;
@ -113,7 +113,7 @@ $list-md-border-color: $item-md-border-color !default;
border-bottom-left-radius: $list-inset-md-border-radius;
}
+ .list[inset] {
+ ion-list[inset] {
margin-top: 0;
}
}
@ -123,7 +123,7 @@ $list-md-border-color: $item-md-border-color !default;
/* NO LINES LIST */
/*****************/
.list[no-lines] {
ion-list[no-lines] {
.item,
.item .item-inner {
border-width: 0;

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

@ -16,7 +16,7 @@ import {ListHeader} from '../list/list';
*
* @usage
* ```html
* <ion-radio-group ng-control="clientside">
* <ion-list radio-group ng-control="clientside">
*
* <ion-list-header>
* Clientside
@ -38,16 +38,15 @@ import {ListHeader} from '../list/list';
* React
* </ion-radio>
*
* </ion-radio-group>
* </ion-list>
* ```
*/
@Directive({
selector: 'ion-radio-group',
selector: '[radio-group]',
host: {
'role': 'radiogroup',
'[attr.aria-activedescendant]': 'activeId',
'[attr.aria-describedby]': 'describedById',
'class': 'list'
}
})
export class RadioGroup extends Ion {

12
ionic/components/radio/test/basic/main.html
View File

@ -6,7 +6,7 @@
<form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
<ion-radio-group ng-control="fruits">
<ion-list radio-group ng-control="fruits">
<ion-list-header>
Fruits
@ -28,7 +28,7 @@
Disabled
</ion-radio>
</ion-radio-group>
</ion-list>
</form>
@ -44,22 +44,22 @@
</div>
<form (submit)="doSubmit($event)" [ng-form-model]="currencyForm">
<ion-radio-group ng-control="currenciesControl">
<ion-list radio-group ng-control="currenciesControl">
<ion-list-header>
Currencies
</ion-list-header>
<ion-radio *ng-for="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
</ion-radio-group>
</ion-list>
</form>
<div padding>
<code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
</div>
<ion-radio-group [(ng-model)]="relationship">
<ion-list radio-group [(ng-model)]="relationship">
<ion-radio value="friends">Friends</ion-radio>
<ion-radio value="enemies">Enemies</ion-radio>
</ion-radio-group>
</ion-list>
<div padding>
<code><b>relationship:</b> {{relationship}}</code>

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

@ -6,7 +6,7 @@
$input-label-ios-color: #7f7f7f !default;
.list,
ion-list,
ion-card {
[text-input] {

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

@ -7,7 +7,7 @@ $text-input-highlight-color: map-get($colors, primary) !default;
$input-label-md-color: #999 !default;
.list,
ion-list,
ion-card {
[text-input] {
@ -74,7 +74,7 @@ ion-card {
}
}
.list[inset] ion-input.item {
ion-list[inset] ion-input.item {
padding-right: 0;
padding-left: 0;
}