Revamp UI (fixes #185, fixes #147, fixes #136, fixes #124)

gui/app.js

@@ -128,21 +128,21 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
 
     $scope.repoClass = function (repo) {
         if (typeof $scope.model[repo] === 'undefined') {
-            return 'text-info';
+            return 'info';
         }
 
         if ($scope.model[repo].invalid !== '') {
-            return 'text-danger';
+            return 'danger';
         }
 
         var state = '' + $scope.model[repo].state;
         if (state == 'idle') {
-            return 'text-success';
+            return 'success';
         }
         if (state == 'syncing') {
-            return 'text-primary';
+            return 'primary';
         }
-        return 'text-info';
+        return 'info';
     }
 
     $scope.syncPercentage = function (repo) {
@@ -154,7 +154,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         }
 
         var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes;
-        return Math.ceil(pct);
+        return Math.floor(pct);
     };
 
     $scope.nodeStatus = function (nodeCfg) {
@@ -223,6 +223,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         return '?';
     };
 
+    $scope.findNode = function (nodeID) {
+        var matches = $scope.nodes.filter(function (n) { return n.NodeID == nodeID; });
+        if (matches.length != 1) {
+            return undefined;
+        }
+        return matches[0];
+    };
+
     $scope.nodeName = function (nodeCfg) {
         if (nodeCfg.Name) {
             return nodeCfg.Name;
@@ -231,15 +239,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     };
 
     $scope.thisNodeName = function () {
-        var nodes = $scope.thisNode();
-        if (typeof nodes === 'undefined' || nodes.length != 1) {
+        var node = $scope.thisNode();
+        if (typeof node === 'undefined') {
             return "(unknown node)";
         }
-        var nodeCfg = nodes[0];
-        if (nodeCfg.Name) {
-            return nodeCfg.Name;
+        if (node.Name) {
+            return node.Name;
         }
-        return nodeCfg.NodeID.substr(0, 6);
+        return node.NodeID.substr(0, 6);
     };
 
     $scope.editSettings = function () {
@@ -260,6 +267,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         $scope.configInSync = true;
     };
 
+    $scope.shutdown = function () {
+        $http.post(urlbase + '/shutdown').success(function () {
+            setTimeout($scope.refresh(), 250);
+        });
+        $scope.configInSync = true;
+    };
+
     $scope.editNode = function (nodeCfg) {
         $scope.currentNode = $.extend({}, nodeCfg);
         $scope.editingExisting = true;
@@ -338,11 +352,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         for (i = 0; i < $scope.nodes.length; i++) {
             n = $scope.nodes[i];
             if (n.NodeID === $scope.myID) {
-                return [n];
+                return n;
             }
         }
     };
 
+    $scope.allNodes = function () {
+        var nodes = $scope.otherNodes();
+        nodes.push($scope.thisNode());
+        return nodes;
+    };
+
     $scope.errorList = function () {
         return $scope.errors.filter(function (e) {
             return e.Time > $scope.seenError;
@@ -570,6 +590,18 @@ syncthing.filter('chunkID', function () {
     }
 });
 
+syncthing.filter('shortPath', function () {
+    return function (input) {
+        if (input === undefined)
+            return "";
+        var parts = input.split(/[\/\\]/);
+        if (!parts || parts.length <= 3) {
+            return input;
+        }
+        return ".../" + parts.slice(parts.length-2).join("/");
+    }
+});
+
 syncthing.directive('optionEditor', function () {
     return {
         restrict: 'C',

gui/index.html

@@ -16,31 +16,18 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
-    h1, h2, h3, h4, h5, h6 {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      font-weight: 300;
-    }
-
-    a.btn {
-      text-decoration: none;
-    }
-
     ul+h5 {
       margin-top: 1.5em;
     }
 
     .text-monospace {
-      font-family: monospace;
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     }
 
     .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
       border-top: none;
     }
 
-    thead tr th {
-      text-align: center;
-    }
-
     .logo {
       margin: 0;
       padding: 0;
@@ -48,23 +35,6 @@
       position: relative;
     }
 
-    .progress {
-      height: 21px;
-      margin-bottom: inherit;
-    }
-
-    .progress .progress-bar {
-      line-height: 21px;
-      font-size: 12px;
-    }
-
-    .collapsed-visible {
-      display: none;
-    }
-    .collapsed .collapsed-visible {
-      display: inline;
-    }
-
     .list-no-bullet {
       list-style-type: none
     }
@@ -88,6 +58,14 @@
     .ng-cloak {
       display: none !important;
     }
+
+    .table th {
+      font-weight: 400;
+    }
+
+    .table td {
+      padding-left: 20px !important;
+    }
   </style>
 </head>
 
@@ -97,8 +75,21 @@
 
   <nav class="navbar navbar-top navbar-default" role="navigation">
     <div class="container">
-      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span>
-      <button type="button" class="btn btn-primary btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
+      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small class="hidden-xs"> <span class="text-muted">|</span> {{thisNodeName()}}</small></span>
+      <ul class="nav navbar-nav navbar-right">
+      <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit&nbsp;<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a ng-click="addRepo()"><span class="glyphicon glyphicon-hdd"></span> Add Repository</a></li>
+            <li><a ng-click="addNode()"><span class="glyphicon glyphicon-globe"></span> Add Node</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span> Shutdown</a></li>
+            <li><a ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span> Restart</a></li>
+          </ul>
+        </li>
+        </ul>
     </div>
   </nav>
 
@@ -128,144 +119,160 @@
       <!-- Repository list (top left) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Repositories</h3></div>
-          <div class="panel-body">
-            <ul class="list-unstyled" ng-repeat="repo in repoList()">
-              <li>
-                <span class="text-monospace">{{repo.Directory}}</span>
-                <span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Repository ID">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{repo.ID}}</span>
-                    </div>
-                    <div class="li-column" title="Repository synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data" ng-class="repoClass(repo.ID)">{{repoStatus(repo.ID)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Global repository files">
-                      <span class="text-muted glyphicon glyphicon-globe"></span>
-                      <span class="data">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column" title="Local repository files">
-                      <span class="text-muted glyphicon glyphicon-home"></span>
-                      <span class="data">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Unsynchronized files">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+      <div class="panel-group" id="repositories">
+        <div class="panel panel-{{repoClass(repo.ID)}}" ng-repeat="repo in repoList()">
+          <div class="panel-heading">
+          <h3 class="panel-title">
+          <a data-toggle="collapse" data-parent="#repositories" href="#repo-{{repo.ID}}">
+          <span class="glyphicon glyphicon-hdd"></span> {{repo.Directory | shortPath}}
+          <span class="pull-right">{{repoStatus(repo.ID)}}</span>
+          </a>
+          </h3>
+          </div>
+          <div id="repo-{{repo.ID}}" class="panel-collapse collapse">
+          <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+            <tbody>
+              <tr>
+                <th><span class="glyphicon glyphicon-tag"></span> Repository ID</th>
+                <td class="text-right">{{repo.ID}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-folder-open"></span> Folder</th>
+                <td class="text-right">{{repo.Directory}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                <td class="text-right">{{repoStatus(repo.ID)}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Global Repository</th>
+                <td class="text-right">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-home"></span> Local Repository</th>
+                <td class="text-right">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-cloud-download"></span> Out of Sync</th>
+                <td class="text-right">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-lock"></span> Master Repository</th>
+                <td class="text-right">
+                <span ng-if="repo.ReadOnly">Yes</span>
+                <span ng-if="!repo.ReadOnly">No</span>
+                </td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Shared With</th>
+                <td class="text-right">
+                <span ng-repeat="n in repo.Nodes">
+                {{nodeName(findNode(n.NodeID))}}<span ng-if="!$last">, </span>
+                </span>
+                </td>
+              </tr>
+            </tbody>
+            </table>
+            </div>
+          <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addRepo()"><span class="glyphicon glyphicon-plus"></span> Add Repository</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
+      </div>
 
       <!-- Node list (top right) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Nodes</h3></div>
-          <div class="panel-body">
-
-            <h5>Peer Nodes</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in otherNodes()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Node address">
-                      <span class="text-muted glyphicon glyphicon-link"></span>
-                      <span class="data">{{nodeAddr(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column" title="Node synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data text-{{nodeClass(nodeCfg)}}">{{nodeStatus(nodeCfg)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Node version">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{nodeVer(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-
-            <h5>This Node</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Current RAM utilization">
-                      <span class="text-muted glyphicon glyphicon-th"></span>
-                      <span class="data">{{system.sys | binary}}B RAM</span>
-                    </div>
-                    <div class="li-column" title="Current CPU utilization (10 s)">
-                      <span class="text-muted glyphicon glyphicon-tasks"></span>
-                      <span class="data">{{system.cpuPercent | alwaysNumber | natural:1}}% CPU</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div ng-if="system.extAnnounceOK != undefined" class="li-column" title="Global announce server">
-                      <span class="text-muted glyphicon glyphicon-bullhorn"></span>
-                      <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
-                      <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+      <div class="panel-group" id="nodes">
+        <div class="panel panel-default" ng-repeat="nodeCfg in [thisNode()]">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}"><span class="glyphicon glyphicon-home"></span> {{nodeName(nodeCfg)}}</a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse in">
+          <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-th"></span> RAM Utilization</th>
+                  <td class="text-right">{{system.sys | binary}}B</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tasks"></span> CPU Utilization</th>
+                  <td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{outbps | metric}}bps </td>
+                </tr>
+                <tr ng-if="system.extAnnounceOK != undefined">
+                  <th><span class="glyphicon glyphicon-bullhorn"></span> Announce Server</th>
+                  <td class="text-right">
+                  <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
+                  <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{version}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
+          </div>
+          </div>
+        </div>
+
+        <div class="panel panel-{{nodeClass(nodeCfg)}}" ng-repeat="nodeCfg in otherNodes()">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}">
+            <span class="glyphicon glyphicon-globe"></span>
+            {{nodeName(nodeCfg)}}
+            <span class="pull-right">{{nodeStatus(nodeCfg)}}</span>
+            </a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse">
+          <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-link"></span> Address</th>
+                  <td class="text-right">{{nodeAddr(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                  <td class="text-right">{{nodeStatus(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].outbps | metric}}bps </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{nodeVer(nodeCfg)}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addNode()"><span class="glyphicon glyphicon-plus"></span> Add Node</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
@@ -295,13 +302,12 @@
 
   <nav class="navbar navbar-default navbar-fixed-bottom hidden-xs">
     <div class="container">
-      <p class="navbar-text">{{version}}</p>
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="nav navbar-nav">
         <li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
         <li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing">Source Code</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing">Source Code</a></li>
       </ul>
     </div>
   </nav>