Clarify status badges and fix column widths (fixes #53)

gui/app.js

@@ -118,6 +118,22 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         return "minus";
     };
 
+    $scope.nodeStatus = function (nodeCfg) {
+        if ($scope.connections[nodeCfg.NodeID]) {
+            return "Connected";
+        }
+
+        return "Disconnected";
+    };
+
+    $scope.nodeIcon = function (nodeCfg) {
+        if ($scope.connections[nodeCfg.NodeID]) {
+            return "ok";
+        }
+
+        return "minus";
+    };
+
     $scope.nodeClass = function (nodeCfg) {
         var conn = $scope.connections[nodeCfg.NodeID];
         if (conn) {

gui/index.html

@@ -76,35 +76,35 @@ html, body {
                         <tbody>
                         <!-- myself -->
                         <tr class="text-muted">
-                            <td>
+                            <td style="width:13%">
                                 <span class="label label-default">
-                                    <span class="glyphicon glyphicon-ok"></span>
+                                    <span class="glyphicon glyphicon-ok"></span> This node
                                 </span>
                             </td>
-                            <td>
+                            <td style="width:12%">
                                 <span class="text-monospace">{{myID | short}}</span>
                             </td>
-                            <td>{{version}}</td>
-                            <td>this node</td>
-                            <td class="text-right">
+                            <td style="width:20%">{{version}}</td>
+                            <td style="width:25%"></td>
+                            <td style="width:10%" class="text-right">
                                 <span ng-show="nodeCfg.NodeID != myID">
                                     {{inbps | metric}}bps
                                     <span class="text-muted glyphicon glyphicon-chevron-down"></span>
                                 </span>
                             </td>
-                            <td class="text-right">
+                            <td style="width:10%" class="text-right">
                                 <span ng-show="nodeCfg.NodeID != myID">
                                     {{outbps | metric}}bps
                                     <span class="text-muted glyphicon glyphicon-chevron-up"></span>
                                 </span>
                             </td>
-                            <td class="text-right"></td>
+                            <td style="width:10%" class="text-right"></td>
                         </tr>
                         <!-- all other nodes -->
                         <tr ng-repeat="nodeCfg in nodes">
                             <td>
                                 <span class="label label-{{nodeClass(nodeCfg)}}">
-                                    <span class="glyphicon glyphicon-{{nodeIcon(nodeCfg)}}"></span>
+                                    <span class="glyphicon glyphicon-{{nodeIcon(nodeCfg)}}"></span> {{nodeStatus(nodeCfg)}}
                                 </span>
                             </td>
                             <td>