Simpler content area and fixed nav ctrl

This commit is contained in:
Max Lynch
2013-10-21 21:00:26 -05:00
parent bc6819d5a0
commit d331c657c0
7 changed files with 38 additions and 66 deletions

View File

@ -367,15 +367,7 @@ body, .ionic-body {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); } transform: translateZ(0px); }
.content-wrapper { .content {
position: absolute;
top: 0;
overflow: auto;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; }
.content-plain {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;

View File

@ -1139,14 +1139,7 @@
.ionic .content > * { .ionic .content > * {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); } transform: translateZ(0px); }
.ionic .content-wrapper { .ionic .content {
position: absolute;
top: 0;
overflow: auto;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; }
.ionic .content-plain {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;

10
dist/css/ionic.css vendored
View File

@ -1446,15 +1446,7 @@ body, .ionic-body {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); } transform: translateZ(0px); }
.content-wrapper { .content {
position: absolute;
top: 0;
overflow: auto;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; }
.content-plain {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;

View File

@ -340,13 +340,12 @@ angular.module('ionic.ui.content', [])
return { return {
restrict: 'E', restrict: 'E',
replace: true, replace: true,
template: '<div class="content-wrapper"><div class="content"></div></div>', template: '<div class="content"></div>',
transclude: true, transclude: true,
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var c = $element.children().eq(0); var c = $element.eq(0);
c.addClass('content');
if(attr.hasHeader) { if(attr.hasHeader) {
c.addClass('has-header'); c.addClass('has-header');
@ -357,7 +356,8 @@ angular.module('ionic.ui.content', [])
if(attr.hasTabs) { if(attr.hasTabs) {
c.addClass('has-tabs'); c.addClass('has-tabs');
} }
c.append(transclude($scope)); var e = transclude($scope);
console.log(e);
}; };
} }
}; };
@ -531,27 +531,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
this.endDrag = function(e) { this.endDrag = function(e) {
}; };
/**
* Push a template onto the navigation stack.
* @param {string} templateUrl the URL of the template to load.
*/
this.pushFromTemplate = function(templateUrl) { this.pushFromTemplate = function(templateUrl) {
var childScope = $scope.$new(); var childScope = $scope.$new();
childScope.isVisible = true; childScope.isVisible = true;
// Load the given template
TemplateLoader.load(templateUrl).then(function(templateString) { TemplateLoader.load(templateUrl).then(function(templateString) {
// Compile the template with the new scrope, and append it to the navigation's content area
var el = $compile(templateString)(childScope, function(cloned, scope) { var el = $compile(templateString)(childScope, function(cloned, scope) {
angular.element($element[0].children[1].firstElementChild).append(cloned); var content = $element[0].querySelector('.content');
angular.element(content).append(cloned);
}); });
}); });
}; };
/**
* Push a controller to the stack. This is called by the child
* nav-content directive when it is linked to a scope on the page.
*/
$scope.pushController = function(scope, element) { $scope.pushController = function(scope, element) {
_this.push(scope); _this.push(scope);
/*
var old = angular.element($element[0].children[1]);
$animate.enter(element, $element, $element[0].firstElementChild, function() {
});
$animate.leave(old, function() {
});
*/
}; };
$scope.navController = this; $scope.navController = this;

View File

@ -9,13 +9,12 @@ angular.module('ionic.ui.content', [])
return { return {
restrict: 'E', restrict: 'E',
replace: true, replace: true,
template: '<div class="content-wrapper"><div class="content"></div></div>', template: '<div class="content"></div>',
transclude: true, transclude: true,
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr) { return function($scope, $element, $attr) {
var c = $element.children().eq(0); var c = $element.eq(0);
c.addClass('content');
if(attr.hasHeader) { if(attr.hasHeader) {
c.addClass('has-header'); c.addClass('has-header');
@ -26,7 +25,8 @@ angular.module('ionic.ui.content', [])
if(attr.hasTabs) { if(attr.hasTabs) {
c.addClass('has-tabs'); c.addClass('has-tabs');
} }
c.append(transclude($scope)); var e = transclude($scope);
console.log(e);
}; };
} }
}; };

View File

@ -34,27 +34,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
this.endDrag = function(e) { this.endDrag = function(e) {
}; };
/**
* Push a template onto the navigation stack.
* @param {string} templateUrl the URL of the template to load.
*/
this.pushFromTemplate = function(templateUrl) { this.pushFromTemplate = function(templateUrl) {
var childScope = $scope.$new(); var childScope = $scope.$new();
childScope.isVisible = true; childScope.isVisible = true;
// Load the given template
TemplateLoader.load(templateUrl).then(function(templateString) { TemplateLoader.load(templateUrl).then(function(templateString) {
// Compile the template with the new scrope, and append it to the navigation's content area
var el = $compile(templateString)(childScope, function(cloned, scope) { var el = $compile(templateString)(childScope, function(cloned, scope) {
angular.element($element[0].children[1].firstElementChild).append(cloned); var content = $element[0].querySelector('.content');
angular.element(content).append(cloned);
}); });
}); });
}; };
/**
* Push a controller to the stack. This is called by the child
* nav-content directive when it is linked to a scope on the page.
*/
$scope.pushController = function(scope, element) { $scope.pushController = function(scope, element) {
_this.push(scope); _this.push(scope);
/*
var old = angular.element($element[0].children[1]);
$animate.enter(element, $element, $element[0].firstElementChild, function() {
});
$animate.leave(old, function() {
});
*/
}; };
$scope.navController = this; $scope.navController = this;

View File

@ -70,27 +70,14 @@ body, .ionic-body {
transform: translateZ(0px); transform: translateZ(0px);
} }
.content-wrapper {
position: absolute;
top: 0;
overflow: auto;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.content-plain { .content {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&.has-header {
}
&.has-footer {
}
} }
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.