Skip to content

Commit

Permalink
fix(overlays): fallback to step color if overlay background variable …
Browse files Browse the repository at this point in the history 
…is unset (#18709)

fixes #18658
  • Loading branch information
@brandyscarney
brandyscarney committed Jul 5, 2019
1 parent 24840d4 commit f16b118
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 7 deletions.
2 changes: 1 addition & 1 deletion core/src/themes/ionic.theme.default.ios.scss
View file
Expand Up @@ -9,7 +9,7 @@
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
$border-ios-color: var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default;
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-150, #f9f9f9)) !default;
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-50, #f9f9f9)) !default;

// iOS Tabs & Tab bar
// --------------------------------------------------
Expand Down
2 changes: 1 addition & 1 deletion core/src/themes/ionic.theme.default.md.scss
View file
Expand Up @@ -10,7 +10,7 @@
$backdrop-md-color: var(--ion-backdrop-color, #000) !default;
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
$box-shadow-md-color: var(--ion-box-shadow-color, #000) !default;
$overlay-md-background-color: var(--ion-overlay-background-color, #fff) !default;
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;

// Material Design Tabs & Tab bar
// --------------------------------------------------
Expand Down
203 changes: 198 additions & 5 deletions core/src/themes/test/css-variables/index.html
View file
Expand Up @@ -62,8 +62,8 @@
<ion-label>Colors</ion-label>
<ion-icon name="brush"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="other">
<ion-label>Other</ion-label>
<ion-tab-button tab="overlays">
<ion-label>Overlays</ion-label>
<ion-icon name="more"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
Expand Down Expand Up @@ -700,10 +700,10 @@
</ion-content>
</ion-tab>

<ion-tab tab="other">
<ion-tab tab="overlays">
<ion-header>
<ion-toolbar>
<ion-title>Other</ion-title>
<ion-title>Overlays</ion-title>
<div slot="end" class="right-container">
<ion-label>Select a Theme:</ion-label>
<ion-select interface="popover" class="theme-picker">
Expand All @@ -717,11 +717,51 @@
</ion-header>
<ion-content>
<div class="wrapper">

<!-- <section> -->
<ion-list>
<ion-item button onClick="presentAlert()">
<ion-label>Present Alert</ion-label>
</ion-item>
<ion-item button onClick="presentActionSheet()">
<ion-label>Present Action Sheet</ion-label>
</ion-item>
<ion-item button onClick="presentLoading()">
<ion-label>Present Loading</ion-label>
</ion-item>
<ion-item button onClick="presentModal()">
<ion-label>Present Modal</ion-label>
</ion-item>
<ion-item button onClick="presentPopover(event)">
<ion-label>Present Popover</ion-label>
</ion-item>
<ion-item button onClick="presentToast()">
<ion-label>Present Toast</ion-label>
</ion-item>
<ion-item>
<ion-label>Datetime</ion-label>
<ion-datetime></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Select</ion-label>
<ion-select>
<ion-select-option>1</ion-select-option>
<ion-select-option>2</ion-select-option>
<ion-select-option>3</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<!-- </section> -->
</div>
</ion-content>
</ion-tab>
</ion-tabs>

<ion-alert-controller></ion-alert-controller>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-loading-controller></ion-loading-controller>
<ion-modal-controller></ion-modal-controller>
<ion-popover-controller></ion-popover-controller>
<ion-toast-controller></ion-toast-controller>
</ion-app>

<script>
Expand Down Expand Up @@ -752,6 +792,159 @@
selects[i].value = theme;
}
}

async function presentAlert() {
const alertController = document.querySelector('ion-alert-controller');
await alertController.componentOnReady();

const alert = await alertController.create({
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
return await alert.present();
}

async function presentActionSheet() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();

const actionSheet = await actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
}

async function presentLoading() {
const loadingController = document.querySelector('ion-loading-controller');
await loadingController.componentOnReady();

const loading = await loadingController.create({
message: 'Hellooo',
duration: 2000
});

await loading.present();

const { role, data } = await loading.onDidDismiss();

console.log('Loading dismissed!');
}

async function createModal() {
// initialize controller
const modalController = document.querySelector('ion-modal-controller');
await modalController.componentOnReady();

// create component to open
const element = document.createElement('div');
element.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Super Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Content of doom</h1>
<div>Here's some more content</div>
<ion-button class="dismiss">Dismiss Modal</ion-button>
</ion-content>
`;

// listen for close event
const button = element.querySelector('ion-button');
button.addEventListener('click', () => {
modalController.dismiss();
});

// present the modal
const modalElement = await modalController.create({
component: element
});
return modalElement;
}

async function presentModal() {
const modal = await createModal();
await modal.present();
}

async function presentPopover(event) {
const popoverController = document.querySelector('ion-popover-controller');
await popoverController.componentOnReady();
const popoverElement = await popoverController.create({
component: 'profile-page',
event: event
});
return await popoverElement.present();
}

class ProfilePage extends HTMLElement {
constructor() {
super();
}

connectedCallback() {
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header>Ionic</ion-list-header>
<ion-item><ion-label>Item 0</ion-label></ion-item>
<ion-item><ion-label>Item 1</ion-label></ion-item>
<ion-item><ion-label>Item 2</ion-label></ion-item>
<ion-item><ion-label>Item 3</ion-label></ion-item>
</ion-list>
</ion-content>
`;
}
}

customElements.define('profile-page', ProfilePage);

async function presentToast() {
const toastController = document.querySelector('ion-toast-controller');
await toastController.componentOnReady();

const toast = await toastController.create({
message: 'Your settings have been saved.',
duration: 2000
});
return await toast.present();
}
</script>
</body>

Expand Down

0 comments on commit f16b118

Please sign in to comment.