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

fix(datetime): add styling for datetime with different labels

Browse Source 
fixes #6764
This commit is contained in:
Brandy Carney
2016-06-09 15:43:32 -04:00
parent 4eb8ede9f8
commit adcd2fc239
12 changed files with 144 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components.md.scss
View File

@ -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",

1
src/components.wp.scss
View File

@ -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",

15
src/components/datetime/datetime.md.scss Normal file
View File

@ -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;
}

11
src/components/datetime/datetime.scss
View File

@ -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;
}

11
src/components/datetime/datetime.ts
View File

@ -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));

31
src/components/datetime/datetime.wp.scss Normal file
View File

@ -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);
}

0
src/components/datetime/test/labels/e2e.ts Normal file
View File

23
src/components/datetime/test/labels/index.ts Normal file
View File

@ -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: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root = E2EPage;
}
ionicBootstrap(E2EApp);

47
src/components/datetime/test/labels/main.html Normal file
View File

@ -0,0 +1,47 @@
<ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
<ion-content class="outer-content">
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-datetime [(ngModel)]="stacked1"></ion-datetime>
</ion-item>
<ion-item>
<ion-label stacked>Stacked</ion-label>
<ion-datetime [(ngModel)]="stacked2"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-datetime displayFormat="MMMM YY" [(ngModel)]="floating1"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Floating</ion-label>
<ion-datetime displayFormat="D MMM YYYY"[(ngModel)]="floating2"></ion-datetime>
</ion-item>
<ion-item>
<ion-label fixed>Fixed</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="fixed1"></ion-datetime>
</ion-item>
<ion-item>
<ion-label fixed>Fixed</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="fixed2"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Inline</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="inline1"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Inline</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="inline2"></ion-datetime>
</ion-item>
</ion-content>

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}