Styling some of the popups more - mostly MD mode. References #183

ionic/components/popup/modes/ios.scss

@@ -39,10 +39,6 @@ ion-popup {
   color: $popup-ios-body-text-color;
 }
 
-.popup-body:empty {
-  padding: 0;
-}
-
 .popup-buttons {
   padding: 0;
   min-height: 0;

ionic/components/popup/modes/md.scss

@@ -2,18 +2,20 @@
 // Material Design Popups
 // --------------------------------------------------
 
-$popup-md-max-width:           280px !default;
-$popup-md-background:          rgba(0,0,0,0.5) !default;
-$popup-md-border-radius:       2px !default;
-$popup-md-background-color:    #fafafa !default;
-$popup-md-box-shadow:          0px 16px 20px rgba(0, 0, 0, 0.4) !default;
+$popup-md-max-width:                      280px !default;
+$popup-md-background:                     rgba(0,0,0,0.5) !default;
+$popup-md-border-radius:                  2px !default;
+$popup-md-background-color:               #fafafa !default;
+$popup-md-box-shadow:                     0px 16px 20px rgba(0, 0, 0, 0.4) !default;
 
-$popup-md-head-text-align:     left !default;
-$popup-md-title-font-size:     20px !default;
-$popup-md-body-text-color:     rgba(0,0,0,.5) !default;
+$popup-md-head-text-align:                left !default;
+$popup-md-title-font-size:                20px !default;
+$popup-md-body-text-color:                rgba(0,0,0,.5) !default;
 
-$popup-md-button-text-color:   color(primary) !default;
-$popup-md-button-min-height:   36px !default;
+$popup-md-button-text-color:              color(primary) !default;
+$popup-md-button-min-height:              36px !default;
+$popup-md-prompt-input-highlight-color:   map-get($colors, primary) !default;
+$popup-md-prompt-input-placeholder-color: #b9b9b9;
 
 
 ion-popup {
@@ -42,8 +44,28 @@ ion-popup {
   color: $popup-md-body-text-color;
 }
 
-.popup-body:empty {
-  padding: 0;
+.prompt-input {
+  border-bottom: 1px solid #dedede;
+
+  &::-webkit-input-placeholder {
+     color: $popup-md-prompt-input-placeholder-color;
+  }
+
+  &:-moz-placeholder { /* Firefox 18- */
+     color: $popup-md-prompt-input-placeholder-color;
+  }
+
+  &::-moz-placeholder {  /* Firefox 19+ */
+     color: $popup-md-prompt-input-placeholder-color;
+  }
+
+  &:-ms-input-placeholder {
+     color: $popup-md-prompt-input-placeholder-color;
+  }
+
+  &:focus {
+    border-bottom: 2px solid $popup-md-prompt-input-highlight-color;
+  }
 }
 
 .popup-buttons {
@@ -63,9 +85,5 @@ ion-popup {
     box-shadow: none;
     -webkit-transition: none;
     transition: none;
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 }

ionic/components/popup/popup.scss

@@ -6,7 +6,7 @@ $popup-min-width:                 250px !default;
 $popup-max-width:                 100% !default;
 $popup-max-height:                90% !default;
 
-$popup-sub-title-font-size:       11px !default;
+$popup-sub-title-font-size:       15px !default;
 
 $popup-button-line-height:        20px !default;
 $popup-button-font-size:          14px !default;
@@ -59,6 +59,18 @@ ion-popup {
 
 .popup-body {
   overflow: auto;
+
+  // TODO is this needed?
+  &:empty {
+    padding: 0;
+  }
+}
+
+.prompt-input {
+  border: 0;
+  background: inherit;
+  padding: 10px 0;
+  margin: 5px 0;
 }
 
 .popup-buttons {
@@ -72,9 +84,5 @@ ion-popup {
     line-height: $popup-button-line-height;
     font-size: $popup-button-font-size;
     margin-right: $popup-button-margin-right;
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 }

ionic/components/popup/popup.ts

@@ -3,6 +3,8 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
 
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
+import {Ion} from '../ion';
+import {IonInput} from '../form/input';
 import * as util from 'ionic/util';
 
 
@@ -81,7 +83,7 @@ export class Popup extends Overlay {
       };
     }
     let button = {
-      text: 'OK',
+      text: context.okText || 'OK',
       onTap: (event, popupRef) => {
         // Allow it to close
         //resolve();
@@ -112,13 +114,13 @@ export class Popup extends Overlay {
       }
     }
     let okButton = {
-      text: 'OK',
+      text: context.okText || 'OK',
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
     let cancelButton = {
-      text: 'Cancel',
+      text: context.cancelText || 'Cancel',
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
@@ -146,16 +148,17 @@ export class Popup extends Overlay {
         title: context
       };
     }
-
     let okButton = {
-      text: 'Ok',
+      text: context.okText || 'OK',
+      type: context.okType,
       onTap: (event, popupRef) => {
         // Allow it to close
       }
     }
 
     let cancelButton = {
-      text: 'Cancel',
+      text: context.cancelText || 'Cancel',
+      type: context.cancelType,
       isCancel: true,
       onTap: (event, popupRef) => {
         // Allow it to close
@@ -201,14 +204,15 @@ const OVERLAY_TYPE = 'popup';
   '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
   '<popup-wrapper>' +
     '<div class="popup-head">' +
-      '<h3 class="popup-title" [inner-html]="title"></h3>' +
-      '<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
+      '<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
+      '<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
     '</div>' +
     '<div class="popup-body">' +
-      '<input type="text" *ng-if="showPrompt" placeholder="{{promptPlaceholder}}">' +
+      '<div [inner-html]="template" *ng-if="template"></div>' +
+      '<input type="{{inputType || \'text\'}}" placeholder="{{inputPlaceholder}}" *ng-if="showPrompt" class="prompt-input">' +
     '</div>' +
     '<div class="popup-buttons" *ng-if="buttons.length">' +
-      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [ng-class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
+      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
     '</div>' +
   '</popup-wrapper>',
   directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor]

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

@@ -17,14 +17,23 @@ class E2EApp {
 
   doAlert() {
     this.alertOpen = true;
-    this.popup.alert('Alert').then(() => {
+    this.popup.alert({
+      title: "New Friend!",
+      template: "Your friend, Obi wan Kenobi, just accepted your friend request!"
+    }).then(() => {
       this.alertOpen = false;
     });
   }
 
   doPrompt() {
     this.promptOpen = true;
-    this.popup.prompt('What is your name?').then((name) => {
+    this.popup.prompt({
+      title: "New Album",
+      template: "Enter a name for this new album you're so keen on adding",
+      inputPlaceholder: "Title",
+      okText: "Save",
+      okType: "secondary"
+    }).then((name) => {
       this.promptResult = name;
       this.promptOpen = false;
     }, () => {
@@ -35,7 +44,13 @@ class E2EApp {
 
   doConfirm() {
     this.confirmOpen = true;
-    this.popup.confirm('Are you sure?').then((result, ev) => {
+    this.popup.confirm({
+      title: "Use this lightsaber?",
+      subTitle: "You can't exchange lightsabers",
+      template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+      cancelText: "Disagree",
+      okText: "Agree"
+    }).then((result, ev) => {
       console.log('CONFIRMED', result);
       this.confirmResult = result;
       this.confirmOpen = false;