File upload feedback in title and form state, new favicon

This commit is contained in:
jendib 2013-09-05 19:14:21 +02:00
parent b1f9b072f3
commit c40e7e1cc9
9 changed files with 40 additions and 30 deletions

View File

@ -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) - Automatic backup system using Quartz (server)
- Styled favicon (client)

View File

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

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html ng-app="docs"> <html ng-app="docs">
<head> <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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.png" /> <link rel="shortcut icon" href="favicon.png" />

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
<div> <div>
<ul class="inline"> <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> </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()" /> autocomplete="off" typeahead="tag.name for tag in allTags | filter: $viewValue" typeahead-on-select="addTag()" />
</div> </div>

View File

@ -8,25 +8,27 @@
<input required ng-maxlength="100" class="input-block-level" type="text" id="inputTitle" <input required ng-maxlength="100" class="input-block-level" type="text" id="inputTitle"
placeholder="Title" name="title" ng-model="document.title" autocomplete="off" placeholder="Title" name="title" ng-model="document.title" autocomplete="off"
typeahead="document for document in getTitleTypeahead($viewValue) | filter: $viewValue" typeahead="document for document in getTitleTypeahead($viewValue) | filter: $viewValue"
typeahead-wait-ms="200" /> typeahead-wait-ms="200" ng-disabled="fileIsUploading" />
</div> </div>
</div> </div>
<div class="control-group" ng-class="{ error: !documentForm.description.$valid }"> <div class="control-group" ng-class="{ error: !documentForm.description.$valid }">
<label class="control-label" for="inputDescription">Description</label> <label class="control-label" for="inputDescription">Description</label>
<div class="controls"> <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> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputCreateDate">Creation date</label> <label class="control-label" for="inputCreateDate">Creation date</label>
<div class="controls"> <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> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputCreateDate">Language</label> <label class="control-label" for="inputCreateDate">Language</label>
<div class="controls"> <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="fra">French</option>
<option value="eng">English</option> <option value="eng">English</option>
<option value="jpn">Japanese</option> <option value="jpn">Japanese</option>
@ -36,18 +38,19 @@
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputFiles">New files</label> <label class="control-label" for="inputFiles">New files</label>
<div class="controls"> <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> </div>
<div class="control-group"> <div class="control-group">
<label class="control-label" for="inputTags">Tags</label> <label class="control-label" for="inputTags">Tags</label>
<div class="controls"> <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> </div>
<div class="form-actions"> <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 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> </div>
</form> </form>