MDL-64230 files: Display long file/folder names with ellipsis

* Instead of clipping long file/folder names by default, truncate them
with ellipsis to indicate to the user that the file/folder has a long
name.

files/renderer.php

@@ -168,7 +168,7 @@ class core_files_renderer extends plugin_renderer_base {
         <div class="fp-reficons2"></div>
     </div>
     <div class="fp-filename-field">
-        <div class="fp-filename"></div>
+        <div class="fp-filename text-truncate"></div>
     </div>
     </a>
     <a class="fp-contextmenu" href="#">'.$this->pix_icon('i/menu', '▶').'</a>
@@ -335,7 +335,7 @@ class core_files_renderer extends plugin_renderer_base {
         <div class="fp-reficons2"></div>
     </div>
     <div class="fp-filename-field">
-        <p class="fp-filename"></p>
+        <p class="fp-filename text-truncate"></p>
     </div>
 </a>';
         return $rv;

theme/boost/scss/moodle/filemanager.scss

@@ -196,6 +196,12 @@
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
+    // Undo truncating of text on hover.
+    &:hover {
+        overflow: inherit;
+        white-space: normal;
+        text-overflow: inherit;
+    }
 }
 // Table view (File Picker only)
 .file-picker .yui3-datatable table {

theme/boost/style/moodle.css

@@ -12745,6 +12745,10 @@ body.drawer-ease {
   padding-top: 5px;
   padding-bottom: 12px;
   min-width: 112px; }
+  .fp-iconview .fp-filename-field .fp-filename:hover {
+    overflow: inherit;
+    white-space: normal;
+    text-overflow: inherit; }
 
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;

theme/bootstrapbase/less/moodle/filemanager.less

@@ -299,6 +299,12 @@
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
+    // Undo truncating of text on hover.
+    &:hover {
+        overflow: inherit;
+        white-space: normal;
+        text-overflow: unset;
+    }
 }
 
 // Table view (File Picker only)

theme/bootstrapbase/style/moodle.css

@@ -7381,6 +7381,11 @@ span.editinstructions {
   padding-bottom: 12px;
   min-width: 112px;
 }
+.fp-iconview .fp-filename-field .fp-filename:hover {
+  overflow: inherit;
+  white-space: normal;
+  text-overflow: unset;
+}
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;
   width: 100%;