From fe44a7d98b0595a334ac5e7f8deb9b59347619f7 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 20 Mar 2014 16:02:50 -0500 Subject: [PATCH] rename .item-drag to .item-reorder, further standardize item editing --- js/ext/angular/src/directive/ionicList.js | 2 +- .../angular/test/directive/ionicList.unit.js | 12 ++-- js/views/listView.js | 6 +- scss/_items.scss | 67 +++++++++++-------- scss/_variables.scss | 10 ++- 5 files changed, 57 insertions(+), 40 deletions(-) diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index ddcb126a5e..591c1fd7ab 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -67,7 +67,7 @@ angular.module('ionic.ui.list', ['ngAnimate']) \ \ \ -
\ +
\ \
\
\ diff --git a/js/ext/angular/test/directive/ionicList.unit.js b/js/ext/angular/test/directive/ionicList.unit.js index 28aae0fcd7..7cf22dd159 100644 --- a/js/ext/angular/test/directive/ionicList.unit.js +++ b/js/ext/angular/test/directive/ionicList.unit.js @@ -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) { diff --git a/js/views/listView.js b/js/views/listView.js index 9ecc539f2f..aaf47dbcc5 100644 --- a/js/views/listView.js +++ b/js/views/listView.js @@ -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) { diff --git a/scss/_items.scss b/scss/_items.scss index 0caf89728e..9eb3847225 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -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. diff --git a/scss/_variables.scss b/scss/_variables.scss index 16363d55ab..ab2cb27f7a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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 // -------------------------------