refactor(alert): body property renamed to message
This commit is contained in:
parent
b6ebbde54b
commit
a7edadf4f9
|
@ -18,10 +18,10 @@ $alert-ios-title-font-size: 17px !default;
|
|||
$alert-ios-sub-title-font-size: 14px !default;
|
||||
$alert-ios-sub-title-text-color: #666 !default;
|
||||
|
||||
$alert-ios-body-padding: 0px 16px 24px !default;
|
||||
$alert-ios-body-text-color: inherit !default;
|
||||
$alert-ios-body-text-align: center !default;
|
||||
$alert-ios-body-font-size: 13px !default;
|
||||
$alert-ios-message-padding: 0px 16px 24px !default;
|
||||
$alert-ios-message-text-color: inherit !default;
|
||||
$alert-ios-message-text-align: center !default;
|
||||
$alert-ios-message-font-size: 13px !default;
|
||||
|
||||
$alert-ios-input-padding: 6px !default;
|
||||
$alert-ios-input-margin-top: 10px !default;
|
||||
|
@ -64,11 +64,12 @@ ion-alert {
|
|||
color: $alert-ios-sub-title-text-color;
|
||||
}
|
||||
|
||||
.alert-body {
|
||||
padding: $alert-ios-body-padding;
|
||||
color: $alert-ios-body-text-color;
|
||||
text-align: $alert-ios-body-text-align;
|
||||
font-size: $alert-ios-body-font-size;
|
||||
.alert-message,
|
||||
.alert-inputs {
|
||||
padding: $alert-ios-message-padding;
|
||||
color: $alert-ios-message-text-color;
|
||||
text-align: $alert-ios-message-text-align;
|
||||
font-size: $alert-ios-message-font-size;
|
||||
}
|
||||
|
||||
.alert-input {
|
||||
|
|
|
@ -15,8 +15,8 @@ $alert-md-head-padding: 24px 24px 10px 24px !default;
|
|||
$alert-md-title-font-size: 20px !default;
|
||||
$alert-md-sub-title-font-size: 15px !default;
|
||||
|
||||
$alert-md-body-padding: 10px 24px 24px 24px !default;
|
||||
$alert-md-body-text-color: rgba(0,0,0,.5) !default;
|
||||
$alert-md-message-padding: 10px 24px 24px 24px !default;
|
||||
$alert-md-message-text-color: rgba(0,0,0,.5) !default;
|
||||
|
||||
$alert-md-input-border-color: #dedede !default;
|
||||
$alert-md-input-text-color: #000000 !default;
|
||||
|
@ -51,9 +51,10 @@ $alert-md-buttons-justify-content: flex-end !default;
|
|||
font-size: $alert-md-sub-title-font-size;
|
||||
}
|
||||
|
||||
.alert-body {
|
||||
padding: $alert-md-body-padding;
|
||||
color: $alert-md-body-text-color;
|
||||
.alert-message,
|
||||
.alert-inputs {
|
||||
padding: $alert-md-message-padding;
|
||||
color: $alert-md-message-text-color;
|
||||
}
|
||||
|
||||
.alert-input {
|
||||
|
|
|
@ -50,7 +50,7 @@ ion-alert {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.alert-body {
|
||||
.alert-message {
|
||||
overflow: auto;
|
||||
|
||||
&:empty {
|
||||
|
|
|
@ -19,7 +19,7 @@ import {isDefined} from '../../util/util';
|
|||
* An alert is created from an array of `buttons` and optionally an array of
|
||||
* `inputs`. Each button includes properties for its `text`, and optionally a
|
||||
* `handler`. If a handler returns `false` then the alert will not be dismissed.
|
||||
* An alert can also optionally have a `title`, `subTitle` and `body`.
|
||||
* An alert can also optionally have a `title`, `subTitle` and `message`.
|
||||
*
|
||||
* All buttons will show up in the order they have been added to the `buttons`
|
||||
* array, from left to right. Note: The right most button (the last one in the
|
||||
|
@ -50,7 +50,7 @@ import {isDefined} from '../../util/util';
|
|||
* presentConfirm() {
|
||||
* let alert = Alert.create({
|
||||
* title: 'Confirm purchase',
|
||||
* body: 'Do you want to buy this book?',
|
||||
* message: 'Do you want to buy this book?',
|
||||
* buttons: [
|
||||
* {
|
||||
* text: 'Cancel',
|
||||
|
@ -141,10 +141,20 @@ export class Alert extends ViewController {
|
|||
}
|
||||
|
||||
/**
|
||||
* @param {string} body Alert body content
|
||||
* @private
|
||||
*/
|
||||
setBody(body) {
|
||||
this.data.body = body;
|
||||
setBody(message) {
|
||||
// deprecated warning
|
||||
console.warn('Alert setBody() has been renamed to setMessage()');
|
||||
|
||||
this.setMessage(message);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} message Alert message content
|
||||
*/
|
||||
setMessage(message) {
|
||||
this.data.message = message;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -182,7 +192,7 @@ export class Alert extends ViewController {
|
|||
'<h2 id="{{hdrId}}" class="alert-title" *ngIf="d.title">{{d.title}}</h2>' +
|
||||
'<h3 id="{{subHdrId}}" class="alert-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</h3>' +
|
||||
'</div>' +
|
||||
'<div id="{{bodyId}}" class="alert-body" *ngIf="d.body">{{d.body}}</div>' +
|
||||
'<div id="{{msgId}}" class="alert-message" *ngIf="d.message">{{d.message}}</div>' +
|
||||
'<div *ngIf="d.inputs.length" [ngSwitch]="inputType">' +
|
||||
|
||||
'<template ngSwitchWhen="radio">' +
|
||||
|
@ -197,7 +207,7 @@ export class Alert extends ViewController {
|
|||
'</template>' +
|
||||
|
||||
'<template ngSwitchDefault>' +
|
||||
'<div class="alert-body alert-inputs">' +
|
||||
'<div class="alert-inputs">' +
|
||||
'<div *ngFor="#i of d.inputs" class="alert-input-wrapper">' +
|
||||
'<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" class="alert-input">' +
|
||||
'</div>' +
|
||||
|
@ -236,11 +246,11 @@ class AlertCmp {
|
|||
this.descId = '';
|
||||
this.hdrId = 'alert-hdr-' + this.id;
|
||||
this.subHdrId = 'alert-subhdr-' + this.id;
|
||||
this.bodyId = 'alert-body-' + this.id;
|
||||
this.msgId = 'alert-msg-' + this.id;
|
||||
this.activeId = '';
|
||||
|
||||
if (this.d.body) {
|
||||
this.descId = this.bodyId;
|
||||
if (this.d.message) {
|
||||
this.descId = this.msgId;
|
||||
} else if (this.d.subTitle) {
|
||||
this.descId = this.subHdrId;
|
||||
}
|
||||
|
@ -303,6 +313,12 @@ class AlertCmp {
|
|||
// normalize the data
|
||||
let data = this.d;
|
||||
|
||||
if (data.body) {
|
||||
// deprecated warning
|
||||
console.warn('Alert `body` property has been renamed to `message`');
|
||||
data.message = data.body;
|
||||
}
|
||||
|
||||
data.buttons = data.buttons.map(button => {
|
||||
if (typeof button === 'string') {
|
||||
return { text: button };
|
||||
|
|
|
@ -27,7 +27,7 @@ class E2EPage {
|
|||
doConfirm() {
|
||||
let alert = Alert.create();
|
||||
alert.setTitle('Confirm!');
|
||||
alert.setBody('Body text!!!');
|
||||
alert.setMessage('Message text!!!');
|
||||
alert.addButton({
|
||||
text: 'Cancel',
|
||||
handler: () => {
|
||||
|
|
Loading…
Reference in New Issue