Bug 1857379: File attachment display consolidation

- altered templates to remove file size info, always show download icon
- create modal links where needed
- remove attachment panels in resume education/employment history and achievements

Change-Id: Ie8ecf4c73e698d45332c250a59c23b374413d841
Signed-off-by: Lisa Seeto <lisaseeto@catalyst.net.nz>

htdocs/artefact/file/js/filebrowser.js

@@ -826,7 +826,7 @@ var FileBrowser = (function($) {
         $('#' + self.id + '_filelist button.editable').each(function () {
             var id = this.name.replace(/.*_edit\[(\d+)\]$/, '$1');
             var row = $(this).closest('tr');
-            var newtitle = row.find('a').first();
+            var newtitle = row.find('.filename a').first();
             var newdescription =  row.find('td.filedescription').first();
             if (self.selecteddata[id]) {
                 var hiddeninput = $('#' + self.id + '_selected\\[' + id + '\\]');
@@ -839,7 +839,7 @@ var FileBrowser = (function($) {
                 if (filetitle.length) {
                     filetitle.html(newtitle.html());
                 }
-                var filedesc = row2update.find('td.filedescription');
+                var filedesc = row2update.find('div.filedescription');
                 if (filedesc) {
                     filedesc.html(newdescription.html());
                 }
@@ -905,8 +905,10 @@ var FileBrowser = (function($) {
             }
         }
         if (!existed) {
-            var remove = $('<button>', {'class': 'btn btn-link text-small button submit unselect',
-                                            'type': 'submit', 'name': self.id+'_unselect[' + id + ']', 'title': get_string('remove')});
+            var remove = $('<button>', {'class': 'btn btn-secondary btn-sm text-small button submit unselect',
+                                        'type': 'submit',
+                                        'name': self.id+'_unselect[' + id + ']',
+                                        'title': get_string('remove')});
             remove.append(
                 $('<span>', {'class': 'icon icon-times icon-lg text-danger left'}),
                 $('<span>', { 'text': get_string('remove')})
@@ -1012,6 +1014,10 @@ var FileBrowser = (function($) {
           else {
               var hiddeninput = r.find('input.d-none').first();
               if (hiddeninput.length) {
+                  var legend2update = hiddeninput.closest('fieldset').find('legend h4 span.file-name');
+                  if (legend2update.length) {
+                      legend2update.html('');
+                  }
                   hiddeninput.remove();
               }
               r.addClass('d-none');

htdocs/artefact/resume/lib.php

@@ -1073,15 +1073,17 @@ EOF;
                         jQuery('<div>', {'class': 'detail text-midtone'}).append({$extrastring})
                       )[0];
                     }
-                    var link = jQuery('<a>', {'class': 'toggle textonly', 'href': ''}).append({$titlestring})[0];
-                    jQuery(link).on('click', function (e) {
-                        e.preventDefault();
-                        return showhideComposite(row, {$bodystring}, {$attachstring}, {$addressstring});
-                    });
-                    var extra = jQuery('<div>', {'class': 'detail text-midtone'}).append({$extrastring});
-                    return jQuery('<td>', {'id': 'composite-' + row.artefact + '-' + row.id}).append(
-                        jQuery('<div>', {'class': 'expandable-head'}).append(link, extra)
-                    )[0];
+                    else {
+                        var link = jQuery('<a>', {'class': 'toggle textonly', 'href': ''}).append({$titlestring})[0];
+                        jQuery(link).on('click', function (e) {
+                            e.preventDefault();
+                            return showhideComposite(row, {$bodystring}, {$attachstring}, {$addressstring});
+                        });
+                        var extra = jQuery('<div>', {'class': 'detail text-midtone'}).append({$extrastring});
+                        return jQuery('<div>', {'id': 'composite-' + row.artefact + '-' + row.id}).append(
+                            jQuery('<div>', {'class': 'expandable-head'}).append(link, extra)
+                            )[0];
+                    }
                 },
 EOF;
     }
@@ -1096,11 +1098,10 @@ EOF;
                     bodyNode.toggleClass('d-none');
                     return false;
                 }
-                    var newNode = jQuery('<div>', {'id': 'composite-body-' + row.artefact + '-' + row.id}).append(
-                      jQuery('<div>', {'class':'content-text'}).append(content),
-                      address,
-                      attachments
-                      );
+
+                var newNode = jQuery('<div>', {'id': 'composite-body-' + row.artefact + '-' + row.id}).append(
+                    jQuery('<div>', {'class':'content-text'}).append(content).append(address).append(attachments)
+                );
                 newNode.insertAfter(titleTD.find('.expandable-head').first());
             }
 EOF;
@@ -1220,11 +1221,13 @@ function listAttachments(attachments) {
         for (var i=0; i < attachments.length; i++) {
             var item = attachments[i];
             var href = self.config.wwwroot + 'artefact/file/download.php?file=' + attachments[i].id;
-            var link = jQuery('<a>', {'href': href, 'text': '{$downloadstr}' });
+            var linkcontent = '<span class="sr-only">' + {$downloadstr} + item.title + '</span>';
+            linkcontent += '<span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>';
+            var link = jQuery('<a href="' + href + '">' + linkcontent + '</a>');
             tbody.append(
               jQuery('<tr>').append(
                 jQuery('<td>').append(
-                  item.title + ' (' + formatSize(item.size) + ') - ',
+                  item.title,
                   jQuery('<span>').append(link)
                 )
               )

htdocs/theme/raw/plugintype/artefact/annotation/templates/annotationlist.tpl

@@ -45,7 +45,7 @@
         </div>
     {else}
         <div class="content-text">
-            {$item->description|safe|clean_html}
+            {$item->description|clean_html|safe}
         </div>
 
         {if $item->attachmessage}

htdocs/theme/raw/plugintype/artefact/blog/templates/render/blogpost_renderattachments.tpl

@@ -18,16 +18,26 @@
                     {else}
                         <span class="icon icon-{$item->artefacttype} icon-lg text-default left" role="presentation" aria-hidden="true"></span>
                     {/if}
-
+                    {if !$editing}
+                    <span class="title">
+                        <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$item->id}">
+                            <span class="text-small">{$item->title}</span>
+                        </a>
+                    </span>
+                    {else}
                         <span class="title">
                             <span class="text-small">{$item->title}</span>
-                            <span class="metadata"> [{$item->size|display_size}]</span>
                         </span>
-
-                        <a href="{$item->downloadpath}" {if $item->description}title="{$item->description}" data-toggle="tooltip"{/if}>
+                    {/if}
+                        <a href="{$item->downloadpath}">
                             <span class="sr-only">{str tag=Download section=artefact.file} {$item->title}</span>
                             <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                         </a>
+                        {if $item->description}
+                        <div class="file-description text-small">
+                            {$item->description|clean_html|safe}
+                        </div>
+                        {/if}
                     </li>
                 {/foreach}
                 </ul>

htdocs/theme/raw/plugintype/artefact/blog/templates/viewposts.tpl

@@ -66,15 +66,26 @@
                     {else}
                         <span class="icon icon-{$file->artefacttype} icon-lg text-default left" role="presentation" aria-hidden="true"></span>
                     {/if}
+                    {if !$options.editing}
+                    <span class="title">
+                        <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$options.blockid}" data-artefactid="{$file->attachment}">
+                            <span class="text-small">{$file->title}</span>
+                        </a>
+                    </span>
+                    {else}
                         <span class="title">
                             <span class="text-small">{$file->title}</span>
-                            <span class="metadata"> [{$file->size|display_size}]</span>
                         </span>
-
+                    {/if}
                         <a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}&amp;view={$options.viewid}">
                             <span class="sr-only">{str tag=Download section=artefact.file} {$file->title}</span>
                             <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                         </a>
+                        {if $file->description}
+                        <div class="file-description text-small">
+                            {$file->description|clean_html|safe}
+                        </div>
+                        {/if}
                     </li>
                 {/foreach}
                 </ul>

htdocs/theme/raw/plugintype/artefact/comment/templates/commentlist.tpl

@@ -68,7 +68,7 @@
                     </span>
                 {else}
                     {if $item->author}
-                        {$item->description|safe|clean_html}
+                        {$item->description|clean_html|safe}
                     {else}
                         {$item->description|safe}
                     {/if}

htdocs/theme/raw/plugintype/artefact/file/blocktype/filedownload/templates/filedownload.tpl

@@ -13,34 +13,41 @@
             justdetails=$justdetails
             displayiconsonly = true}
         <li class="filedownload-item list-group-item">
+            {if !$editing}
             <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-artefactid="{$file.id}" data-blockid="{$blockid}" title="{$file.title}">
-            {if $file.iconsrc}
-                <img src="{$file.iconsrc}" alt="" class="file-icon text-inline" />
+                {if $file.iconsrc}
+                    <img src="{$file.iconsrc}" alt="" class="file-icon text-inline" />
+                {else}
+                    <span class="icon icon-{$file.artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                {/if}
+            </a>
             {else}
-                <span class="icon icon-{$file.artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                {if $file.iconsrc}
+                    <img src="{$file.iconsrc}" alt="" class="file-icon text-inline" />
+                {else}
+                    <span class="icon icon-{$file.artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                {/if}
             {/if}
-            </a>
+
             <h4 class="title list-group-item-heading">
             {if !$editing}
-                <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-artefactid="{$file.id}" data-blockid="{$blockid}" title="{$file.title}">
-                    {$file.title}
-                    <span class="sr-only">{str tag=Details section=artefact.file}</span>
-                </a>
-            {else}
+            <a class="modal_link inner-link" title="{$child->hovertitle}" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$file.id}">
                 {$file.title}
+                <span class="sr-only">{str tag=Details section=artefact.file}</span>
+            </a>
+            {else}
+                <span class="inner-link">{$file.title}</span>
             {/if}
             </h4>
+
             <a href="{$file.downloadurl}">
                 <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                 <span class="sr-only">{str tag=Download section=artefact.file} {$file.title}</span>
             </a>
-            <div class="text-small text-midtone">
-                {$file.ctime|format_date:'strftimedaydate'}
-                [{$file.size|display_size}]
-            </div>
+
             {if $file.description}
             <div class="file-description text-small">
-                {$file.description|safe|clean_html}
+                {$file.description|clean_html|safe}
             </div>
             {/if}
         </li>

htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/slideshow.tpl

@@ -9,7 +9,7 @@
 
                 {if $showdescription && $image.title}
                 <div class="carousel-caption" id="description_{$instanceid}_{$k}">
-                    {$image.title|safe|clean_html}
+                    {$image.title|clean_html|safe}
                 </div>
                 {/if}
             </div>

htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/squarethumbs.tpl

@@ -6,7 +6,7 @@
             </a>
         {if $showdescription && $image.title}
         <p class="text-small title">
-            {$image.title|truncate:60|safe|clean_html}
+            {$image.title|truncate:60|clean_html|safe}
         </p>
         {/if}
         </div>

htdocs/theme/raw/plugintype/artefact/file/blocktype/gallery/templates/thumbnails.tpl

@@ -6,7 +6,7 @@
             </a>
         {if $showdescription && $image.title}
             <p class="text-small title">
-                {$image.title|truncate:60|safe|clean_html}
+                {$image.title|truncate:60|clean_html|safe}
             </p>
         {/if}
         </div>

htdocs/theme/raw/plugintype/artefact/file/blocktype/image/templates/image.tpl

@@ -11,7 +11,7 @@
 
     {if $showdescription}
     <div class="detail" itemprop="description">
-        {$description|safe|clean_html}
+        {$description|clean_html|safe}
     </div>
     {/if}
 </div>

htdocs/theme/raw/plugintype/artefact/file/templates/file_render_self.tpl

@@ -17,7 +17,7 @@
     {if $description}
     <tr>
         <th>{str tag=Description section=artefact.file}:</th>
-        <td>{$description|safe|clean_html}</td>
+        <td>{$description|clean_html|safe}</td>
     </tr>
     {/if}
     {if $tags}

htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_in_modal.tpl

@@ -39,14 +39,9 @@
                         {$child->title}
                     </span>
                 </a>
-                {if !$simpledisplay}
-                <div class="filedate metadata">
-                    {$child->date}
-                </div>
-                {/if}
                 {if $child->description}
                 <div class="file-description text-small text-midtone">
-                    {$child->description|safe|clean_html}
+                    {$child->description|clean_html|safe}
                 </div>
                 {/if}
             </li>

htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_self.tpl

@@ -32,11 +32,22 @@
                 justdetails=$justdetails
                 displayiconsonly=true}
             <li class="filedownload-item list-group-item">
-                {if $child->iconsrc}
-                    <img src="{$child->iconsrc}" alt="{$child->artefacttype}" class="file-icon text-inline">
+                {if !$editing}
+                <a class="modal_link inner-link" title="{$child->hovertitle}" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$child->id}">
+                    {if $child->iconsrc}
+                        <img src="{$child->iconsrc}" alt="{$child->artefacttype}" class="file-icon text-inline">
+                    {else}
+                        <span class="icon icon-{$child->artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                    {/if}
+                </a>
                 {else}
-                    <span class="icon icon-{$child->artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                    {if $child->iconsrc}
+                        <img src="{$child->iconsrc}" alt="{$child->artefacttype}" class="file-icon text-inline">
+                    {else}
+                        <span class="icon icon-{$child->artefacttype} icon-lg left" role="presentation" aria-hidden="true"></span>
+                    {/if}
                 {/if}
+
                 <h4 class="title list-group-item-heading text-inline">
                 {if !$editing}
                 <a class="modal_link inner-link" title="{$child->hovertitle}" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$child->id}">
@@ -45,12 +56,8 @@
                 {else}
                 <span class="inner-link">{$child->title}</span>
                 {/if}
-                    {if !$simpledisplay}
-                    <span class="filedate metadata">
-                        {$child->date}
-                    </span>
-                    {/if}
                 </h4>
+
                 {if $child->artefacttype != 'folder'}
                 <a href="{$WWWROOT}artefact/file/download.php?file={$child->id}&amp;view={$viewid}">
                     <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
@@ -60,10 +67,12 @@
                     </span>
                 </a>
                 {/if}
+
                 {if $child->description}
                 <p class="file-description text-small text-midtone">
-                    {$child->description|safe|clean_html}
+                    {$child->description|clean_html|safe}
                 </p>
+
                 <script>
                 jQuery(".file-description a").addClass('inner-link');
                 </script>

htdocs/theme/raw/plugintype/artefact/file/templates/form/filelist.tpl

@@ -86,7 +86,7 @@
                 {/if}
             </td>
             <td class="filedescription d-none d-md-table-cell">
-                {$file->description|safe|clean_html}
+                {$file->description|clean_html|safe}
                 {if $showtags}
                     {if $file->tags}
                     <div class="tags filetags text-small">

htdocs/theme/raw/plugintype/artefact/file/templates/form/selectedlist.tpl

@@ -23,6 +23,11 @@
                         {$displaytitle}
                     </a>
                 {/if}
+                {if $file->description}
+                    <div class="file-description text-small">
+                        {$file->description|truncate:60|clean_html|safe}
+                    </div>
+                {/if}
             </td>
             <td class="text-right s">
                 <button id="{$prefix}_unselect_{$file->id}" name="{$prefix}_unselect[{$file->id}]" class="btn btn-secondary btn-sm text-small button submit unselect" title="{str tag=remove}">

htdocs/theme/raw/plugintype/artefact/internal/blocktype/textbox/templates/content.tpl

@@ -25,27 +25,26 @@
         <ul class="list-unstyled list-group">
             {foreach from=$attachments item=item}
             <li class="list-group-item">
-            {if !$editing}
+                {if !$editing}
                 <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$item->id}">
