From ad5c8182e4647b56b9f5929dae6d434ac9f1ef8b Mon Sep 17 00:00:00 2001
From: Guillaume Martigny <guillaume.martigny@wiztivi.com>
Date: Thu, 1 Dec 2016 11:43:23 +0100
Subject: [PATCH] Add ellipsis to overflowing layer item name #559

---
 src/css/toolbox-layers-list.css           | 13 ++++++++++---
 src/js/controller/LayersListController.js |  4 ++--
 src/templates/layers-list.html            |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/css/toolbox-layers-list.css b/src/css/toolbox-layers-list.css
index 106fbf23..1883c961 100644
--- a/src/css/toolbox-layers-list.css
+++ b/src/css/toolbox-layers-list.css
@@ -59,20 +59,27 @@
 
 .layer-item {
   position: relative;
+  display: flex;
   height:24px;
   line-height: 24px;
-  padding: 0 0 0 10px;
   border-top: 1px solid #444;
   cursor: pointer;
 }
 
+.layer-item .layer-name {
+  padding: 0 0 0 10px;
+  flex: 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .layer-item:hover {
   background : #222;
 }
 
 .layer-item-opacity {
-  position: absolute;
-  right: 8px;
+  margin-right: 8px;
 }
 
 .current-layer-item,
diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
index 043d9771..ed664f0c 100644
--- a/src/js/controller/LayersListController.js
+++ b/src/js/controller/LayersListController.js
@@ -106,8 +106,8 @@
     var index;
     if (el.classList.contains('button')) {
       this.onButtonClick_(el);
-    } else if (el.classList.contains('layer-item')) {
-      index = el.dataset.layerIndex;
+    } else if (el.classList.contains('layer-name')) {
+      index = pskl.utils.Dom.getData(el, 'layerIndex');
       this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
     } else if (el.classList.contains('layer-item-opacity')) {
       index = pskl.utils.Dom.getData(el, 'layerIndex');
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index 1657a38a..2198a297 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -36,7 +36,7 @@
   <script type="text/template" id="layer-item-template">
     <li class="layer-item {{isselected:current-layer-item}}"
         data-layer-index="{{layerindex}}">
-        {{layername}}
+        <span class="layer-name">{{layername}}</span>
         <span class="layer-item-opacity"
               title="Layer opacity" rel="tooltip" data-placement="top">
           {{opacity}}&#945;