Display changes in file versions tab view and detailsView (#26511)

* Display changes in file versions tab view and detailsView

* versions tab enhancements

enhanced js test file
removed css superscript attribute for version size

* Replaced spaces with tabs

apps/files/css/detailsView.css

@@ -106,10 +106,18 @@
 #app-sidebar .file-details {
 	color: #999;
 }
+
 #app-sidebar .file-details img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	opacity: .5;
 }
+
+#app-sidebar .file-details img:hover,
+#app-sidebar .file-details img:focus{
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
+}
+
 #app-sidebar .action-favorite {
 	vertical-align: text-bottom;
 	padding: 10px;

apps/files_versions/css/versions.css

@@ -1,6 +1,7 @@
 .versionsTabView .clear-float {
 	clear: both;
 }
+
 .versionsTabView li {
 	width: 100%;
 	cursor: default;
@@ -12,25 +13,30 @@
 	border-bottom: none;
 }
 
-.versionsTabView li > * {
+.versionsTabView a,
+.versionsTabView div > span {
 	vertical-align: middle;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 }
 
-.versionsTabView li > a,
-.versionsTabView li > span {
+.versionsTabView li a{
 	padding: 15px 10px 11px;
 }
 
-.versionsTabView li > *:hover,
-.versionsTabView li > *:focus {
+.versionsTabView a:hover,
+.versionsTabView a:focus {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: alpha(opacity=100);
 	opacity: 1;
 }
 
+.versionsTabView .preview-container {
+	display: inline-block;
+  vertical-align: top;
+}
+
 .versionsTabView img {
 	cursor: pointer;
 	padding-right: 4px;
@@ -38,7 +44,10 @@
 
 .versionsTabView img.preview {
 	cursor: default;
-	opacity: 1;
+}
+
+.versionsTabView .version-container {
+	display: inline-block;
 }
 
 .versionsTabView .versiondate {
@@ -46,6 +55,14 @@
 	vertical-align: super;
 }
 
+.versionsTabView .version-details {
+	text-align: left;
+}
+
+.versionsTabView .version-details > span {
+	padding: 0 10px;
+}
+
 .versionsTabView .revertVersion {
 	cursor: pointer;
 	float: right;

apps/files_versions/js/versionstabview.js

@@ -13,13 +13,26 @@
 (function() {
 	var TEMPLATE_ITEM =
 		'<li data-revision="{{timestamp}}">' +
+		'<div>' +
+		'<div class="preview-container">' +
 		'<img class="preview" src="{{previewUrl}}"/>' +
+		'</div>' +
+		'<div class="version-container">' +
+		'<div>' +
 		'<a href="{{downloadUrl}}" class="downloadVersion"><img src="{{downloadIconUrl}}" />' +
 		'<span class="versiondate has-tooltip live-relative-timestamp" data-timestamp="{{millisecondsTimestamp}}" title="{{formattedTimestamp}}">{{relativeTimestamp}}</span>' +
 		'</a>' +
+		'</div>' +
+		'{{#hasDetails}}' +
+		'<div class="version-details">' +
+		'<span class="size has-tooltip" title="{{altSize}}">{{humanReadableSize}}</span>' +
+		'</div>' +
+		'{{/hasDetails}}' +
+		'</div>' +
 		'{{#canRevert}}' +
 		'<a href="#" class="revertVersion" title="{{revertLabel}}"><img src="{{revertIconUrl}}" /></a>' +
 		'{{/canRevert}}' +
+		'</div>' +
 		'</li>';
 
 	var TEMPLATE =
@@ -182,10 +195,14 @@
 
 		_formatItem: function(version) {
 			var timestamp = version.get('timestamp') * 1000;
+			var size = version.has('size') ? version.get('size') : 0;
 			return _.extend({
 				millisecondsTimestamp: timestamp,
 				formattedTimestamp: OC.Util.formatDate(timestamp),
 				relativeTimestamp: OC.Util.relativeModifiedDate(timestamp),
+				humanReadableSize: OC.Util.humanFileSize(size, true),
+				altSize: n('files', '%n byte', '%n bytes', size),
+				hasDetails: version.has('size'),
 				downloadUrl: version.getDownloadUrl(),
 				downloadIconUrl: OC.imagePath('core', 'actions/download'),
 				revertIconUrl: OC.imagePath('core', 'actions/history'),

apps/files_versions/tests/js/versionstabviewSpec.js

@@ -78,12 +78,14 @@ describe('OCA.Versions.VersionsTabView', function() {
 			var $item = $versions.eq(0);
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version1.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('seconds ago');
+			expect($item.find('.size').text()).toEqual('< 1 KB');
 			expect($item.find('.revertVersion').length).toEqual(1);
 			expect($item.find('.preview').attr('src')).toEqual(version1.getPreviewUrl());
 
 			$item = $versions.eq(1);
 			expect($item.find('.downloadVersion').attr('href')).toEqual(version2.getDownloadUrl());
 			expect($item.find('.versiondate').text()).toEqual('2 days ago');
+			expect($item.find('.size').text()).toEqual('< 1 KB');
 			expect($item.find('.revertVersion').length).toEqual(1);
 			expect($item.find('.preview').attr('src')).toEqual(version2.getPreviewUrl());
 		});
@@ -231,4 +233,3 @@ describe('OCA.Versions.VersionsTabView', function() {
 		});
 	});
 });
-