Commit 0c857214 authored by jstritar@chromium.org's avatar jstritar@chromium.org

[NTP] Tweak app drag and drop.

1. Map the free space on the last row of the app launcher to the last valid app position.
2. Transition the app opacity smoothly.
3. Fix JS errors when starting drag from certain areas.
4. Make sure drag and drop works when the window / apps section is scrolled.

BUG=53977
TEST=none.

Review URL: http://codereview.chromium.org/6264012

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@72394 0039d316-1c4b-4281-b951-d872f2087c98
parent 64c113e0
...@@ -93,11 +93,10 @@ html.apps-promo-visible #apps-content { ...@@ -93,11 +93,10 @@ html.apps-promo-visible #apps-content {
.app.dragging { .app.dragging {
opacity: .7; opacity: .7;
z-index: 2;
} }
#apps-content[launcher-animations=true] .app { #apps-content[launcher-animations=true] .app {
-webkit-transition: top .2s, left .2s, right .2s; -webkit-transition: top .2s, left .2s, right .2s, opacity .2s;
} }
@-webkit-keyframes bounce { @-webkit-keyframes bounce {
......
...@@ -367,7 +367,7 @@ var apps = (function() { ...@@ -367,7 +367,7 @@ var apps = (function() {
var item = findAncestorByClass(e.target, 'app'); var item = findAncestorByClass(e.target, 'app');
// You can't drag the web store launcher. // You can't drag the web store launcher.
if (item.classList.contains('web-store-entry')) if (item && item.classList.contains('web-store-entry'))
return null; return null;
return item; return item;
...@@ -410,18 +410,24 @@ var apps = (function() { ...@@ -410,18 +410,24 @@ var apps = (function() {
}, },
getIndexAt_: function(coordinates) { getIndexAt_: function(coordinates) {
var x = coordinates.x;
var y = coordinates.y;
var w = this.dimensions.width; var w = this.dimensions.width;
var h = this.dimensions.height; var h = this.dimensions.height;
var availableWidth = this.dragContainer.offsetWidth; var availableWidth = this.dragContainer.offsetWidth;
var row = Math.floor(y / h); var row = Math.floor(coordinates.y / h);
var col = Math.floor(x / w); var col = Math.floor(coordinates.x / w);
var index = Math.floor(availableWidth / w) * row + col; var index = Math.floor(availableWidth / w) * row + col;
var appCount = this.data.length;
var cols = MAX_APPS_PER_ROW[layoutMode];
var rows = Math.ceil(appCount / cols);
// Rather than making the free space on the last row invalid, we
// map it to the last valid position.
if (index >= appCount && index < cols * rows)
return appCount-1;
return index; return index;
}, },
......
...@@ -55,8 +55,8 @@ DragAndDropController.prototype = { ...@@ -55,8 +55,8 @@ DragAndDropController.prototype = {
getCoordinates_: function(e) { getCoordinates_: function(e) {
var rect = this.delegate_.dragContainer.getBoundingClientRect(); var rect = this.delegate_.dragContainer.getBoundingClientRect();
var coordinates = { var coordinates = {
x: e.clientX + window.scrollX - rect.left, x: e.clientX - rect.left,
y: e.clientY + window.scrollY - rect.top y: e.clientY - rect.top
}; };
// If we're in an RTL language, reflect the coordinates so the delegate // If we're in an RTL language, reflect the coordinates so the delegate
...@@ -71,8 +71,10 @@ DragAndDropController.prototype = { ...@@ -71,8 +71,10 @@ DragAndDropController.prototype = {
// starting drag and drop. // starting drag and drop.
handleMouseDown_: function(e) { handleMouseDown_: function(e) {
var item = this.delegate_.getItem(e); var item = this.delegate_.getItem(e);
if (!item) if (!item) {
e.preventDefault();
return; return;
}
this.startX_ = item.offsetLeft; this.startX_ = item.offsetLeft;
this.startY_ = item.offsetTop; this.startY_ = item.offsetTop;
...@@ -96,6 +98,7 @@ DragAndDropController.prototype = { ...@@ -96,6 +98,7 @@ DragAndDropController.prototype = {
// url-list. Instead, we just rely on the dragging of link behavior. // url-list. Instead, we just rely on the dragging of link behavior.
this.delegate_.dragItem = item; this.delegate_.dragItem = item;
item.classList.add('dragging'); item.classList.add('dragging');
item.style.zIndex = 2;
e.dataTransfer.effectAllowed = 'copyLinkMove'; e.dataTransfer.effectAllowed = 'copyLinkMove';
}, },
...@@ -127,9 +130,10 @@ DragAndDropController.prototype = { ...@@ -127,9 +130,10 @@ DragAndDropController.prototype = {
this.delegate_.dragItem = null; this.delegate_.dragItem = null;
this.delegate_.saveDrag(); this.delegate_.saveDrag();
dragItem.classList.remove('dragging');
setTimeout(function() { setTimeout(function() {
dragItem.classList.remove('dragging'); dragItem.style.zIndex = 0;
}, this.delegate_.transitionsDuration + 10); }, this.delegate_.transitionsDuration + 10);
}, },
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment