Basic work for right sidebar

Adds right sidebar with registrable panels (still WIP)

apps/files/css/detailsView.css

@@ -0,0 +1,22 @@
+
+
+#app-content-files .detailsView {
+	position: absolute;
+	width: 300px;
+	top: 44px;
+	bottom: 0;
+	right: 0;
+	background-color: white;
+	border: 1px solid black;
+}
+
+#app-content-files .detailsView .thumbnail {
+	width: 32px;
+	height: 32px;
+	float: left;
+}
+
+#app-content-files .detailsView .detailList {
+	float: left;
+}
+

apps/files/index.php

@@ -50,6 +50,12 @@ OCP\Util::addscript('files', 'search');
 \OCP\Util::addScript('files', 'tagsplugin');
 \OCP\Util::addScript('files', 'favoritesplugin');
 
+\OCP\Util::addScript('files', 'detailfileinfoview');
+\OCP\Util::addScript('files', 'detailtabview');
+\OCP\Util::addScript('files', 'detailsview');
+\OCP\Util::addScript('files', 'mainfileinfodetailview');
+\OCP\Util::addStyle('files', 'detailsView');
+
 \OC_Util::addVendorScript('core', 'handlebars/handlebars');
 
 OCP\App::setActiveNavigationEntry('files_index');

apps/files/js/detailfileinfoview.js

@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	/**
+	 * @class OCA.Files.DetailFileInfoView
+	 * @classdesc
+	 *
+	 * Displays a block of details about the file info.
+	 *
+	 */
+	var DetailFileInfoView = function() {
+		this.initialize();
+	};
+	/**
+	 * @memberof OCA.Files
+	 */
+	DetailFileInfoView.prototype = {
+		/**
+		 * jQuery element
+		 */
+		$el: null,
+
+		_template: null,
+
+		/**
+		 * Currently displayed file info
+		 *
+		 * @type OCA.Files.FileInfo
+		 */
+		_fileInfo: null,
+
+		/**
+		 * Initialize the details view
+		 */
+		initialize: function() {
+			this.$el = $('<div class="detailFileInfoView"></div>');
+		},
+
+		/**
+		 * Destroy / uninitialize this instance.
+		 */
+		destroy: function() {
+			if (this.$el) {
+				this.$el.remove();
+			}
+		},
+
+		/**
+		 * Renders this details view
+		 *
+		 * @abstract
+		 */
+		render: function() {
+			// to be implemented in subclass
+		},
+
+		/**
+		 * Sets the file info to be displayed in the view
+		 *
+		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 */
+		setFileInfo: function(fileInfo) {
+			this._fileInfo = fileInfo;
+			this.render();
+		},
+
+		/**
+		 * Returns the file info.
+		 *
+		 * @return {OCA.Files.FileInfo} file info
+		 */
+		getFileInfo: function() {
+			return this._fileInfo;
+		}
+	};
+
+	OCA.Files.DetailFileInfoView = DetailFileInfoView;
+})();
+

apps/files/js/detailsview.js

