mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
refactor(components): update to use shadow DOM and work with css variables
- 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
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color for the modal
|
||||
$modal-ios-background-color: $background-ios-color !default;
|
||||
$modal-ios-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Border radius for the modal
|
||||
$modal-ios-border-radius: 10px !default;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color for the modal
|
||||
$modal-md-background-color: $background-md-color !default;
|
||||
$modal-md-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Box shadow color of the alert
|
||||
$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode } from '../../interface';
|
||||
import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
|
||||
|
||||
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
|
||||
import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
|
||||
import { iosEnterAnimation } from './animations/ios.enter';
|
||||
@ -16,9 +16,6 @@ import { mdLeaveAnimation } from './animations/md.leave';
|
||||
styleUrls: {
|
||||
ios: 'modal.ios.scss',
|
||||
md: 'modal.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'modal'
|
||||
}
|
||||
})
|
||||
export class Modal implements OverlayInterface {
|
||||
@ -27,6 +24,7 @@ export class Modal implements OverlayInterface {
|
||||
|
||||
animation: Animation|undefined;
|
||||
presented = false;
|
||||
mode!: Mode;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
@ -37,20 +35,6 @@ export class Modal implements OverlayInterface {
|
||||
@Prop() delegate?: FrameworkDelegate;
|
||||
@Prop() keyboardClose = true;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color?: Color;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* Animation to use when the modal is presented.
|
||||
*/
|
||||
@ -212,7 +196,10 @@ export class Modal implements OverlayInterface {
|
||||
hostData() {
|
||||
return {
|
||||
'no-router': true,
|
||||
class: getClassMap(this.cssClass),
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'modal'),
|
||||
...getClassMap(this.cssClass)
|
||||
},
|
||||
style: {
|
||||
zIndex: 20000 + this.overlayId,
|
||||
}
|
||||
@ -220,7 +207,7 @@ export class Modal implements OverlayInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
const dialogClasses = createThemedClasses(this.mode, this.color, 'modal-wrapper');
|
||||
const dialogClasses = createThemedClasses(this.mode, 'modal-wrapper');
|
||||
|
||||
return [
|
||||
<ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
|
||||
|
||||
@ -14,15 +14,6 @@ Modals can be created using a [Modal Controller](../../modal-controller/ModalCon
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### component
|
||||
|
||||
string
|
||||
@ -76,15 +67,6 @@ AnimationBuilder
|
||||
Animation to use when the modal is dismissed.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
#### overlayId
|
||||
|
||||
number
|
||||
@ -106,15 +88,6 @@ If true, the modal will animate. Defaults to `true`.
|
||||
|
||||
## Attributes
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use from your Sass `$colors` map.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
|
||||
#### component
|
||||
|
||||
string
|
||||
@ -168,15 +141,6 @@ boolean
|
||||
Animation to use when the modal is dismissed.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
string
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
#### overlay-id
|
||||
|
||||
number
|
||||
|
||||
@ -6,29 +6,30 @@
|
||||
<title>Modal - Basic</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>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
|
||||
window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
|
||||
window.addEventListener("ionModalDidDismiss", function (e) { console.log('DidDismiss', e) })
|
||||
window.addEventListener("ionModalWillDismiss", function (e) { console.log('WillDismiss', e) })
|
||||
async function presentModal() {
|
||||
|
||||
// initialize controller
|
||||
@ -64,4 +65,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,29 +6,30 @@
|
||||
<title>Modal - Host Elements</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>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal - Host Elements</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal - Host Elements</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
|
||||
window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
|
||||
window.addEventListener("ionModalDidDismiss", function (e) { console.log('DidDismiss', e) })
|
||||
window.addEventListener("ionModalWillDismiss", function (e) { console.log('WillDismiss', e) })
|
||||
|
||||
class ModalPage extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
@ -45,7 +46,7 @@
|
||||
<ion-button class="dismiss">Dismiss Modal</ion-button>
|
||||
</ion-content>`;
|
||||
|
||||
// listen for close event
|
||||
// listen for close event
|
||||
const button = this.querySelector('ion-button');
|
||||
button.addEventListener('click', async () => {
|
||||
await document.querySelector('ion-modal-controller').dismiss();
|
||||
@ -70,4 +71,5 @@
|
||||
customElements.define('modal-page', ModalPage);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,29 +6,30 @@
|
||||
<title>Modal</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>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
<ion-content padding>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
<p>
|
||||
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
|
||||
window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
|
||||
window.addEventListener("ionModalDidDismiss", function (e) { console.log('DidDismiss', e) })
|
||||
window.addEventListener("ionModalWillDismiss", function (e) { console.log('WillDismiss', e) })
|
||||
async function presentModal() {
|
||||
|
||||
// initialize controller
|
||||
@ -64,4 +65,5 @@
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Modal - 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>
|
||||
|
||||
Reference in New Issue
Block a user