MozReview: Implement tooltip for landable column cells (Bug 1245577). r?glob draft
authorSteven MacLeod <smacleod@mozilla.com>
Mon, 11 Jul 2016 14:01:16 -0500
changeset 8915 1b981d46d527b940a6bdbb974e25401ef6169007
parent 8824 6e1979e0f19dc721b0aa872effe240aaea3e0eaa
child 8916 b317fb88ccbccf231e244b0a48c02bcd76ec9254
child 8997 516fd42c9b512a5d162e5a7d06b79bd4f8de91f3
push id1026
push userbmo:dwalsh@mozilla.com
push dateMon, 18 Jul 2016 16:20:14 +0000
reviewersglob
bugs1245577
MozReview: Implement tooltip for landable column cells (Bug 1245577). r?glob MozReview-Commit-ID: KKYvPb1wC1d
pylib/mozreview/mozreview/static/mozreview/css/commits.less
pylib/mozreview/mozreview/static/mozreview/css/review.less
pylib/mozreview/mozreview/static/mozreview/js/review.js
pylib/mozreview/mozreview/templates/mozreview/commits.html
--- a/pylib/mozreview/mozreview/static/mozreview/css/commits.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/commits.less
@@ -17,23 +17,35 @@
 
 @approval-bg: #DFFFD7;
 @approval-border-color: #478A06;
 
 #mozreview-request-series{
   margin-top:5px;
 }
 
+.help-icon {
+  display: inline-block;
+  text-align: center;
+  background-color: #D1D1D1;
+  border-radius: 50%;
+  height: 15px;
+  width: 15px;
+  border: 1px solid #3E3E3E;
+  cursor: default;
+  margin-top: -1px;
+}
+
 #mozreview-child-requests {
   width: 100%;
   table-layout: fixed;
   border-spacing: 0px;
   border-collapse: collapse;
   margin-top:10px;
-  min-width: 618px;
+  min-width: 653px;
   border-top: 1px solid #C1C1C1;
   border-right: 1px solid #C1C1C1;
 
   & > thead,
   & > tbody {
     display:block;
 
     & > tr {
@@ -41,41 +53,36 @@
       text-align: left;
 
       & > td,
       & > th {
         display: inline-block;
       }
 
       & > .hg {
-        flex: 0 1;
+        flex: 0 0;
         min-width: 18px;
       }
 
       & > .diff {
-        flex: 0 1;
+        flex: 0 0;
         min-width: 100px;
       }
 
-      & > .status {
-        flex: 0 2;
-        min-width: 40px;
+      & > .reviews {
+        flex: 5 0;
+        min-width: 300px;
       }
 
       & > .truncate_text {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
-      & > .reviews {
-        flex: 5 0;
-        min-width: 300px;
-      }
-
       & > .reviewers {
         flex: 4 1;
         min-width: 100px;
       }
 
       & .reviewer-name {
         min-height: 10px;
         display: inline-block;
@@ -97,16 +104,22 @@
         }
         &.review-cleared{
           color: grey;
         }
         &.review-cleared::after {
           content: " (r? cleared)";
         }
       }
+
+      & > .status {
+        flex: 0 0 80px;
+        min-width: 80px;
+        white-space: nowrap;
+      }
     }
   }
 
   & > tbody > tr {
     background-color: #FFFFFF;
   }
   & > tbody > tr[current="true"],
   & > tbody > tr:hover {
@@ -128,17 +141,17 @@
      font-family: monospace
    }
 
    /* This was copied from the rb dashboard less file.*/
     .approval,
     .issue-count,
     .no-approval,
     .shipit-count {
-      min-width: 38px;
+      min-width: 80px;
       text-align: center;
       display: inline-block;
       white-space: nowrap;
       min-height: 10pt;
       .border-radius(2px);
     }
 
     .no-approval {
--- a/pylib/mozreview/mozreview/static/mozreview/css/review.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/review.less
@@ -167,8 +167,67 @@ label[for="id_shipit"] {
     .box-container {
       padding-left: 0;
     }
     .box::before, .box::after {
       display: none;
     }
   }
 }
+
+// Tooltips for landable and "r?" cells
+#mozreview-child-requests .help-tooltip,
+#mozreview-child-requests .status {
+  position: relative;
+
+  &:hover .review-tooltip {
+    display: block;
+  }
+}
+
+.review-tooltip {
+  display: none;
+  max-width: 400px;
+  position: absolute;
+  top: -6px;
+  right: 90px;
+  font-size: 12px;
+  border: 1px #b09700 solid;
+  background: #fff49c;
+  max-width: 400px;
+}
+
+.review-tooltip-text {
+  position: relative;
+  padding: 10px;
+  font-weight: normal;
+}
+
+/* shared with before and after */
+.review-tooltip-text:before, .review-tooltip-text:after {
+  content: ' ';
+  height: 0;
+  position: absolute;
+  width: 0;
+  border: 8px solid transparent; /* arrow size */
+}
+
+/* top-stacked, smaller arrow */
+.review-tooltip-text:before {
+  border-left-color: #fff49c;  /* arrow color */
+
+  /* positioning */
+  position: absolute;
+  top: 8px;
+  right: -15px;
+  z-index: 2;
+}
+
+/* arrow which acts as a background shadow */
+.review-tooltip-text:after {
+  border-left-color: #b09700;  /* arrow color */
+
+  /* positioning */
+  position: absolute;
+  top: 8px;
+  right: -16px;
+  z-index: 1;
+}
--- a/pylib/mozreview/mozreview/static/mozreview/js/review.js
+++ b/pylib/mozreview/mozreview/static/mozreview/js/review.js
@@ -46,9 +46,21 @@
             break;
         }
         $(reviewText).prepend(
           $('<h4 class="body_top">'+flagDesc+'</h4>')
         );
       })
     }
   });
+
+  // Tooltips for landable and "r?" cells
+  $('#mozreview-child-requests .help-tooltip, #mozreview-child-requests .status div').each(function() {
+     var $element = $(this);
+     var text = $element.attr('title');
+
+     $element.attr('title', '');
+
+     // Draw the tooltip title and text
+     var $tip = $('<div></div>').attr('class', 'review-tooltip').insertAfter($element);
+     $('<div></div>').attr('class', 'review-tooltip-text').text(text).appendTo($tip);
+  });
 });
--- a/pylib/mozreview/mozreview/templates/mozreview/commits.html
+++ b/pylib/mozreview/mozreview/templates/mozreview/commits.html
@@ -24,17 +24,20 @@ This is the template for the "Commits" l
     <tr>
       <th class="hg">{% trans "Hg" %}</th>
       <th class="diff">{% trans "Diff" %}</th>
       <th class="reviews">{% trans "Reviews" %}</th>
       {% comment "TODO: show this column when the commit author will be available" %}
       <th class="submitter">{% trans "Submitter" %}</th>
       {% endcomment %}
       <th class="reviewers">{% trans "Reviewers" %}</th>
-      <th class="status">{% trans "Status" %}</th>
+      <th class="status">
+        {% trans "Landable" %}
+        <div class="help-icon help-tooltip" title="{% trans "Hover over each commit's status to view landable status" %}"><span>?</span></div>
+      </th>
     </tr>
     </thead>
     {% for child_details in children_details %}
     <tr {% if child_details.get_review_request.id = review_request_details.get_review_request.id %}current="true"{% endif %}>
       <td class="hg">
         <a href="{{child_details.get_review_request.repository.path}}/rev/{{child_details|commit_id|slice:":12"}}">
           <div class="rb-icon rb-icon-jump-to"></div>
         </a>