From 7c2a6e339c70f4c6d6653327f0a7f3820a03c35a Mon Sep 17 00:00:00 2001 From: Sawyer Bergeron Date: Thu, 3 Jan 2019 08:55:06 -0500 Subject: Cleaning up look and feel Network step is now much prettier Change-Id: I72487e3a5f30e4c0339734674c53d4661f9c0104 Signed-off-by: Sawyer Bergeron --- src/templates/resource/steps/pod_definition.html | 101 ++++++++++++++++++++--- 1 file changed, 88 insertions(+), 13 deletions(-) (limited to 'src/templates') diff --git a/src/templates/resource/steps/pod_definition.html b/src/templates/resource/steps/pod_definition.html index b2b4998..a72e5a5 100644 --- a/src/templates/resource/steps/pod_definition.html +++ b/src/templates/resource/steps/pod_definition.html @@ -141,6 +141,14 @@ function main(graphContainer, overviewContainer, toolbarContainer) { } }); + createDeleteDialog = function(id) + { + var content = document.createElement('div'); + var innerHTML = "" + innerHTML += "" + content.innerHTML = innerHTML; + showWindow(currentGraph, 'Do you want to delete this network?', content, 200, 62); + } graph.dblClick = function(evt, cell) { if( cell != null ){ @@ -148,11 +156,7 @@ function main(graphContainer, overviewContainer, toolbarContainer) { cell = cell.getParent(); } if( cell.isEdge() || cell.getId().indexOf("network") > -1 ) { - var content = document.createElement('div'); - var innerHTML = "" - innerHTML += "" - content.innerHTML = innerHTML; - showWindow(this, 'Delete?', content, 200, 200); + createDeleteDialog(cell.getId()); } else { showDetailWindow(cell); @@ -226,8 +230,8 @@ function deleteCell(cellId) { function newNetworkWindow() { var innerHtml = 'Name:
'; innerHtml += 'Vlan:
'; - innerHtml += ''; - innerHtml += '
'; + innerHtml += ''; + innerHtml += '
'; innerHtml += '
'; innerHtml += '
'; var content = document.createElement("div"); @@ -503,6 +507,7 @@ function makeMxNetwork(vlan_id, net_name) { function addPublicNetwork() { var net = makeMxNetwork(-1, "public"); + network_names.add("public"); makeSidebarNetwork("public", "", net['color'], net['element_id']); } @@ -542,14 +547,32 @@ function updateHosts(removed) { function makeSidebarNetwork(net_name, vlan_id, color, net_id){ var newNet = document.createElement("li"); + var colorBlob = document.createElement("div"); + colorBlob.className = "colorblob"; + var textContainer = document.createElement("p"); + textContainer.className = "network_innertext"; newNet.id = net_id; + var deletebutton = document.createElement("button"); + deletebutton.className = "btn btn-danger"; + deletebutton.style = "float: right; height: 20px; line-height: 8px; vertical-align: middle; width: 20px; padding-left: 5px;"; + deleteButtonText = document.createTextNode("X"); + deletebutton.appendChild(deleteButtonText); + deletebutton.addEventListener("click", function() { + createDeleteDialog(net_id); + }, false); var text = net_name; if(vlan_id){ text += " : " + vlan_id; } var newNetValue = document.createTextNode(text); - newNet.appendChild(newNetValue); - newNet.style['background'] = color; + textContainer.appendChild(newNetValue); + colorBlob.style['background'] = color; + newNet.appendChild(colorBlob); + newNet.appendChild(textContainer); + if( net_name != "public" ) + { + newNet.appendChild(deletebutton); + } document.getElementById("network_list").appendChild(newNet); } @@ -609,7 +632,7 @@ function submitForm() { {% block content %}
+ style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
@@ -617,7 +640,7 @@ function submitForm() {
+ style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
@@ -626,8 +649,60 @@ function submitForm() {
-
- + + +
+
+ +

-- cgit 1.2.3-korg