From 9ff0941c076c4f9c96872bdab8f97568793a8f6b Mon Sep 17 00:00:00 2001
From: Daniel Calviño Sánchez <danxuliu@gmail.com>
Date: Wed, 27 Sep 2017 12:39:59 +0200
Subject: Replace inline favorite action with just a favorite icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is a preparatory step for a following commit in which the position
of the favorite icon and the checkbox will be swapped; in that new
design the favorite icon is no longer expected to be an action but just
a simple mark on whether the file is favorited or not (the action is
expected to be triggered then only from the file actions menu).

The favorite icon is now fully shown or completely hidden depending on
whether the file is favorited or not. As the icon is just informative
but no longer an action now it does not change when hovered or focus. In
the same way, the alternative text when the file is not favorited now it
is not "Favorite" (an action) but "Not favorited" instead.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
---
 apps/files/css/files.scss | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

(limited to 'apps/files/css')

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 4a59502bc6d..f5cb130cfe3 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -502,7 +502,7 @@ table td.filename .uploadtext {
 	display: inline-block;
 	float: left;
 }
-#fileList tr td.filename .action-favorite:not(.menuitem) {
+#fileList tr td.filename .favorite-mark {
 	display: block;
 	float: left;
 	width: 30px;
@@ -569,7 +569,8 @@ a.action > img {
 	margin-bottom: -1px;
 }
 
-#fileList a.action {
+#fileList a.action,
+#fileList div.favorite-mark {
 	display: inline;
 	padding: 17px 8px;
 	line-height: 50px;
@@ -617,7 +618,7 @@ a.action > img {
 	padding-left: 6px;
 }
 
-#fileList .action.action-favorite.permanent {
+#fileList .favorite-mark.permanent {
 	opacity: 1;
 }
 
@@ -716,12 +717,24 @@ table.dragshadow td.size {
 
 #filestable .filename .action .icon,
 #filestable .selectedActions a .icon,
+#filestable .filename .favorite-mark .icon,
 #controls .actions .button .icon {
 	display: inline-block;
 	vertical-align: middle;
 	background-size: 16px 16px;
 }
 
+#filestable .filename .favorite-mark {
+	// Override default icons to always hide the star icon and always show the
+	// starred icon even when hovered or focused.
+	& .icon-star {
+		background-image: none;
+	}
+	& .icon-starred {
+		background-image: url('../../../core/img/actions/starred.svg?v=1');
+	}
+}
+
 #filestable .filename .action .icon.hidden,
 #filestable .selectedActions a .icon.hidden,
 #controls .actions .button .icon.hidden {
-- 
cgit v1.2.3