From 782723ca84b0206dbce8fdc1aa0c757762d0b50a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 6 Aug 2015 15:51:07 -0500 Subject: [PATCH] ion-list-header directive --- ionic/components/app/test/sink/pages/list.ts | 12 +++++++---- ionic/components/checkbox/test/basic/e2e.ts | 10 ++++++++-- .../components/checkbox/test/basic/main.html | 6 +++--- ionic/components/list/extensions/ios.scss | 4 ++-- .../components/list/extensions/material.scss | 4 ++-- ionic/components/list/list.scss | 5 +++-- ionic/components/list/list.ts | 16 ++++++++++++++- .../list/test/headers-footers/main.html | 20 +++++++++---------- ionic/components/radio/radio.ts | 20 ++++++++++++++++--- ionic/components/radio/test/basic/e2e.ts | 2 +- ionic/components/radio/test/basic/main.html | 8 ++++---- ionic/config/annotations.ts | 3 ++- 12 files changed, 75 insertions(+), 35 deletions(-) diff --git a/ionic/components/app/test/sink/pages/list.ts b/ionic/components/app/test/sink/pages/list.ts index dbba4fcbf5..0f4b784d30 100644 --- a/ionic/components/app/test/sink/pages/list.ts +++ b/ionic/components/app/test/sink/pages/list.ts @@ -18,9 +18,11 @@ import {SinkPage} from '../sink-page';

