Merge pull request #577 from GMartigny/559-TooLongLayerName

Add ellipsis to overflowing layer item name #559
piskelapp · Dec 6, 2016 · 732c3c2 · 732c3c2
2 parents 9dd403a + 9ac9583
commit 732c3c2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/css/toolbox-layers-list.css b/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,

diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
@@ -99,15 +99,21 @@
     });
     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) {
     var el = evt.target || evt.srcElement;
     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
@@ -36,7 +36,7 @@ <h3 class="toolbox-title layers-title">Layers
   <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;