diff --git a/ionic/components/action-sheet/action-sheet.ios.scss b/ionic/components/action-sheet/action-sheet.ios.scss index c8c8cb48f3..4eba06bbd3 100644 --- a/ionic/components/action-sheet/action-sheet.ios.scss +++ b/ionic/components/action-sheet/action-sheet.ios.scss @@ -89,6 +89,11 @@ ion-action-sheet { } } +.action-sheet-selected { + font-weight: bold; + background: white; +} + .action-sheet-destructive { color: $action-sheet-ios-button-destructive-text-color; } diff --git a/ionic/components/action-sheet/action-sheet.md.scss b/ionic/components/action-sheet/action-sheet.md.scss index 1e9c0e2f71..fb00fc0dd5 100644 --- a/ionic/components/action-sheet/action-sheet.md.scss +++ b/ionic/components/action-sheet/action-sheet.md.scss @@ -71,3 +71,7 @@ $action-sheet-md-icon-margin: 0 28px 0 0 !default; margin-bottom: $action-sheet-md-group-margin-bottom; } } + +.action-sheet-selected { + font-weight: bold; +} diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 0accce43e3..6479980f95 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -244,6 +244,8 @@ class ActionSheetCmp { } else { if (button.role === 'destructive') { button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-destructive'; + } else if (button.role === 'selected') { + button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-selected'; } buttons.push(button); } diff --git a/ionic/components/action-sheet/action-sheet.wp.scss b/ionic/components/action-sheet/action-sheet.wp.scss index db3b1e02f8..05ce0c5060 100644 --- a/ionic/components/action-sheet/action-sheet.wp.scss +++ b/ionic/components/action-sheet/action-sheet.wp.scss @@ -75,6 +75,10 @@ $action-sheet-wp-icon-margin: 0 16px 0 0 !default; } } +.action-sheet-selected { + font-weight: bold; +} + .action-sheet-cancel { background: $action-sheet-wp-button-background; } diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts index d264bd9112..ab1509cf27 100644 --- a/ionic/components/select/select.ts +++ b/ionic/components/select/select.ts @@ -2,6 +2,7 @@ import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forw import {NG_VALUE_ACCESSOR} from 'angular2/common'; import {Alert} from '../alert/alert'; +import {ActionSheet} from '../action-sheet/action-sheet'; import {Form} from '../../util/form'; import {Item} from '../item/item'; import {merge, isTrueProperty, isBlank, isCheckedProperty} from '../../util/util'; @@ -157,6 +158,11 @@ export class Select { */ @Input() checked: any = false; + /** + * @private + */ + @Input() interface: string = ''; + /** * @output {any} Any expression you want to evaluate when the selection has changed */ @@ -206,7 +212,10 @@ export class Select { } private _open() { - if (this._disabled) return; + if (this._disabled) { + return; + } + console.debug('select, open alert'); // the user may have assigned some options specifically for the alert @@ -216,6 +225,7 @@ export class Select { // and we create a new array for the alert's two buttons alertOptions.buttons = [{ text: this.cancelText, + role: 'cancel', handler: () => { this.cancel.emit(null); } @@ -226,41 +236,72 @@ export class Select { alertOptions.title = this._item.getLabelText(); } - // user cannot provide inputs from alertOptions - // alert inputs must be created by ionic from ion-options - alertOptions.inputs = this._options.toArray().map(input => { - return { - type: (this._multi ? 'checkbox' : 'radio'), - label: input.text, - value: input.value, - checked: input.checked - }; - }); - - // create the alert instance from our built up alertOptions - let alert = Alert.create(alertOptions); - - if (this._multi) { - // use checkboxes - alert.setCssClass('select-alert multiple-select-alert'); - - } else { - // use radio buttons - alert.setCssClass('select-alert single-select-alert'); + let options = this._options.toArray(); + if (this.interface === 'action-sheet' && options.length > 6) { + this.interface = null; } - alert.addButton({ - text: this.okText, - handler: selectedValues => { - this.onChange(selectedValues); - this.change.emit(selectedValues); + let overlay; + if (this.interface === 'action-sheet') { + if (this._multi) { + throw new Error('action-sheet interface cannot use multivalue selector'); } - }); - this._nav.present(alert, alertOptions); + alertOptions.buttons = alertOptions.buttons.concat(options.map(input => { + return { + role: (input.checked ? 'selected' : ''), + text: input.text, + handler: () => { + this.onChange(input.value); + this.change.emit(input.value); + } + } + })); + alertOptions.cssClass = 'select-action-sheet'; + + overlay = ActionSheet.create(alertOptions); + + } else { + // default to use the alert interface + this.interface = 'alert'; + + // user cannot provide inputs from alertOptions + // alert inputs must be created by ionic from ion-options + alertOptions.inputs = this._options.toArray().map(input => { + return { + type: (this._multi ? 'checkbox' : 'radio'), + label: input.text, + value: input.value, + checked: input.checked + } + }); + + // create the alert instance from our built up alertOptions + overlay = Alert.create(alertOptions); + + if (this._multi) { + // use checkboxes + overlay.setCssClass('select-alert multiple-select-alert'); + + } else { + // use radio buttons + overlay.setCssClass('select-alert single-select-alert'); + } + + overlay.addButton({ + text: this.okText, + handler: selectedValues => { + this.onChange(selectedValues); + this.change.emit(selectedValues); + } + }); + + } + + this._nav.present(overlay, alertOptions); this._isOpen = true; - alert.onDismiss(() => { + overlay.onDismiss(() => { this._isOpen = false; }); } @@ -386,7 +427,7 @@ export class Select { /** * @private */ - onTouched() {} + onTouched() { } /** * @private diff --git a/ionic/components/select/test/single-value/index.ts b/ionic/components/select/test/single-value/index.ts index e9100120dd..4330ec4ef9 100644 --- a/ionic/components/select/test/single-value/index.ts +++ b/ionic/components/select/test/single-value/index.ts @@ -16,6 +16,7 @@ class E2EPage { month: string; year: string; years: Array; + notification: string; constructor() { this.gaming = ''; @@ -23,6 +24,7 @@ class E2EPage { this.music = null; this.month = '12'; this.year = '1994'; + this.notification = 'enable'; this.years = [1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]; diff --git a/ionic/components/select/test/single-value/main.html b/ionic/components/select/test/single-value/main.html index d3ad57f11f..85f8974cce 100644 --- a/ionic/components/select/test/single-value/main.html +++ b/ionic/components/select/test/single-value/main.html @@ -26,7 +26,7 @@ Operating System - + DOS Linux Mac OS 7 @@ -37,6 +37,16 @@ + + Notifications + + Enable + Mute + Mute for a week + Mute for a year + + + Music @@ -74,11 +84,16 @@ - + \ No newline at end of file