-            {/if}
-                {if $item->iconpath}
-                    <img class="file-icon" src="{$item->iconpath}" alt="">
-                {else}
-                    <span class="icon icon-{$item->artefacttype} left icon-lg text-default" role="presentation" aria-hidden="true"></span>
                 {/if}
-            {if !$editing}
-                </a>
-            {/if}
+                    {if $item->iconpath}
+                        <img class="file-icon" src="{$item->iconpath}" alt="">
+                    {else}
+                        <span class="icon icon-{$item->artefacttype} left icon-lg text-default" role="presentation" aria-hidden="true"></span>
+                    {/if}
+                {if !$editing}
+                    </a>
+                {/if}
 
                 <span class="title">
                 {if !$editing}
-                    <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$item->id}">
-                        <span class="text-small">{$item->title}</span>
-                    </a>
-                {else}
+                <a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$item->id}">
                     <span class="text-small">{$item->title}</span>
+                </a>
+                {else}
+                <span class="text-small">{$item->title}</span>
                 {/if}
-                    <span class="metadata"> [{$item->size|display_size}]</span>
                 </span>
 
                 <a href="{$item->downloadpath}">
@@ -53,6 +52,11 @@
                     <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                 </a>
 
+                {if $item->description}
+                    <div class="file-description text-small">
+                        {$item->description|clean_html|safe}
+                    </div>
+                {/if}
             </li>
             {/foreach}
         </ul>

