Feat: Add descriptive text, improved button labels and tooltips for u…

…ser profile uploaded datasets tab (Merge pull request #1689)

Update operation button labels
Add descriptive text and tooltips

Refs:  #1613

CHANGELOG.md

@@ -4,6 +4,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## Unreleased
 
+- Feat #1613: Add descriptive text, improved button labels and tooltips for user profile uploaded datasets tab
 - Fix #1666: Update the datacite credentials and make the Mint DOI button working
 - Fix #1230: Improve Excel upload tool by adding new dataset types in dev data
 - Fix #1722: Show more button on Dataset:Sample admin page works after filtering

less/current.less

@@ -64,4 +64,5 @@
 @import "current/modules/uploader.less";
 @import "current/modules/team-grid.less";
 @import "current/modules/map.less";
-@import "current/modules/lists.less";
+@import "current/modules/lists.less";
+@import "current/modules/tooltip.less";

less/current/base/spacing.less

@@ -31,3 +31,7 @@
 .mr-10 {
   margin-right: 10px;
 }
+
+.p-0 {
+  padding: 0!important;
+}

less/current/base/type.less

@@ -21,6 +21,10 @@ h4, .h4 { font-size: @font-size-h4; }
   font-style: italic;
 }
 
+.text-bold {
+  font-weight: bold;
+}
+
 // Body text
 // -------------------------
 

less/current/modules/buttons.less

@@ -319,7 +319,6 @@
 
 .btn-link {
   background-color: transparent;
-  color: @dark-gray-on-white;
   padding: 0;
   text-decoration: underline;
   color: @link-color;
@@ -328,6 +327,14 @@
   }
 }
 
+.btn-transparent {
+  background-color: transparent;
+  color: @gigadb-green-on-lighter-gray;
+  &:hover {
+    color: @link-color-hover;
+  }
+}
+
 .inactive-btn-o {
   color: @dark-gray-on-white;
   background: @color-true-white;

less/current/modules/tooltip.less

@@ -0,0 +1,25 @@
+// Override bootstrap styles to look similar to https://htmlstream.com/unify/documentation/tooltips.html
+.tooltip {
+  padding: 0.4rem;
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: @font-size-base;
+  &.top .tooltip-arrow {
+    border-top-color: @color-warm-black;
+  }
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @color-warm-black;
+  }
+  &.left .tooltip-arrow {
+    border-left-color: @color-warm-black;
+  }
+  &.right .tooltip-arrow {
+    border-right-color: @color-warm-black;
+  }
+  .tooltip-inner {
+    background-color: @color-warm-black;
+    color: @color-true-white;
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.6rem;
+  }
+}

protected/views/user/uploadedDatasets.php

@@ -1,5 +1,12 @@
 <section>
     <div class="table-responsive">
+      <div class="mb-20">
+        <ul class="list-unstyled content-text p-0">
+          <li><span class="text-bold">Update dataset</span>: Update the metadata of the dataset.</li>
+          <li><span class="text-bold">Delete dataset</span>: Delete the dataset and all its files.</li>
+          <li><span class="text-bold">Upload files</span>: Upload files to the dataset, delete the existing files or edit their metadata.</li>
+        </ul>
+      </div>
     <table class="table table-bordered submitted-table" id="list">
         <thead>
             <tr>
@@ -44,7 +51,7 @@
                 <tr class="<?php echo $class; ?>" id="js-dataset-row-<?=$data[$i]->id?>">
                     <?
                 $upload_status = $data[$i]->upload_status;
-                
+
                 if ( $upload_status != 'Published' && $upload_status!='Private' ) { ?>
                         <td class="content-popup" data-content="<? echo CHtml::encode($data[$i]->description); ?>">
                             unknown
@@ -80,11 +87,13 @@
                                 <td>
                                     <? if ($data[$i]->upload_status !='Published' && $data[$i]->upload_status!='AuthorReview' && $data[$i]->upload_status!='Private'){ ?>
                                         <div>
-                                            <a class="update btn" title="Update" href=<? echo "/datasetSubmission/datasetManagement/id/" . $data[$i]->id ?> >Update</a>
-                                            <a class="js-delete-dataset btn" did="<?=$data[$i]->id?>" title="Delete">
-                                       Delete</a>
-                                            <?php if ($data[$i]->upload_status === "UserUploadingData" || $data[$i]->upload_status === "DataPending") { 
-                                            echo CHtml::link('Upload Files', array('/authorisedDataset/uploadFiles', 'id'=>$data[$i]->identifier), array('class' => 'upload btn'));
+                                            <a class="update btn btn-transparent tooltip-trigger" data-toggle="tooltip" title="Update the metadata of the dataset" href=<? echo "/datasetSubmission/datasetManagement/id/" . $data[$i]->id ?>>Update<br />dataset</a>
+                                            <button class="js-delete-dataset btn btn-transparent" data-toggle="tooltip" title="Delete the dataset and all its files" did="<?=$data[$i]->id?>">
+                                       Delete<br />dataset</button>
+                                            <?php if ($data[$i]->upload_status === "UserUploadingData" || $data[$i]->upload_status === "DataPending") {
+                                              ?>
+                                              <a class="upload btn btn-transparent" href="/authorisedDataset/uploadFiles/id/<?php echo $data[$i]->identifier; ?>" data-toggle="tooltip" title="Upload files to the dataset, delete the existing files or edit their metadata">Upload<br />Files</a>
+                                              <?php
                                             } ?>
                                         </div>
                                     <? } ?>
@@ -93,4 +102,10 @@
         </tbody>
     </table>
     </div>
-</section>
+</section>
+
+<script>
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+</script>