From adcd2fc239d84873761c05e049f1c78520bc074d Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 9 Jun 2016 15:43:32 -0400 Subject: [PATCH] fix(datetime): add styling for datetime with different labels fixes #6764 --- src/components.md.scss | 1 + src/components.wp.scss | 1 + src/components/datetime/datetime.md.scss | 15 ++++++ src/components/datetime/datetime.scss | 11 ++++- src/components/datetime/datetime.ts | 11 +++++ src/components/datetime/datetime.wp.scss | 31 ++++++++++++ src/components/datetime/test/labels/e2e.ts | 0 src/components/datetime/test/labels/index.ts | 23 +++++++++ src/components/datetime/test/labels/main.html | 47 +++++++++++++++++++ src/components/label/label.ios.scss | 3 +- src/components/label/label.md.scss | 3 +- src/components/label/label.wp.scss | 3 +- 12 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 src/components/datetime/datetime.md.scss create mode 100644 src/components/datetime/datetime.wp.scss create mode 100644 src/components/datetime/test/labels/e2e.ts create mode 100644 src/components/datetime/test/labels/index.ts create mode 100644 src/components/datetime/test/labels/main.html diff --git a/src/components.md.scss b/src/components.md.scss index 8541e9c6b2f..23939327f43 100644 --- a/src/components.md.scss +++ b/src/components.md.scss @@ -14,6 +14,7 @@ "components/checkbox/checkbox.md", "components/chip/chip.md", "components/content/content.md", + "components/datetime/datetime.md", "components/input/input.md", "components/item/item.md", "components/label/label.md", diff --git a/src/components.wp.scss b/src/components.wp.scss index 8bae231b469..b6c8e9b1b7c 100644 --- a/src/components.wp.scss +++ b/src/components.wp.scss @@ -14,6 +14,7 @@ "components/checkbox/checkbox.wp", "components/chip/chip.wp", "components/content/content.wp", + "components/datetime/datetime.wp", "components/input/input.wp", "components/item/item.wp", "components/label/label.wp", diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss new file mode 100644 index 00000000000..ff56545c26d --- /dev/null +++ b/src/components/datetime/datetime.md.scss @@ -0,0 +1,15 @@ +@import "../../globals.md"; +@import "./datetime"; + +// Material Design DateTime +// -------------------------------------------------- + +$datetime-md-padding-top: $item-md-padding-top !default; +$datetime-md-padding-right: ($item-md-padding-right / 2) !default; +$datetime-md-padding-bottom: $item-md-padding-bottom !default; +$datetime-md-padding-left: $item-md-padding-left !default; + + +ion-datetime { + padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left; +} diff --git a/src/components/datetime/datetime.scss b/src/components/datetime/datetime.scss index 4abc2cc8a2c..bd7a58d4ebf 100644 --- a/src/components/datetime/datetime.scss +++ b/src/components/datetime/datetime.scss @@ -6,8 +6,6 @@ ion-datetime { display: flex; overflow: hidden; - - max-width: 45%; } .datetime-text { @@ -20,6 +18,9 @@ ion-datetime { font-size: inherit; text-overflow: ellipsis; white-space: nowrap; + + min-height: 1.2em; + line-height: 1.2; } .datetime-disabled, @@ -28,3 +29,9 @@ ion-datetime { pointer-events: none; } + +.item-label-stacked ion-datetime, +.item-label-floating ion-datetime { + width: 100%; + padding-left: 0; +} diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index 73effec3fa5..535d7cdd3ac 100644 --- a/src/components/datetime/datetime.ts +++ b/src/components/datetime/datetime.ts @@ -698,6 +698,15 @@ export class DateTime { return this._value; } + /** + * @private + */ + checkHasValue(inputValue: any) { + if (this._item) { + this._item.setCssClass('input-has-value', !!(inputValue && inputValue !== '')); + } + } + /** * @private */ @@ -766,6 +775,7 @@ export class DateTime { console.debug('datetime, writeValue', val); this.setValue(val); this.updateText(); + this.checkHasValue(val); } /** @@ -792,6 +802,7 @@ export class DateTime { console.debug('datetime, onChange', val); this.setValue(val); this.updateText(); + this.checkHasValue(val); // convert DateTimeData value to iso datetime format fn(convertDataToISO(this._value)); diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss new file mode 100644 index 00000000000..92a7b6cad10 --- /dev/null +++ b/src/components/datetime/datetime.wp.scss @@ -0,0 +1,31 @@ +@import "../../globals.wp"; +@import "./datetime"; + +// Windows DateTime +// -------------------------------------------------- + +$datetime-wp-min-width: 45% !default; + +$datetime-wp-padding-top: $item-wp-padding-top !default; +$datetime-wp-padding-right: ($item-wp-padding-right / 2) !default; +$datetime-wp-padding-bottom: $item-wp-padding-bottom !default; +$datetime-wp-padding-left: $item-wp-padding-left !default; + +$datetime-wp-border-width: 2px !default; +$datetime-wp-border-color: $input-wp-border-color !default; + +ion-datetime { + padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left; + min-width: $datetime-wp-min-width; +} + +.datetime-text { + border: $datetime-wp-border-width solid $datetime-wp-border-color; + line-height: 3rem; + min-height: 3.4rem; + padding: 0 8px; +} + +.item-datetime ion-label[floating] { + transform: translate3d(8px, 41px, 0); +} diff --git a/src/components/datetime/test/labels/e2e.ts b/src/components/datetime/test/labels/e2e.ts new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/components/datetime/test/labels/index.ts b/src/components/datetime/test/labels/index.ts new file mode 100644 index 00000000000..282d9a12d64 --- /dev/null +++ b/src/components/datetime/test/labels/index.ts @@ -0,0 +1,23 @@ +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; + + +@Component({ + templateUrl: 'main.html' +}) +class E2EPage { + stacked2 = '1994-12-15T13:47:20.789'; + floating2 = '1995-04-15'; + fixed2 = '2002-09-23T15:03:46.789'; + inline2 = '2005-06-17T11:06Z'; +} + + +@Component({ + template: '' +}) +class E2EApp { + root = E2EPage; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/datetime/test/labels/main.html b/src/components/datetime/test/labels/main.html new file mode 100644 index 00000000000..7969093fd65 --- /dev/null +++ b/src/components/datetime/test/labels/main.html @@ -0,0 +1,47 @@ + + Datetime + + + + + + Stacked + + + + + Stacked + + + + + Floating + + + + + Floating + + + + + Fixed + + + + + Fixed + + + + + Inline + + + + + Inline + + + + diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 343448112c0..5d024eb4a1b 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -20,7 +20,8 @@ ion-label { // -------------------------------------------------- .item-input ion-label, -.item-select ion-label { +.item-select ion-label, +.item-datetime ion-label { color: $label-ios-text-color; } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 379c277ed6a..2068a4919f9 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -25,7 +25,8 @@ ion-label { // -------------------------------------------------- .item-input ion-label, -.item-select ion-label { +.item-select ion-label, +.item-datetime ion-label { color: $label-md-text-color; } diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 767ed567aa2..3a7484b753a 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -20,7 +20,8 @@ ion-label { // -------------------------------------------------- .item-input ion-label, -.item-select ion-label { +.item-select ion-label, +.item-datetime ion-label { color: $label-wp-text-color; }