@@ -0,0 +1,177 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+
+	var TEMPLATE =
+		'<div>' +
+		'    <div class="detailFileInfoContainer">' +
+		'    </div>' +
+		'    <div class="tabHeadsContainer">' +
+		'    </div>' +
+		'    <div class="tabContentsContainer">' +
+		'    </div>' +
+		'</div>';
+
+	var TEMPLATE_TAB_HEADER =
+		'<div class="tabHeaders">{{label}}</div>';
+
+	/**
+	 * @class OCA.Files.DetailsView
+	 * @classdesc
+	 *
+	 * The details view show details about a selected file.
+	 *
+	 */
+	var DetailsView = function() {
+		this.initialize();
+	};
+	/**
+	 * @memberof OCA.Files
+	 */
+	DetailsView.prototype = {
+
+		/**
+		 * jQuery element
+		 */
+		$el: null,
+
+		_template: null,
+		_templateTabHeader: null,
+
+		/**
+		 * Currently displayed file info
+		 *
+		 * @type OCA.Files.FileInfo
+		 */
+		_fileInfo: null,
+
+		/**
+		 * List of detail tab views
+		 *
+		 * @type Array<OCA.Files.DetailTabView>
+		 */
+		_tabViews: [],
+
+		/**
+		 * List of detail file info views
+		 *
+		 * @type Array<OCA.Files.DetailFileInfoView>
+		 */
+		_detailFileInfoViews: [],
+
+		/**
+		 * Initialize the details view
+		 */
+		initialize: function() {
+			this.$el = $('<div class="detailsView"></div>');
+			this.fileInfo = null;
+			this._tabViews = [];
+			this._detailFileInfoViews = [];
+		},
+
+		/**
+		 * Destroy / uninitialize this instance.
+		 */
+		destroy: function() {
+			if (this.$el) {
+				this.$el.remove();
+			}
+		},
+
+		/**
+		 * Renders this details view
+		 */
+		render: function() {
+			this.$el.empty();
+
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+
+			if (!this._templateTabHeader) {
+				this._templateTabHeader = Handlebars.compile(TEMPLATE_TAB_HEADER);
+			}
+
+			var $el = $(this._template());
+			var $tabHeadsContainer = $el.find('.tabHeadsContainer');
+			var $tabsContainer = $el.find('.tabContentsContainer');
+			var $detailsContainer = $el.find('.detailFileInfoContainer');
+
+			// render tabs
+			_.each(this._tabs, function(tabView) {
+				tabView.render();
+				// hidden by default
+				tabView.$el.addClass('hidden');
+				$tabsContainer.append(tabView.$el);
+
+				$tabHeadsContainer.append(this._templateTabHeader({label: tabView.getLabel()}));
+			});
+
+			// render details
+			_.each(this._detailFileInfoViews, function(detailView) {
+				detailView.render();
+				$detailsContainer.append(detailView.$el);
+			});
+
+			// select first tab
+			$el.find('.tabContentsContainer:first').removeClass('hidden');
+
+			this.$el.append($el);
+		},
+
+		/**
+		 * Sets the file info to be displayed in the view
+		 *
+		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 */
+		setFileInfo: function(fileInfo) {
+			this._fileInfo = fileInfo;
+
+			// notify all panels
+			_.each(this._tabs, function(tabView) {
+				tabView.setFileInfo(fileInfo);
+			});
+			_.each(this._detailFileInfoViews, function(detailView) {
+				detailView.setFileInfo(fileInfo);
+			});
+		},
+
+		/**
+		 * Returns the file info.
+		 *
+		 * @return {OCA.Files.FileInfo} file info
+		 */
+		getFileInfo: function() {
+			return this._fileInfo;
+		},
+
+		/**
+		 * Adds a tab in the tab view
+		 *
+		 * @param {OCA.Files.DetailTabView} tab view
+		 */
+		addTabView: function(tabView) {
+			this._tabViews.push(tabView);
+		},
+
+		/**
+		 * Adds a detail view for file info.
+		 *
+		 * @param {OCA.Files.DetailFileInfoView} detail view
+		 */
+		addDetailView: function(detailView) {
+			this._detailFileInfoViews.push(detailView);
+		}
+	};
+
+	OCA.Files.DetailsView = DetailsView;
+})();
+

apps/files/js/detailtabview.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+
+	/**
+	 * @class OCA.Files.DetailTabView
+	 * @classdesc
+	 *
+	 * Base class for tab views to display file information.
+	 *
+	 */
+	var DetailTabView = function() {
+		this.initialize();
+	};
+
+	/**
+	 * @memberof OCA.Files
+	 */
+	DetailTabView.prototype = {
+		/**
+		 * jQuery element
+		 */
+		$el: null,
+
+		/**
+		 * Tab id
+		 */
+		_id: null,
+
+		/**
+		 * Tab label
+		 */
+		_label: null,
+
+		_template: null,
+
+		/**
+		 * Currently displayed file info
+		 *
+		 * @type OCA.Files.FileInfo
+		 */
+		_fileInfo: null,
+
+		/**
+		 * Initialize the details view
+		 */
+		initialize: function() {
+			this.$el = $('<div class="detailTabView"></div>');
+		},
+
+		/**
+		 * Destroy / uninitialize this instance.
+		 */
+		destroy: function() {
+			if (this.$el) {
+				this.$el.remove();
+			}
+		},
+
+		/**
+		 * Returns the tab label
+		 *
+		 * @return {String} label
+		 */
+		getLabel: function() {
+			return 'Tab ' + this._id;
+		},
+
+		/**
+		 * Renders this details view
+		 *
+		 * @abstract
+		 */
+		render: function() {
+			// to be implemented in subclass
+		},
+
+		/**
+		 * Sets the file info to be displayed in the view
+		 *
+		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 */
+		setFileInfo: function(fileInfo) {
+			this._fileInfo = fileInfo;
+			this.render();
+		},
+
+		/**
+		 * Returns the file info.
+		 *
+		 * @return {OCA.Files.FileInfo} file info
+		 */
+		getFileInfo: function() {
+			return this._fileInfo;
+		}
+	};
+
+	OCA.Files.DetailTabView = DetailTabView;
+})();
+

