Bug 1857379: Add tooltip to file download icon

- added in tooltip to file download icon with new string format - added file size to tooltip - added in class bh-detail-only to fix display issue with block details header Change-Id: Icc0ae68351200b7d718833cdbef8fec1963ac6c2 Signed-off-by: Lisa Seeto <lisaseeto@catalyst.net.nz>

Bug 1857379: Add tooltip to file download icon
- added in tooltip to file download icon with new string format - added file size to tooltip - added in class bh-detail-only to fix display issue with block details header Change-Id: Icc0ae68351200b7d718833cdbef8fec1963ac6c2 Signed-off-by: Lisa Seeto <lisaseeto@catalyst.net.nz>
b4bac92e · Lisa Seeto · Robert Lyon · f6ae70cf · b4bac92e · b4bac92e
Commit b4bac92e authored Mar 18, 2020 by Lisa Seeto Committed by Robert Lyon Mar 25, 2020
--- a/htdocs/artefact/file/lang/en.utf8/artefact.file.php
+++ b/htdocs/artefact/file/lang/en.utf8/artefact.file.php
@@ -81,6 +81,7 @@ $string['Details'] = 'Details';
 $string['View'] = 'View';
 $string['Download'] = 'Download';
 $string['downloadfile'] = 'Download %s';
+$string['downloadfilesize'] = 'Download %s [%s]';
 $string['downloadoriginalversion'] = 'Download the original version';
 $string['dragdrophere'] = 'Drop files here to upload';
 $string['editfile'] = 'Edit file';

--- a/htdocs/artefact/file/lib.php
+++ b/htdocs/artefact/file/lib.php
@@ -2196,6 +2196,7 @@ class ArtefactTypeFolder extends ArtefactTypeFileBase {
            $children = array();
            foreach ($childrecords as &$child) {
                $c = artefact_instance_from_id($child->id);
+                $child->size = $c->describe_size();
                $child->title = $child->hovertitle = $c->get('title');
                $child->date = format_date(strtotime($child->mtime), 'strftimedaydatetime');
                $child->iconsrc = call_static_method(generate_artefact_class_name($child->artefacttype), 'get_icon', array('id' => $child->id, 'viewid' => isset($options['viewid']) ? $options['viewid'] : 0));

--- a/htdocs/theme/raw/plugintype/artefact/blog/templates/render/blogpost_renderattachments.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/blog/templates/render/blogpost_renderattachments.tpl
@@ -30,8 +30,8 @@
                        </span>
                    {/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" data-toggle="tooltip" title="{str tag=Download section=artefact.file} {$item->title}"></span>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}"></span>
                        </a>
                        {if $item->description}
                        <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/blog/templates/viewposts.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/blog/templates/viewposts.tpl
@@ -78,8 +78,8 @@
                        </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>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                        </a>
                        {if $file->description}
                        <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/file/blocktype/filedownload/templates/filedownload.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/file/blocktype/filedownload/templates/filedownload.tpl
@@ -41,8 +41,8 @@
            </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>
+                <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file.title arg2=$file.size|display_size}"></span>
+                <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file.title arg2=$file.size|display_size}}</span>
            </a>

            {if $file.description}

--- a/htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_in_modal.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_in_modal.tpl
@@ -34,10 +34,8 @@
                    </a>
                </h4>
                <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>
-                    <span class="sr-only">{str tag=Details section=artefact.file}
-                        {$child->title}
-                    </span>
+                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$child->title arg2=$child->size}"></span>
+                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$child->title arg2=$child->size}</span>
                </a>
                {if $child->description}
                <div class="file-description text-small text-midtone">

--- a/htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_self.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/file/templates/folder_render_self.tpl
@@ -60,11 +60,8 @@

                {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>
-                    <span class="sr-only">
-                        {str tag=Details section=artefact.file}
-                        {$child->title}
-                    </span>
+                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$child->title arg2=$child->size}"></span>
+                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$child->title arg2=$child->size}</span>
                </a>
                {/if}


