FEAT: IDE Source List Improvement - I was uploading some files with l…

…ong names and I was frustrated by how it looked so I've added CSS truncation for long names as well as a title for hovering so you can tell what the file name is when you hover.

IDE/frontend-dev/design/styles/_file-list.scss

@@ -38,6 +38,14 @@
     }
     .source-text {
       position: relative;
+      .source-text-name {
+        display: inline-block;
+        overflow: hidden;
+        text-align: left;
+        text-indent: 0;
+        text-overflow: ellipsis;
+        width: 70%;
+      }
     }
     &.is-dir {
       .source-file {

IDE/frontend-dev/src/Views/FileView.js

@@ -395,16 +395,14 @@ class FileView extends View {
             .addClass('file-heading')
             .html(file_list_elements[i].name)
             .appendTo(section);
-            // console.log('current sec: ' + file_list_elements[i].name);
 				var fileList = $('<ul></ul>')
             .addClass('sub-file-list');
 
 				for (let j = 0; j < file_list_elements[i].length; j++) {
 	        var listItem = $('<li></li>')
                 .addClass('source-file')
                 .appendTo(fileList);
-          var item = file_list_elements[i][j];
-	        // var itemData = $('<div></div>').addClass('source-data-container').appendTo(listItem);
+					var item = file_list_elements[i][j];
           if (file_list_elements[i].name != i18n_dir_str) {
             var itemText = $('<div></div>')
                   .addClass('source-text')
@@ -462,10 +460,14 @@ class FileView extends View {
                   .on('click', (e) => this.deleteFile(e));
             var subList = $('<ul></ul>');
             for (var k = 0; k < item.children.length; k++) {
-              var child = item.children[k];
+							var child = item.children[k];
+							var innerSpan = $('<span></span>')
+										.addClass('source-text-name')
+										.text(child.name)
+										.attr('title', child.name);
               var subListItem = $('<li></li>')
                     .addClass('source-text')
-                    .text(child.name)
+                    .append(innerSpan)
                     .data('file', item.name + "/" + child.name)
                     .on('click', (e) => this.openFile(e));
               var deleteButton = $('<button></button>')

IDE/public/css/style.css

@@ -848,6 +848,13 @@ ul.projectManager {
       top: 5px; }
   .file-list .section .source-text {
     position: relative; }
+    .file-list .section .source-text .source-text-name {
+      display: inline-block;
+      overflow: hidden;
+      text-align: left;
+      text-indent: 0;
+      text-overflow: ellipsis;
+      width: 70%; }
   .file-list .section.is-dir .source-file:hover {
     background-color: inherit; }
   .file-list .section.is-dir .source-file > .source-text {
@@ -1996,7 +2003,7 @@ input[type="range"].scope-range-slider {
     width: 12px; }
   input[type="range"].scope-range-slider:hover::-moz-range-track, input[type="range"].scope-range-slider:active::-moz-range-track {
     background: #1ce8b5;
-    -webkit-transition: background, 100ms, ease-in-out;
+    -moz-transition: background, 100ms, ease-in-out;
     transition: background, 100ms, ease-in-out; }
   input[type="range"].scope-range-slider:hover::-webkit-slider-runnable-track, input[type="range"].scope-range-slider:active::-webkit-slider-runnable-track {
     background: #1ce8b5;