1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +03:00

Fixed tooltip inside of host/source summary popovers. Updated recent jobs popover title based on failed true/false.

This commit is contained in:
mabashian 2017-08-02 13:57:50 -04:00
parent 2f07c0a2e5
commit e913c4dabb
5 changed files with 84 additions and 57 deletions

View File

@ -464,17 +464,6 @@ textarea.allowresize {
}
}
.tooltip {
z-index: 2050;
opacity: 1.0;
}
.tooltip-inner {
padding: 10px;
text-align:left;
max-width: 150px;
}
.alert {
margin-top: 15px;
margin-bottom: 15px;
@ -2031,40 +2020,6 @@ tr td button i {
padding-bottom: 5px;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @default-interface-txt;
}
.tooltip.top .tooltip-arrow {
border-top-color: @default-interface-txt;
}
.tooltip.left .tooltip-arrow {
border-left-color: @default-interface-txt;
}
.tooltip.right .tooltip-arrow {
border-right-color: @default-interface-txt;
}
.tooltip.Tooltip.fade.bottom.in {
opacity: 1;
padding-top: 4px;
}
.tooltip.in {
opacity: 1;
}
.tooltip-inner {
background-color: @default-interface-txt;
}
.tooltip-inner--logOut {
margin-left: -15px !important;
}
.modal {
transition: all 0.3s ease-out !important;
}

View File

@ -44,7 +44,7 @@ export default ['templateUrl', 'Wait', '$filter', '$compile', 'i18n',
}
scope.generateTable = function(data, event){
var html, title = "Recent Jobs";
var html, title = (scope.inventory.has_active_failures) ? "Recent Failed Jobs" : "Recent Successful Jobs";
Wait('stop');
if (data.count > 0) {
html = "<table class=\"table table-condensed flyout\" style=\"width: 100%\">\n";
@ -60,10 +60,10 @@ export default ['templateUrl', 'Wait', '$filter', '$compile', 'i18n',
data.results.forEach(function(row) {
html += "<tr>\n";
html += "<td><a href=\"\" ng-click=\"viewJob(" + row.id + ")\" " + "aw-tool-tip=\"" + row.status.charAt(0).toUpperCase() + row.status.slice(1) +
". Click for details\" aw-tip-placement=\"top\"><i class=\"fa SmartStatus-tooltip--" + row.status + " icon-job-" + row.status + "\"></i></a></td>\n";
". Click for details\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\"><i class=\"fa SmartStatus-tooltip--" + row.status + " icon-job-" + row.status + "\"></i></a></td>\n";
html += "<td>" + ($filter('longDate')(row.finished)) + "</td>";
html += "<td><a href=\"\" ng-click=\"viewJob(" + row.id + ")\" " + "aw-tool-tip=\"" + row.status.charAt(0).toUpperCase() + row.status.slice(1) +
". Click for details\" aw-tip-placement=\"top\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
". Click for details\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
html += "</tr>\n";
});
html += "</tbody>\n";

View File

@ -61,14 +61,14 @@ export default ['templateUrl', '$compile', 'Wait', '$filter', 'i18n',
data.results.forEach( function(row) {
if (row.related.last_update) {
html += "<tr>";
html += `<td><a href="" ng-click="viewJob('${row.related.last_update}')" aw-tool-tip="${row.status.charAt(0).toUpperCase() + row.status.slice(1)}. ` + i18n._("Click for details") + `" aw-tip-placement="top"><i class="SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></a></td>`;
html += `<td><a href="" ng-click="viewJob('${row.related.last_update}')" aw-tool-tip="${row.status.charAt(0).toUpperCase() + row.status.slice(1)}. ` + i18n._("Click for details") + `" data-tooltip-outer-class=\"Tooltip-secondary\" aw-tip-placement="top"><i class="SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></a></td>`;
html += "<td>" + ($filter('longDate')(row.last_updated)) + "</td>";
html += "<td><a href=\"\" ng-click=\"viewJob('" + row.related.last_update + "')\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
html += "</tr>\n";
}
else {
html += "<tr>";
html += "<td><a href=\"\" aw-tool-tip=\"No sync data\" aw-tip-placement=\"top\"><i class=\"fa icon-job-none\"></i></a></td>";
html += "<td><a href=\"\" aw-tool-tip=\"No sync data\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\"><i class=\"fa icon-job-none\"></i></a></td>";
html += "<td>NA</td>";
html += "<td><span>" + $filter('sanitize')(ellipsis(row.name)) + "</span></td>";
html += "</tr>\n";

View File

@ -814,13 +814,12 @@ function(ConfigurationUtils, i18n, $rootScope) {
container = attrs.container ? attrs.container : 'body';
var template, custom_class;
if (attrs.tooltipInnerClass || attrs.tooltipinnerclass) {
custom_class = attrs.tooltipInnerClass || attrs.tooltipinnerclass;
template = '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + custom_class + '"></div></div>';
} else {
template = '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner"></div></div>';
}
var template;
let tooltipInnerClass = (attrs.tooltipInnerClass || attrs.tooltipinnerclass) ? (attrs.tooltipInnerClass || attrs.tooltipinnerclass) : '';
let tooltipOuterClass = attrs.tooltipOuterClass ? attrs.tooltipOuterClass : '';
template = '<div class="tooltip Tooltip ' + tooltipOuterClass + '" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + tooltipInnerClass + '"></div></div>';
// This block helps clean up tooltips that may get orphaned by a click event
$(element).on('mouseenter', function() {

View File

@ -1,4 +1,47 @@
/** @define Tooltip */
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @default-interface-txt;
}
.tooltip.top .tooltip-arrow {
border-top-color: @default-interface-txt;
}
.tooltip.left .tooltip-arrow {
border-left-color: @default-interface-txt;
}
.tooltip.right .tooltip-arrow {
border-right-color: @default-interface-txt;
}
.tooltip.Tooltip.fade.bottom.in {
opacity: 1;
padding-top: 4px;
}
.tooltip.in {
opacity: 1;
}
.tooltip-inner {
background-color: @default-interface-txt;
}
.tooltip-inner--logOut {
margin-left: -15px !important;
}
.tooltip {
z-index: 2050;
opacity: 1.0;
}
.tooltip-inner {
padding: 10px;
text-align:left;
max-width: 150px;
}
.Tooltip-inner {
white-space: pre-wrap;
@ -7,3 +50,33 @@
.Tooltip-wide {
max-width: 300px!important;
}
.Tooltip-secondary {
.Tooltip-inner {
background-color: @default-icon;
}
}
.Tooltip-secondary.top {
.Tooltip-arrow {
border-top-color: @default-icon;
}
}
.Tooltip-secondary.bottom {
.Tooltip-arrow {
border-bottom-color: @default-icon;
}
}
.Tooltip-secondary.left {
.Tooltip-arrow {
border-left-color: @default-icon;
}
}
.Tooltip-secondary.right {
.Tooltip-arrow {
border-right-color: @default-icon;
}
}