From 96debafd08fb56a0e7930596ce54f401feb442b3 Mon Sep 17 00:00:00 2001
From: Michael Jobst <mjobst+github@tecratech.de>
Date: Wed, 2 Nov 2016 15:17:16 +0100
Subject: [PATCH] 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                |  8 +++++
 apps/files_versions/css/versions.css          | 29 +++++++++++++++----
 apps/files_versions/js/versionstabview.js     | 17 +++++++++++
 .../tests/js/versionstabviewSpec.js           |  3 +-
 4 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 2ec16993ef..0afcbc089e 100644
--- a/apps/files/css/detailsView.css
+++ b/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;
diff --git a/apps/files_versions/css/versions.css b/apps/files_versions/css/versions.css
index b159de82ea..cd63a90ab5 100644
--- a/apps/files_versions/css/versions.css
+++ b/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;
diff --git a/apps/files_versions/js/versionstabview.js b/apps/files_versions/js/versionstabview.js
index 2e334edacb..35abde6d34 100644
--- a/apps/files_versions/js/versionstabview.js
+++ b/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'),
diff --git a/apps/files_versions/tests/js/versionstabviewSpec.js b/apps/files_versions/tests/js/versionstabviewSpec.js
index 94285c93ab..9b788db197 100644
--- a/apps/files_versions/tests/js/versionstabviewSpec.js
+++ b/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() {
 		});
 	});
 });
-