External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-20 18:37:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

AC-503 now that we can cloud, tree views need to handle long (really long) group names. This fixes the Hosts tree view.

Browse Source
This commit is contained in:
chouseknecht
2013-10-17 03:46:59 +00:00
parent 432ed60a1f
commit 5bd3d8456b
6 changed files with 56 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
awx/ui/static/js/helpers/Hosts.js
View File

@@ -527,16 +527,17 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
var sorted = SortNodes(tree_data); var sorted = SortNodes(tree_data);
html += (sorted.length > 0) ? "<ul>\n" : ""; html += (sorted.length > 0) ? "<ul>\n" : "";
for(var i=0; i < sorted.length; i++) { 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-description=\"" + sorted[i].description + "\" " +
"data-failures=\"" + sorted[i].has_active_failures + "\" " + "data-failures=\"" + sorted[i].has_active_failures + "\" " +
"data-groups=\"" + sorted[i].related.groups + "\" " + "data-groups=\"" + sorted[i].related.groups + "\" " +
"data-name=\"" + sorted[i].name + "\" " + "data-name=\"" + sorted[i].name + "\" " +
"data-group-id=\"" + sorted[i].id + "\" " + "data-group-id=\"" + sorted[i].id + "\" " +
"><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a> " + "><div class=\"expand-container\"><a href=\"\" class=\"expand\"><i class=\"icon-caret-down\"></i></a></div> " +
"<i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " + "<div class=\"badge-container\"><i class=\"field-badge icon-failures-" + sorted[i].has_active_failures + "\" " +
"aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i> " + "aw-tool-tip=\"" + toolTip + "\" data-placement=\"top\"></i></div> " +
"<a href=\"\" class=\"activate\">" + sorted[i].name + "</a> "; "<div class=\"title-container\"><a href=\"\" class=\"activate\">" + sorted[i].name + "</a></div>";
if (sorted[i].children.length > 0) { if (sorted[i].children.length > 0) {
buildHTML(sorted[i].children); buildHTML(sorted[i].children);
} }
@@ -565,7 +566,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
function activate(e) { function activate(e) {
/* Set the clicked node as active */ /* Set the clicked node as active */
var elm = angular.element(e.target); //<a> 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'); $('.search-tree .active').removeClass('active');
elm.addClass('active'); elm.addClass('active');
refresh(parent); refresh(parent);
@@ -575,13 +576,13 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
var id, parent, elm, icon; var id, parent, elm, icon;
if (e.target.tagName == 'I') { if (e.target.tagName == 'I') {
id = e.target.parentNode.parentNode.attributes.id.value; id = e.target.parentNode.parentNode.parentNode.attributes.id.value;
parent = angular.element(e.target.parentNode.parentNode); //<li> parent = angular.element(e.target.parentNode.parentNode.parentNode); //<li>
elm = angular.element(e.target.parentNode); // <a> elm = angular.element(e.target.parentNode); // <a>
} }
else { else {
id = e.target.parentNode.attributes.id.value; id = e.target.parentNode.parentNode.attributes.id.value;
parent = angular.element(e.target.parentNode); parent = angular.element(e.target.parentNode.parentNode);
elm = angular.element(e.target); elm = angular.element(e.target);
} }
@@ -647,6 +648,16 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
link.bind('click', activate); 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'); Wait('stop');
}); });

2
awx/ui/static/js/helpers/inventory.js
View File

@@ -160,7 +160,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
// Force root node styling changes // Force root node styling changes
$('#tree-view').prepend("<div class=\"title\">Group Selector:</div>"); $('#tree-view').prepend("<div class=\"title\">Group Selector:</div>");
$('#inventory-node ins').first().remove(); $('#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 $('#tree-view ul').first().css('opacity','100'); // all our changes are done. display the tree
scope['treeLoading'] = false; scope['treeLoading'] = false;

29
awx/ui/static/less/ansible-ui.less
View File

@@ -992,6 +992,11 @@ select.field-mini-height {
ul { ul {
list-style-type: none; list-style-type: none;
padding-left: 16px; padding-left: 16px;
padding-top: 5px;
}
li {
padding-bottom: 5px;
} }
.tree-root { .tree-root {
@@ -1001,7 +1006,6 @@ select.field-mini-height {
.activate { .activate {
padding-left: 3px; padding-left: 3px;
padding-right: 3px; padding-right: 3px;
word-break: break-all;
} }
.activate:hover { .activate:hover {
@@ -1010,18 +1014,28 @@ select.field-mini-height {
.active { .active {
font-weight: bold; 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; padding: 3px;
/*border: 1px solid rgb(245, 245, 245);*/
} }
.expand:hover { .title-container {
word-break: break-all;
}
.expand-container:hover {
background-color: #ddd; background-color: #ddd;
border: 1px solid #ddd;
} }
.field-badge { .field-badge {
@@ -1285,6 +1299,7 @@ tr td button i {
#tree-view { #tree-view {
margin-left: 0; margin-left: 0;
margin-top: 10px; margin-top: 10px;
overflow: hidden;
} }
#tree-form { #tree-form {

2
awx/ui/static/lib/ansible/form-generator.js
View File

@@ -1234,7 +1234,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
*/ */
html += "<div class=\"row\">\n"; html += "<div class=\"row\">\n";
html += "<div class=\"col-lg-3\">\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"; "</div>\n";
html += "<div class=\"col-lg-9 tree-form-container\">\n"; html += "<div class=\"col-lg-9 tree-form-container\">\n";
html += "<div id=\"tree-form\">\n</div>\n"; html += "<div id=\"tree-form\">\n</div>\n";

5
awx/ui/static/lib/jstree/jquery.jstree.js
View File

@@ -272,12 +272,12 @@
v = (u.match( /.+?(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1], v = (u.match( /.+?(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
css_string = '' + css_string = '' +
'.jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; } ' + '.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-rtl li { margin-left:0; margin-right:18px; } ' +
'.jstree > ul > li { margin-left:0px; } ' + '.jstree > ul > li { margin-left:0px; } ' +
'.jstree-rtl > ul > li { margin-right: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 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:focus { outline: none; } ' +
'.jstree a > ins { height:16px; width:16px; } ' + '.jstree a > ins { height:16px; width:16px; } ' +
'.jstree a > .jstree-icon { margin-right:3px; } ' + '.jstree a > .jstree-icon { margin-right:3px; } ' +
@@ -1825,6 +1825,7 @@
if(m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); } if(m.icon.indexOf("/") === -1) { tmp.children("ins").addClass(m.icon); }
else { tmp.children("ins").css("background","url('" + m.icon + "') center center no-repeat"); } 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.append(tmp);
}); });
d.prepend("<ins class='jstree-icon'>&#160;</ins>"); d.prepend("<ins class='jstree-icon'>&#160;</ins>");

10
awx/ui/static/lib/jstree/themes/ansible/style.css
View File

@@ -6,13 +6,19 @@
.jstree-ansible li, .jstree-ansible li,
.jstree-ansible ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; } .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 li.jstree-last { background:transparent; }
.jstree-ansible .jstree-open > ins { background-position:-72px 0; } .jstree-ansible .jstree-open > ins { background-position:-72px 0; }
.jstree-ansible .jstree-closed > ins { background-position:-54px 0; } .jstree-ansible .jstree-closed > ins { background-position:-54px 0; }
.jstree-ansible .jstree-leaf > ins { background-position:-36px 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-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; } .jstree-ansible .jstree-clicked { background:#d9edf7; border:1px solid #3a87ad; padding:0 2px 0 1px; color: #000; }
/* 3a87ad */ /* 3a87ad */