refactor(alert): body property renamed to message

This commit is contained in:
Adam Bradley 2016-01-08 09:04:08 -06:00
parent b6ebbde54b
commit a7edadf4f9
5 changed files with 44 additions and 26 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -50,7 +50,7 @@ ion-alert {
font-weight: normal;
}
.alert-body {
.alert-message {
overflow: auto;
&:empty {

View File

@ -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 };

View File

@ -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: () => {