--- a/htdocs/theme/raw/plugintype/artefact/internal/blocktype/textbox/templates/content.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/internal/blocktype/textbox/templates/content.tpl
@@ -48,8 +48,8 @@
                </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>
+                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}</span>
+                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}"></span>
                </a>

                {if $item->description}

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/book.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/book.tpl
@@ -124,8 +124,8 @@
                        </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>
+                          <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}</span>
+                          <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                        </a>
                        {if $item->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/certification.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/certification.tpl
@@ -125,8 +125,8 @@
                        </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>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                        </a>
                        {if $item->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/educationhistory.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/educationhistory.tpl
@@ -126,8 +126,8 @@
                        </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>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                        </a>
                        {if $item->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/employmenthistory.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/employmenthistory.tpl
@@ -128,8 +128,8 @@
                        </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>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                        </a>
                        {if $item->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goals.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goals.tpl
@@ -56,8 +56,8 @@
                        {/if}
                            <span class="text-small">{$file->title|truncate:40}</span>
                            <a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}">
-                                <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>
+                                <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                                <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                            </a>
                        {if $file->description}
                            <div class="file-description metadata">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goalsandskills.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/goalsandskills.tpl
@@ -51,8 +51,8 @@
                </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>
+                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}</span>
+                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                </a>
                {if $item->description}
                    <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/membership.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/membership.tpl
@@ -127,8 +127,8 @@
                        </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>
+                            <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size|display_size}</span>
+                            <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$item->title arg2=$item->size}"></span>
                        </a>
                        {if $item->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/skills.tpl
+++ b/htdocs/theme/raw/plugintype/artefact/resume/templates/fragments/skills.tpl
@@ -58,8 +58,8 @@
                                {/if}
                                <span class="text-small">{$file->title|truncate:40}</span>
                                <a href="{$WWWROOT}artefact/file/download.php?file={$file->attachment}">
-                                    <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>
+                                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                                </a>
                                {if $file->description}
                                <div class="file-description metadata">

--- a/htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/latestforumposts.tpl
+++ b/htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/latestforumposts.tpl
@@ -48,8 +48,8 @@
                                    <span class="text-small">{$file->title}</span>
                                </span>
                                <a href="{$WWWROOT}artefact/file/download.php?file={$file->id}&amp;post={$postinfo->id}">
-                                    <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>
+                                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                                </a>
                            {if $file->description}
                                <div class="file-description text-small">

--- a/htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/recentforumposts.tpl
+++ b/htdocs/theme/raw/plugintype/blocktype/recentforumposts/templates/recentforumposts.tpl
@@ -48,8 +48,8 @@
                                </span>

                                <a href="{$WWWROOT}artefact/file/download.php?file={$file->id}&amp;post={$postinfo->id}">
-                                    <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>
+                                    <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                                    <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                                </a>

                                {if $file->description}

--- a/htdocs/theme/raw/plugintype/interaction/forum/templates/simplepost.tpl
+++ b/htdocs/theme/raw/plugintype/interaction/forum/templates/simplepost.tpl
@@ -72,8 +72,8 @@
                            </span>

                            <a href="{$WWWROOT}artefact/file/download.php?file={$file->fileid}&post={$file->post}">
-                                <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>
+                                <span class="sr-only">{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}</span>
+                                <span class="icon icon-download icon-lg float-right text-watermark icon-action" role="presentation" aria-hidden="true" data-toggle="tooltip" title="{str tag=downloadfilesize section=artefact.file arg1=$file->title arg2=$file->size|display_size}"></span>
                            </a>
                        {if $file->description}
                            <div class="file-description text-small">

--- a/htdocs/theme/raw/sass/components/_list-group.scss
+++ b/htdocs/theme/raw/sass/components/_list-group.scss
@@ -59,6 +59,10 @@
    .modal_link .icon {
        color: $theme-text-color;
    }
+
+    .modal_link .bh-details-only {
+        color: $white;
+    }
 }

 .list-group-item,