Merge pull request #577 from GMartigny/559-TooLongLayerName

Add ellipsis to overflowing layer item name #559

src/css/toolbox-layers-list.css

@@ -59,20 +59,30 @@
 
 .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;
+}
+
+.layer-item .layer-name.overflowing-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .layer-item:hover {
   background : #222;
 }
 
 .layer-item-opacity {
-  position: absolute;
-  right: 8px;
+  padding-right: 8px;
 }
 
 .current-layer-item,

src/js/controller/LayersListController.js

@@ -99,6 +99,12 @@
     });
     var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
     this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
+    if (layerItem.offsetWidth < layerItem.scrollWidth) {
+      $(layerItem).find('.layer-name')
+        .addClass('overflowing-name')
+        .attr('title', layer.getName())
+        .tooltip();
+    }
   };
 
   ns.LayersListController.prototype.onClick_ = function (evt) {
@@ -106,8 +112,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');

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" data-placement="top">{{layername}}</span>
         <span class="layer-item-opacity"
               title="Layer opacity" rel="tooltip" data-placement="top">
           {{opacity}}&#945;