mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 11:20:39 -03:30
AC-503 now that we can cloud, tree views need to handle long (really long) group names. This fixes the Hosts tree view.
This commit is contained in:
chouseknecht
parent
432ed60a1f
commit
5bd3d8456b
@ -527,16 +527,17 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
|
||||
var sorted = SortNodes(tree_data);
|
||||
html += (sorted.length > 0) ? "<ul>\n" : "";
|
||||
for(var i=0; i < sorted.length; i++) {
|
||||
html += "<li id=\"search-node-1000\" data-state=\"opened\" data-hosts=\"" + sorted[i].related.hosts + "\" " +
|
||||
html += "<li id=\"search-node-10" + i + "\" data-state=\"opened\" data-hosts=\"" + sorted[i].related.hosts + "\" " +
|
||||
"data-description=\"" + sorted[i].description + "\" " +
|
||||
"data-failures=\"" + sorted[i].has_active_failures + "\" " +
|
||||
"data-groups=\"" + sorted[i].related.groups + "\" " +
|
||||
"data-name=\"" + sorted[i].name + "\" " +
|
||||
"data-group-id=\"" + sorted[i].id + "\" " +
|
||||
"><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a> " +
|
||||
"<i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " +
|
||||
"aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i> " +
|
||||
"<a href=\"\" class=\"activate\">" + sorted[i].name + "</a> ";
|
||||
"><div class=\"expand-container\"><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a></div> " +
|
||||
"<div class=\"badge-container\"><i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " +
|
||||
"aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i></div> " +
|
||||
"<div class=\"title-container\"><a href=\"\" class=\"activate\">" + sorted[i].name + "</a></div>";
|
||||
|
||||
if (sorted[i].children.length > 0) {
|
||||
buildHTML(sorted[i].children);
|
||||
}
|
||||
@ -565,7 +566,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
|
||||
function activate(e) {
|
||||
/* Set the clicked node as active */
|
||||
var elm = angular.element(e.target); //<a>
|
||||
var parent = angular.element(e.target.parentNode); //<li>
|
||||
var parent = angular.element(e.target.parentNode.parentNode); //<li>
|
||||
$('.search-tree .active').removeClass('active');
|
||||
elm.addClass('active');
|
||||
refresh(parent);
|
||||
@ -575,13 +576,13 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
|
||||
var id, parent, elm, icon;
|
||||
|
||||
if (e.target.tagName == 'I') {
|
||||
id = e.target.parentNode.parentNode.attributes.id.value;
|
||||
parent = angular.element(e.target.parentNode.parentNode); //<li>
|
||||
id = e.target.parentNode.parentNode.parentNode.attributes.id.value;
|
||||
parent = angular.element(e.target.parentNode.parentNode.parentNode); //<li>
|
||||
elm = angular.element(e.target.parentNode); // <a>
|
||||
}
|
||||
else {
|
||||
id = e.target.parentNode.attributes.id.value;
|
||||
parent = angular.element(e.target.parentNode);
|
||||
id = e.target.parentNode.parentNode.attributes.id.value;
|
||||
parent = angular.element(e.target.parentNode.parentNode);
|
||||
elm = angular.element(e.target);
|
||||
}
|
||||
|
||||
@ -647,6 +648,16 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
|
||||
link.bind('click', activate);
|
||||
}
|
||||
}
|
||||
|
||||
// Attempt to stop the title from dropping to the next
|
||||
// line
|
||||
$(container).find('.title-container').each(function(idx) {
|
||||
var parent = $(this).parent();
|
||||
if ($(this).width() >= parent.width()) {
|
||||
$(this).css('width','80%');
|
||||
}
|
||||
});
|
||||
|
||||
Wait('stop');
|
||||
});
|
||||
|
||||
|
||||
@ -160,7 +160,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
|
||||
// Force root node styling changes
|
||||
$('#tree-view').prepend("<div class=\"title\">Group Selector:</div>");
|
||||
$('#inventory-node ins').first().remove();
|
||||
$('#inventory-node a ins').first().css('background-image', 'none').append('<i class="icon-sitemap"></i>').css('margin-right','10px');
|
||||
//$('#inventory-node a ins').first().css('background-image', 'none').append('<i class="icon-sitemap"></i>').css('margin-right','10px');
|
||||
|
||||
$('#tree-view ul').first().css('opacity','100'); // all our changes are done. display the tree
|
||||
scope['treeLoading'] = false;
|
||||
|
||||
@ -992,6 +992,11 @@ select.field-mini-height {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 16px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.tree-root {
|
||||
@ -1001,7 +1006,6 @@ select.field-mini-height {
|
||||
.activate {
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.activate:hover {
|
||||
@ -1010,18 +1014,28 @@ select.field-mini-height {
|
||||
|
||||
.active {
|
||||
font-weight: bold;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.expand {
|
||||
div {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.expand-container {
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.expand {
|
||||
padding: 3px;
|
||||
/*border: 1px solid rgb(245, 245, 245);*/
|
||||
}
|
||||
|
||||
.expand:hover {
|
||||
.title-container {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.expand-container:hover {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.field-badge {
|
||||
@ -1285,6 +1299,7 @@ tr td button i {
|
||||
#tree-view {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#tree-form {
|
||||
|
||||
@ -1234,7 +1234,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
|
||||
*/
|
||||
html += "<div class=\"row\">\n";
|
||||
html += "<div class=\"col-lg-3\">\n" +
|
||||
"<div id=\"tree-view\"></div>\n" +
|
||||
"<div id=\"tree-view\" class=\"col-lg-12\"></div>\n" +
|
||||
"</div>\n";
|
||||
html += "<div class=\"col-lg-9 tree-form-container\">\n";
|
||||
html += "<div id=\"tree-form\">\n</div>\n";
|
||||
|
||||
@ -272,12 +272,12 @@
|
||||
v = (u.match( /.+?(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
|
||||
css_string = '' +
|
||||
'.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; } ' +
|
||||
'.jstree li { display:block; min-height:18px; line-height:18px; white-space:nowrap; margin-left:18px; min-width:18px; } ' +
|
||||
'.jstree li { display:block; min-height:18px; line-height:18px; margin-left:18px; min-width:18px; } ' +
|
||||
'.jstree-rtl li { margin-left:0; margin-right:18px; } ' +
|
||||
'.jstree > ul > li { margin-left:0px; } ' +
|
||||
'.jstree-rtl > ul > li { margin-right:0px; } ' +
|
||||
'.jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } ' +
|
||||
'.jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } ' +
|
||||
'.jstree a { display:inline-block; line-height:16px; height:16px; color:black; text-wrap: unrestricted; text-decoration:none; padding:1px 2px; margin:0; } ' +
|
||||
'.jstree a:focus { outline: none; } ' +
|
||||
'.jstree a > ins { height:16px; width:16px; } ' +
|
||||
'.jstree a > .jstree-icon { margin-right:3px; } ' +
|
||||
@ -1825,6 +1825,7 @@
|
||||
if(m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); }
|
||||
else { tmp.children("ins").css("background","url('" + m.icon + "') center center no-repeat"); }
|
||||
}
|
||||
var div = $("<div style=\"display:inline-block;\"></div>");
|
||||
d.append(tmp);
|
||||
});
|
||||
d.prepend("<ins class='jstree-icon'> </ins>");
|
||||
|
||||
@ -6,13 +6,19 @@
|
||||
|
||||
.jstree-ansible li,
|
||||
.jstree-ansible ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }
|
||||
.jstree-ansible li { background-position:-90px 0; background-repeat:repeat-y; }
|
||||
|
||||
.jstree-ansible li {
|
||||
overflow: hidden;
|
||||
background-position:-90px 0;
|
||||
background-repeat:repeat-y;
|
||||
}
|
||||
|
||||
.jstree-ansible li.jstree-last { background:transparent; }
|
||||
.jstree-ansible .jstree-open > ins { background-position:-72px 0; }
|
||||
.jstree-ansible .jstree-closed > ins { background-position:-54px 0; }
|
||||
.jstree-ansible .jstree-leaf > ins { background-position:-36px 0; }
|
||||
|
||||
.jstree-ansible li a { height: 19px;}
|
||||
.jstree-ansible li a { height: 19px; }
|
||||
.jstree-ansible .jstree-hovered { background:#d9edf7; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
|
||||
.jstree-ansible .jstree-clicked { background:#d9edf7; border:1px solid #3a87ad; padding:0 2px 0 1px; color: #000; }
|
||||
/* 3a87ad */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user