This commit is contained in:
Adam Bradley
2013-11-05 20:39:56 -06:00
18 changed files with 257 additions and 149 deletions

View File

@ -1465,11 +1465,13 @@ button.item-button-right:after {
* "edit mode"
*/
.list-editing .item-content {
margin-right: 30px;
margin-left: 30px; }
margin-right: 50px;
margin-left: 50px; }
.list-editing .item-edit {
left: 0px;
opacity: 1; }
.list-editing .item-edit i {
left: 5px; }
.list-header {
margin-top: 20px;
@ -1723,7 +1725,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
select[multiple],
@ -1795,7 +1797,7 @@ input[type="checkbox"][readonly] {
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, .05s; }
transition-delay: 0s, 0.05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@ -1810,7 +1812,7 @@ input[type="checkbox"][readonly] {
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: .05s, 0s; }
transition-delay: 0.05s, 0s; }
.item-radio {
padding: 0; }
@ -2451,9 +2453,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ion-loading:before {
content: "\e144"; }
@ -2466,9 +2468,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ion-refreshing:before {
content: "\e144"; }

View File

@ -1680,7 +1680,7 @@
.ionic fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; }
border: 1px solid silver; }
.ionic legend {
padding: 0;
/* 2 */
@ -2799,11 +2799,13 @@
padding-bottom: 1px;
padding-left: 0; }
.ionic .list-editing .item-content {
margin-right: 30px;
margin-left: 30px; }
margin-right: 50px;
margin-left: 50px; }
.ionic .list-editing .item-edit {
left: 0px;
opacity: 1; }
.ionic .list-editing .item-edit i {
left: 5px; }
.ionic .list-header {
margin-top: 20px;
padding: 5px 15px;
@ -3026,7 +3028,7 @@
.ionic input[type="file"] {
line-height: 34px; }
.ionic select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
.ionic select[multiple],
.ionic select[size] {
@ -3075,7 +3077,7 @@
border-radius: 50%;
background: white;
content: ' ';
transition: background-color .1s ease-in-out; }
transition: background-color 0.1s ease-in-out; }
.ionic .checkbox input:after {
position: absolute;
top: 34%;
@ -3088,7 +3090,7 @@
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity .05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.ionic .checkbox input:checked:before {
@ -3690,9 +3692,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ionic .ion-loading:before {
content: "\e144"; }
.ionic .ion-refreshing {
@ -3704,9 +3706,9 @@
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ionic .ion-refreshing:before {
content: "\e144"; }
.ionic .hidden,

26
dist/css/ionic.css vendored
View File

@ -2013,7 +2013,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #c0c0c0; }
border: 1px solid silver; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@ -3360,11 +3360,13 @@ button.item-button-right:after {
* "edit mode"
*/
.list-editing .item-content {
margin-right: 30px;
margin-left: 30px; }
margin-right: 50px;
margin-left: 50px; }
.list-editing .item-edit {
left: 0px;
opacity: 1; }
.list-editing .item-edit i {
left: 5px; }
.list-header {
margin-top: 20px;
@ -3618,7 +3620,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #ccc;
border: 1px solid #cccccc;
background-color: white; }
select[multiple],
@ -3673,7 +3675,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color .1s ease-in-out; }
transition: background-color 0.1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@ -3688,7 +3690,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity .05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@ -4602,9 +4604,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ion-loading:before {
content: "\e144"; }
@ -4617,9 +4619,9 @@ a.button {
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin .75s linear infinite;
-moz-animation: spin .75s linear infinite;
animation: spin .75s linear infinite; }
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.ion-refreshing:before {
content: "\e144"; }

View File

@ -2,6 +2,15 @@
* Create a wrapping module to ease having to include too many
* modules.
*/
angular.module('ionic.service', [
'ionic.service.platform',
'ionic.service.actionSheet',
'ionic.service.gesture',
'ionic.service.loading',
'ionic.service.modal',
'ionic.service.popup',
'ionic.service.templateLoad'
]);
angular.module('ionic.ui', [
'ionic.ui.content',
@ -14,9 +23,9 @@ angular.module('ionic.ui', [
]);
angular.module('ionic', [
'ionic.platform',
'ionic.ui'
])
'ionic.service',
'ionic.ui',
]);
;
angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
@ -30,8 +39,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
*
* @param {object} opts the options for this ActionSheet (see docs)
*/
show: function(opts) {
var scope = $rootScope.$new(true);
show: function(opts, $scope) {
var scope = $scope && $scope.$new() || $rootScope.$new(true);
angular.extend(scope, opts);
@ -153,9 +162,9 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
* A new isolated scope will be created for the
* modal and the new element will be appended into the body.
*/
fromTemplate: function(templateString) {
fromTemplate: function(templateString, $scope) {
// Create a new isolated scope for the modal
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
// Compile the template
var element = $compile(templateString)(scope);
@ -165,10 +174,10 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
scope.modal = modal;
return modal;
},
fromTemplateUrl: function(url, cb) {
fromTemplateUrl: function(url, cb, $scope) {
TemplateLoader.load(url).then(function(templateString) {
// Create a new isolated scope for the modal
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
// Compile the template
var element = $compile(templateString)(scope);
@ -183,6 +192,98 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
};
}]);
;
(function() {
'use strict';
angular.module('ionic.service.platform', [])
/**
* The platformProvider makes it easy to set and detect which platform
* the app is currently running on. It has some auto detection built in
* for PhoneGap and Cordova. This provider also takes care of
* initializing some defaults that depend on the platform, such as the
* height of header bars on iOS 7.
*/
.provider('Platform', function() {
var platform = 'web';
var isPlatformReady = false;
if(window.cordova || window.PhoneGap || window.phonegap) {
platform = 'cordova';
}
var isReady = function() {
if(platform == 'cordova') {
return window.device;
}
return true;
};
// We need to do some stuff as soon as we know the platform,
// like adjust header margins for iOS 7, etc.
setTimeout(function afterReadyWait() {
if(isReady()) {
ionic.Platform.detect();
} else {
setTimeout(afterReadyWait, 50);
}
}, 10);
return {
setPlatform: function(p) {
platform = p;
},
$get: ['$q', '$timeout', function($q, $timeout) {
return {
/**
* Some platforms have hardware back buttons, so this is one way to bind to it.
*
* @param {function} cb the callback to trigger when this event occurs
*/
onHardwareBackButton: function(cb) {
this.ready(function() {
document.addEventListener('backbutton', cb, false);
});
},
/**
* Remove an event listener for the backbutton.
*
* @param {function} fn the listener function that was originally bound.
*/
offHardwareBackButton: function(fn) {
this.ready(function() {
document.removeEventListener('backbutton', fn);
});
},
/**
* Trigger a callback once the device is ready, or immediately if the device is already
* ready.
*/
ready: function(cb) {
var self = this;
var q = $q.defer();
$timeout(function readyWait() {
if(isReady()) {
isPlatformReady = true;
q.resolve();
cb();
} else {
$timeout(readyWait, 50);
}
}, 50);
return q.promise;
}
};
}]
};
});
})(ionic);
;
angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
@ -200,7 +301,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
};
return {
alert: function(message) {
alert: function(message, $scope) {
// If there is an existing popup, just show that one
var existing = getPopup();
@ -215,7 +316,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
opts = angular.extend(defaults, opts);
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
angular.extend(scope, opts);
// Compile the template
@ -402,6 +503,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
buttons: '=',
},
template: '<a href="#" class="item item-slider">\
<div class="item-edit" ng-if="canDelete && isEditing">\
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
</div>\
<div class="item-content slide-left" ng-transclude>\
</div>\
<div class="item-options" ng-if="canSwipe && !isEditing">\
@ -561,9 +665,9 @@ angular.module('ionic.ui.loading', [])
(function() {
'use strict';
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ionic.service.platform', 'ngAnimate'])
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', 'Platform', function($scope, $element, $animate, $compile, TemplateLoader, Platform) {
var _this = this;
angular.extend(this, ionic.controllers.NavController.prototype);
@ -588,6 +692,15 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
}
});
// Support Android hardware back button (native only, not mobile web)
var onHardwareBackButton = function(e) {
$scope.$apply(function() {
_this.pop();
});
}
Platform.onHardwareBackButton(onHardwareBackButton);
this.handleDrag = function(e) {
};
@ -622,6 +735,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
};
$scope.navController = this;
$scope.$on('$destroy', function() {
// Remove back button listener
Platform.offHardwareBackButton(onHardwareBackButton);
});
}])
.directive('navs', function() {
@ -751,74 +869,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
})();
;
(function() {
'use strict';
angular.module('ionic.platform', [])
/**
* The platformProvider makes it easy to set and detect which platform
* the app is currently running on. It has some auto detection built in
* for PhoneGap and Cordova. This provider also takes care of
* initializing some defaults that depend on the platform, such as the
* height of header bars on iOS 7.
*/
.provider('platform', function() {
var platform = 'unknown';
var isPlatformReady = false;
if(window.cordova || window.PhoneGap || window.phonegap) {
platform = 'cordova';
}
console.log('Detected platform', platform);
var isReady = function() {
if(platform == 'cordova') {
return window.device;
}
return true;
};
// We need to do some stuff as soon as we know the platform,
// like adjust header margins for iOS 7, etc.
setTimeout(function afterReadyWait() {
if(isReady()) {
ionic.Platform.detect();
} else {
setTimeout(afterReadyWait, 50);
}
}, 10);
return {
setPlatform: function(p) {
platform = p;
},
$get: ['$q', '$timeout', function($q, $timeout) {
return {
ready: function(cb) {
var self = this;
var q = $q.defer();
$timeout(function readyWait() {
if(isReady()) {
isPlatformReady = true;
q.resolve();
cb();
} else {
$timeout(readyWait, 50);
}
}, 50);
return q.promise;
}
};
}]
};
});
})(ionic);
;
;
(function() {
'use strict';

View File

@ -19,6 +19,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
buttons: '=',
},
template: '<a href="#" class="item item-slider">\
<div class="item-edit" ng-if="canDelete && isEditing">\
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
</div>\
<div class="item-content slide-left" ng-transclude>\
</div>\
<div class="item-options" ng-if="canSwipe && !isEditing">\

View File

@ -1,9 +1,9 @@
(function() {
'use strict';
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ionic.service.platform', 'ngAnimate'])
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', 'Platform', function($scope, $element, $animate, $compile, TemplateLoader, Platform) {
var _this = this;
angular.extend(this, ionic.controllers.NavController.prototype);
@ -28,6 +28,15 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
}
});
// Support Android hardware back button (native only, not mobile web)
var onHardwareBackButton = function(e) {
$scope.$apply(function() {
_this.pop();
});
}
Platform.onHardwareBackButton(onHardwareBackButton);
this.handleDrag = function(e) {
};
@ -62,6 +71,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
};
$scope.navController = this;
$scope.$on('$destroy', function() {
// Remove back button listener
Platform.offHardwareBackButton(onHardwareBackButton);
});
}])
.directive('navs', function() {

View File

@ -2,6 +2,15 @@
* Create a wrapping module to ease having to include too many
* modules.
*/
angular.module('ionic.service', [
'ionic.service.platform',
'ionic.service.actionSheet',
'ionic.service.gesture',
'ionic.service.loading',
'ionic.service.modal',
'ionic.service.popup',
'ionic.service.templateLoad'
]);
angular.module('ionic.ui', [
'ionic.ui.content',
@ -14,6 +23,6 @@ angular.module('ionic.ui', [
]);
angular.module('ionic', [
'ionic.platform',
'ionic.ui'
])
'ionic.service',
'ionic.ui',
]);

View File

@ -10,8 +10,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
*
* @param {object} opts the options for this ActionSheet (see docs)
*/
show: function(opts) {
var scope = $rootScope.$new(true);
show: function(opts, $scope) {
var scope = $scope && $scope.$new() || $rootScope.$new(true);
angular.extend(scope, opts);

View File

@ -9,9 +9,9 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
* A new isolated scope will be created for the
* modal and the new element will be appended into the body.
*/
fromTemplate: function(templateString) {
fromTemplate: function(templateString, $scope) {
// Create a new isolated scope for the modal
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
// Compile the template
var element = $compile(templateString)(scope);
@ -21,10 +21,10 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
scope.modal = modal;
return modal;
},
fromTemplateUrl: function(url, cb) {
fromTemplateUrl: function(url, cb, $scope) {
TemplateLoader.load(url).then(function(templateString) {
// Create a new isolated scope for the modal
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
// Compile the template
var element = $compile(templateString)(scope);

View File

@ -1,7 +1,7 @@
(function() {
'use strict';
angular.module('ionic.platform', [])
angular.module('ionic.service.platform', [])
/**
* The platformProvider makes it easy to set and detect which platform
@ -10,16 +10,14 @@ angular.module('ionic.platform', [])
* initializing some defaults that depend on the platform, such as the
* height of header bars on iOS 7.
*/
.provider('platform', function() {
var platform = 'unknown';
.provider('Platform', function() {
var platform = 'web';
var isPlatformReady = false;
if(window.cordova || window.PhoneGap || window.phonegap) {
platform = 'cordova';
}
console.log('Detected platform', platform);
var isReady = function() {
if(platform == 'cordova') {
return window.device;
@ -43,6 +41,32 @@ angular.module('ionic.platform', [])
},
$get: ['$q', '$timeout', function($q, $timeout) {
return {
/**
* Some platforms have hardware back buttons, so this is one way to bind to it.
*
* @param {function} cb the callback to trigger when this event occurs
*/
onHardwareBackButton: function(cb) {
this.ready(function() {
document.addEventListener('backbutton', cb, false);
});
},
/**
* Remove an event listener for the backbutton.
*
* @param {function} fn the listener function that was originally bound.
*/
offHardwareBackButton: function(fn) {
this.ready(function() {
document.removeEventListener('backbutton', fn);
});
},
/**
* Trigger a callback once the device is ready, or immediately if the device is already
* ready.
*/
ready: function(cb) {
var self = this;
var q = $q.defer();

View File

@ -15,7 +15,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
};
return {
alert: function(message) {
alert: function(message, $scope) {
// If there is an existing popup, just show that one
var existing = getPopup();
@ -30,7 +30,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
opts = angular.extend(defaults, opts);
var scope = $rootScope.$new(true);
var scope = $scope && $scope.$new() || $rootScope.$new(true);
angular.extend(scope, opts);
// Compile the template

View File

@ -63,9 +63,8 @@
<body>
<content ng-controller="TestCtrl" class="reveal-animation">
<list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
<list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="ion ion-minus-circled" reorder-icon="icon-navicon">
<list-refresher>
<spinner ratio="refreshRatio.ratio"></spinner>
</list-refresher>
<list-item ng-repeat="item in items"
buttons="item.buttons"

View File

@ -17,12 +17,15 @@
*/
.list-editing {
.item-content {
margin-right: 30px;
margin-left: 30px;
margin-right: 50px;
margin-left: 50px;
}
.item-edit {
left: 0px;
opacity: 1;
i {
left: 5px;
}
}
}

View File

@ -19,7 +19,7 @@
"type",
// Action Sheet
"actionSheet",
"action-sheet",
// Nav
"bar",

View File

@ -17,7 +17,7 @@
"type",
// Action Sheet
"actionSheet",
"action-sheet",
// Nav
"bar",
@ -45,9 +45,9 @@
// Components
"alerts",
"slideBox",
"slide-box",
"splitPane",
"split-pane",
"scroll",