From 019df61cdcf20771f3545d6aaf27152f1e7f9e40 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Thu, 20 Sep 2012 23:01:49 +0200
Subject: [PATCH] Fixed layout issue when hovering on non 32x32 tile previews

---
 css/preview-film-section.css           | 13 +++++++++----
 js/controller/PreviewFilmController.js | 10 ++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/css/preview-film-section.css b/css/preview-film-section.css
index f6836592..ffef1946 100644
--- a/css/preview-film-section.css
+++ b/css/preview-film-section.css
@@ -39,8 +39,7 @@
 }
 
 .preview-tile .tile-action {
-  display: none;
-  float: right;
+  display: block;
   cursor: pointer;
   width: 30px;
   height: 30px;
@@ -50,8 +49,14 @@
   border: none;
 }
 
-.preview-tile:hover .tile-action {
-  display: block;
+.preview-tile .tile-action-container {
+  float: right;
+  visibility : hidden;
+  overflow: hidden;
+}
+
+.preview-tile:hover .tile-action-container {
+  visibility : visible;
 }
 
 .preview-tile .tile-action.duplicate-frame-action {
diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js
index d4b4e4f0..469b0356 100644
--- a/js/controller/PreviewFilmController.js
+++ b/js/controller/PreviewFilmController.js
@@ -181,11 +181,15 @@
         
         previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
 
+        var actionContainer = document.createElement("DIV");
+        actionContainer.className = "tile-action-container";
+
         var canvasPreviewDuplicateAction = document.createElement("button");
         canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
         canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
         canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
-        canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action"
+        canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action";
+        actionContainer.appendChild(canvasPreviewDuplicateAction);
         
         canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
 
@@ -196,7 +200,6 @@
         currentFrameRenderer.init(currentFrame);
         
         previewTileRoot.appendChild(canvasContainer);
-        previewTileRoot.appendChild(canvasPreviewDuplicateAction);
 
         if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
             var canvasPreviewDeleteAction = document.createElement("button");
@@ -206,8 +209,11 @@
             canvasPreviewDeleteAction.className = "tile-action delete-frame-action"
             canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
             previewTileRoot.appendChild(canvasPreviewDeleteAction);
+            actionContainer.appendChild(canvasPreviewDeleteAction);
         }
 
+        previewTileRoot.appendChild(actionContainer);
+
         return previewTileRoot;
     };