File modal refactoring + orphan files selection

docs-web/src/main/webapp/src/app/docs/app.js

@@ -134,7 +134,7 @@ angular.module('docs',
         }
       })
     .state('document.add', {
-      url: '/add',
+      url: '/add?files',
       views: {
         'document': {
           templateUrl: 'partial/docs/document.edit.html',
@@ -143,7 +143,7 @@ angular.module('docs',
       }
     })
     .state('document.edit', {
-      url: '/edit/:id',
+      url: '/edit/:id?files',
       views: {
         'document': {
           templateUrl: 'partial/docs/document.edit.html',

docs-web/src/main/webapp/src/app/docs/controller/DocumentDefault.js

@@ -71,9 +71,12 @@ angular.module('docs').controller('DocumentDefault', function($scope, $state, Re
   /**
    * Delete a file.
    */
-  $scope.deleteFile = function (file) {
+  $scope.deleteFile = function ($event, file) {
+    $event.stopPropagation();
+
     Restangular.one('file', file.id).remove().then(function () {
       $scope.loadFiles();
     });
+    return false;
   };
 });

docs-web/src/main/webapp/src/app/docs/controller/FileModalView.js

@@ -4,8 +4,6 @@
  * File modal view controller.
  */
 angular.module('docs').controller('FileModalView', function($rootScope, $modalInstance, $scope, $state, $stateParams, Restangular) {
-  var view = $stateParams.id ? 'document.view.file' : 'document.default.file';
-
   // Load files
   Restangular.one('file').getList('list', { id: $stateParams.id }).then(function(data) {
     $scope.files = data.files;
@@ -26,7 +24,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var next = $scope.files[key + 1];
         if (next) {
-          $state.transitionTo(view, { id: $stateParams.id, fileId: next.id });
+          $state.go('^.file', { id: $stateParams.id, fileId: next.id });
         }
       }
     });
@@ -40,7 +38,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
       if (value.id == $stateParams.fileId) {
         var previous = $scope.files[key - 1];
         if (previous) {
-          $state.transitionTo(view, { id: $stateParams.id, fileId: previous.id });
+          $state.go('^.file', { id: $stateParams.id, fileId: previous.id });
         }
       }
     });
@@ -74,7 +72,7 @@ angular.module('docs').controller('FileModalView', function($rootScope, $modalIn
   // Close the modal when the user exits this state
   var off = $rootScope.$on('$stateChangeStart', function(event, toState) {
     if (!$modalInstance.closed) {
-      if (toState.name == view) {
+      if (toState.name == $state.current.name) {
         $modalInstance.close();
       } else {
         $modalInstance.dismiss();

docs-web/src/main/webapp/src/app/docs/controller/FileView.js

@@ -16,10 +16,6 @@ angular.module('docs').controller('FileView', function($modal, $state, $statePar
     modal.closed = true;
   }, function() {
     modal.closed = true;
-    if ($stateParams.id) {
-      $state.transitionTo('document.view', { id: $stateParams.id });
-    } else {
-      $state.transitionTo('document.default');
-    }
+    $state.go('^', { id: $stateParams.id });
   });
 });

docs-web/src/main/webapp/src/app/docs/controller/Tag.js

@@ -3,9 +3,9 @@
 /**
  * Tag controller.
  */
-angular.module('docs').controller('Tag', function($scope, $dialog, $state, Tag, Restangular) {
+angular.module('docs').controller('Tag', function($scope, $dialog, Tag, Restangular) {
   $scope.tag = { name: '', color: '#3a87ad' };
-  
+
   // Retrieve tags
   Tag.tags().then(function(data) {
     $scope.tags = data.tags;
@@ -14,7 +14,7 @@ angular.module('docs').controller('Tag', function($scope, $dialog, $state, Tag,
   // Retrieve tag stats
   Restangular.one('tag/stats').get().then(function(data) {
     $scope.stats = data.stats;
-  })
+  });
   
   /**
    * Returns total number of document from tag stats.

docs-web/src/main/webapp/src/partial/docs/document.default.html

@@ -5,16 +5,19 @@
 	  {{ app.document_count }} <small>document{{ app.document_count > 1 ? 's' : '' }} in the database</small>
 	</h1>
 
-  <div class="row" ng-model="dropFiles" style="min-height: 150px;" ng-file-drop drag-over-class="bg-success"
+  <div class="row upload-zone" ng-model="dropFiles" ng-file-drop drag-over-class="bg-success"
        ng-multiple="true" allow-dir="false" accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
-      <div class="thumbnail" ng-if="file.id">
+      <div class="thumbnail" ng-class="{ 'thumbnail-checked': file.checked }" ng-if="file.id">
         <a ng-click="openFile(file)">
           <img class="thumbnail-file" ng-src="../api/file/{{ file.id }}/data?size=thumb" tooltip="{{ file.mimetype }}" tooltip-placement="top" />
         </a>
-        <div class="caption">
+        <div class="caption pointer" ng-click="file.checked = !file.checked">
+          <div class="pull-left">
+            <input type="checkbox" ng-model="file.checked" />
+          </div>
           <div class="pull-right">
-            <button class="btn btn-danger" ng-click="deleteFile(file)"><span class="glyphicon glyphicon-trash"></span></button>
+            <button class="btn btn-danger" ng-click="deleteFile($event, file)"><span class="glyphicon glyphicon-trash"></span></button>
           </div>
           <div class="clearfix"></div>
         </div>

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

@@ -35,7 +35,7 @@
 
   <div ng-file-drop drag-over-class="bg-success" ng-multiple="true" allow-dir="false" ng-model="dropFiles"
        accept="image/*,application/pdf,application/zip" ng-file-change="fileDropped($files, $event, $rejectedFiles)">
-    <div class="row" ui-sortable="fileSortableOptions" ng-model="files" style="min-height: 150px;">
+    <div class="row upload-zone" ui-sortable="fileSortableOptions" ng-model="files">
       <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center" ng-repeat="file in files">
         <div class="thumbnail" ng-if="file.id">
           <a ng-click="openFile(file)">

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

@@ -164,6 +164,19 @@ input[readonly].share-link {
   margin-right: auto;
 }
 
+// Drag & drop related
 .bg-success {
   background-color: #dff0d8;
+}
+
+.upload-zone {
+  min-height: 150px;
+}
+
+.thumbnail-checked {
+  background-color: #dff0d8;
+}
+
+.pointer {
+  cursor: pointer;
 }