From 65215720c0a942a16bb024903e88e12ee1dc55b5 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Thu, 15 Aug 2013 02:18:24 -0700
Subject: [PATCH] Render group selector as dropdown menu.

---
 guacamole/src/main/webapp/scripts/admin-ui.js | 31 +++++++++----------
 guacamole/src/main/webapp/styles/ui.css       | 30 ++++++++++++++++++
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/guacamole/src/main/webapp/scripts/admin-ui.js b/guacamole/src/main/webapp/scripts/admin-ui.js
index e0a11db78..c7aeb8520 100644
--- a/guacamole/src/main/webapp/scripts/admin-ui.js
+++ b/guacamole/src/main/webapp/scripts/admin-ui.js
@@ -727,7 +727,7 @@ GuacAdmin.ConnectionEditor = function(connection, parameters) {
 
         // Show group selector
         var group_select = new GuacAdmin.ConnectionGroupSelect(GuacAdmin.cached_root_group);
-        document.body.appendChild(group_select.getElement());
+        location_container.appendChild(group_select.getElement());
 
         // Update location when chosen
         group_select.onselect = function(group) {
@@ -1056,7 +1056,7 @@ GuacAdmin.ConnectionGroupEditor = function(group, parameters) {
 
         // Show group selector
         var group_select = new GuacAdmin.ConnectionGroupSelect(GuacAdmin.cached_root_group);
-        document.body.appendChild(group_select.getElement());
+        location_container.appendChild(group_select.getElement());
 
         // Update location when chosen
         group_select.onselect = function(selected_group) {
@@ -1212,23 +1212,20 @@ GuacAdmin.ConnectionGroupSelect = function(group) {
      */
     var group_select = this;
 
-    /**
-     * Dialog containing the user editor.
-     */
-    var dialog = new GuacUI.Dialog();
-
-    // Create form base elements
-    var group_header = GuacUI.createChildElement(dialog.getHeader(), "h2");
-    var form_element = GuacUI.createChildElement(dialog.getBody(), "div", "form");
-
-    // Set title
-    group_header.textContent = "Select Group";
-
     // Add section with group view
-    var group_section = GuacUI.createChildElement(form_element, "div", "settings section");
+    var container = GuacUI.createElement("div");
+    var group_outside = GuacUI.createChildElement(container, "div", "overlay");
+    var group_section = GuacUI.createChildElement(container, "div", "dropdown");
+
     var view = new GuacUI.GroupView(group);
     group_section.appendChild(view.getElement());
 
+    // Hide when clicked outside
+    group_outside.addEventListener("click", function(e) {
+        e.stopPropagation();
+        container.parentNode.removeChild(container);
+    }, false);
+
     // Handle select
     view.ongroupclick = function(group) {
 
@@ -1237,7 +1234,7 @@ GuacAdmin.ConnectionGroupSelect = function(group) {
             group_select.onselect(group);
 
         // Hide dialog
-        dialog.getElement().parentNode.removeChild(dialog.getElement());
+        container.parentNode.removeChild(container);
 
     };
 
@@ -1255,7 +1252,7 @@ GuacAdmin.ConnectionGroupSelect = function(group) {
      * @return {Element} The DOM Element representing this dialog.
      */
     this.getElement = function() {
-        return dialog.getElement();
+        return container;
     };
 
 };
diff --git a/guacamole/src/main/webapp/styles/ui.css b/guacamole/src/main/webapp/styles/ui.css
index e91fb1f08..215eb01c9 100644
--- a/guacamole/src/main/webapp/styles/ui.css
+++ b/guacamole/src/main/webapp/styles/ui.css
@@ -195,6 +195,36 @@ div.section {
     margin: 0;
 }
 
+.dialog td {
+    position: relative;
+}
+
+.dialog .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.dialog .dropdown {
+
+    position: absolute;
+    z-index: 2;
+    margin-top: -1px;
+
+    width: 3in;
+    max-height: 5in;
+    overflow: auto;
+
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    background: white;
+
+    font-size: 10pt;
+
+}
+
 /*
  * List elements
  */