MozReview: Implement tooltip for landable column cells (
Bug 1245577). r?glob
MozReview-Commit-ID: KKYvPb1wC1d
--- 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>