diff --git a/ionic/components/text-input/test/form-inputs/main.html b/ionic/components/text-input/test/form-inputs/main.html index 9dc613e003..e045e73407 100644 --- a/ionic/components/text-input/test/form-inputs/main.html +++ b/ionic/components/text-input/test/form-inputs/main.html @@ -7,22 +7,22 @@
- + Email - + Username - + Password - + Comments @@ -43,15 +43,15 @@ - + Username - + Password -
+
@@ -63,4 +63,26 @@ + + + Email + + + + + Username + + + + + Password + + + + + Comments + + + + diff --git a/ionic/components/text-input/text-input.ios.scss b/ionic/components/text-input/text-input.ios.scss index 65a74e438c..f16eddfd79 100644 --- a/ionic/components/text-input/text-input.ios.scss +++ b/ionic/components/text-input/text-input.ios.scss @@ -4,7 +4,12 @@ // iOS Text Input // -------------------------------------------------- -$text-input-ios-background-color: $list-ios-background-color !default; +$text-input-ios-background-color: $list-ios-background-color !default; + +$text-input-ios-input-clear-icon-width: 30px !default; +$text-input-ios-input-clear-icon-color: rgba(0, 0, 0, 0.5) !default; +$text-input-ios-input-clear-icon-svg: "" !default; +$text-input-ios-input-clear-icon-size: 18px !default; // Default Input @@ -34,3 +39,23 @@ $text-input-ios-background-color: $list-ios-background-color !default; margin-top: 8px; margin-bottom: 8px; } + +// Clear Input Icon +// -------------------------------------------------- + +ion-input[clearInput] { + position: relative; + + .text-input { + padding-right: $text-input-ios-input-clear-icon-width; + } +} + +.text-input-clear-icon { + width: $text-input-ios-input-clear-icon-width; + + @include svg-background-image($text-input-ios-input-clear-icon-svg); + background-size: $text-input-ios-input-clear-icon-size; + right: ($item-ios-padding-right / 2); + bottom: 0; +} diff --git a/ionic/components/text-input/text-input.md.scss b/ionic/components/text-input/text-input.md.scss index f090bfc143..99f96198a7 100644 --- a/ionic/components/text-input/text-input.md.scss +++ b/ionic/components/text-input/text-input.md.scss @@ -9,6 +9,12 @@ $text-input-md-highlight-color: map-get($colors-md, primary) !defaul $text-input-md-hightlight-color-valid: map-get($colors-md, secondary) !default; $text-input-md-hightlight-color-invalid: map-get($colors-md, danger) !default; +$text-input-md-input-clear-icon-width: 30px !default; +$text-input-md-input-clear-icon-color: #5B5B5B !default; +$text-input-md-input-clear-icon-svg: "" !default; +$text-input-md-input-clear-icon-size: 22px !default; + + // Default Input // -------------------------------------------------- @@ -65,3 +71,24 @@ ion-input.ng-invalid.ng-touched:after { margin-top: 8px; margin-bottom: 8px; } + + +// Clear Input Icon +// -------------------------------------------------- + +ion-input[clearInput] { + position: relative; + + .text-input { + padding-right: $text-input-md-input-clear-icon-width; + } +} + +.text-input-clear-icon { + width: $text-input-md-input-clear-icon-width; + + @include svg-background-image($text-input-md-input-clear-icon-svg); + background-size: $text-input-md-input-clear-icon-size; + right: ($item-md-padding-right / 2); + bottom: 2px; +} diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss index 4ddcc82d3e..23cc93ae54 100644 --- a/ionic/components/text-input/text-input.scss +++ b/ionic/components/text-input/text-input.scss @@ -61,3 +61,15 @@ input, textarea { @include placeholder(); } + +// Clear Input Icon +// -------------------------------------------------- + +.text-input-clear-icon { + margin: 0; + padding: 0; + + background-repeat: no-repeat; + background-position: center; + position: absolute; +} diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index 78cc86fc9f..22cf6f3988 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,24 +1,30 @@ -import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core'; +import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer, Input} from 'angular2/core'; import {NgIf} from 'angular2/common'; import {NavController} from '../nav/nav-controller'; import {Config} from '../../config/config'; import {Form} from '../../util/form'; -import {Label} from './label'; +import {Label} from '../label/label'; import {IonicApp} from '../app/app'; import {Content} from '../content/content'; import * as dom from '../../util/dom'; import {Platform} from '../../platform/platform'; +import {Button} from '../button/button'; /** * @name Input * @module ionic * @description - * `ionInput` is a generic wrapper for both inputs and textareas. You can give `ion-input` to tell it how to handle a chile `ion-label` component - * @property [fixed-labels] - a persistant label that sits next the the input - * @property [floating-labels] - a label that will float about the input if the input is empty of looses focus - * @property [stacked-labels] - A stacked label will always appear on top of the input + * + * `ion-input` is a generic wrapper for both inputs and textareas. You can give `ion-input` attributes to tell it how to handle a child `ion-label` component. + * + * @property [fixed-label] - a persistant label that sits next the the input + * @property [floating-label] - a label that will float about the input if the input is empty of looses focus + * @property [stacked-label] - A stacked label will always appear on top of the input + * @property [inset] - The input will be inset + * @property [clearInput] - A clear icon will appear in the input which clears it + * * @usage * ```html * @@ -26,7 +32,7 @@ import {Platform} from '../../platform/platform'; * * * - * + * * * * @@ -61,10 +67,15 @@ import {Platform} from '../../platform/platform'; '
' + '' + '' + + '' + '
', - directives: [NgIf, forwardRef(() => InputScrollAssist)] + directives: [NgIf, forwardRef(() => InputScrollAssist), Button] }) export class TextInput { + /** + * @private + */ + @Input() clearInput: any; constructor( form: Form, @@ -109,6 +120,13 @@ export class TextInput { this.input && this.input.elementRef.nativeElement.classList.contains(className); } + /** + * @private + */ + clearTextInput() { + console.log("Should clear input"); + } + /** * @private */ @@ -130,6 +148,17 @@ export class TextInput { this.label = label; } + /** + * @private + * On Initialization check for attributes + */ + ngOnInit() { + let clearInput = this.clearInput; + if (typeof clearInput === 'string') { + this.clearInput = (clearInput === '' || clearInput === 'true'); + } + } + /** * @private */