Merge pull request #18538 from owncloud/sidebar-improvements

Fix sidebar for trashbin and others

apps/files/css/files.css

@@ -148,6 +148,7 @@
 	background-color: rgb(240,240,240);
 }
 #filestable tbody tr.highlighted,
+#filestable tbody tr.highlighted .name:focus,
 #filestable tbody tr.selected {
 	background-color: rgb(230,230,230);
 }

apps/files/js/app.js

@@ -162,6 +162,7 @@
 					dir: '/'
 				};
 				this._changeUrl(params.view, params.dir);
+				OC.Apps.hideAppSidebar($('.detailsView'));
 				this.navigation.getActiveContainer().trigger(new $.Event('urlChanged', params));
 			}
 		},
@@ -181,6 +182,9 @@
 		 */
 		_onChangeViewerMode: function(e) {
 			var state = !!e.viewerModeEnabled;
+			if (e.viewerModeEnabled) {
+				OC.Apps.hideAppSidebar($('.detailsView'));
+			}
 			$('#app-navigation').toggleClass('hidden', state);
 			$('.app-files').toggleClass('viewer-mode no-sidebar', state);
 		},

apps/files/js/filelist.js

@@ -339,7 +339,7 @@
 			}
 
 			if (!fileName) {
-				OC.Apps.hideAppSidebar();
+				OC.Apps.hideAppSidebar(this._detailsView.$el);
 				this._detailsView.setFileInfo(null);
 				this._currentFileModel = null;
 				return;
@@ -354,7 +354,7 @@
 
 			this._detailsView.setFileInfo(model);
 			this._detailsView.$el.scrollTop(0);
-			_.defer(OC.Apps.showAppSidebar);
+			_.defer(OC.Apps.showAppSidebar, this._detailsView.$el);
 		},
 
 		/**

apps/files/js/mainfileinfodetailview.js

@@ -17,7 +17,7 @@
 		'    class="action action-favorite favorite">' +
 		'    <img class="svg" src="{{starIcon}}" />' +
 		'    </a>' +
-		'    <span class="size" title="{{altSize}}">{{size}}</span>, <span class="date" title="{{altDate}}">{{date}}</span>' +
+		'    {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
 		'</div>';
 
 	/**
@@ -104,9 +104,10 @@
 				var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
 				this.$el.html(this.template({
 					nameLabel: t('files', 'Name'),
-					name: this.model.get('name'),
+					name: this.model.get('displayName') || this.model.get('name'),
 					pathLabel: t('files', 'Path'),
 					path: this.model.get('path'),
+					hasSize: this.model.has('size'),
 					sizeLabel: t('files', 'Size'),
 					size: OC.Util.humanFileSize(this.model.get('size'), true),
 					altSize: n('files', '%n byte', '%n bytes', this.model.get('size')),
@@ -120,8 +121,7 @@
 				// TODO: we really need OC.Previews
 				var $iconDiv = this.$el.find('.thumbnail');
 				if (!this.model.isDirectory()) {
-					// TODO: inject utility class?
-					FileList.lazyLoadPreview({
+					this._fileList.lazyLoadPreview({
 						path: this.model.getFullPath(),
 						mime: this.model.get('mimetype'),
 						etag: this.model.get('etag'),

apps/files/tests/js/mainfileinfodetailviewSpec.js

@@ -100,6 +100,19 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 
 			fileListMock.verify();
 		});
+		it('does not show size if no size available', function() {
+			testFileInfo.unset('size');
+			view.setFileInfo(testFileInfo);
+
+			expect(view.$el.find('.size').length).toEqual(0);
+		});
+		it('renders displayName instead of name if available', function() {
+			testFileInfo.set('displayName', 'hello.txt');
+			view.setFileInfo(testFileInfo);
+
+			expect(view.$el.find('.fileName').text()).toEqual('hello.txt');
+			expect(view.$el.find('.fileName').attr('title')).toEqual('hello.txt');
+		});
 		it('rerenders when changes are made on the model', function() {
 			view.setFileInfo(testFileInfo);
 

apps/files_trashbin/js/filelist.js

@@ -122,6 +122,16 @@
 			return OC.linkTo('files', 'index.php')+"?view=trashbin&dir="+ encodeURIComponent(dir).replace(/%2F/g, '/');
 		},
 
+		elementToFile: function($el) {
+			var fileInfo = OCA.Files.FileList.prototype.elementToFile($el);
+			if (this.getCurrentDirectory() === '/') {
+				fileInfo.displayName = getDeletedFileName(fileInfo.name);
+			}
+			// no size available
+			delete fileInfo.size;
+			return fileInfo;
+		},
+
 		updateEmptyContent: function(){
 			var exists = this.$fileList.find('tr:first').exists();
 			this.$el.find('#emptycontent').toggleClass('hidden', exists);

apps/files_trashbin/tests/js/filelistSpec.js

@@ -212,6 +212,26 @@ describe('OCA.Trashbin.FileList tests', function() {
 	describe('breadcrumbs', function() {
 		// TODO: test label + URL
 	});
+	describe('elementToFile', function() {
+		var $tr;
+
+		beforeEach(function() {
+			fileList.setFiles(testFiles);
+			$tr = fileList.findFileEl('One.txt.d11111');
+		});
+
+		it('converts data attributes to file info structure', function() {
+			var fileInfo = fileList.elementToFile($tr);
+			expect(fileInfo.id).toEqual(1);
+			expect(fileInfo.name).toEqual('One.txt.d11111');
+			expect(fileInfo.displayName).toEqual('One.txt');
+			expect(fileInfo.mtime).toEqual(11111000);
+			expect(fileInfo.etag).toEqual('abc');
+			expect(fileInfo.permissions).toEqual(OC.PERMISSION_READ | OC.PERMISSION_DELETE);
+			expect(fileInfo.mimetype).toEqual('text/plain');
+			expect(fileInfo.type).toEqual('file');
+		});
+	});
 	describe('Global Actions', function() {
 		beforeEach(function() {
 			fileList.setFiles(testFiles);

core/js/apps.js

@@ -22,9 +22,11 @@
 
 	/**
 	 * Shows the #app-sidebar and add .with-app-sidebar to subsequent siblings
+	 *
+	 * @param {Object} [$el] sidebar element to show, defaults to $('#app-sidebar')
 	 */
-	exports.Apps.showAppSidebar = function() {
-		var $appSidebar = $('#app-sidebar');
+	exports.Apps.showAppSidebar = function($el) {
+		var $appSidebar = $el || $('#app-sidebar');
 		$appSidebar.removeClass('disappear')
 		$('#app-content').addClass('with-app-sidebar');
 
@@ -33,9 +35,11 @@
 	/**
 	 * Shows the #app-sidebar and removes .with-app-sidebar from subsequent
 	 * siblings
+	 *
+	 * @param {Object} [$el] sidebar element to hide, defaults to $('#app-sidebar')
 	 */
-	exports.Apps.hideAppSidebar = function() {
-		var $appSidebar = $('#app-sidebar');
+	exports.Apps.hideAppSidebar = function($el) {
+		var $appSidebar = $el || $('#app-sidebar');
 		$appSidebar.addClass('disappear');
 		$('#app-content').removeClass('with-app-sidebar');
 	};