Add versions tab to files sidebar

- move versions to a tab in the files sidebar
- added mechanism to auto-update the row in the FileList whenever values
  are set to the FileInfoModel given to the sidebar
- updated tags/favorite action to make use of that new mechanism

4 files changed, 57 insertions, 8 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 83d7fd4a178..3a775c29ec6 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -35,7 +35,7 @@
 	var DetailsView = OC.Backbone.View.extend({
 		id: 'app-sidebar',
 		tabName: 'div',
-		className: 'detailsView',
+		className: 'detailsView scroll-container',
 
 		_template: null,
 
diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index b0e170bc4e7..449047cf252 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -84,6 +84,13 @@
 		 */
 		getFileInfo: function() {
 			return this.model;
+		},
+
+		/**
+		 * Load the next page of results
+		 */
+		nextPage: function() {
+			// load the next page, if applicable
 		}
 	});
 	DetailTabView._TAB_COUNT = 0;
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 9593ee79e66..3f0ee932d1e 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -291,6 +291,7 @@
 		 * @return {OCA.Files.FileInfoModel} file info model
 		 */
 		getModelForFile: function(fileName) {
+			var self = this;
 			var $tr;
 			// jQuery object ?
 			if (fileName.is) {
@@ -318,6 +319,21 @@
 			if (!model.has('path')) {
 				model.set('path', this.getCurrentDirectory(), {silent: true});
 			}
+
+			model.on('change', function(model) {
+				// re-render row
+				var highlightState = $tr.hasClass('highlighted');
+				$tr = self.updateRow(
+					$tr,
+					_.extend({isPreviewAvailable: true}, model.toJSON()),
+					{updateSummary: true, silent: false, animate: true}
+				);
+				$tr.toggleClass('highlighted', highlightState);
+			});
+			model.on('busy', function(model, state) {
+				self.showFileBusyState($tr, state);
+			});
+
 			return model;
 		},
 
@@ -341,6 +357,9 @@
 			if (!fileName) {
 				OC.Apps.hideAppSidebar(this._detailsView.$el);
 				this._detailsView.setFileInfo(null);
+				if (this._currentFileModel) {
+					this._currentFileModel.off();
+				}
 				this._currentFileModel = null;
 				return;
 			}
@@ -1223,6 +1242,10 @@
 		reload: function() {
 			this._selectedFiles = {};
 			this._selectionSummary.clear();
+			if (this._currentFileModel) {
+				this._currentFileModel.off();
+			}
+			this._currentFileModel = null;
 			this.$el.find('.select-all').prop('checked', false);
 			this.showMask();
 			if (this._reloadCall) {
@@ -1555,6 +1578,23 @@
 		},
 
 		/**
+		 * Updates the given row with the given file info
+		 *
+		 * @param {Object} $tr row element
+		 * @param {OCA.Files.FileInfo} fileInfo file info
+		 * @param {Object} options options
+		 *
+		 * @return {Object} new row element
+		 */
+		updateRow: function($tr, fileInfo, options) {
+			this.files.splice($tr.index(), 1);
+			$tr.remove();
+			$tr = this.add(fileInfo, _.extend({updateSummary: false, silent: true}, options));
+			this.$fileList.trigger($.Event('fileActionsReady', {fileList: this, $files: $tr}));
+			return $tr;
+		},
+
+		/**
 		 * Triggers file rename input field for the given file name.
 		 * If the user enters a new name, the file will be renamed.
 		 *
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index 609e38ca9a9..9f45da9a6e2 100644
--- a/apps/files/js/tagsplugin.js
+++ b/apps/files/js/tagsplugin.js
@@ -92,6 +92,7 @@
 				actionHandler: function(fileName, context) {
 					var $actionEl = context.$file.find('.action-favorite');
 					var $file = context.$file;
+					var fileInfo = context.fileList.files[$file.index()];
 					var dir = context.dir || context.fileList.getCurrentDirectory();
 					var tags = $file.attr('data-tags');
 					if (_.isUndefined(tags)) {
@@ -106,9 +107,11 @@
 					} else {
 						tags.push(OC.TAG_FAVORITE);
 					}
+
+					// pre-toggle the star
 					toggleStar($actionEl, !isFavorite);
 
-					context.fileInfoModel.set('tags', tags);
+					context.fileInfoModel.trigger('busy', context.fileInfoModel, true);
 
 					self.applyFileTags(
 						dir + '/' + fileName,
@@ -116,17 +119,16 @@
 						$actionEl,
 						isFavorite
 					).then(function(result) {
+						context.fileInfoModel.trigger('busy', context.fileInfoModel, false);
 						// response from server should contain updated tags
 						var newTags = result.tags;
 						if (_.isUndefined(newTags)) {
 							newTags = tags;
 						}
-						var fileInfo = context.fileList.files[$file.index()];
-						// read latest state from result
-						toggleStar($actionEl, (newTags.indexOf(OC.TAG_FAVORITE) >= 0));
-						$file.attr('data-tags', newTags.join('|'));
-						$file.attr('data-favorite', !isFavorite);
-						fileInfo.tags = newTags;
+						context.fileInfoModel.set({
+							'tags': newTags,
+							'favorite': !isFavorite
+						});
 					});
 				}
 			});