javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/datetime/datetime.ios.vars.scss
View File

@@ -18,7 +18,7 @@ $datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
$datetime-ios-padding-start: $item-ios-padding-start !default;
/// @prop - Font family of the datetime
$datetime-ios-font-family: $font-family-ios-base !default;
$datetime-ios-font-family: $font-family-base !default;
/// @prop - Color of the datetime placeholder
$datetime-ios-placeholder-color: $text-ios-color-step-600 !default;
$datetime-ios-placeholder-color: $text-color-step-600 !default;

4
core/src/components/datetime/datetime.md.vars.scss
View File

@@ -18,7 +18,7 @@ $datetime-md-padding-bottom: $item-md-padding-bottom !default;
$datetime-md-padding-start: $item-md-padding-start !default;
/// @prop - Font family of the datetime
$datetime-md-font-family: $font-family-md-base !default;
$datetime-md-font-family: $font-family-base !default;
/// @prop - Color of the datetime placeholder
$datetime-md-placeholder-color: $placeholder-text-md-color !default;
$datetime-md-placeholder-color: $placeholder-text-color !default;

17
core/src/components/datetime/datetime.scss
View File

@@ -11,22 +11,7 @@ ion-datetime {
}
.datetime-cover {
@include position(0, null, null, 0);
position: absolute;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
&:active,
&:focus {
outline: none;
}
@include input-cover();
}
.datetime-text {

17
core/src/components/datetime/datetime.tsx
View File

@@ -4,6 +4,7 @@ import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers,
import { CssClassMap, PickerColumn, PickerOptions, StyleEvent } from '../../interface';
import { clamp, deferEvent } from '../../utils/helpers';
import { createThemedClasses } from '../../utils/theme';
@Component({
@@ -11,9 +12,6 @@ import { clamp, deferEvent } from '../../utils/helpers';
styleUrls: {
ios: 'datetime.ios.scss',
md: 'datetime.md.scss'
},
host: {
theme: 'datetime'
}
})
export class Datetime {
@@ -22,7 +20,7 @@ export class Datetime {
private inputId = `ion-dt-${datetimeIds++}`;
private labelId = `${this.inputId}-lbl`;
private picker?: HTMLIonPickerElement | null;
private picker?: HTMLIonPickerElement;
locale: LocaleData = {};
datetimeMin: DatetimeData = {};
@@ -226,8 +224,8 @@ export class Datetime {
this.ionStyle.emit({
'interactive': true,
'datetime': true,
'datetime-disabled': this.disabled,
'input-has-value': this.hasValue()
'has-value': this.hasValue(),
'interactive-disabled': this.disabled,
});
}
@@ -270,10 +268,8 @@ export class Datetime {
}
const pickerOptions = {...this.pickerOptions};
this.picker = await this.buildPicker(pickerOptions);
if (this.picker) {
this.validate();
await this.picker.present();
}
this.validate();
await this.picker!.present();
}
private generateColumns(): PickerColumn[] {
@@ -549,6 +545,7 @@ export class Datetime {
hostData() {
return {
class: {
...createThemedClasses(this.mode, 'datetime'),
'datetime-disabled': this.disabled
}
};

187
core/src/components/datetime/test/basic/index.html
View File

@@ -1,126 +1,127 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Datetime - Basic</ion-title>
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
<ion-header>
<ion-toolbar>
<ion-title>Datetime - Basic</ion-title>
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
(disabled)
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="outer-content test-content">
<ion-list>
<ion-item>
<ion-label>MMMM</ion-label>
<ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-content id="content" class="outer-content test-content">
<ion-list>
<ion-item>
<ion-label>MMMM</ion-label>
<ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Disabled</ion-label>
<ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime id="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="stacked">MMMM YY</ion-label>
<ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000"
display-format="DDD. MMM DD, YY"
month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime id="customDayShortNames" value="1995-04-15" min="1990-02" max="2000" display-format="DDD. MMM DD, YY" month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime display-format="HH:mm"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime display-format="h:mm a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime id="customYearValues" display-format="MM/YYYY" pickerFormat="MMMM YYYY" month-values="6,7,8"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Specific days/months/years</ion-label>
<ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Specific days/months/years</ion-label>
<ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>myDate</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>myDate</ion-label>
<ion-datetime display-format="MMM DD, YYYY HH:mm"></ion-datetime>
</ion-item>
</ion-list>
<ion-list>
<ion-item>
<ion-label>HH:mm:ss</ion-label>
<ion-datetime display-format="HH:mm:ss"></ion-datetime>
</ion-item>
<ion-list>
<ion-item>
<ion-label>HH:mm:ss</ion-label>
<ion-datetime display-format="HH:mm:ss"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>No display-format</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
<ion-item>
<ion-label>No display-format</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
</ion-list>
</ion-list>
</ion-content>
</ion-content>
<script>
var yearValuesArray = [2020, 2016, 2008, 2004, 2000, 1996];
@@ -164,7 +165,5 @@
</script>
</ion-app>
</body>
</html>

17
core/src/components/datetime/test/preview/index.html
View File

@@ -1,19 +1,22 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Datetime</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Datetime</ion-title>
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
<ion-header>
<ion-toolbar>
<ion-title>Datetime</ion-title>
<ion-buttons slot="primary">
<ion-button onclick="toggleBoolean('dynamicDisabled', 'disabled')">
(disabled)
</ion-button>
</ion-buttons>
@@ -164,7 +167,5 @@
</script>
</ion-app>
</body>
</html>

1
core/src/components/datetime/test/standalone/index.html
View File

@@ -6,6 +6,7 @@
<title>Datetime - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>