-
+ + List Header -
+ + @@ -32,9 +34,11 @@ import {SinkPage} from '../sink-page'; Item -
+ + List Footer -
+ + ` diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts index 3e340014f6..cd8174623b 100644 --- a/ionic/components/checkbox/test/basic/e2e.ts +++ b/ionic/components/checkbox/test/basic/e2e.ts @@ -1,4 +1,10 @@ -it('should toggle checkbox state with label click', function() { - element(by.css('#appleLabel')).click(); +it('should check apple via checkbox element click', function() { + element(by.css('#e2eAppleCheckbox')).click(); +}); + + +it('should enable/check grape via buttons', function() { + element(by.css('#e2eGrapeDisabled')).click(); + element(by.css('#e2eGrapeChecked')).click(); }); diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html index 82ca261f7b..eb7cfc0e0b 100644 --- a/ionic/components/checkbox/test/basic/main.html +++ b/ionic/components/checkbox/test/basic/main.html @@ -8,7 +8,7 @@ - + Apple, value=apple, init checked @@ -29,8 +29,8 @@ diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss index 046f2338e3..cd77446492 100644 --- a/ionic/components/list/extensions/ios.scss +++ b/ionic/components/list/extensions/ios.scss @@ -17,7 +17,7 @@ $list-ios-footer-color: #333 !default; .list[mode="ios"] { - .list-header { + ion-list-header { padding: $list-ios-header-padding; font-size: $list-ios-header-font-size; font-weight: $list-ios-header-font-weight; @@ -26,7 +26,7 @@ $list-ios-footer-color: #333 !default; color: $list-ios-header-color; } - .list-footer { + ion-list-footer { padding: $list-ios-footer-padding; font-size: $list-ios-footer-font-size; font-weight: $list-ios-footer-font-weight; diff --git a/ionic/components/list/extensions/material.scss b/ionic/components/list/extensions/material.scss index f73a551174..947ed40b41 100644 --- a/ionic/components/list/extensions/material.scss +++ b/ionic/components/list/extensions/material.scss @@ -13,14 +13,14 @@ $list-md-footer-color: #8f8f94 !default; .list[mode="md"] { - .list-header { + ion-list-header { padding: $list-md-header-padding; font-size: $list-md-header-font-size; text-transform: uppercase; color: $list-md-header-color; } - .list-footer { + ion-list-footer { padding: $list-md-footer-padding; font-size: $list-md-footer-font-size; text-transform: uppercase; diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index b3313f6f1e..537622e818 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -10,8 +10,9 @@ list-style-type: none; } -.list-header, -.list-footer { +ion-list-header, +ion-list-footer { + display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index d390255292..2c21f864a8 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -1,4 +1,4 @@ -import {ElementRef} from 'angular2/angular2'; +import {Directive, ElementRef} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; @@ -42,3 +42,17 @@ export class List extends Ion { this.itemTemplate = item; } } + + +@Directive({ + selector: 'ion-list-header', + properties: [ + 'id' + ], + host: { + '[attr.id]': 'id' + } +}) +export class ListHeader { + +} diff --git a/ionic/components/list/test/headers-footers/main.html b/ionic/components/list/test/headers-footers/main.html index e6098a5ff4..5c5e578b49 100644 --- a/ionic/components/list/test/headers-footers/main.html +++ b/ionic/components/list/test/headers-footers/main.html @@ -2,9 +2,9 @@ -
+ List Header -
+
@@ -30,9 +30,9 @@ -
+ List Header -
+
@@ -44,17 +44,17 @@
-
+ List Footer -
+ -
+ List Header with text that is too long to fit inside the list header -
+
@@ -76,8 +76,8 @@
-
+ List Footer with text that is also too long why do you do this all the time plz stop its too long! -
+ diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 940f06860d..c6765da759 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -1,10 +1,11 @@ -import {ElementRef, Ancestor, Optional, NgControl} from 'angular2/angular2'; +import {ElementRef, Ancestor, Optional, NgControl, Query, QueryList} from 'angular2/angular2'; import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'; import {IonicConfig} from '../../config/config'; import {Ion} from '../ion'; import {IonInputItem} from '../form/form'; import {TapClick} from '../button/button'; +import {ListHeader} from '../list/list'; @IonicDirective({ @@ -12,7 +13,8 @@ import {TapClick} from '../button/button'; host: { 'class': 'list', 'role': 'radiogroup', - '[attr.aria-activedescendant]': 'activeId' + '[attr.aria-activedescendant]': 'activeId', + '[attr.aria-describedby]': 'describedById' } }) export class RadioGroup extends Ion { @@ -21,7 +23,8 @@ export class RadioGroup extends Ion { constructor( elementRef: ElementRef, config: IonicConfig, - @Optional() cd: NgControl + @Optional() cd: NgControl, + @Query(ListHeader) private headerQuery: QueryList ) { super(elementRef, config); this.id = ++radioGroupIds; @@ -32,6 +35,17 @@ export class RadioGroup extends Ion { if (cd) cd.valueAccessor = this; } + onInit() { + let header = this.headerQuery.first; + if (header) { + debugger + if (!header.id) { + header.id = 'radio-header-' + this.id; + } + this.describedById = header.id; + } + } + registerRadio(radio) { radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds)); this.radios.push(radio); diff --git a/ionic/components/radio/test/basic/e2e.ts b/ionic/components/radio/test/basic/e2e.ts index a259ec5d31..424ac5b89a 100644 --- a/ionic/components/radio/test/basic/e2e.ts +++ b/ionic/components/radio/test/basic/e2e.ts @@ -4,5 +4,5 @@ it('should check Banana', function() { }); it('should check Cherry', function() { - element(by.css('#e2eSelectCherry')).click(); + element(by.css('#e2eCherry')).click(); }); diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html index d9e0204b72..d09a808907 100644 --- a/ionic/components/radio/test/basic/main.html +++ b/ionic/components/radio/test/basic/main.html @@ -8,9 +8,9 @@ -
+ Fruits -
+ Apple @@ -20,7 +20,7 @@ Banana - + Cherry @@ -35,6 +35,6 @@ - + diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts index 62c3a9fd89..de9daac2e8 100644 --- a/ionic/config/annotations.ts +++ b/ionic/config/annotations.ts @@ -8,7 +8,7 @@ import { Aside, Button, Content, Scroll, Refresher, Slides, Slide, SlidePager, Tabs, Tab, - Card, List, Item, ItemGroup, ItemGroupTitle, + Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle, Toolbar, Icon, IconDirective, @@ -41,6 +41,7 @@ export const IonicDirectives = [ // Lists forwardRef(() => Card), forwardRef(() => List), + forwardRef(() => ListHeader), forwardRef(() => Item), forwardRef(() => ItemGroup), forwardRef(() => ItemGroupTitle),