Closes #277: display files in list

docs-web/src/main/webapp/src/app/docs/controller/document/DocumentViewContent.js

@@ -4,6 +4,15 @@
  * Document view content controller.
  */
 angular.module('docs').controller('DocumentViewContent', function ($scope, $rootScope, $stateParams, Restangular, $dialog, $state, Upload, $translate, $uibModal) {
+  $scope.displayMode = _.isUndefined(localStorage.fileDisplayMode) ? 'grid' : localStorage.fileDisplayMode;
+
+  /**
+   * Watch for display mode change.
+   */
+  $scope.$watch('displayMode', function (next) {
+    localStorage.fileDisplayMode = next;
+  });
+
   /**
    * Configuration for file sorting.
    */

docs-web/src/main/webapp/src/locale/en.json

@@ -120,7 +120,9 @@
         "file_processing_indicator": "This file is being processed. Searching will not be available before it is complete.",
         "reprocess_file": "Reprocess this file",
         "upload_new_version": "Upload a new version",
-        "open_versions": "Show version history"
+        "open_versions": "Show version history",
+        "display_mode_list": "Display files in list",
+        "display_mode_grid": "Display files in grid"
       },
       "workflow": {
         "workflow": "Workflow",

docs-web/src/main/webapp/src/partial/docs/document.view.content.html

@@ -37,12 +37,32 @@
   </dd>
 </dl>
 
+<!-- Display mode (list or grid) -->
+<div class="btn-group mt-10 mb-10 pull-right">
+          <span class="btn btn-default" ng-class="{ active: displayMode == 'list' }"
+                uib-tooltip="{{ 'document.view.content.display_mode_list' | translate }}"
+                tooltip-append-to-body="true"
+                ng-click="displayMode = 'list'">
+            <span class="fas fa-list"></span>
+          </span>
+  <span class="btn btn-default" ng-class="{ active: displayMode == 'grid' }"
+        uib-tooltip="{{ 'document.view.content.display_mode_grid' | translate }}"
+        tooltip-append-to-body="true"
+        ng-click="displayMode = 'grid'">
+            <span class="fas fa-th"></span>
+          </span>
+</div>
+
+<div class="clearfix"></div>
+
+<!-- List of files -->
 <div class="row upload-zone"
      ngf-drop="fileDropped($files)"
      ngf-drag-over-class="'bg-success'"
      ngf-multiple="true"
      ngf-allow-dir="false">
-  <div ui-sortable="fileSortableOptions" ng-model="files">
+  <!-- Grid view -->
+  <div ng-show="displayMode == 'grid'" ui-sortable="fileSortableOptions" ng-model="files">
     <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 text-center" ng-repeat="file in files">
       <div class="thumbnail" ng-if="file.id">
         <div class="file-processing-indicator" ng-show="file.processing"
@@ -114,6 +134,81 @@
     </div>
   </div>
 
+  <!-- List view -->
+  <table ng-show="displayMode == 'list'" class="table table-hover table-files">
+    <thead>
+    <tr>
+      <th width="3%"></th>
+      <th>Filename</th>
+      <th>Type</th>
+      <th>Size</th>
+      <th width="10%">Version</th>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody ui-sortable="fileSortableOptions" ng-model="files">
+    <tr ng-repeat="file in files">
+      <td class="pointer" ng-click="openFile(file)">
+        <div class="thumbnail-list">
+          <img ng-src="../api/file/{{ file.id }}/data?size=thumb" />
+        </div>
+      </td>
+      <td class="pointer" ng-click="openFile(file)">
+        {{ file.name }}
+        <span class="fas fa-spin fa-circle-notch"
+              ng-show="file.processing"
+              uib-tooltip="{{ 'document.view.content.file_processing_indicator' | translate }}"></span>
+      </td>
+      <td>{{ file.mimetype }}</td>
+      <td>{{ file.size | filesize }}</td>
+      <td>v{{ file.version + 1 }}.0</td>
+      <td ng-show="document.writable">
+        <div uib-dropdown>
+          <button class="btn btn-default" uib-dropdown-toggle>
+            <span class="fas fa-ellipsis-v"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu>
+            <li>
+              <a href ng-click="renameFile(file)">
+                <span class="fas fa-pencil-alt"></span>
+                {{ 'rename' | translate }}
+              </a>
+            </li>
+            <li>
+              <a href ng-click="processFile(file)">
+                <span class="fas fa-eye"></span>
+                {{ 'document.view.content.reprocess_file' | translate }}
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href ngf-select
+                 ngf-change="uploadNewVersion($files, file)"
+                 ngf-multiple="false">
+                <span class="fas fa-plus"></span>
+                {{ 'document.view.content.upload_new_version' | translate }}
+              </a>
+            </li>
+            <li>
+              <a href ng-click="openVersions(file)">
+                <span class="fas fa-angle-double-left"></span>
+                {{ 'document.view.content.open_versions' | translate }}
+              </a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href ng-click="deleteFile(file)">
+                <span class="fas fa-trash text-danger"></span>
+                {{ 'delete' | translate }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+
   <p class="text-center well-lg" ng-if="files.length == 0">
     <span class="fas fa-arrows-alt"></span>
     {{ 'document.view.content.drop_zone' | translate }}

docs-web/src/main/webapp/src/style/main.less

@@ -239,6 +239,30 @@ ul.tag-tree {
   }
 }
 
+// File list
+.table-files {
+  td {
+    vertical-align: middle !important;
+  }
+
+  .thumbnail-list {
+    display: inline-block;
+    position: relative;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+
+    img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      height: 100%;
+      width: auto;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+
 // Permissions table
 .table-permissions {
   .label-acl {