MDL-64230 files: Display long file/folder names with ellipsis
authorJun Pataleta <jun@moodle.com>
Thu, 21 Feb 2019 03:43:55 +0000 (11:43 +0800)
committerJun Pataleta <jun@moodle.com>
Fri, 8 Mar 2019 06:48:49 +0000 (14:48 +0800)
* 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
theme/boost/scss/moodle/filemanager.scss
theme/boost/style/moodle.css
theme/bootstrapbase/less/moodle/filemanager.less
theme/bootstrapbase/style/moodle.css

index 5484ff5..f48feb7 100644 (file)
@@ -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-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>
     </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">
         <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;
     </div>
 </a>';
         return $rv;
index 3b0ea73..1c9bd8f 100644 (file)
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
     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 {
 }
 // Table view (File Picker only)
 .file-picker .yui3-datatable table {
index 4937913..c21b182 100644 (file)
@@ -12745,6 +12745,10 @@ body.drawer-ease {
   padding-top: 5px;
   padding-bottom: 12px;
   min-width: 112px; }
   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;
 
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;
index 4591b25..e4c5b94 100644 (file)
     padding-top: 5px;
     padding-bottom: 12px;
     min-width: 112px;
     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)
 }
 
 // Table view (File Picker only)
index 5eeb24b..76e6706 100644 (file)
@@ -7381,6 +7381,11 @@ span.editinstructions {
   padding-bottom: 12px;
   min-width: 112px;
 }
   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%;
 .file-picker .yui3-datatable table {
   border: 0 solid #bbb;
   width: 100%;