-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(header): add iOS 8 support to iOS header fix. assumes all iOS wil…
…l have 7 style headers. closes #1625
- Loading branch information
1 parent
c8ced5a
commit 4a2296d
Showing
4 changed files
with
263 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| <!DOCTYPE html> | ||
| <html ng-app="ionic"> | ||
| <head> | ||
| <script src="../../dist/js/ionic.bundle.js"></script> | ||
| <meta charset="utf-8"> | ||
| <title>Header</title> | ||
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | ||
| <link href="../../dist/css/ionic.css" rel="stylesheet"> | ||
| <style> | ||
| .bar { | ||
| position: relative; | ||
| top: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="platform-ios platform-ios8 platform-cordova"> | ||
|
|
||
| <content> | ||
|
|
||
| <header class="bar bar-header"> | ||
| <a class="button" href="index.html">Back</a> | ||
| <h1 class="title">Really really really really really really really really long title!</h1> | ||
| <a class="button icon ion-home"> Home</a> | ||
| </header> | ||
|
|
||
| <div class="bar bar-header-subheader"> | ||
| <a class="button icon ion-navicon"> Home</a> | ||
| <div class="button-bar"> | ||
| <a class="button">First</a> | ||
| <a class="button">Second</a> | ||
| <a class="button">Third</a> | ||
| </div> | ||
| <a class="button"> | ||
| Favorites | ||
| </a> | ||
| </div> | ||
|
|
||
| <header class="bar bar-header bar-positive"> | ||
| <a class="button icon ion-navicon"> Home</a> | ||
| <div class="button-bar"> | ||
| <a class="button button-calm">First</a> | ||
| <a class="button">Second</a> | ||
| <a class="button">Third</a> | ||
| </div> | ||
| <a class="button"> | ||
| <i class="icon ion-star"></i> Favorites | ||
| </a> | ||
| </header> | ||
|
|
||
| <header class="bar bar-header bar-royal"> | ||
| <a class="button button-clear icon ion-ios7-alarm"> Back</a> | ||
| <div class="button-bar"> | ||
| <a class="button button-calm">First</a> | ||
| <a class="button">Second</a> | ||
| <a class="button">Third</a> | ||
| </div> | ||
| <a class="button"> | ||
| <i class="icon ion-star"></i> Favorites | ||
| </a> | ||
| </header> | ||
|
|
||
| <header class="bar bar-header bar-positive"> | ||
| <a class="button button-clear icon ion-ios7-arrow-back"> Back</a> | ||
| <div class="button-bar"> | ||
| <a class="button button-calm">First</a> | ||
| <a class="button">Second</a> | ||
| <a class="button">Third</a> | ||
| </div> | ||
| <a class="button"> | ||
| <i class="icon ion-star"></i> Favorites | ||
| </a> | ||
| </header> | ||
|
|
||
| <div class="bar bar-header bar-calm"> | ||
| <a class="button button-icon icon ion-home"></a> | ||
| <div class="button-bar"> | ||
| <a href="#" class="button button-clear">Edit</a> | ||
| <a href="#" class="button button-clear">Teach</a> | ||
| <a href="#" class="button button-clear">Delete</a> | ||
| </div> | ||
| <a class="button button-icon"> | ||
| <i class="icon ion-home"></i> | ||
| </a> | ||
| </div> | ||
|
|
||
| <header class="bar bar-header bar-dark"> | ||
| <a class="button icon ion-home"></a> | ||
| <div class="button-bar"> | ||
| <a class="button">First</a> | ||
| <a class="button">Second</a> | ||
| <a class="button">Third</a> | ||
| </div> | ||
| <a class="button"> | ||
| <i class="icon ion-star"></i> | ||
| </a> | ||
| </header> | ||
|
|
||
| <header class="bar bar-header bar-stable"> | ||
| <button class="button button-clear button-icon ion-ios7-arrow-back"> Back</button> | ||
| <h1 class="title">Title here</h1> | ||
| </header> | ||
|
|
||
| </ion-content> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| <!DOCTYPE html> | ||
| <html ng-app="ionicApp"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Status Bar</title> | ||
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | ||
| <link href="../../dist/css/ionic.css" rel="stylesheet"> | ||
| <style> | ||
| #ios-status-bar { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 20px; | ||
| background: blue; | ||
| color: white; | ||
| text-align: center; | ||
| z-index: 9999; | ||
| display: none; | ||
| } | ||
| .platform-cordova.platform-ios #ios-status-bar { | ||
| display: block; | ||
| } | ||
| </style> | ||
| <script src="../../dist/js/ionic.bundle.js"></script> | ||
| <script> | ||
| angular.module('ionicApp', ['ionic']) | ||
|
|
||
| .controller('AppCtrl', function($scope, $timeout){ | ||
|
|
||
| $scope.fullScreenTrueTrue = function() { | ||
| ionic.Platform.fullScreen(true, true); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenFalseTrue = function() { | ||
| ionic.Platform.fullScreen(false, true); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenFalseFalse = function() { | ||
| ionic.Platform.fullScreen(false, false); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenTrueFalse = function() { | ||
| ionic.Platform.fullScreen(true, false); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenDefault = function() { | ||
| ionic.Platform.fullScreen(); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenTrueDefault = function() { | ||
| ionic.Platform.fullScreen(true); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.fullScreenFalseDefault = function() { | ||
| ionic.Platform.fullScreen(false); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.ios = function() { | ||
| document.body.classList.toggle('platform-ios'); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.android = function() { | ||
| document.body.classList.toggle('platform-android'); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.cordova = function() { | ||
| document.body.classList.toggle('platform-cordova'); | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| $scope.init = function() { | ||
| showBodyClass(); | ||
| }; | ||
|
|
||
| function showBodyClass() { | ||
| $timeout(function(){ | ||
| $scope.bodyClass = document.body.className; | ||
| $scope.isFullScreen = ionic.Platform.isFullScreen; | ||
| $scope._showStatusBar = ionic.Platform._showStatusBar; | ||
| }, 50); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| // fake cordova | ||
| window.StatusBar = { | ||
| show: function() { | ||
| console.log('StatusBar show'); | ||
| document.getElementById('ios-status-bar').style.display = ''; | ||
| }, | ||
| hide: function() { | ||
| console.log('StatusBar hide'); | ||
| document.getElementById('ios7-status-bar').style.display = 'none'; | ||
| } | ||
| } | ||
|
|
||
| </script> | ||
| </head> | ||
| <body ng-controller="AppCtrl" ng-init="init()"> | ||
|
|
||
| <div id="ios-status-bar">Fake iOS Status Bar</div> | ||
|
|
||
| <header class="bar bar-header"> | ||
| <a class="button" href="./">Back</a> | ||
| <h1 class="title">Status Bar</h1> | ||
| <a class="button icon ion-home" href="./"> Home</a> | ||
| </header> | ||
|
|
||
| <div class="content padding" style="padding-top: 100px"> | ||
|
|
||
| <p><code>fullScreen: function(showFullScreen, showStatusBar)</code></p> | ||
|
|
||
| <p><code>Body Class: {{ bodyClass }}</code></p> | ||
|
|
||
| <p><code>isFullScreen: {{ isFullScreen }}</code></p> | ||
|
|
||
| <p><code>_showStatusBar: {{ _showStatusBar }}</code></p> | ||
|
|
||
| <p> | ||
| <button ng-click="fullScreenDefault()">fullScreen()</button> | ||
| <button ng-click="fullScreenTrueDefault()">fullScreen(true)</button> | ||
| <button ng-click="fullScreenFalseDefault()">fullScreen(false)</button> | ||
| <button ng-click="fullScreenTrueTrue()">fullScreen(true, true)</button> | ||
| <button ng-click="fullScreenFalseTrue()">fullScreen(false, true)</button> | ||
| <button ng-click="fullScreenFalseFalse()">fullScreen(false, false)</button> | ||
| <button ng-click="fullScreenTrueFalse()">fullScreen(true, false)</button> | ||
| </p> | ||
|
|
||
| <p> | ||
| <button ng-click="cordova()">.platform-cordova</button> | ||
| <button ng-click="ios()">.platform-ios</button> | ||
| <button ng-click="android()">.platform-android</button> | ||
| </p> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
| </html> |