GUACAMOLE-5: Correct and simply guacGroupList styling/structure.

guacamole/src/main/webapp/app/home/templates/connection.html

@@ -1,19 +1,15 @@
-<a ng-href="#/client/{{context.getClientIdentifier(item)}}">
+<a ng-href="#/client/{{context.getClientIdentifier(item)}}"
+   ng-class="{active: item.getActiveConnections()}">
 
-    <div class="caption" ng-class="{active: item.getActiveConnections()}">
+    <!-- Connection icon -->
+    <div class="icon type" ng-class="item.protocol"></div>
 
-        <!-- Connection icon -->
+    <!-- Connection name -->
-        <div class="protocol">
+    <span class="name">{{item.name}}</span>
-            <div class="icon type" ng-class="item.protocol"></div>
-        </div>
 
-        <!-- Connection name -->
+    <!-- Active user count -->
-        <span class="name">{{item.name}}</span>
+    <span class="activeUserCount" ng-show="item.getActiveConnections()"
-        
+        translate="HOME.INFO_ACTIVE_USER_COUNT"
-        <!-- Active user count -->
+        translate-values="{USERS: item.getActiveConnections()}"></span>
-        <span class="activeUserCount" ng-show="item.getActiveConnections()"
-            translate="HOME.INFO_ACTIVE_USER_COUNT"
-            translate-values="{USERS: item.getActiveConnections()}"></span>
 
-    </div>
 </a>

guacamole/src/main/webapp/app/index/styles/lists.css

@@ -44,15 +44,16 @@
     color: black;
 }
 
-.connection:hover {
+.recent-connections .connection:hover {
     background: #CDA;
 }
 
-.connection .thumbnail {
+.recent-connections .connection .thumbnail {
+    display: block;
     margin: 0.5em;
 }
 
-.connection .thumbnail > * {
+.recent-connections .connection .thumbnail > * {
     border: 1px solid black;
     background: black;
     box-shadow: 1px 1px 5px black;
@@ -60,14 +61,6 @@
     display: inline-block;
 }
 
-div.recent-connections .connection .thumbnail {
-    display: block;
-}
-
-div.recent-connections .protocol {
-    display: none;
-}
-
 .caption * {
     vertical-align: middle;
 }

guacamole/src/main/webapp/app/index/styles/ui.css

@@ -164,14 +164,11 @@ div.section {
     background-image: url('images/action-icons/guac-monitor-add.png');
 }
 
-.protocol {
+.connection .icon,
+.connection-group .icon {
     display: inline-block;
-}
-
-.protocol .icon {
     width: 24px;
     height: 24px;
-    background-image: url('images/protocol-icons/guac-plug.png');
     background-size: 16px 16px;
     -moz-background-size: 16px 16px;
     -webkit-background-size: 16px 16px;
@@ -180,44 +177,57 @@ div.section {
     background-position: center center;
 }
 
-.protocol .icon.ssh,
+.group .icon {
-.protocol .icon.telnet {
+    background-image: url('images/folder-closed.png');
+}
+
+.group.expanded .icon {
+    background-image: url('images/folder-open.png');
+}
+
+.connection .icon {
+    background-image: url('images/protocol-icons/guac-plug.png');
+}
+
+.connection .icon.ssh,
+.connection .icon.telnet {
     background-image: url('images/protocol-icons/guac-text.png');
 }
 
-.protocol .icon.vnc,
+.connection .icon.vnc,
-.protocol .icon.rdp {
+.connection .icon.rdp {
     background-image: url('images/protocol-icons/guac-monitor.png');
 }
+
 /*
  * Groups
  */
 
-.group > .children {
+.expandable > .children {
     margin-left: 13px;
-    padding-left: 6px;
+    padding-left: 13px;
 }
  
-.group .icon.group.type.empty.balancer {
+.group.empty.balancer .icon {
     opacity: 1;
     background-image: url('images/protocol-icons/guac-monitor.png');
 }
 
-.group.expanded > .children {
+.expandable.expanded > .children {
     display: block;
     border-left: 1px dotted rgba(0, 0, 0, 0.25);
 }
 
-.group > .caption .icon.group {
+.expandable > .caption .icon.expand {
     opacity: 0.75;
     background-image: url('images/group-icons/guac-closed.png');
 }
 
-.group .icon.type.group.expanded {
+.expandable.expanded .icon.expand {
     background-image: url('images/group-icons/guac-open.png');
 }
 
-.group .icon.type.group.empty {
+.expandable.empty .icon.expand {
     opacity: 0.25;
     background-image: url('images/group-icons/guac-open.png');
 }

guacamole/src/main/webapp/app/manage/templates/connectionGroupPermission.html

@@ -1,7 +1,13 @@
 <div class="choice">
 
+    <!-- Connection group icon -->
+    <div class="icon type"></div>
+
+    <!-- Permission checkbox -->
     <input type="checkbox" ng-model="context.getPermissionFlags().connectionGroupPermissions.READ[item.identifier]"
                            ng-change="context.connectionGroupPermissionChanged(item.identifier)"/>
 
+    <!-- Connection group name -->
     <span class="name">{{item.name}}</span>
+
 </div>

guacamole/src/main/webapp/app/manage/templates/connectionPermission.html

@@ -1,11 +1,9 @@
 <div class="choice">
 
     <!-- Connection icon -->
-    <div class="protocol">
+    <div class="icon type" ng-class="item.protocol"></div>
-        <div class="icon type" ng-class="item.protocol"></div>
-    </div>
 
-    <!-- Checkbox -->
+    <!-- Permission checkbox -->
     <input type="checkbox" ng-model="context.getPermissionFlags().connectionPermissions.READ[item.identifier]"
                            ng-change="context.connectionPermissionChanged(item.identifier)"/>
 

guacamole/src/main/webapp/app/settings/templates/connection.html

@@ -1,19 +1,15 @@
-<a ng-href="#/manage/{{item.dataSource}}/connections/{{item.identifier}}">
+<a ng-href="#/manage/{{item.dataSource}}/connections/{{item.identifier}}"
+   ng-class="{active: item.getActiveConnections()}">
 
-    <div class="caption" ng-class="{active: item.getActiveConnections()}">
+    <!-- Connection icon -->
+    <div class="icon type" ng-class="item.protocol"></div>
 
-        <!-- Connection icon -->
+    <!-- Connection name -->
-        <div class="protocol">
+    <span class="name">{{item.name}}</span>
-            <div class="icon type" ng-class="item.protocol"></div>
-        </div>
 
-        <!-- Connection name -->
+    <!-- Active user count -->
-        <span class="name">{{item.name}}</span>
+    <span class="activeUserCount" ng-show="item.getActiveConnections()"
+        translate="SETTINGS_CONNECTIONS.INFO_ACTIVE_USER_COUNT"
+        translate-values="{USERS: item.getActiveConnections()}"></span>
 
-        <!-- Active user count -->
-        <span class="activeUserCount" ng-show="item.getActiveConnections()"
-            translate="SETTINGS_CONNECTIONS.INFO_ACTIVE_USER_COUNT"
-            translate-values="{USERS: item.getActiveConnections()}"></span>
-        
-    </div>
 </a>