From 79be9c2eb894689f684d0fb500de291cfcdd5a0d Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Tue, 5 Feb 2013 14:19:07 -0800
Subject: [PATCH] #268: Add buttons to mockup.

---
 guacamole/src/main/webapp/admin.xhtml        | 38 --------------------
 guacamole/src/main/webapp/scripts/guac-ui.js | 12 +++++++
 guacamole/src/main/webapp/styles/ui.css      | 17 +++++++--
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/guacamole/src/main/webapp/admin.xhtml b/guacamole/src/main/webapp/admin.xhtml
index df6661b05..417dc30e3 100644
--- a/guacamole/src/main/webapp/admin.xhtml
+++ b/guacamole/src/main/webapp/admin.xhtml
@@ -64,44 +64,6 @@
             
             <div class="connection edit">
                 <div class="caption"><div class="protocol"><div class="icon vnc"/></div><span class="name">Another connection</span></div>
-                <div class="fields">
-                    <table>
-                        <tr>
-                            <th>Protocol:</th>
-                            <td>
-                                <select>
-                                    <option>vnc</option>
-                                    <option>rdp</option>
-                                </select>
-                            </td>
-                        </tr>
-                        <tr>
-                            <th>Hostname:</th>
-                            <td><input type="text" value="anotherhost"/></td>
-                        </tr>
-                        <tr>
-                            <th>Password:</th>
-                            <td><input type="password" value="1241234134134"/></td>
-                        </tr>
-                        <tr>
-                            <th>Port:</th>
-                            <td><input type="text" value="5901"/></td>
-                        </tr>
-                        <tr>
-                            <th>Read-only:</th>
-                            <td><input type="checkbox"/></td>
-                        </tr>
-                        <tr>
-                            <th>Swap red/blue:</th>
-                            <td><input type="checkbox"/></td>
-                        </tr>
-                    </table>
-                </div>
-                <div class="object-buttons">
-                    <button>Save</button>
-                    <button>Cancel</button>
-                    <button class="danger">Delete</button>
-                </div>
             </div>
             
         </div>
diff --git a/guacamole/src/main/webapp/scripts/guac-ui.js b/guacamole/src/main/webapp/scripts/guac-ui.js
index a84e8a956..796b7553b 100644
--- a/guacamole/src/main/webapp/scripts/guac-ui.js
+++ b/guacamole/src/main/webapp/scripts/guac-ui.js
@@ -608,6 +608,18 @@ GuacUI.EditableUser = function(username) {
     form.addField("Password:",          "password", "123412341234");
     form.addField("Re-enter Password:", "password", "123412341234");
 
+    // Buttons
+    var buttons = GuacUI.createChildElement(fields, "div", "object-buttons");
+    
+    var save    = GuacUI.createChildElement(buttons, "button", "save");
+    save.textContent = "Save";
+    
+    var cancel  = GuacUI.createChildElement(buttons, "button", "cancel");
+    cancel.textContent = "Cancel";
+    
+    var del     = GuacUI.createChildElement(buttons, "button", "delete");
+    del.textContent = "Delete";
+
     /**
      * Returns the DOM element representing this connection.
      */
diff --git a/guacamole/src/main/webapp/styles/ui.css b/guacamole/src/main/webapp/styles/ui.css
index f7e99f23c..5ead76694 100644
--- a/guacamole/src/main/webapp/styles/ui.css
+++ b/guacamole/src/main/webapp/styles/ui.css
@@ -83,11 +83,11 @@ button:active {
                 1px 1px 0.25em rgba(255, 255, 255, 0.25);
 }
 
-button.danger {
+button.delete {
     background: #A43;
 }
 
-button.danger:hover {
+button.delete:hover {
     background: #C54;
 }
 
@@ -252,7 +252,7 @@ div.section {
 
     border: 1px solid rgba(0, 0, 0, 0.1);
     background: #DDD;
-    padding: 0.25em;
+    padding: 0.5em;
     margin: 0.25em;
 
     -moz-border-radius: 0.2em;
@@ -283,6 +283,17 @@ div.section {
     -webkit-animation-duration: 0.125s;
 }
 
+.object-buttons {
+
+    text-align: right;
+    font-size: 0.8em;
+
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 0.5em;
+    margin-top: 0.5em;
+
+}
+
 /*
  * List element icons
  */