javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

rename .item-drag to .item-reorder, further standardize item editing

Browse Source
This commit is contained in:
Adam Bradley
2014-03-20 16:02:50 -05:00
parent 3718c47e8a
commit fe44a7d98b
5 changed files with 57 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/ext/angular/src/directive/ionicList.js vendored
View File

@@ -67,7 +67,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
<button class="button button-icon icon" ng-class="deleteIconClass" ng-click="deleteClick()" ion-stop-event="click"></button>\
</div>\
<a class="item-content" ng-href="{{ href }}" ng-transclude></a>\
<div class="item-right-edit item-drag" ng-if="reorderIconClass !== undefined">\
<div class="item-right-edit item-reorder" ng-if="reorderIconClass !== undefined">\
<button data-ionic-action="reorder" class="button button-icon icon" ng-class="reorderIconClass"></button>\
</div>\
<div class="item-options" ng-if="itemOptionButtons">\

12
js/ext/angular/test/directive/ionicList.unit.js
View File

@@ -290,7 +290,8 @@ describe('Ionic Item Directive', function () {
$rootScope.$digest();
itemScope = itemElement.isolateScope();
expect(itemScope.reorderIconClass).toBe(undefined);
expect(itemElement.find('.item-drag').length).toBe(0);
expect(itemElement.find('.item-reorder').length).toBe(0);
expect(itemElement.find('.item-right-edit').length).toBe(0);
}));
it('Should be able to reorder cuz item can-reorder attribute true', inject(function ($timeout) {
@@ -299,7 +300,8 @@ describe('Ionic Item Directive', function () {
$rootScope.$digest();
itemScope = itemElement.isolateScope();
expect(itemScope.reorderIconClass).toBe('test-icon');
expect(itemElement.find('.item-drag').length).toBe(1);
expect(itemElement.find('.item-reorder').length).toBe(1);
expect(itemElement.find('.item-right-edit').length).toBe(1);
}));
it('Should be able to reorder cuz list can-reorder attribute true', inject(function ($timeout) {
@@ -311,7 +313,8 @@ describe('Ionic Item Directive', function () {
$rootScope.$digest();
itemScope = itemElement.isolateScope();
expect(itemScope.reorderIconClass).toBe('test-icon');
expect(itemElement.find('.item-drag').length).toBe(1);
expect(itemElement.find('.item-reorder').length).toBe(1);
expect(itemElement.find('.item-right-edit').length).toBe(1);
}));
it('Should not have options cuz no optionButtons', inject(function ($timeout) {
@@ -332,7 +335,8 @@ describe('Ionic Item Directive', function () {
$rootScope.$digest();
itemScope = itemElement.isolateScope();
expect(itemScope.reorderIconClass).toBe('ion-navicon');
expect(itemElement.find('.item-drag').length).toBe(1);
expect(itemElement.find('.item-reorder').length).toBe(1);
expect(itemElement.find('.item-right-edit').length).toBe(1);
}));
it('Should not have options cuz item can-swipe false', inject(function ($timeout) {

6
js/views/listView.js
View File

@@ -7,7 +7,7 @@
var ITEM_OPTIONS_CLASS = 'item-options';
var ITEM_PLACEHOLDER_CLASS = 'item-placeholder';
var ITEM_REORDERING_CLASS = 'item-reordering';
var ITEM_DRAG_CLASS = 'item-drag';
var ITEM_REORDER_BTN_CLASS = 'item-reorder';
var DragOp = function() {};
DragOp.prototype = {
@@ -420,7 +420,7 @@
_initDrag: function() {
//ionic.views.ListView.__super__._initDrag.call(this);
// Store the last one
// Store the last one
this._lastDragOp = this._dragOp;
this._dragOp = null;
@@ -448,7 +448,7 @@
var lastDragOp = this._lastDragOp;
// Check if this is a reorder drag
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_DRAG_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
if(ionic.DomUtil.getParentOrSelfWithClass(e.target, ITEM_REORDER_BTN_CLASS) && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
var item = this._getItem(e.target);
if(item) {

67
scss/_items.scss
View File

@@ -575,13 +575,13 @@ button.item-button-right:after,
.list-left-editing .item-left-editable .item-content,
.item-left-editing.item-left-editable .item-content {
// actively editing the left side of the item
@include translate3d($item-edit-left-open-width, 0, 0);
@include translate3d($item-left-edit-open-width, 0, 0);
}
.list-right-editing .item-right-editable .item-content,
.item-right-editing.item-right-editable .item-content {
// actively editing the right side of the item
margin-right: $item-edit-right-open-width;
margin-right: $item-right-edit-open-width;
}
@@ -590,12 +590,12 @@ button.item-button-right:after,
.item-left-edit {
@include transition(all $item-edit-transition-function $item-edit-transition-duration);
@include translate3d( $item-delete-icon-left - $item-edit-left-open-width, 0, 0);
@include translate3d( $item-left-edit-left - $item-left-edit-open-width, 0, 0);
position: absolute;
top: 0;
left: 0;
z-index: $z-index-item-edit;
width: $item-edit-left-open-width;
width: $item-left-edit-open-width;
height: 100%;
line-height: 100%;
opacity: 0;
@@ -608,7 +608,6 @@ button.item-button-right:after,
@include align-items(center);
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
@@ -616,12 +615,12 @@ button.item-button-right:after,
.list-left-editing .item-left-edit,
.item-left-editing .item-left-edit {
@include translate3d($item-delete-icon-left, 0, 0);
@include translate3d($item-left-edit-left, 0, 0);
opacity: 1;
}
// Item Delete
// Item Delete (Left side edit button)
// -------------------------------
.item-delete .button.icon {
@@ -634,50 +633,60 @@ button.item-button-right:after,
}
// Item Reordering
// Item Right Edit Button
// -------------------------------
.list-reordering {
.item-drag {
z-index: 1;
}
}
.item-reordering {
position: absolute;
z-index: $z-index-item-reordering;
width: 100%;
}
.item-placeholder {
opacity: 0.7;
}
.item-drag {
.item-right-edit {
position: absolute;
top: 0;
right: 0;
z-index: 0;
width: 50px;
width: $item-right-edit-open-width;
height: 100%;
background: inherit;
.button {
min-width: 42px;
min-width: $item-right-edit-open-width;
height: 100%;
&.icon:before {
&.icon {
@include display-flex();
@include align-items(center);
position: absolute;
top: 0;
height: 100%;
font-size: 32px;
font-size: $item-reorder-icon-size;
}
}
}
// Item Reordering (Right side edit button)
// -------------------------------
.item-reorder .button.icon {
color: $item-reorder-icon-color;
font-size: $item-reorder-icon-size;
}
.item-reordering {
// item is actively being reordered
position: absolute;
z-index: $z-index-item-reordering;
width: 100%;
box-shadow: 0px 0px 10px 0px #aaa;
.item-reorder {
z-index: 1;
}
}
.item-placeholder {
// placeholder for the item that's being reordered
opacity: 0.7;
}
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.

10
scss/_variables.scss
View File

@@ -367,13 +367,17 @@ $item-default-active-border: $item-light-active-border !default;
$item-edit-transition-duration: 250ms !default;
$item-edit-transition-function: ease-in-out !default;
$item-edit-right-open-width: 50px !default;
$item-edit-left-open-width: 50px !default;
$item-left-edit-left: 8px !default; // item's left side edit's "left" property
$item-right-edit-open-width: 50px !default;
$item-left-edit-open-width: 50px !default;
$item-delete-icon-left: 8px !default;
$item-delete-icon-size: 24px !default;
$item-delete-icon-color: $assertive !default;
$item-reorder-icon-size: 32px !default;
$item-reorder-icon-color: $dark !default;
// Lists
// -------------------------------