From d2374fd37e46892c30fb68ea32a7f2ae91648630 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 12 Nov 2015 20:07:13 -0500
Subject: [PATCH] fix(toolbar): fixed the toolbar spacing for iOS with
 platform-cordova

Added some tests for modals with a toolbar, only target the first
toolbar in a menu or modal so the user can have multiple toolbars
without skewing them. References #469
---
 ionic/components/modal/test/basic/e2e.ts    | 10 ++++++-
 ionic/components/modal/test/basic/index.ts  | 30 +++++++++++++++++++++
 ionic/components/modal/test/basic/main.html |  3 +++
 ionic/platform/cordova-ios.scss             | 10 +++++--
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/ionic/components/modal/test/basic/e2e.ts b/ionic/components/modal/test/basic/e2e.ts
index 06ffff5222..0336371d72 100644
--- a/ionic/components/modal/test/basic/e2e.ts
+++ b/ionic/components/modal/test/basic/e2e.ts
@@ -1,8 +1,16 @@
 
-it('should open action sheet', function() {
+it('should open modal', function() {
   element(by.css('.e2eOpenModal')).click();
 });
 
 it('should close with close button click', function() {
   element(by.css('.e2eCloseMenu')).click();
 });
+
+it('should open toolbar modal', function() {
+  element(by.css('.e2eOpenToolbarModal')).click();
+});
+
+it('should close toolbar modal', function() {
+  element(by.css('.e2eCloseToolbarModal')).click();
+});
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index 60181ed6f9..fe1e340519 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -33,6 +33,10 @@ class MyAppCmp {
     this.modal.open(PlainPage);
   }
 
+  openToolbarModal() {
+    this.modal.open(ToolbarModal);
+  }
+
   openModalChildNav() {
     this.modal.open(ContactModal, {
       handle: 'my-awesome-modal'
@@ -63,6 +67,32 @@ class PlainPage {
   }
 }
 
+@Page({
+  template: `
+    <ion-toolbar>
+      <ion-title>Modals</ion-title>
+    </ion-toolbar>
+    <ion-toolbar primary>
+      <ion-title>Another toolbar</ion-title>
+    </ion-toolbar>
+
+
+    <ion-content padding>
+        <button block danger (click)="closeModal()" class="e2eCloseToolbarModal">
+          <icon close></icon>
+          Close Modal
+        </button>
+    </ion-content>
+  `
+})
+class ToolbarModal {
+  constructor(private modal: Modal) {}
+
+  closeModal() {
+    this.modal.get().close();
+  }
+}
+
 
 @Page({
   template: '<ion-nav [root]="rootView"></ion-nav>'
diff --git a/ionic/components/modal/test/basic/main.html b/ionic/components/modal/test/basic/main.html
index 1fef972e8c..a3a2589049 100644
--- a/ionic/components/modal/test/basic/main.html
+++ b/ionic/components/modal/test/basic/main.html
@@ -6,6 +6,9 @@
   <p>
     <button (click)="openModal()">Open plain modal</button>
   </p>
+  <p>
+    <button class="e2eOpenToolbarModal" (click)="openToolbarModal()">Open modal w/ toolbar</button>
+  </p>
   <p>
     <button (click)="openModalCustomAnimation()">Modal: Custom Animation</button>
   </p>
diff --git a/ionic/platform/cordova-ios.scss b/ionic/platform/cordova-ios.scss
index b1dbea733a..d465a66b6d 100644
--- a/ionic/platform/cordova-ios.scss
+++ b/ionic/platform/cordova-ios.scss
@@ -9,14 +9,20 @@ $cordova-ios-toolbar-padding:    2rem   !default;
 
   ion-navbar-section,
   ion-navbar,
-  ion-menu > ion-toolbar {
+  ion-menu > ion-toolbar:first-child,
+  ion-menu > ion-toolbar:first-child ion-title,
+  ion-page.modal > ion-toolbar:first-child,
+  ion-page.modal > ion-toolbar:first-child ion-title, {
     min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
     height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
   }
 
   ion-navbar,
   ion-navbar ion-title,
-  ion-menu > ion-toolbar {
+  ion-menu > ion-toolbar:first-child,
+  ion-menu > ion-toolbar:first-child ion-title,
+  ion-page.modal > ion-toolbar:first-child,
+  ion-page.modal > ion-toolbar:first-child ion-title, {
     padding-top: $cordova-ios-toolbar-padding;
   }