apps/files/js/filelist.js

@@ -64,6 +64,11 @@
 		 */
 		fileSummary: null,
 
+		/**
+		 * @type OCA.Files.DetailsView
+		 */
+		_detailsView: null,
+
 		/**
 		 * Whether the file list was initialized already.
 		 * @type boolean
@@ -262,6 +267,25 @@
 			this.fileActions.on('setDefault', this._onFileActionsUpdated);
 		},
 
+		/**
+		 * Update the details view to display the given file
+		 *
+		 * @param {OCA.Files.FileInfo} fileInfo file info to display
+		 */
+		_updateDetailsView: function(fileInfo) {
+			if (!this._detailsView) {
+				this._detailsView = new OCA.Files.DetailsView();
+				this.$el.append(this._detailsView.$el);
+
+				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
+
+				this._detailsView.render();
+			}
+			this._detailsView.setFileInfo(_.extend({
+				path: this.getCurrentDirectory()
+			}, fileInfo));
+		},
+
 		/**
 		 * Event handler for when the window size changed
 		 */
@@ -350,6 +374,15 @@
 				this._selectFileEl($tr, !$checkbox.prop('checked'));
 				this.updateSelectionSummary();
 			} else {
+				var currentIndex = $tr.index();
+				var fileInfo = this.files[currentIndex];
+
+				this._updateDetailsView(fileInfo);
+				event.preventDefault();
+				return;
+
+				// FIXME: disabled for testing details view
+
 				var filename = $tr.attr('data-file');
 				var renaming = $tr.data('renaming');
 				if (!renaming) {

apps/files/js/mainfileinfodetailview.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2015
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	var TEMPLATE =
+		'<div class="thumbnail"></div>' +
+		'<ul class="detailList">' +
+		'   <li>Name: {{name}}</li>' +
+		'   <li>Path: {{path}}</li>' +
+		'</ul>';
+
+	/**
+	 * @class OCA.Files.MainFileInfoDetailView
+	 * @classdesc
+	 *
+	 * Displays main details about a file
+	 *
+	 */
+	var MainFileInfoDetailView = function() {
+		this.initialize();
+	};
+	/**
+	 * @memberof OCA.Files
+	 */
+	MainFileInfoDetailView.prototype = _.extend({}, OCA.Files.DetailFileInfoView.prototype,
+		/** @lends OCA.Files.MainFileInfoDetailView.prototype */ {
+		_template: null,
+
+		/**
+		 * Initialize the details view
+		 */
+		initialize: function() {
+			this.$el = $('<div class="mainFileInfoView"></div>');
+		},
+
+		/**
+		 * Renders this details view
+		 *
+		 * @abstract
+		 */
+		render: function() {
+			this.$el.empty();
+
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+
+			if (this._fileInfo) {
+				this.$el.append(this._template(this._fileInfo));
+				var $iconDiv = this.$el.find('.thumbnail');
+				// FIXME: use proper way, this is only for demo purposes
+				FileList.lazyLoadPreview({
+					path: this._fileInfo.path + '/' + this._fileInfo.name,
+					mime: this._fileInfo.mimetype,
+					etag: this._fileInfo.etag,
+					callback: function(url) {
+						$iconDiv.css('background-image', 'url("' + url + '")');
+					}
+				});
+			} else {
+				// TODO: render placeholder text?
+			}
+		}
+	});
+
+	OCA.Files.MainFileInfoDetailView = MainFileInfoDetailView;
+})();
+