javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +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/menu-toggle/menu-toggle.scss
View File

@ -1,4 +0,0 @@
ion-menu-toggle.menu-toggle-hidden {
display: none;
}

13
core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -2,7 +2,6 @@ import { Component, Listen, Prop, State } from '@stencil/core';
@Component({
tag: 'ion-menu-toggle',
styleUrl: 'menu-toggle.scss'
})
export class MenuToggle {
@Prop({ context: 'document' })
@ -26,7 +25,7 @@ export class MenuToggle {
this.updateVisibility();
}
@Listen('child:click')
@Listen('click')
async onClick() {
const menuCtrl = await getMenuController(this.doc);
if (menuCtrl) {
@ -55,19 +54,15 @@ export class MenuToggle {
hostData() {
const hidden = this.autoHide && !this.visible;
return {
class: {
'menu-toggle-hidden': hidden
}
'hidden': hidden
};
}
}
function getMenuController(
doc: Document
): Promise<HTMLIonMenuControllerElement | null> {
function getMenuController(doc: Document): Promise<HTMLIonMenuControllerElement|undefined> {
const menuControllerElement = doc.querySelector('ion-menu-controller');
if (!menuControllerElement) {
return Promise.resolve(null);
return Promise.resolve(undefined);
}
return menuControllerElement.componentOnReady();
}

14
core/src/components/menu-toggle/test/basic/index.html
View File

@ -6,6 +6,7 @@
<title>Menu Toggle - 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>
@ -71,14 +72,14 @@
</ion-header>
<ion-content padding>
<div>
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
</div>
<div>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
</div>
</ion-content>
@ -107,6 +108,9 @@
}
</script>
<style>
</style>
</body>
</html>

2
core/src/components/menu-toggle/test/button/index.html
View File

@ -6,6 +6,7 @@
<title>Menu - Button</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>
@ -62,4 +63,5 @@
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>

58
core/src/components/menu-toggle/test/list/index.html
View File

@ -6,6 +6,7 @@
<title>Menu - List</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>
@ -42,17 +43,17 @@
<ion-list>
<!-- <ion-menu-toggle> -->
<ion-item>
<ion-label>
No Menu Toggle
</ion-label>
</ion-item>
<ion-item>
<ion-label>
No Menu Toggle
</ion-label>
</ion-item>
<!-- </ion-menu-toggle> -->
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -60,7 +61,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -68,7 +69,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -76,7 +77,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -84,7 +85,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -92,7 +93,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -100,7 +101,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -108,7 +109,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -116,7 +117,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -124,7 +125,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -132,7 +133,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -140,7 +141,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -148,7 +149,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -156,7 +157,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -164,7 +165,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -172,7 +173,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -180,7 +181,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -188,7 +189,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -196,7 +197,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -204,7 +205,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -212,7 +213,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -220,7 +221,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -228,7 +229,7 @@
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
@ -237,4 +238,5 @@
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>

14
core/src/components/menu-toggle/test/preview/index.html
View File

@ -6,6 +6,7 @@
<title>Menu Toggle</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>
@ -71,14 +72,14 @@
</ion-header>
<ion-content padding>
<div>
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
<ion-button onclick="openDefault()">Menu Button Will Open Default</ion-button>
</div>
<div>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
<ion-button onclick="openStart()">Menu Button Will Open start</ion-button>
</div>
<div>
<ion-button onclick="openEnd()">Menu Button Will Open end</ion-button>
</div>
</ion-content>
@ -107,6 +108,9 @@
}
</script>
<style>
</style>
</body>
</html>