feat(ion-content): adds <ion-fixed> for non-scrollable page content

closes ionic-team#5987
manucorporat · Mar 30, 2016 · 442d135 · 442d135
1 parent ba6f92b
commit 442d135
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
@@ -9,6 +9,7 @@ $z-index-menu-backdrop:          79;
 $z-index-overlay:                1000;
 $z-index-click-block:            9999;
 
+$z-index-fixed-content:          2;
 $z-index-scroll-content:         1;
 $z-index-refresher:              0;
 
@@ -20,7 +21,7 @@ $z-index-toolbar-background:     -1;
 $z-index-toolbar-border:         20;
 $z-index-list-border:            50;
 
-$z-index-backdrop:               1;
+$z-index-backdrop:               2;
 $z-index-overlay-wrapper:        10;
 
 $z-index-item-options:           1;

diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss
@@ -18,3 +18,12 @@
 [no-margin] {
   margin: 0;
 }
+
+// Content Fixed
+// --------------------------------------------------
+
+ion-fixed {
+  position: absolute;
+  transform: translateZ(0);
+  z-index: $z-index-fixed-content;
+}
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
@@ -31,6 +31,7 @@ import {ScrollTo} from '../../animations/scroll-to';
     '<scroll-content>' +
       '<ng-content></ng-content>' +
     '</scroll-content>' +
+    '<ng-content select="ion-fixed"></ng-content>' +
     '<ng-content select="ion-refresher"></ng-content>'
 })
 export class Content extends Ion {

diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
@@ -207,6 +207,10 @@ class FullPage {
       <p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
       <p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
       <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
+      <ion-fixed style="bottom:0">
+        <button (click)="presentAlert()">fixed button (alert)</button>
+      </ion-fixed>
+      <ion-fixed style="pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></ion-fixed>
     </ion-content>
   `
 })
@@ -240,6 +244,12 @@ class PrimaryHeaderPage {
     this.nav.setRoot(AnotherPage);
   }
 
+  presentAlert() {
+    let alert = Alert.create();
+    alert.setTitle('Hello Alert');
+    alert.addButton({ text: 'Dismiss', role: 'cancel', });
+    this.nav.present(alert);
+  }
 }
 
 

diff --git a/ionic/transitions/transition-ios.ts b/ionic/transitions/transition-ios.ts
@@ -171,7 +171,7 @@ class IOSTransition extends Transition {
             // should just slide out, no fading out
             leavingNavbarBg
               .before.clearStyles([OPACITY])
-              .fromTo(TRANSLATEX, CENTER,  '100%');
+              .fromTo(TRANSLATEX, CENTER, '100%');
           }
 
           let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());