javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): remove old clearInput code and clean up UI, added onChange calls

Browse Source 
references #6514
This commit is contained in:
Brandy Carney
2016-05-12 18:55:24 -04:00
parent 619f119d9b
commit 71cd297751
7 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/input/input-base.ts
View File

@ -401,14 +401,6 @@ export class InputBase {
} }
} }
/**
* @private
*/
clearTextInput() {
console.debug('Should clear input');
this._value = '';
}
/** /**
* @private * @private
*/ */

1
ionic/components/input/input.ios.scss
View File

@ -80,6 +80,7 @@ ion-input[clearInput] {
bottom: 0; bottom: 0;
width: $text-input-ios-input-clear-icon-width; width: $text-input-ios-input-clear-icon-width;
height: 34px;
background-size: $text-input-ios-input-clear-icon-size; background-size: $text-input-ios-input-clear-icon-size;
} }

2
ionic/components/input/input.md.scss
View File

@ -112,7 +112,7 @@ ion-input[clearInput] {
@include svg-background-image($text-input-md-input-clear-icon-svg); @include svg-background-image($text-input-md-input-clear-icon-svg);
right: ($item-md-padding-right / 2); right: ($item-md-padding-right / 2);
bottom: 2px; bottom: 4px;
width: $text-input-md-input-clear-icon-width; width: $text-input-md-input-clear-icon-width;

5
ionic/components/input/input.scss
View File

@ -127,6 +127,7 @@ input.text-input:-webkit-autofill {
.text-input-clear-icon { .text-input-clear-icon {
position: absolute; position: absolute;
display: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -135,6 +136,10 @@ input.text-input:-webkit-autofill {
background-position: center; background-position: center;
} }
.input-has-value .text-input-clear-icon {
display: block;
}
// Cloned Input // Cloned Input
// -------------------------------------------------- // --------------------------------------------------

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

@ -66,7 +66,7 @@ import {Platform} from '../../platform/platform';
template: template:
'<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' + '<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
'<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' + '<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<button clear *ngIf="clearInput && value" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' + '<button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>', '<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
directives: [ directives: [
NextInput, NextInput,
@ -107,7 +107,10 @@ export class TextInput extends InputBase {
* @private * @private
*/ */
clearTextInput() { clearTextInput() {
console.debug("Should clear input");
this._value = ''; this._value = '';
this.onChange(this._value);
this.writeValue(this._value);
} }
} }

2
ionic/components/input/input.wp.scss
View File

@ -108,7 +108,7 @@ ion-input[clearInput] {
@include svg-background-image($text-input-wp-input-clear-icon-svg); @include svg-background-image($text-input-wp-input-clear-icon-svg);
right: ($item-wp-padding-right / 2); right: ($item-wp-padding-right / 2);
bottom: 2px; bottom: 7px;
width: $text-input-wp-input-clear-icon-width; width: $text-input-wp-input-clear-icon-width;

30
ionic/components/input/test/form-inputs/main.html
View File

@ -7,24 +7,24 @@
<form [ngFormModel]="loginForm" #mf="ngForm" novalidate> <form [ngFormModel]="loginForm" #mf="ngForm" novalidate>
<ion-list> <ion-list>
<ion-item clearInput> <ion-item>
<ion-label floating>Email</ion-label> <ion-label floating>Email</ion-label>
<ion-input [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input> <ion-input clearInput [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label floating>Username</ion-label> <ion-label floating>Username</ion-label>
<ion-input [(ngModel)]="login.username" ngControl="username"></ion-input> <ion-input clearInput [(ngModel)]="login.username" ngControl="username"></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label>Password</ion-label> <ion-label>Password</ion-label>
<ion-input [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input> <ion-input clearInput [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label>Comments</ion-label> <ion-label>Comments</ion-label>
<ion-textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea> <ion-textarea clearInput [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea>
</ion-item> </ion-item>
<div padding-left padding-right> <div padding-left padding-right>
@ -43,15 +43,15 @@
<form (ngSubmit)="submit($event, user)" #lf="ngForm"> <form (ngSubmit)="submit($event, user)" #lf="ngForm">
<ion-list> <ion-list>
<ion-item clearInput> <ion-item>
<ion-label floating>Username</ion-label> <ion-label floating>Username</ion-label>
<ion-input [(ngModel)]="user.username" ngControl="username" required></ion-input> <ion-input [(ngModel)]="user.username" ngControl="username" required></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label floating>Password</ion-label> <ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password" ngControl="password" required></ion-input> <ion-input type="password" [(ngModel)]="user.password" ngControl="password" required></ion-input>
</ion-item> </ion-item>
<div padding-left padding-right clearInput> <div padding-left padding-right>
<button block type="submit">Login</button> <button block type="submit">Login</button>
</div> </div>
<div padding-left> <div padding-left>
@ -64,22 +64,22 @@
</form> </form>
<ion-list> <ion-list>
<ion-item clearInput> <ion-item>
<ion-label>Email</ion-label> <ion-label>Email</ion-label>
<ion-input type="email" required></ion-input> <ion-input type="email" required></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label>Username</ion-label> <ion-label>Username</ion-label>
<ion-input></ion-input> <ion-input></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label>Password</ion-label> <ion-label>Password</ion-label>
<ion-input type="password" required></ion-input> <ion-input type="password" required></ion-input>
</ion-item> </ion-item>
<ion-item clearInput> <ion-item>
<ion-label>Comments</ion-label> <ion-label>Comments</ion-label>
<ion-textarea required>Comment value</ion-textarea> <ion-textarea required>Comment value</ion-textarea>
</ion-item> </ion-item>