Style modifications of favorite star on main detail view (#26658)

* Style modifications of favorite star on main detail view

* Removed unused opacity change on mouse over

* favorite star title fixed

* favorite star opacity should  always be .7

Signed-off-by: Lukas Reschke <lukas@statuscode.ch>

3 files changed, 19 insertions, 26 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index f91fe3319e5..85eb804d081 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -16,6 +16,7 @@
 
 #app-sidebar .mainFileInfoView .icon {
 	display: inline-block;
+    background-size: 16px 16px;
 }
 
 #app-sidebar .mainFileInfoView .permalink {
@@ -102,23 +103,16 @@
 	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;
+	vertical-align: sub;
 	padding: 10px;
 	margin: -10px;
 }
 
+#app-sidebar .action-favorite > span{
+	opacity: .7 !important;
+}
+
 #app-sidebar .detailList {
 	float: left;
 }
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index e9259f75ba1..1a69528fd17 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -20,9 +20,8 @@
 			'</a>' +
 		'</div>' +
 		'	<div class="file-details ellipsis">' +
-		'		<a href="#" ' +
-		'		class="action action-favorite favorite">' +
-		'			<img class="svg" alt="{{starAltText}}" src="{{starIcon}}" />' +
+		'		<a href="#" class="action action-favorite favorite permanent">' +
+		'			<span class="icon {{starClass}}" title="{{starAltText}}"></span>' +
 		'		</a>' +
 		'		{{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</span>' +
 		'	</div>' +
@@ -155,7 +154,7 @@
 					timestamp: this.model.get('mtime'),
 					date: OC.Util.relativeModifiedDate(this.model.get('mtime')),
 					starAltText: isFavorite ? t('files', 'Favorited') : t('files', 'Favorite'),
-					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star'),
+					starClass: isFavorite ? 'icon-starred' : 'icon-star',
 					permalink: this._makePermalink(this.model.get('id')),
 					permalinkTitle: t('files', 'Copy local link')
 				}));
diff --git a/apps/files/tests/js/mainfileinfodetailviewSpec.js b/apps/files/tests/js/mainfileinfodetailviewSpec.js
index e81adbcf7ac..faf0faa8d8f 100644
--- a/apps/files/tests/js/mainfileinfodetailviewSpec.js
+++ b/apps/files/tests/js/mainfileinfodetailviewSpec.js
@@ -70,13 +70,13 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 		it('displays favorite icon', function() {
 			testFileInfo.set('tags', [OC.TAG_FAVORITE]);
 			view.setFileInfo(testFileInfo);
-			expect(view.$el.find('.favorite img').attr('src'))
-				.toEqual(OC.imagePath('core', 'actions/starred'));
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-starred')).toEqual(true);
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-star')).toEqual(false);
 
 			testFileInfo.set('tags', []);
 			view.setFileInfo(testFileInfo);
-			expect(view.$el.find('.favorite img').attr('src'))
-				.toEqual(OC.imagePath('core', 'actions/star'));
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-starred')).toEqual(false);
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-star')).toEqual(true);
 		});
 		it('displays mime icon', function() {
 			// File
@@ -187,13 +187,13 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 
 			testFileInfo.set('tags', [OC.TAG_FAVORITE]);
 
-			expect(view.$el.find('.favorite img').attr('src'))
-				.toEqual(OC.imagePath('core', 'actions/starred'));
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-starred')).toEqual(true);
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-star')).toEqual(false);
 
 			testFileInfo.set('tags', []);
 
-			expect(view.$el.find('.favorite img').attr('src'))
-				.toEqual(OC.imagePath('core', 'actions/star'));
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-starred')).toEqual(false);
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-star')).toEqual(true);
 		});
 		it('unbinds change listener from model', function() {
 			view.setFileInfo(testFileInfo);
@@ -207,8 +207,8 @@ describe('OCA.Files.MainFileInfoDetailView tests', function() {
 			testFileInfo.set('tags', [OC.TAG_FAVORITE]);
 
 			// no change
-			expect(view.$el.find('.favorite img').attr('src'))
-				.toEqual(OC.imagePath('core', 'actions/star'));
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-starred')).toEqual(false);
+			expect(view.$el.find('.action-favorite > span').hasClass('icon-star')).toEqual(true);
 		});
 	});
 	describe('events', function() {