better tooltip on action buttons (such as Download, View al file, Get all)

History.md

@@ -3,6 +3,7 @@
  * [new] get buildlog preview by default instead of datestamp
  * [new] always show datestamp information below the file title
  * [new] add page commands which documents the tasks interface of Deb-o-Matic
+ * [new] better tooltip on action buttons (such as Download, View al file, Get all)
 
 # 0.4.2 (2014-06-15)
  * [fix] calculate pidfile for debomatic status check after merging configurations

debomatic-webui/public/javascripts/page_distribution.js

@@ -101,10 +101,10 @@ function Page_Distrubion(socket) {
                 label = complete_name;
                 if (!view.file.path)
                     view.file.path = config.paths.debomatic + '/' + view.distribution.name + '/pool/' + view.package.orig_name + '/' + complete_name;
-                label += ' <a class="btn btn-link btn-lg" title="Download" href="' + view.file.path + '"> ' +
+                label += ' <a class="btn btn-link btn-lg" data-toggle="tooltip" title="Download" href="' + view.file.path + '"> ' +
                     '<span class="glyphicon glyphicon-download-alt"></span></a>';
                 if (current_file_in_preview) {
-                    var view_all = $('<a id="get-whole-file" class="btn btn-link btn-lg" title="View the whole file"></a>');
+                    var view_all = $('<a id="get-whole-file" data-toggle="tooltip" class="btn btn-link btn-lg" title="View the whole file"></a>');
                     view_all.html('<span class="glyphicon glyphicon-eye-open"></span>');
                     label += view_all.get(0).outerHTML;
                 }
@@ -122,7 +122,7 @@ function Page_Distrubion(socket) {
             $("#get-whole-file").on('click', function () {
                 debug(1, "get the whole file");
                 file.get(true);
-                $(this).remove();
+                $(this).fadeOut('fast');
             });
         },
         clean: function () {
@@ -604,6 +604,8 @@ function Page_Distrubion(socket) {
             breadcrumb.update();
             select();
             sticky.reset();
+            // active tooltip
+            $("[data-toggle='tooltip']").tooltip();
         }
     };
 

debomatic-webui/views/distribution.ejs

@@ -26,7 +26,7 @@
         <div class="others">
           <nav id="sources">
             <h4>Sources
-              <a class="btn btn-link" title="Get all sources in one click"  onclick="download_all('#sources')">
+              <a class="btn btn-link" data-toggle="tooltip" data-placement="right" title="Get all sources in one click"  onclick="download_all('#sources')">
                 <span class="glyphicon glyphicon-download-alt"></span>
               </a>
             </h4>
@@ -34,7 +34,7 @@
           </nav>
           <nav id="debs">
             <h4>Debs
-              <a class="btn btn-link" title="Get all debs in one click"  onclick="download_all('#debs')">
+              <a class="btn btn-link" data-toggle="tooltip" data-placement="right"  title="Get all debs in one click"  onclick="download_all('#debs')">
                 <span class="glyphicon glyphicon-download-alt"></span>
               </a>
             </h4>
@@ -42,7 +42,7 @@
           </nav>
         </div>
       </section>
-      <section title="Back on Top" id="sticky-package">
+      <section data-toggle="tooltip" title="Back on Top" id="sticky-package">
         <div id="sticky-package-content">
           <div class="panel-heading">
             <h3 class="panel-title">