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

Merge branch 'master' into v4

Browse Source
This commit is contained in:
Adam Bradley
2017-05-24 14:21:54 -05:00
parent 476e9ef236 556745191f
commit 5cca46b5ad
9 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/input/input.ios.scss
View File

@ -85,12 +85,17 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
@if ($text-input-ios-show-focus-highlight) {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-ios.item-input.item-input-has-focus .item-inner,
.item-ios.item-input.input-has-focus .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.list-ios .item-input.item-input-has-focus:last-child,
.list-ios .item-input.input-has-focus:last-child {
@include ios-input-highlight($text-input-ios-highlight-color);
@ -102,11 +107,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-ios-show-valid-highlight) {
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
.item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
.item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
}
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
.list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-valid);
.item-inner {
@ -117,11 +124,11 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-ios-show-invalid-highlight) {
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
.item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
}
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
.list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include ios-input-highlight($text-input-ios-highlight-color-invalid);
.item-inner {

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

@ -86,12 +86,16 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
@if ($text-input-md-show-focus-highlight) {
// In order to get a 2px border we need to add an inset
// box-shadow 1px (this is to avoid the div resizing)
// TODO remove all uses of input-has-focus in v4
.item-md.item-input.item-input-has-focus .item-inner,
.item-md.item-input.input-has-focus .item-inner {
@include md-input-highlight($text-input-md-highlight-color);
}
// The last item in a list has a border on the item, not the
// inner item, so add it to the item itself
.list-md .item-input.item-input-has-focus:last-child,
.list-md .item-input.input-has-focus:last-child {
@include md-input-highlight($text-input-md-highlight-color);
@ -103,11 +107,15 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-md-show-valid-highlight) {
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
@include md-input-highlight($text-input-md-highlight-color-valid);
}
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
.list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-valid);
.item-inner {
@ -118,11 +126,11 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-md-show-invalid-highlight) {
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
@include md-input-highlight($text-input-md-highlight-color-invalid);
}
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
@include md-input-highlight($text-input-md-highlight-color-invalid);
.item-inner {

10
src/components/input/input.scss
View File

@ -104,17 +104,24 @@ input.text-input:-webkit-autofill {
// --------------------------------------------------
// When the input has focus, then the input cover should be hidden
// TODO remove all uses of input-has-focus in v4
.item-input-has-focus .input-cover,
.input-has-focus .input-cover {
display: none;
}
.item-input-has-focus,
.input-has-focus {
pointer-events: none;
}
.item-input-has-focus input,
.input-has-focus input,
.item-input-has-focus textarea,
.input-has-focus textarea,
.item-input-has-focus a,
.input-has-focus a,
.item-input-has-focus button,
.input-has-focus button {
pointer-events: auto;
}
@ -158,6 +165,9 @@ input.text-input:-webkit-autofill {
background-position: center;
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus.item-input-has-value .text-input-clear-icon,
.input-has-focus.input-has-value .text-input-clear-icon {
display: block;
}

4
src/components/input/input.ts
View File

@ -607,7 +607,9 @@ export class TextInput extends Ion implements IonicFormInput {
checkHasValue(inputValue: any) {
if (this._item) {
var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== '');
// TODO remove all uses of input-has-value in v4
this._item.setElementClass('input-has-value', hasValue);
this._item.setElementClass('item-input-has-value', hasValue);
}
}
@ -617,7 +619,9 @@ export class TextInput extends Ion implements IonicFormInput {
focusChange(inputHasFocus: boolean) {
if (this._item) {
console.debug(`input-base, focusChange, inputHasFocus: ${inputHasFocus}, ${this._item.getNativeElement().nodeName}.${this._item.getNativeElement().className}`);
// TODO remove input-has-focus for v4
this._item.setElementClass('input-has-focus', inputHasFocus);
this._item.setElementClass('item-input-has-focus', inputHasFocus);
}
// If clearOnEdit is enabled and the input blurred but has a value, set a flag

8
src/components/input/input.wp.scss
View File

@ -96,6 +96,9 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid
// Show the focus highlight when the input has focus
@if ($text-input-wp-show-focus-highlight) {
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-wp.item-input.item-input-has-focus .text-input,
.item-wp.item-input.input-has-focus .text-input {
border-color: $text-input-wp-highlight-color;
}
@ -103,14 +106,15 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid
// Show the valid highlight when it has the .ng-valid class and a value
@if ($text-input-wp-show-valid-highlight) {
.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
.item-wp.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input,
.item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input {
border-color: $text-input-wp-highlight-color-valid;
}
}
// Show the invalid highlight when it has the invalid class and has been touched
@if ($text-input-wp-show-invalid-highlight) {
.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
.item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .text-input {
border-color: $text-input-wp-highlight-color-invalid;
}
}

6
src/components/label/label.ios.scss
View File

@ -77,7 +77,11 @@ $label-ios-margin-start: 0 !default;
transform-origin: right top;
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating],
.item-input-has-value .label-ios[floating],
.input-has-value .label-ios[floating] {
transform: translate3d(0, 0, 0) scale(.8);
}
@ -90,7 +94,9 @@ $label-ios-margin-start: 0 !default;
margin-bottom: $item-ios-padding-media-bottom - 2;
}
.item-input-has-focus .label-ios[stacked],
.input-has-focus .label-ios[stacked],
.item-input-has-focus .label-ios[floating],
.input-has-focus .label-ios[floating] {
color: $label-ios-text-color-focused;
}

6
src/components/label/label.md.scss
View File

@ -70,12 +70,18 @@ $label-md-margin-start: 0 !default;
@include margin(null, null, 0, 0);
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-md[stacked],
.input-has-focus .label-md[stacked],
.item-input-has-focus .label-md[floating],
.input-has-focus .label-md[floating] {
color: $label-md-text-color-focused;
}
.item-input-has-focus .label-md[floating],
.input-has-focus .label-md[floating],
.item-input-has-value .label-md[floating],
.input-has-value .label-md[floating] {
transform: translate3d(0, 0, 0) scale(.8);
}

6
src/components/label/label.wp.scss
View File

@ -50,12 +50,18 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default;
@include margin(null, null, 0, 0);
}
// TODO remove all uses of input-has-focus in v4
// TODO remove all uses of input-has-value in v4
.item-input-has-focus .label-wp[stacked],
.input-has-focus .label-wp[stacked],
.item-input-has-focus .label-wp[floating],
.input-has-focus .label-wp[floating] {
color: $label-wp-text-color-focused;
}
.item-input-has-focus .label-wp[floating],
.input-has-focus .label-wp[floating],
.item-input-has-value .label-wp[floating],
.input-has-value .label-wp[floating] {
transform: translate3d(0, 0, 0) scale(.8);
}

2
src/util/base-input.ts
View File

@ -282,7 +282,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
if (!this._item) {
return;
}
// TODO remove all uses of input-has-value in v4
this._item.setElementClass('input-has-value', this.hasValue());
this._item.setElementClass('item-input-has-value', this.hasValue());
}
/**