Merge pull request #18748 from owncloud/files-versions-tab

Add versions tab to files sidebar

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,
 

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;

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) {
@@ -1554,6 +1577,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.

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,27 +107,28 @@
 					} 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,
 						tags,
 						$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
+						});
 					});
 				}
 			});

apps/files/tests/js/tagspluginspec.js

@@ -79,25 +79,31 @@ describe('OCA.Files.TagsPlugin tests', function() {
 		it('sends request to server and updates icon', function() {
 			var request;
 			fileList.setFiles(testFiles);
-			$tr = fileList.$el.find('tbody tr:first');
-			$action = $tr.find('.action-favorite');
+			var $tr = fileList.findFileEl('One.txt');
+			var $action = $tr.find('.action-favorite');
 			$action.click();
 
 			expect(fakeServer.requests.length).toEqual(1);
-			var request = fakeServer.requests[0];
+			request = fakeServer.requests[0];
 			expect(JSON.parse(request.requestBody)).toEqual({
 				tags: ['tag1', 'tag2', OC.TAG_FAVORITE]
 			});
 			request.respond(200, {'Content-Type': 'application/json'}, JSON.stringify({
 				tags: ['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]
 			}));
 
+			// re-read the element as it was re-inserted
+			$tr = fileList.findFileEl('One.txt');
+			$action = $tr.find('.action-favorite');
+
 			expect($tr.attr('data-favorite')).toEqual('true');
 			expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
 			expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
 			expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/starred'));
 
 			$action.click();
+
+			expect(fakeServer.requests.length).toEqual(2);
 			request = fakeServer.requests[1];
 			expect(JSON.parse(request.requestBody)).toEqual({
 				tags: ['tag1', 'tag2', 'tag3']
@@ -106,7 +112,11 @@ describe('OCA.Files.TagsPlugin tests', function() {
 				tags: ['tag1', 'tag2', 'tag3']
 			}));
 
-			expect($tr.attr('data-favorite')).toEqual('false');
+			// re-read the element as it was re-inserted
+			$tr = fileList.findFileEl('One.txt');
+			$action = $tr.find('.action-favorite');
+
+			expect($tr.attr('data-favorite')).toBeFalsy();
 			expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']);
 			expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']);
 			expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/star'));

apps/files_versions/ajax/getVersions.php

@@ -44,6 +44,6 @@
 
 } else {
 
-	\OCP\JSON::success(array('data' => array('versions' => false, 'endReached' => true)));
+	\OCP\JSON::success(array('data' => array('versions' => [], 'endReached' => true)));
 
 }

apps/files_versions/ajax/preview.php

@@ -53,7 +53,10 @@
 	$preview->setScalingUp($scalingUp);
 
 	$preview->showPreview();
-}catch(\Exception $e) {
+} catch (\OCP\Files\NotFoundException $e) {
+	\OC_Response::setStatus(404);
+	\OCP\Util::writeLog('core', $e->getmessage(), \OCP\Util::DEBUG);
+} catch (\Exception $e) {
 	\OC_Response::setStatus(500);
 	\OCP\Util::writeLog('core', $e->getmessage(), \OCP\Util::DEBUG);
 }

apps/files_versions/css/versions.css

@@ -1,19 +1,18 @@
-#dropdown.drop-versions {
-	width: 360px;
+.versionsTabView .clear-float {
+	clear: both;
 }
-
-#found_versions li {
+.versionsTabView li {
 	width: 100%;
 	cursor: default;
 	height: 56px;
 	float: left;
 	border-bottom: 1px solid rgba(100,100,100,.1);
 }
-#found_versions li:last-child {
+.versionsTabView li:last-child {
 	border-bottom: none;
 }
 
-#found_versions li > * {
+.versionsTabView li > * {
 	padding: 7px;
 	float: left;
 	vertical-align: top;
@@ -22,34 +21,34 @@
 	opacity: .5;
 }
 
-#found_versions li > a,
-#found_versions li > span {
+.versionsTabView li > a,
+.versionsTabView li > span {
 	padding: 17px 7px;
 }
 
-#found_versions li > *:hover,
-#found_versions li > *:focus {
+.versionsTabView li > *:hover,
+.versionsTabView li > *:focus {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
-#found_versions img {
+.versionsTabView img {
 	cursor: pointer;
 	padding-right: 4px;
 }
 
-#found_versions img.preview {
+.versionsTabView img.preview {
 	cursor: default;
 	opacity: 1;
 }
 
-#found_versions .versionDate {
+.versionsTabView .versionDate {
 	min-width: 100px;
 	vertical-align: text-bottom;
 }
 
-#found_versions .revertVersion {
+.versionsTabView .revertVersion {
 	cursor: pointer;
 	float: right;
 	max-width: 130px;

apps/files_versions/js/filesplugin.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	OCA.Versions = OCA.Versions || {};
+
+	/**
+	 * @namespace
+	 */
+	OCA.Versions.Util = {
+		/**
+		 * Initialize the versions plugin.
+		 *
+		 * @param {OCA.Files.FileList} fileList file list to be extended
+		 */
+		attach: function(fileList) {
+			if (fileList.id === 'trashbin' || fileList.id === 'files.public') {
+				return;
+			}
+
+			fileList.registerTabView(new OCA.Versions.VersionsTabView('versionsTabView'));
+		}
+	};
+})();
+
+OC.Plugins.register('OCA.Files.FileList', OCA.Versions.Util);
+