Merge pull request #1020 from tsauerwein/layer-name-overflow

Truncate long layer names
camptocamp · Apr 13, 2016 · b00d722 · b00d722
2 parents 6e7586e + 5e8703a
commit b00d722
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/contribs/gmf/less/layertree.less b/contribs/gmf/less/layertree.less
@@ -106,7 +106,14 @@
   }
 
   .name {
-    white-space: normal;
+    // take the full width minus the width for a layer icon, visibility checkbox,
+    // and legend icon
+    width: calc(~'100%' - 6 * @app-margin);
+    overflow: hidden;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: -4px;
   }
 
   .metadata {

diff --git a/contribs/gmf/src/directives/partials/layertree.html b/contribs/gmf/src/directives/partials/layertree.html
@@ -10,7 +10,7 @@
       <img ng-src="{{::gmfLayertreeCtrl.getLegendIconURL(layertreeCtrl)}}"></img>
     </span>
     <span class="state"></span>
-    <span class="name">{{layertreeCtrl.node.name | translate}}</span>
+    <span class="name" title="{{layertreeCtrl.node.name | translate}}">{{layertreeCtrl.node.name | translate}}</span>
   </a>
   <span class="rightButtons">
     <span class="metadata" ng-if="::layertreeCtrl.node.metadata.metadataUrl">