Commit 894692a4 authored by samli@chromium.org's avatar samli@chromium.org

Devtools Color: Animate drag rearrangement of custom color palette

BUG=461320

Review URL: https://codereview.chromium.org/1319823002

git-svn-id: svn://svn.chromium.org/blink/trunk@201273 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent e4813f44
...@@ -258,8 +258,6 @@ WebInspector.Spectrum.prototype = { ...@@ -258,8 +258,6 @@ WebInspector.Spectrum.prototype = {
if (palette.mutable) if (palette.mutable)
numItems++; numItems++;
var rowsNeeded = Math.max(1, Math.ceil(numItems / WebInspector.Spectrum._itemsPerPaletteRow)); var rowsNeeded = Math.max(1, Math.ceil(numItems / WebInspector.Spectrum._itemsPerPaletteRow));
for (var i = 0; palette.mutable && i < rowsNeeded * WebInspector.Spectrum._itemsPerPaletteRow - numItems; i++)
this._paletteContainer.createChild("div", "spectrum-palette-color empty-color");
if (palette.mutable) if (palette.mutable)
this.contentElement.appendChild(this._addColorToolbar.element); this.contentElement.appendChild(this._addColorToolbar.element);
else else
...@@ -313,13 +311,28 @@ WebInspector.Spectrum.prototype = { ...@@ -313,13 +311,28 @@ WebInspector.Spectrum.prototype = {
var offsetX = e.pageX - (newIndex % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize; var offsetX = e.pageX - (newIndex % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
var offsetY = e.pageY - (newIndex / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize; var offsetY = e.pageY - (newIndex / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
this._dragElement.style.position = "relative"; this._dragElement.style.transform = "translateX(" + (offsetX - this._dragHotSpotX) + "px) translateY(" + (offsetY - this._dragHotSpotY) + "px)";
this._dragElement.style.left = (offsetX - this._dragHotSpotX) + "px";
this._dragElement.style.top = (offsetY - this._dragHotSpotY) + "px";
var children = Array.prototype.slice.call(this._paletteContainer.children); var children = Array.prototype.slice.call(this._paletteContainer.children);
var index = children.indexOf(this._dragElement); var index = children.indexOf(this._dragElement);
/** @type {!Map.<!Element, {left: number, top: number}>} */
var swatchOffsets = new Map();
for (var swatch of children)
swatchOffsets.set(swatch, swatch.totalOffset());
if (index !== newIndex) if (index !== newIndex)
this._paletteContainer.insertBefore(this._dragElement, children[newIndex > index ? newIndex + 1 : newIndex]); this._paletteContainer.insertBefore(this._dragElement, children[newIndex > index ? newIndex + 1 : newIndex]);
for (var swatch of children) {
if (swatch === this._dragElement)
continue;
var before = swatchOffsets.get(swatch);
var after = swatch.totalOffset();
if (before.left !== after.left || before.top !== after.top) {
swatch.animate([
{ transform: "translateX(" + (before.left - after.left) + "px) translateY(" + (before.top - after.top) + "px)" },
{ transform: "none" }], { duration: 100, easing: "cubic-bezier(0, 0, 0.2, 1)" });
}
}
}, },
/** /**
...@@ -327,9 +340,7 @@ WebInspector.Spectrum.prototype = { ...@@ -327,9 +340,7 @@ WebInspector.Spectrum.prototype = {
*/ */
_paletteDragEnd: function(e) _paletteDragEnd: function(e)
{ {
this._dragElement.style.removeProperty("position"); this._dragElement.style.removeProperty("transform");
this._dragElement.style.removeProperty("left");
this._dragElement.style.removeProperty("top");
var children = this._paletteContainer.children; var children = this._paletteContainer.children;
var colors = []; var colors = [];
for (var i = 0; i < children.length; ++i) { for (var i = 0; i < children.length; ++i) {
......
...@@ -208,6 +208,7 @@ ...@@ -208,6 +208,7 @@
.spectrum-palette > .spectrum-palette-color { .spectrum-palette > .spectrum-palette-color {
transition: transform 100ms cubic-bezier(0, 0, 0.2, 1); transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
will-change: transform;
} }
.spectrum-palette > .spectrum-palette-color.empty-color { .spectrum-palette > .spectrum-palette-color.empty-color {
......
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