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): fix material design success/error highlighting on inputs

Browse Source 
references #6040
references #5052
This commit is contained in:
Brandy Carney
2016-05-21 12:52:17 -04:00
parent 5498a36a86
commit 702a88225b
2 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/input/input.md.scss
View File

@ -19,6 +19,8 @@ $text-input-md-input-clear-icon-color: #5b5b5b !default;
$text-input-md-input-clear-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
$text-input-md-input-clear-icon-size: 22px !default;
$text-input-md-show-success-highlight: true !default;
$text-input-md-show-error-highlight: true !default;
// Material Design Default Input
@ -44,7 +46,7 @@ $text-input-md-input-clear-icon-size: 22px !default;
// Material Design Highlighted Input
// --------------------------------------------------
ion-input::after {
.item-input::after {
position: absolute;
right: 0;
bottom: 0;
@ -56,16 +58,32 @@ ion-input::after {
content: "";
}
.input-has-focus::after {
.item-input.input-has-focus::after {
border-bottom-color: $text-input-md-highlight-color;
}
ion-input.ng-valid.input-has-value::after {
border-bottom-color: $text-input-md-hightlight-color-valid;
@if($text-input-md-show-success-highlight) {
.item-input.ng-valid.input-has-value {
&::after {
border-bottom-color: $text-input-md-hightlight-color-valid;
}
&.input-has-focus::after {
border-bottom-color: $text-input-md-highlight-color;
}
}
}
ion-input.ng-invalid.ng-touched::after {
border-bottom-color: $text-input-md-hightlight-color-invalid;
@if($text-input-md-show-error-highlight) {
.item-input.ng-invalid.ng-touched {
&::after {
border-bottom-color: $text-input-md-hightlight-color-invalid;
}
&.input-has-focus::after {
border-bottom-color: $text-input-md-highlight-color;
}
}
}

38
src/components/input/test/form-inputs/index.ts
View File

@ -1,30 +1,44 @@
import {App} from '../../../../../src';
import {FormBuilder, Validators} from '@angular/common';
import {FormBuilder, Validators, Control} from '@angular/common';
@App({
templateUrl: 'main.html'
})
class E2EApp {
loginForm: any;
login = {
email: 'help@ionic.io',
username: 'admin'
};
user = {
username: 'asdf',
password: '82'
};
submitted: boolean = false;
isTextAreaDisabled: boolean;
constructor(fb: FormBuilder) {
this.loginForm = fb.group({
email: ["", Validators.required],
email: ["", Validators.compose([
Validators.required,
this.emailValidator
])],
username: [""],
password: ["", Validators.required],
comments: ["", Validators.required]
});
}
this.login = {
email: 'help@ionic.io',
username: 'admin'
};
emailValidator(control) {
var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
this.user = {
username: 'asdf',
password: '82'
};
this.submitted = false;
if (!EMAIL_REGEXP.test(control.value)) {
return {invalidEmail: true};
}
}
submit(ev, value) {