gui: Tweak the Restore Versions modal for better usability (#7972)

gui/default/syncthing/core/syncthingController.js

@@ -2509,23 +2509,22 @@ angular.module('syncthing.core')
                             }
 
                             $scope.restoreVersions.tree = $("#restoreTree").fancytree({
-                                extensions: ["table", "filter"],
+                                extensions: ["table", "filter", "glyph"],
                                 quicksearch: true,
                                 filter: {
-                                    autoApply: true,
-                                    counter: true,
-                                    hideExpandedCounter: true,
                                     hideExpanders: true,
-                                    highlight: true,
-                                    leavesOnly: false,
-                                    nodata: true,
                                     mode: "hide"
                                 },
-                                table: {
-                                    indentation: 20,
-                                    nodeColumnIdx: 0,
+                                glyph: {
+                                    preset: "awesome5",
                                 },
-                                debugLevel: 2,
+                                table: {
+                                    indentation: 24,
+                                },
+                                // Set to '1' to silence errors after pressing arrow keys on file nodes.
+                                // Happens on the official option cofiguration from the developer's site
+                                // too, so probably a bug?
+                                debugLevel: 1,
                                 source: buildTree($scope.restoreVersions.versions),
                                 renderColumns: function (event, data) {
                                     // Case insensitive sort with folders on top.
@@ -2540,9 +2539,9 @@ angular.module('syncthing.core')
                                         $tdList = $(node.tr).find(">td"),
                                         template;
                                     if (node.folder) {
-                                        template = '<div ng-include="\'syncthing/folder/restoreVersionsMassActions.html\'" class="pull-right"/>';
+                                        template = '<div ng-include="\'syncthing/folder/restoreVersionsMassActions.html\'"/>';
                                     } else {
-                                        template = '<div ng-include="\'syncthing/folder/restoreVersionsVersionSelector.html\'" class="pull-right"/>';
+                                        template = '<div ng-include="\'syncthing/folder/restoreVersionsVersionSelector.html\'"/>';
                                     }
 
                                     var scope = $rootScope.$new(true);
@@ -2601,7 +2600,6 @@ angular.module('syncthing.core')
                                 timePicker: true,
                                 timePicker24Hour: true,
                                 timePickerSeconds: true,
-                                autoUpdateInput: true,
                                 opens: "left",
                                 drops: "up",
                                 startDate: minDate,

gui/default/syncthing/folder/restoreVersionsMassActions.html

@@ -1,4 +1,4 @@
-<div class="dropdown">
+<div class="dropdown pull-right">
   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
     <span translate>Mass actions</span>
     <span class="caret"></span>

gui/default/syncthing/folder/restoreVersionsModalView.html

@@ -2,27 +2,27 @@
   <div class="modal-body">
     <span translate ng-if="!restoreVersions.versions && !restoreVersions.errors">Loading data...</span>
     <div ng-if="restoreVersions.versions">
-      <table id="restoreTree">
-        <thead>
-          <tr>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-        </tbody>
-      </table>
+      <div id="restoreTree-container">
+        <table id="restoreTree">
+          <tbody>
+            <tr>
+              <td></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <hr />
       <div class="row form-inline">
         <div class="col-md-6">
           <div class="form-group">
-            <label translate for="restoreVersionSearch">Filter by name</label>:&nbsp
+            <label for="restoreVersionSearch"><span translate>Filter by name</span>:&nbsp</label>
             <input id="restoreVersionSearch" class="form-control" type="text" ng-model="restoreVersions.filters.text">
           </div>
         </div>
         <div class="col-md-6">
           <div class="form-group">
-            <label translate for="restoreVersionDate">Filter by date</label>:&nbsp
+            <label for="restoreVersionDate"><span translate>Filter by date</span>:&nbsp</label>
             <input id="restoreVersionDateRange" class="form-control">
           </div>
         </div>

gui/default/syncthing/folder/restoreVersionsVersionSelector.html

@@ -1,4 +1,4 @@
-<div class="dropdown">
+<div class="dropdown pull-right">
   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
     <span ng-if="!restoreVersions.selections[key]" translate>Do not restore</span>
     <span ng-if="restoreVersions.selections[key]">{{ restoreVersions.selections[key] | date:"yyyy/MM/dd HH:mm:ss" }}</span>