More fixes to the right sidebar

Sidebar now works in all file list views.
Moved owner to share tab.

apps/files/css/detailsView.css

@@ -1,35 +1,43 @@
 
 
-#app-content-files .detailsView.disappear {
+.app-files .detailsView.disappear {
-	margin-right: -300px;
+	margin-right: -350px;
 }
 
-#app-content-files .detailsView {
+.app-files .detailsView {
 	position: absolute;
-	width: 300px;
+	width: 350px;
-	top: 44px;
+	top: 0;
 	bottom: 0;
 	right: 0;
 	left: auto;
 	background-color: white;
-	border: 1px solid black;
 	-webkit-transition: margin-right 300ms;
 	-moz-transition: margin-right 300ms;
 	-o-transition: margin-right 300ms;
 	transition: margin-right 300ms;
 }
 
-#app-content-files .detailsView .detailFileInfoContainer {
+.app-files .detailsView {
+	background: #eee;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
+	display: block;
+	z-index: 500;
+}
+
+.app-files .detailsView .detailFileInfoContainer {
 	min-height: 200px;
 	padding: 10px;
 }
 
-#app-content-files .detailsView .detailFileInfoContainer > div{
+.app-files .detailsView .detailFileInfoContainer > div{
 	clear: both;
 	margin-left: 5px;
 }
 
-#app-content-files .detailsView .thumbnail {
+.app-files .detailsView .thumbnail {
 	width: 50px;
 	height: 50px;
 	float: left;
@@ -37,12 +45,18 @@
 	background-size: 50px;
 }
 
-#app-content-files .detailsView .fileName {
+.app-files .detailsView .fileName {
 	font-weight: bold;
 	font-size: 17px;
 }
 
-#app-content-files .detailsView .detailList {
+.app-files .detailsView .detailList {
 	float: left;
 }
 
+.app-files .detailsView .close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 10px;
+}

apps/files/js/detailsview.js

@@ -18,6 +18,7 @@
 		'        <ul class="tabHeadsContainer">' +
 		'        </ul>' +
 		'    </div>' +
+		'    <a class="close icon-close" href="#" alt="{{closeLabel}}"></a>' +
 		'</div>';
 
 	var TEMPLATE_TAB_HEADER =
@@ -72,10 +73,16 @@
 		 * Initialize the details view
 		 */
 		initialize: function() {
+			var self = this;
 			this.$el = $('<div class="detailsView"></div>');
 			this.fileInfo = null;
 			this._tabViews = [];
 			this._detailFileInfoViews = [];
+
+			this.$el.on('click', 'a.close', function(event) {
+				self.$el.addClass('disappear');
+				event.preventDefault();
+			});
 		},
 
 		/**
@@ -102,7 +109,9 @@
 				this._templateTabHeader = Handlebars.compile(TEMPLATE_TAB_HEADER);
 			}
 
-			var $el = $(this._template());
+			var $el = $(this._template({
+				closeLabel: t('files', 'Close')
+			}));
 			var $tabsContainer = $el.find('.tabsContainer');
 			var $tabHeadsContainer = $el.find('.tabHeadsContainer');
 			var $detailsContainer = $el.find('.detailFileInfoContainer');
@@ -144,6 +153,8 @@
 		setFileInfo: function(fileInfo) {
 			this._fileInfo = fileInfo;
 
+			this.render();
+
 			// notify all panels
 			_.each(this._tabViews, function(tabView) {
 				tabView.setFileInfo(fileInfo);

apps/files/js/filelist.js

@@ -210,6 +210,11 @@
 			}
 			this.breadcrumb = new OCA.Files.BreadCrumb(breadcrumbOptions);
 
+			this._detailsView = new OCA.Files.DetailsView();
+			this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
+			this.$el.append(this._detailsView.$el);
+			this._detailsView.$el.addClass('disappear');
+
 			this.$el.find('#controls').prepend(this.breadcrumb.$el);
 
 			this.$el.find('thead th .columntitle').click(_.bind(this._onClickHeader, this));
@@ -224,7 +229,7 @@
 			this.$el.on('click', function(event) {
 				var $target = $(event.target);
 				// click outside file row ?
-				if (!$target.closest('tbody').length) {
+				if (!$target.closest('tbody').length && !$target.closest('.detailsView').length) {
 					self._updateDetailsView(null);
 				}
 			});
@@ -282,32 +287,16 @@
 		_updateDetailsView: function(fileInfo) {
 			var self = this;
 			if (!fileInfo) {
-				if (this._detailsView) {
-					// hide it
 				this._detailsView.$el.addClass('disappear');
 				this._detailsView.setFileInfo(null);
-				}
 				return;
 			}
 
-			if (!this._detailsView) {
-				this._detailsView = new OCA.Files.DetailsView();
-				this._detailsView.addDetailView(new OCA.Files.MainFileInfoDetailView());
-				_.each(this._detailFileInfoViews, function(view) {
-					self._detailsView.addDetailView(view);
-				});
-				_.each(this._tabViews, function(view) {
-					self._detailsView.addTabView(view);
-				});
-				this.$el.append(this._detailsView.$el);
-				this._detailsView.$el.addClass('disappear');
-				this._detailsView.render();
-			}
 			this._detailsView.setFileInfo(_.extend({
 				path: this.getCurrentDirectory()
 			}, fileInfo));
 			_.defer(function() {
-				self._detailsView.$el.removeClass('disappear');
+				self._detailsView.$el.removeClass('disappear hidden');
 			});
 		},
 
@@ -364,6 +353,12 @@
 				delete this._selectedFiles[$tr.data('id')];
 				this._selectionSummary.remove(data);
 			}
+			if (this._selectionSummary.getTotal() === 1) {
+				this._updateDetailsView(_.values(this._selectedFiles)[0]);
+			} else {
+				// show nothing when multiple files are selected
+				this._updateDetailsView(null);
+			}
 			this.$el.find('.select-all').prop('checked', this._selectionSummary.getTotal() === this.files.length);
 		},
 
@@ -2233,6 +2228,20 @@
 
 				}
 			});
+		},
+
+		/**
+		 * Register a tab view to be added to all views
+		 */
+		registerTabView: function(tabView) {
+			this._detailsView.addTabView(tabView);
+		},
+
+		/**
+		 * Register a detail view to be added to all views
+		 */
+		registerDetailView: function(detailView) {
+			this._detailsView.addDetailView(detailView);
 		}
 	};
 
