File upload feedback in title and form state, new favicon

docs-parent/TODO

@@ -1,4 +1 @@
-- Disable the whole document edit form while uploading files (client)
-- Change browser title while uploading (client)
 - Automatic backup system using Quartz (server)
-- Styled favicon (client)

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

@@ -219,4 +219,5 @@ var App = angular.module('docs',
 .run(function($rootScope, $state, $stateParams) {
   $rootScope.$state = $state;
   $rootScope.$stateParams = $stateParams;
+  $rootScope.pageTitle = 'Sismics Docs';
 });

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

@@ -3,7 +3,7 @@
 /**
  * Document edition controller.
  */
-App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams, Restangular, Tag) {
+App.controller('DocumentEdit', function($rootScope, $scope, $q, $http, $state, $stateParams, Restangular, Tag) {
   // Alerts
   $scope.alerts = [];
   
@@ -37,21 +37,18 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
   $scope.isEdit = function() {
     return $stateParams.id;
   };
-  
+
   /**
-   * In edit mode, load the current document.
+   * Reset the form to add a new document.
    */
-  if ($scope.isEdit()) {
+  $scope.resetForm = function() {
-    Restangular.one('document', $stateParams.id).get().then(function(data) {
-      $scope.document = data;
-    });
-  } else {
     $scope.document = {
       tags: [],
       language: 'fra'
     };
-  }
+    $scope.newFiles = [];
-  
+  };
+
   /**
    * Edit a document.
    */
@@ -84,19 +81,17 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
       // When all files upload are over, move on
       var navigateNext = function() {
         if ($scope.isEdit()) {
+          // Go back to the edited document
           $scope.pageDocuments();
           $state.transitionTo('document.view', { id: $stateParams.id });
         } else {
+          // Reset the scope and stay here
           var fileUploadCount = _.size($scope.newFiles);
           $scope.alerts.unshift({
             type: 'success',
             msg: 'Document successfully added (with ' + fileUploadCount + ' file' + (fileUploadCount > 1 ? 's' :  '') + ')'
           });
-          $scope.document = {
+          $scope.resetForm();
-            tags: [],
-            language: 'fra'
-          };
-          $scope.newFiles = [];
           $scope.loadDocuments();
         }
       }
@@ -105,6 +100,7 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
         navigateNext();
       } else {
         $scope.fileIsUploading = true;
+        $rootScope.pageTitle = '0% - Sismics Docs';
         
         // Send a file from the input file array and return a promise
         var sendFile = function(key) {
@@ -125,6 +121,7 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
           
           promiseFile.then(function() {
             $scope.fileProgress += 100 / _.size($scope.newFiles);
+            $rootScope.pageTitle = Math.round($scope.fileProgress) + '% - Sismics Docs';
           });
           
           return promiseFile;
@@ -139,6 +136,7 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
           } else {
             $scope.fileIsUploading = false;
             $scope.fileProgress = 0;
+            $rootScope.pageTitle = 'Sismics Docs';
             navigateNext();
           }
         };
@@ -157,4 +155,15 @@ App.controller('DocumentEdit', function($scope, $q, $http, $state, $stateParams,
       $state.transitionTo('document.default');
     }
   };
+
+  /**
+   * In edit mode, load the current document.
+   */
+  if ($scope.isEdit()) {
+    Restangular.one('document', $stateParams.id).get().then(function(data) {
+      $scope.document = data;
+    });
+  } else {
+    $scope.resetForm();
+  }
 });

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

@@ -10,7 +10,8 @@ App.directive('selectTag', function() {
     replace: true,
     scope: {
       tags: '=',
-      ref: '@'
+      ref: '@',
+      ngDisabled: '='
     },
     controller: function($scope, Tag) {
       // Retrieve tags

docs-web/src/main/webapp/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html ng-app="docs">
   <head>
-    <title>Sismics Docs</title>
+    <title ng-bind-template="{{ pageTitle }}">Sismics Docs</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="favicon.png" />

docs-web/src/main/webapp/partial/docs/directive.selecttag.html

@@ -1,7 +1,7 @@
 <div>
   <ul class="inline">
-    <li ng-repeat="tag in tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)"></span></span></li>
+    <li ng-repeat="tag in tags"><span class="label label-info" ng-style="{ 'background': tag.color }">{{ tag.name }} <span class="icon-remove icon-white" ng-click="deleteTag(tag)" ng-show="!ngDisabled"></span></span></li>
   </ul>
-  <input class="span12" type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input"
+  <input class="span12" type="text" id="{{ ref }}" placeholder="Type a tag" ng-model="input" ng-disabled="ngDisabled"
     autocomplete="off" typeahead="tag.name for tag in allTags | filter: $viewValue" typeahead-on-select="addTag()" />
 </div>

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

@@ -8,25 +8,27 @@
         <input required ng-maxlength="100" class="input-block-level" type="text" id="inputTitle"
           placeholder="Title" name="title" ng-model="document.title" autocomplete="off"
           typeahead="document for document in getTitleTypeahead($viewValue) | filter: $viewValue"
-          typeahead-wait-ms="200" />
+          typeahead-wait-ms="200" ng-disabled="fileIsUploading" />
       </div>
     </div>
     <div class="control-group" ng-class="{ error: !documentForm.description.$valid }">
       <label class="control-label" for="inputDescription">Description</label>
       <div class="controls">
-        <textarea ng-maxlength="4000" class="input-block-level" rows="5" id="inputDescription" name="description" ng-model="document.description"></textarea>
+        <textarea ng-maxlength="4000" class="input-block-level" rows="5" id="inputDescription"
+          name="description" ng-model="document.description" ng-disabled="fileIsUploading"></textarea>
       </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="inputCreateDate">Creation date</label>
       <div class="controls">
-        <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd" ng-model="document.create_date" starting-day="1" show-weeks="false" />
+        <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd"
+          ng-model="document.create_date" starting-day="1" show-weeks="false" ng-disabled="fileIsUploading" />
       </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="inputCreateDate">Language</label>
       <div class="controls">
-        <select id="inputLanguage" ng-model="document.language">
+        <select id="inputLanguage" ng-model="document.language" ng-disabled="fileIsUploading">
           <option value="fra">French</option>
           <option value="eng">English</option>
           <option value="jpn">Japanese</option>
@@ -36,18 +38,19 @@
     <div class="control-group">
       <label class="control-label" for="inputFiles">New files</label>
       <div class="controls">
-        <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles" accept="image/png,image/jpg,image/jpeg,image/gif,application/pdf" />
+        <file class="input-block-level" id="inputFiles" multiple="multiple" ng-model="newFiles"
+          accept="image/png,image/jpg,image/jpeg,image/gif,application/pdf" ng-disabled="fileIsUploading" />
       </div>
     </div>
     <div class="control-group">
       <label class="control-label" for="inputTags">Tags</label>
       <div class="controls">
-        <select-tag tags="document.tags" class="input-block-level" ref="inputTags" />
+        <select-tag tags="document.tags" class="input-block-level" ref="inputTags" ng-disabled="fileIsUploading" />
       </div>
     </div>
     <div class="form-actions">
       <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button>
-      <button type="submit" class="btn" ng-click="cancel()">Cancel</button>
+      <button type="submit" class="btn" ng-click="cancel()" ng-disabled="fileIsUploading">Cancel</button>
     </div>
   </form>