mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Some list editing improvements
This commit is contained in:
Max Lynch
17
dist/css/ionic-ios7.css
vendored
17
dist/css/ionic-ios7.css
vendored
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
/**
|
||||
* Adapted from normalize.css and some reset.css. We don't care even one
|
||||
* bit about old IE, so we don't need any hacks for that in here.
|
||||
@ -1094,7 +1093,7 @@ a.list-item {
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
padding: 15px 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
|
||||
@ -1124,6 +1123,20 @@ a.list-item {
|
||||
.list-item-edit i {
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.list-item-edit.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0; }
|
||||
.list-item-edit.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px; }
|
||||
|
||||
.list-item-drag {
|
||||
position: absolute;
|
||||
|
||||
17
dist/css/ionic.css
vendored
17
dist/css/ionic.css
vendored
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
@font-face {
|
||||
font-family: 'ionicons';
|
||||
src: url("fonts/ionicons.eot");
|
||||
@ -2181,7 +2180,7 @@ a.list-item {
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
padding: 15px 15px;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
|
||||
.list-item-content > i:last-child {
|
||||
float: right; }
|
||||
.list-item-content > .toggle:last-child, .list-item-content input:last-child, .list-item-content > button:last-child {
|
||||
@ -2211,6 +2210,20 @@ a.list-item {
|
||||
.list-item-edit i {
|
||||
color: #ef4e3a;
|
||||
font-size: 24px; }
|
||||
.list-item-edit.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0; }
|
||||
.list-item-edit.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0; }
|
||||
.list-item-edit.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1; }
|
||||
.list-item-edit.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px; }
|
||||
|
||||
.list-item-drag {
|
||||
position: absolute;
|
||||
|
||||
103
dist/js/ionic-angular.js
vendored
103
dist/js/ionic-angular.js
vendored
@ -187,31 +187,37 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
.directive('listItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^list',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<li class="list-item">' +
|
||||
' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
|
||||
' <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-content" ng-transclude>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' +
|
||||
' <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
|
||||
' <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
|
||||
' </div>' +
|
||||
'</li>',
|
||||
link: function($scope, $element, $attr) {
|
||||
// Triggered when a button is clicked
|
||||
$scope.buttonClicked = function(button) {
|
||||
button.buttonClicked && button.buttonClicked($scope.item);
|
||||
}
|
||||
scope: {
|
||||
onSelect: '&',
|
||||
onDelete: '&',
|
||||
onButtonClicked: '&',
|
||||
canDelete: '@',
|
||||
canReorder: '@',
|
||||
canSwipe: '@',
|
||||
buttons: '=',
|
||||
},
|
||||
template: '<li class="list-item">\
|
||||
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
||||
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
||||
</div>\
|
||||
<div class="list-item-content" ng-transclude>\
|
||||
</div>\
|
||||
<div class="list-item-drag" ng-if="canReorder && isEditing">\
|
||||
<button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
|
||||
</div>\
|
||||
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
||||
<button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||
</div>\
|
||||
</li>',
|
||||
link: function($scope, $element, $attr, list) {
|
||||
$scope.deleteIcon = list.scope.deleteIcon;
|
||||
|
||||
// Triggered when the delete item is clicked
|
||||
$scope.deleteClicked = function() {
|
||||
$scope.item.deleteItem && $scope.item.deleteItem();
|
||||
}
|
||||
list.scope.$watch('isEditing', function(v) {
|
||||
$scope.isEditing = v;
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -221,46 +227,27 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
|
||||
scope: {
|
||||
isEditing: '=',
|
||||
items: '=',
|
||||
animation: '@',
|
||||
deleteIcon: '@',
|
||||
reorderIcon: '@'
|
||||
},
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
|
||||
'<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
|
||||
' {{item.text}}' +
|
||||
' <i class="{{item.icon}}" ng-if="item.icon"></i>' +
|
||||
'</list-item>' +
|
||||
'</ul>',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
var lv = new ionic.views.List({el: $element[0]});
|
||||
|
||||
if(attr.animation) {
|
||||
$element.addClass(attr.animation);
|
||||
}
|
||||
|
||||
$element.append(transclude($scope));
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('listSimple', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
scope: {
|
||||
isEditing: '=',
|
||||
items: '=',
|
||||
animation: '@',
|
||||
deleteIcon: '@'
|
||||
},
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>' +
|
||||
'</ul>',
|
||||
|
||||
// So we can require being under this
|
||||
controller: function($scope) {
|
||||
var _this = this;
|
||||
|
||||
this.scope = $scope;
|
||||
|
||||
$scope.$watch('isEditing', function(v) {
|
||||
_this.isEditing = true;
|
||||
console.log('Is Editing Changed', v);
|
||||
});
|
||||
},
|
||||
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
|
||||
</ul>',
|
||||
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
var lv = new ionic.views.List({el: $element[0]});
|
||||
|
||||
103
js/ext/angular/src/directive/ionicList.js
vendored
103
js/ext/angular/src/directive/ionicList.js
vendored
@ -3,31 +3,37 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
.directive('listItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^list',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<li class="list-item">' +
|
||||
' <div class="list-item-edit" ng-if="item.canDelete && isEditing">' +
|
||||
' <button class="button button-icon" ng-click="deleteClicked()"><i ng-class="deleteIcon"></i></button>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-content" ng-transclude>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-drag" ng-if="item.canReorder && isEditing">' +
|
||||
' <button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>' +
|
||||
' </div>' +
|
||||
' <div class="list-item-buttons" ng-if="item.canSwipe && !isEditing">' +
|
||||
' <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
|
||||
' </div>' +
|
||||
'</li>',
|
||||
link: function($scope, $element, $attr) {
|
||||
// Triggered when a button is clicked
|
||||
$scope.buttonClicked = function(button) {
|
||||
button.buttonClicked && button.buttonClicked($scope.item);
|
||||
}
|
||||
scope: {
|
||||
onSelect: '&',
|
||||
onDelete: '&',
|
||||
onButtonClicked: '&',
|
||||
canDelete: '@',
|
||||
canReorder: '@',
|
||||
canSwipe: '@',
|
||||
buttons: '=',
|
||||
},
|
||||
template: '<li class="list-item">\
|
||||
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
||||
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
||||
</div>\
|
||||
<div class="list-item-content" ng-transclude>\
|
||||
</div>\
|
||||
<div class="list-item-drag" ng-if="canReorder && isEditing">\
|
||||
<button ng-click="startReorder()"><i ng-class="reorderIcon"></i></button>\
|
||||
</div>\
|
||||
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
||||
<button ng-click="onButtonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||
</div>\
|
||||
</li>',
|
||||
link: function($scope, $element, $attr, list) {
|
||||
$scope.deleteIcon = list.scope.deleteIcon;
|
||||
|
||||
// Triggered when the delete item is clicked
|
||||
$scope.deleteClicked = function() {
|
||||
$scope.item.deleteItem && $scope.item.deleteItem();
|
||||
}
|
||||
list.scope.$watch('isEditing', function(v) {
|
||||
$scope.isEditing = v;
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -37,46 +43,27 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
|
||||
scope: {
|
||||
isEditing: '=',
|
||||
items: '=',
|
||||
animation: '@',
|
||||
deleteIcon: '@',
|
||||
reorderIcon: '@'
|
||||
},
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
|
||||
'<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
|
||||
' {{item.text}}' +
|
||||
' <i class="{{item.icon}}" ng-if="item.icon"></i>' +
|
||||
'</list-item>' +
|
||||
'</ul>',
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
var lv = new ionic.views.List({el: $element[0]});
|
||||
|
||||
if(attr.animation) {
|
||||
$element.addClass(attr.animation);
|
||||
}
|
||||
|
||||
$element.append(transclude($scope));
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('listSimple', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
scope: {
|
||||
isEditing: '=',
|
||||
items: '=',
|
||||
animation: '@',
|
||||
deleteIcon: '@'
|
||||
},
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>' +
|
||||
'</ul>',
|
||||
|
||||
// So we can require being under this
|
||||
controller: function($scope) {
|
||||
var _this = this;
|
||||
|
||||
this.scope = $scope;
|
||||
|
||||
$scope.$watch('isEditing', function(v) {
|
||||
_this.isEditing = true;
|
||||
console.log('Is Editing Changed', v);
|
||||
});
|
||||
},
|
||||
|
||||
template: '<ul class="list" ng-class="{\'list-editing\': isEditing}" ng-transclude>\
|
||||
</ul>',
|
||||
|
||||
compile: function(element, attr, transclude) {
|
||||
return function($scope, $element, $attr) {
|
||||
var lv = new ionic.views.List({el: $element[0]});
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/ionic.css">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
|
||||
@ -49,45 +49,20 @@
|
||||
<body>
|
||||
|
||||
<content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
|
||||
<list is-editing="isEditingItems">
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-edit">
|
||||
<button class="button button-icon"><i class="icon-minus-circled"></i></button>
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
Item 1
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Item 2
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Item 3
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
</list>
|
||||
<list items="items" is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled">
|
||||
<list is-editing="isEditingItems" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
|
||||
<list-item ng-repeat="item in items"
|
||||
can-delete="true"
|
||||
on-delete="deleteProject(project)"
|
||||
on-select="selectProject(project)">
|
||||
{{item.text}}
|
||||
<i class="{{item.icon}}"></i>
|
||||
</list-item>
|
||||
</list>
|
||||
<button ng-click="edit()" class="button button-success">Edit</button>
|
||||
</content>
|
||||
|
||||
<script src="../../../../dist/ionic.js"></script>
|
||||
<script src="../../../../dist/ionic-angular.js"></script>
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
|
||||
|
||||
@ -104,7 +79,6 @@
|
||||
canSwipe: true,
|
||||
canReorder: true,
|
||||
icon: 'icon-chevron-right',
|
||||
reorderIcon: 'icon-navicon',
|
||||
hide: false,
|
||||
deleteItem: removeItem,
|
||||
buttons: [{
|
||||
@ -119,7 +93,6 @@
|
||||
canSwipe: true,
|
||||
canReorder: true,
|
||||
icon: 'icon-chevron-right',
|
||||
reorderIcon: 'icon-navicon',
|
||||
deleteItem: removeItem,
|
||||
buttons: [{
|
||||
text: 'Kill',
|
||||
@ -133,7 +106,6 @@
|
||||
canSwipe: true,
|
||||
canReorder: true,
|
||||
icon: 'icon-chevron-right',
|
||||
reorderIcon: 'icon-navicon',
|
||||
deleteItem: removeItem,
|
||||
buttons: [{
|
||||
text: 'Kill',
|
||||
|
||||
@ -120,7 +120,7 @@ a.list-item {
|
||||
|
||||
padding: 15px 15px;
|
||||
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
|
||||
|
||||
// Align icons to the right
|
||||
> i:last-child {
|
||||
@ -165,6 +165,26 @@ a.list-item {
|
||||
color: $brand-danger;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
&.ng-enter {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: -48px;
|
||||
opacity: 0;
|
||||
}
|
||||
&.ng-enter-active {
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
}
|
||||
&.ng-leave {
|
||||
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
&.ng-leave-active {
|
||||
opacity: 0;
|
||||
left: -48px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item-drag {
|
||||
|
||||
Reference in New Issue
Block a user