@@ -2284,34 +2293,6 @@
 		}
 	};
 
-	/**
-	 * Globally registered tab views
-	 *
-	 * @type OCA.Files.DetailTabView
-	 */
-	FileList.prototype._tabViews = [];
-
-	/**
-	 * Globally registered detail views
-	 *
-	 * @type OCA.Files.DetailFileInfoView
-	 */
-	FileList.prototype._detailFileInfoViews = [];
-
-	/**
-	 * Register a tab view to be added to all views
-	 */
-	FileList.prototype.registerTabView = function(tabView) {
-		this._tabViews.push(tabView);
-	};
-
-	/**
-	 * Register a detail view to be added to all views
-	 */
-	FileList.prototype.registerDetailView = function(detailView) {
-		this._detailFileInfoViews.push(detailView);
-	};
-
 	/**
 	 * File info attributes.
 	 *

apps/files/js/mainfileinfodetailview.js

@@ -11,7 +11,14 @@
 (function() {
 	var TEMPLATE =
 		'<div class="thumbnail"></div><div class="fileName">{{name}}</div>' +
-		'<div><span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span></div>';
+		'<div>' +
+		'    <a href="#" ' +
+		'    alt="{{starAltText}}"' +
+		'    class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
+		'    <img class="svg" src="{{starIcon}}" />' +
+		'    </a>' +
+		'    <span title="{{altSize}}">{{size}}</span>, <span title="{{altDate}}">{{date}}</span>' +
+		'</div>';
 
 	/**
 	 * @class OCA.Files.MainFileInfoDetailView
@@ -48,6 +55,7 @@
 			}
 
 			if (this._fileInfo) {
+				var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0
 				this.$el.append(this._template({
 					nameLabel: t('files', 'Name'),
 					name: this._fileInfo.name,
@@ -56,10 +64,13 @@
 					sizeLabel: t('files', 'Size'),
 					// TODO: refactor and use size formatter
 					size: OC.Util.humanFileSize(this._fileInfo.size, true),
-					altSize: this._fileInfo.size,
+					altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
 					dateLabel: t('files', 'Modified'),
 					altDate: OC.Util.formatDate(this._fileInfo.mtime),
-					date: OC.Util.relativeModifiedDate(this._fileInfo.mtime)
+					date: OC.Util.relativeModifiedDate(this._fileInfo.mtime),
+					isFavorite: isFavorite,
+					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
+					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
 				}));
 
 				var $iconDiv = this.$el.find('.thumbnail');
@@ -78,8 +89,7 @@
 					// TODO: special icons / shared / external
 					$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
 				}
-			} else {
+				this.$el.find('[title]').tipsy();
-				// TODO: render placeholder text?
 			}
 		}
 	});

apps/files_sharing/js/share.js

@@ -144,9 +144,6 @@
 			OC.addScript('files_sharing', 'sharetabview').done(function() {
 				fileList.registerTabView(new OCA.Sharing.ShareTabView('shareTabView'));
 			});
-			OC.addScript('files_sharing', 'sharedetailview').done(function() {
-				fileList.registerDetailView(new OCA.Sharing.ShareDetailView());
-			});
 		},
 
 		/**

apps/files_sharing/js/sharedetailview.js

@@ -1,63 +0,0 @@
-/*
- * 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 =
-		'<ul class="shareDetailList">' +
-		'   <li>Owner: {{owner}}</li>' +
-		'</ul>';
-
-	/**
-	 * @class OCA.Files.MainFileInfoDetailView
-	 * @classdesc
-	 *
-	 * Displays main details about a file
-	 *
-	 */
-	var ShareDetailView = function() {
-		this.initialize();
-	};
-	/**
-	 * @memberof OCA.Sharing
-	 */
-	ShareDetailView.prototype = _.extend({}, OCA.Files.DetailFileInfoView.prototype,
-		/** @lends OCA.Sharing.ShareDetailView.prototype */ {
-		_template: null,
-
-		/**
-		 * Initialize the details view
-		 */
-		initialize: function() {
-			this.$el = $('<div class="shareDetailView"></div>');
-		},
-
-		/**
-		 * Renders this details view
-		 */
-		render: function() {
-			this.$el.empty();
-
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
-			}
-
-			if (this._fileInfo) {
-				this.$el.append(this._template({
-					owner: this._fileInfo.shareOwner || OC.currentUser
-				}));
-			} else {
-				// TODO: render placeholder text?
-			}
-		}
-	});
-
-	OCA.Sharing.ShareDetailView = ShareDetailView;
-})();
-

apps/files_sharing/js/sharetabview.js

@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<div>TODO: here comes the share dialog</div>';
+		'<div>Owner: {{owner}}';
 
 	/**
 	 * @class OCA.Sharing.ShareTabView
@@ -52,7 +52,9 @@
 			}
 
 			if (this._fileInfo) {
-				this.$el.append(this._template());
+				this.$el.append(this._template({
+					owner: this._fileInfo.shareOwner || OC.currentUser
+				}));
 			} else {
 				// TODO: render placeholder text?
 			}