Merge pull request #5268 from manucorporat/fix_alert_view

feat(alert): stack long alert buttons

ionic/components/alert/alert.ios.scss

@@ -212,9 +212,15 @@ ion-alert {
 // iOS Alert Button
 // --------------------------------------------------
 
+.alert-button-group {
+  flex-wrap: wrap;
+  margin-right: -1px;
+}
+
 .alert-button {
   margin: 0;
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 50%;
   font-size: $alert-ios-button-font-size;
   min-height: $alert-ios-button-min-height;
   border-radius: $alert-ios-button-border-radius;

ionic/components/alert/alert.md.scss

@@ -211,6 +211,7 @@ $alert-md-buttons-justify-content:        flex-end !default;
 .alert-button-group {
   padding: $alert-md-buttons-padding;
   justify-content: $alert-md-buttons-justify-content;
+  flex-wrap: wrap-reverse;
 }
 
 .alert-button {
@@ -222,6 +223,7 @@ $alert-md-buttons-justify-content:        flex-end !default;
   background-color: $alert-md-button-background-color;
   border-radius: $alert-md-button-border-radius;
   text-transform: uppercase;
+  text-align: right;
 
   &.activated {
     opacity: 1;

ionic/components/alert/alert.scss

@@ -69,6 +69,11 @@ ion-alert {
 .alert-button-group {
   display: flex;
   flex-direction: row;
+
+  &.vertical {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
 }
 
 .alert-button {

ionic/components/alert/alert.ts

@@ -277,7 +277,7 @@ export class Alert extends ViewController {
         '</template>' +
 
       '</div>' +
-      '<div class="alert-button-group">' +
+      '<div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">' +
         '<button *ngFor="#b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass" class="alert-button">' +
           '{{b.text}}' +
         '</button>' +

ionic/components/alert/test/basic/index.ts

@@ -51,6 +51,25 @@ class E2EPage {
     });
   }
 
+  doAlertLongMessage() {
+    let alert = Alert.create({
+      title: 'Alert',
+      message: 'Message <strong>text</strong>!!!',
+      buttons: ['Cancel', 'Continue to grant access']
+    });
+    this.nav.present(alert);
+  }
+
+  doMultipleButtons() {
+    let alert = Alert.create({
+      title: 'Alert',
+      subTitle: 'Subtitle',
+      message: 'This is an alert message.',
+      buttons: ['Cancel', 'Continue', 'Delete']
+    });
+    this.nav.present(alert);
+  }
+
   doPrompt() {
     let alert = Alert.create();
     alert.setTitle('Prompt!');

ionic/components/alert/test/basic/main.html

@@ -1,4 +1,3 @@
-
 <ion-navbar *navbar>
   <ion-title>Alerts</ion-title>
 </ion-navbar>
@@ -6,6 +5,8 @@
 <ion-content padding>
 
   <button block class="e2eOpenAlert" (click)="doAlert()">Alert</button>
+  <button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</button>
+  <button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</button>
   <button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</button>
   <button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
   <button block class="e2eOpenRadio" (click)="doRadio()">Radio</button>
@@ -23,4 +24,4 @@
     Checkbox Result: {{testCheckboxResult}}
   </pre>
 
-</ion-content>
+</ion-content>