Improve two view pane

src/components/filetree.html

@@ -214,7 +214,7 @@
         <td colspan="" class="text-center">{{ 'filemanager.list.empty' | tr }}</td>
       </tr>
       <tr ng-hide="busy" entry-hashkey="{{ entry['$$hashKey'] }}" ng-repeat="entry in entries" draggable="true" ng-dragstart="dragStart($event, entry)" ng-drop="drop($event, entry)" context-menu="menuOptions" model="entry" ng-dragleave="dragExit($event, entry)" ng-dragover="dragEnter($event, entry)" ng-class="{ 'entry-hovered': entry.hovered, 'entry-selected': isSelected(entry) }">
-        <td style="width: 42px; height: 42px" ng-style="{ 'padding': entry.previewUrl ? 0 : '8px' }" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" class="text-center">
+        <td style="width: 42px; height: 42px" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" class="text-center">
           <i ng-show="!entry.previewUrl" class="fas fa-lg {{ entry.icon }}" ng-class="{ 'text-primary': entry.isDirectory && !isSelected(entry) }"></i>
           <img ng-show="entry.previewUrl" ng-src="{{ entry.previewUrl }}" height="42" width="42" style="object-fit: cover;"/>
         </td>
@@ -222,7 +222,7 @@
         <td style="width:100px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)">{{ entry.uid | prettyOwner }}</td>
         <td style="width: 80px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)">{{ entry.size | prettyByteSize }}</td>
         <td style="width:100px" class="elide-table-cell" ng-mousedown="select($event, entry)" ng-dblclick="open(entry)" uib-tooltip="{{ entry.mtime | prettyLongDate }}" tooltip-append-to-body="true">{{ entry.mtime | prettyDate }}</td>
-        <td style="width: 45px; padding: 7px;">
+        <td style="width: 45px">
           <button type="button" class="btn btn-xs btn-default context-menu-action" context-menu="menuOptions" model="entry" context-menu-on="click" ng-click="onEntryContextMenu($event, entry)"><i class="fas fa-ellipsis-h"></i></button>
         </td>
       </tr>

src/components/filetree.js

@@ -6,7 +6,8 @@
 angular.module('Application').component('filetree', {
     bindings: {
         backendId: '<',
-        backendType: '<'
+        backendType: '<',
+        view: '<'
     },
     templateUrl: 'components/filetree.html?<%= revision %>',
     controller: [ '$scope', '$translate', '$timeout', 'Client', FileTreeController ]
@@ -15,6 +16,7 @@ angular.module('Application').component('filetree', {
 function FileTreeController($scope, $translate, $timeout, Client) {
     $scope.backendId = this.backendId;
     $scope.backendType = this.backendType;
+    $scope.view = this.view;
 
     $scope.busy = true;
     $scope.client = Client;
@@ -26,7 +28,6 @@ function FileTreeController($scope, $translate, $timeout, Client) {
     $scope.clipboard = [];  // holds cut or copied entries
     $scope.clipboardCut = false; // if action is cut or copy
     $scope.dropToBody = false;
-    $scope.view = 'fileTree';
     $scope.applicationLink = '';
 
     $scope.owners = [
@@ -968,4 +969,19 @@ function FileTreeController($scope, $translate, $timeout, Client) {
     }
 
     openPath('.');
+
+    // handle save shortcuts
+    window.addEventListener('keydown', function (event) {
+        if ($scope.$parent.activeView !== $scope.view || $scope.$parent.viewerOpen) return;
+
+        if (event.key === 'ArrowDown') {
+            $scope.$apply(selectNext);
+        } else if (event.key === 'ArrowUp') {
+             $scope.$apply(selectPrev);
+        } else if (event.key === 'Enter') {
+             $scope.$apply(openSelected);
+        } else if (event.key === 'Backspace') {
+           if ($scope.view === 'fileTree') $scope.goDirectoryUp();
+        }
+    });
 }