htdocs/theme/raw/plugintype/artefact/peerassessment/templates/assessmentlist.tpl

@@ -42,7 +42,7 @@
         <div class="comment-text">
             <div class="comment-content">
                 {if $item->author}
-                    {$item->description|safe|clean_html}
+                    {$item->description|clean_html|safe}
                 {else}
                     {$item->description|safe}
                 {/if}

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/book.tpl

@@ -121,13 +121,17 @@
                         {else}
                             <span class="text-small">{$item->title}</span>
                         {/if}
-                            <span class="metadata"> [{$item->size}]</span>
                         </span>
 
                         <a href="{$item->downloadpath}">
                           <span class="sr-only">{str tag=Download section=artefact.file} {$item->title}</span>
                           <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                         </a>
+                        {if $item->description}
+                            <div class="file-description text-small">
+                                {$item->description|clean_html|safe}
+                            </div>
+                        {/if}
                     </li>
                     {/foreach}
                 </ul>

htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/certification.tpl

@@ -122,13 +122,17 @@
                         {else}
                             <span class="text-small">{$item->title}</span>
                         {/if}
-                            <span class="metadata"> [{$item->size}]</span>
                         </span>
 
                         <a href="{$item->downloadpath}">
                             <span class="sr-only">{str tag=Download section=artefact.file} {$item->title}</span>
                             <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true"></span>
                         </a>
+                        {if $item->description}
+                            <div class="file-description text-small">
+                                {$item->description|clean_html|safe}
+                            </div>
+                        {/if}
                     </li>
                     {/foreach}
                 </ul>