Merge pull request #18671 from owncloud/cleanup-sidebar-semantics

Removes unecessary divs and adds max width to longer names.

apps/files/css/detailsView.css

@@ -9,11 +9,20 @@
 
 #app-sidebar .mainFileInfoView {
 	margin-right: 20px; /* accomodate for close icon */
+	float:left;
+	display:block;
+	width: 100%;
+}
+
+#app-sidebar .file-details-container {
+	display: inline-block;
+	float: left;
 }
 
 #app-sidebar .thumbnail {
 	width: 75px;
 	height: 75px;
+	display: inline-block;
 	float: left;
 	margin-right: 10px;
 	background-size: 75px;
@@ -31,10 +40,16 @@
 	padding-bottom: 3px;
 }
 
+#app-sidebar .fileName h3 {
+	max-width: 300px;
+	float:left;
+}
+
 #app-sidebar .file-details {
 	margin-top: 3px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	opacity: .5;
+	float:left;
 }
 #app-sidebar .action-favorite {
 	vertical-align: text-bottom;

apps/files/js/detailsview.js

@@ -10,24 +10,20 @@
 
 (function() {
 	var TEMPLATE =
-		'<div>' +
 		'	<div class="detailFileInfoContainer">' +
 		'	</div>' +
-		'	<div>' +
-		'		{{#if tabHeaders}}' +
-		'		<ul class="tabHeaders">' +
+		'	{{#if tabHeaders}}' +
+		'	<ul class="tabHeaders">' +
 		'		{{#each tabHeaders}}' +
 		'		<li class="tabHeader" data-tabid="{{tabId}}" data-tabindex="{{tabIndex}}">' +
 		'			<a href="#">{{label}}</a>' +
 		'		</li>' +
 		'		{{/each}}' +
-		'		</ul>' +
-		'		{{/if}}' +
-		'		<div class="tabsContainer">' +
-		'		</div>' +
+		'	</ul>' +
+		'	{{/if}}' +
+		'	<div class="tabsContainer">' +
 		'	</div>' +
-		'	<a class="close icon-close" href="#" alt="{{closeLabel}}"></a>' +
-		'</div>';
+		'	<a class="close icon-close" href="#" alt="{{closeLabel}}"></a>';
 
 	/**
 	 * @class OCA.Files.DetailsView
@@ -268,4 +264,3 @@
 
 	OCA.Files.DetailsView = DetailsView;
 })();
-

apps/files/js/mainfileinfodetailview.js

@@ -10,14 +10,17 @@
 
 (function() {
 	var TEMPLATE =
-		'<a href="#" class="thumbnail action-default"></a><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' +
-		'<div class="file-details ellipsis">' +
-		'    <a href="#" ' +
-		'    alt="{{starAltText}}"' +
-		'    class="action action-favorite favorite">' +
-		'    <img class="svg" src="{{starIcon}}" />' +
-		'    </a>' +
-		'    {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
+		'<a href="#" class="thumbnail action-default"></a>' +
+		'<div class="file-details-container">' +
+		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
+		'	<div class="file-details ellipsis">' +
+		'		<a href="#" ' +
+		'		alt="{{starAltText}}"' +
+		'		class="action action-favorite favorite">' +
+		'			<img class="svg" src="{{starIcon}}" />' +
+		'		</a>' +
+		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' +
+		'	</div>' +
 		'</div>';
 
 	/**

apps/files/tests/js/mainfileinfodetailviewSpec.js

@@ -55,8 +55,8 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 			var clock = sinon.useFakeTimers(Date.UTC(2015, 6, 17, 1, 2, 0, 3));
 			var dateExpected = OC.Util.formatDate(Date(Date.UTC(2015, 6, 17, 1, 2, 0, 0)));
 			view.setFileInfo(testFileInfo);
-			expect(view.$el.find('.fileName').text()).toEqual('One.txt');
-			expect(view.$el.find('.fileName').attr('title')).toEqual('One.txt');
+			expect(view.$el.find('.fileName h3').text()).toEqual('One.txt');
+			expect(view.$el.find('.fileName h3').attr('title')).toEqual('One.txt');
 			expect(view.$el.find('.size').text()).toEqual('117.7 MB');
 			expect(view.$el.find('.size').attr('title')).toEqual('123456789 bytes');
 			expect(view.$el.find('.date').text()).toEqual('a few seconds ago');
@@ -110,8 +110,8 @@ describe('OCA.Files.MainFileInfoDetailView tests', 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');
+			expect(view.$el.find('.fileName h3').text()).toEqual('hello.txt');
+			expect(view.$el.find('.fileName h3').attr('title')).toEqual('hello.txt');
 		});
 		it('rerenders when changes are made on the model', function() {
 			view.setFileInfo(testFileInfo);