#268: Add buttons to mockup.

This commit is contained in:
Michael Jumper
2013-02-05 14:19:07 -08:00
parent 18655f80a7
commit 79be9c2eb8
3 changed files with 26 additions and 41 deletions

View File

@@ -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>

View File

@@ -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.
*/

View File

@@ -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
*/