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

This commit is contained in:
Jakob Borg 2014-02-05 22:42:23 +01:00
parent 1aefc50e35
commit ea41acfff5
2 changed files with 25 additions and 9 deletions

View File

@ -118,6 +118,22 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
return "minus"; 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) { $scope.nodeClass = function (nodeCfg) {
var conn = $scope.connections[nodeCfg.NodeID]; var conn = $scope.connections[nodeCfg.NodeID];
if (conn) { if (conn) {

View File

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