From 556745191f3fd76170c1227f01d713bcbe8283b3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 24 May 2017 14:46:51 -0400 Subject: [PATCH] refactor(item): prefix the input classes with item- --- src/components/input/input.ios.scss | 15 +++++++++++---- src/components/input/input.md.scss | 16 ++++++++++++---- src/components/input/input.scss | 10 ++++++++++ src/components/input/input.ts | 4 ++++ src/components/input/input.wp.scss | 8 ++++++-- src/components/label/label.ios.scss | 6 ++++++ src/components/label/label.md.scss | 6 ++++++ src/components/label/label.wp.scss | 6 ++++++ src/util/base-input.ts | 2 ++ 9 files changed, 63 insertions(+), 10 deletions(-) diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index 65a77007c7..a737efe5b4 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -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 { diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 96a5cce965..6a414a1091 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -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 { diff --git a/src/components/input/input.scss b/src/components/input/input.scss index e9220087a6..a2ec0987a1 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -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; } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index d6bbe6c8a1..f3f7980d77 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -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 diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index ae523688a5..5d862920c4 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -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; } } diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 55070678f9..17a506e5fd 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -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; } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 487f9f4c64..df0889732b 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -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); } diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index f70148b842..6c4b26bb85 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -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); } diff --git a/src/util/base-input.ts b/src/util/base-input.ts index 64cb70d4e3..164c63c972 100644 --- a/src/util/base-input.ts +++ b/src/util/base-input.ts @@ -282,7 +282,9 @@ export class BaseInput extends Ion implements CommonInput { 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()); } /**