Cleaning up look and feel

Network step is now much prettier

Change-Id: I72487e3a5f30e4c0339734674c53d4661f9c0104
Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>

2 files changed, 109 insertions, 24 deletions

diff --git a/src/static/css/graph_common.css b/src/static/css/graph_common.css
index 7f90a66..cff1516 100644
--- a/src/static/css/graph_common.css
+++ b/src/static/css/graph_common.css
@@ -26,9 +26,6 @@ div.mxRubberband {
     margin: 0px;
 }
 div.mxWindow {
-    -webkit-box-shadow: 3px 3px 12px #C0C0C0;
-    -moz-box-shadow: 3px 3px 12px #C0C0C0;
-    box-shadow: 3px 3px 12px #C0C0C0;
     background: url('../img/mxgraph/window.gif');
     border:1px solid #c3c3c3;
     position: absolute;
@@ -67,19 +64,32 @@ td.mxWindowPane td {
     font-size: 8pt;
 }
 td.mxWindowPane input, td.mxWindowPane select, td.mxWindowPane textarea, td.mxWindowPane radio {
-      border-color: #8C8C8C;
-      border-style: solid;
-      border-width: 1px;
       font-family: Arial;
     font-size: 8pt;
      padding: 1px;
 }
 td.mxWindowPane button {
-    background: url('/static/img/mxgraph/button.gif') repeat-x;
-      font-family: Arial;
-      font-size: 8pt;
-      padding: 2px;
-    float: left;
+    color: #fff;
+    background-color: #337ab7;
+    border-color: #2e6da4;
+    display: inline-block;
+    margin: 2%;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.42857143;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
 }
 img.mxToolbarItem {
     margin-right: 6px;
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 = "<button style='width: 46%;' onclick=deleteCell('" + id + "');>Remove</button>"
+                innerHTML += "<button style='width: 46%;' onclick='currentWindow.destroy();'>Cancel</button>"
+                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 = "<button onclick=deleteCell('" + cell.getId() + "');>Remove</button>"
-                innerHTML += "<button onclick='currentWindow.destroy();'>Cancel</button>"
-                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: <input type="text" name="net_name" id="net_name_input" style="margin:5px;"><br>';
     innerHtml += 'Vlan: <input type="number" step="1" name="vlan_id" id="vlan_id_input" style="margin:5px;"><br>';
-    innerHtml += '<button type="button" onclick="parseNetworkWindow()">Okay</button>';
-    innerHtml += '<button type="button" onclick="currentWindow.destroy();">Cancel</button><br>';
+    innerHtml += '<button style="width: 46%;" onclick="parseNetworkWindow()">Okay</button>';
+    innerHtml += '<button style="width: 46%;" onclick="currentWindow.destroy();">Cancel</button><br>';
     innerHtml += '<div id="current_window_vlans"/>';
     innerHtml += '<div id="current_window_errors"/>';
     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() {
 <!-- Calls the main function after the page has loaded. Container is dynamically created. -->
 {% block content %}
     <div id="graphParent"
-         style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:65%;left:0px;">
+         style="position:absolute;overflow:hidden;top:0px;bottom:0px;width:75%;left:0px;">
         <div id="graphContainer"
             style="position:relative;overflow:hidden;top:36px;bottom:0px;left:0px;right:0px;background-image:url('/static/img/mxgraph/grid.gif');cursor:default;">
         </div>
@@ -617,7 +640,7 @@ function submitForm() {
 
         <!-- Creates a container for the sidebar -->
         <div id="toolbarContainer"
-            style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;max-height:24px;height:36px;right:0px;padding:6px;background-image:url('/static/img/mxgraph/toolbar_bg.gif');">
+            style="position:absolute;white-space:nowrap;overflow:hidden;top:0px;left:0px;right:0px;padding:6px;">
         </div>
 
         <!-- Creates a container for the outline -->
@@ -626,8 +649,60 @@ function submitForm() {
         </div>
     </div>
 
-    <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:35%;right:0px;left:auto;background:grey">
-        <button type="button" onclick="newNetworkWindow();">Add Network</button>
+    <style>
+        #network_select {
+                background: inherit;
+                padding: 0px;
+                padding-top: 0px;
+        }
+        #toolbarContainer {
+                background: #DDDDDD;
+                height: 36px;
+        }
+        #toolbar_extension {
+                height: 36px;
+                background: #DDDDDD;
+        }
+        #btn_add_network {
+                width: 100%;
+        }
+        #vlan_notice {
+                margin: 20px;
+        }
+        #network_list li {
+                border-radius: 2px;
+                margin: 5px;
+                padding: 5px;
+                vertical-align: middle;
+                background: #DDDDDD;
+        }
+        #network_list {
+                list-style-type: none;
+                padding: 0;
+        }
+        .colorblob {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                display: inline-block;
+                vertical-align: middle;
+        }
+        .network_innertext {
+                display: inline-block;
+                padding-left: 10px;
+                vertical-align: middle;
+                padding-bottom: 0px;
+                margin-bottom: 2px;
+        }
+        .mxWindow {
+                background: #FFFFFF;
+        }
+    </style>
+
+    <div id="network_select" style="position:absolute;top:0px;bottom:0px;width:25%;right:0px;left:auto;">
+        <div id="toolbar_extension">
+        <button id="btn_add_network" type="button" class="btn btn-primary" onclick="newNetworkWindow();">Add Network</button>
+        </div>
         <ul id="network_list">
         </ul>
         <p id="vlan_notice"></p>