From aa7158b62e55905fa3b2db647db64a0011a77880 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 16 Jun 2016 16:11:27 +0200
Subject: [PATCH] Improved styling of like counters

---
 .../templates/articleListItems.tpl            |  5 ++--
 .../files/js/WoltLab/WCF/Ui/Like/Handler.js   |  2 ++
 wcfsetup/install/files/style/ui/like.scss     | 25 +++++++++++++++++++
 wcfsetup/install/files/style/ui/message.scss  | 15 -----------
 .../install/files/style/ui/messageGroup.scss  |  2 +-
 5 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/like.scss

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index 17915318d6..1935b63afd 100644
--- a/com.woltlab.wcf/templates/articleListItems.tpl
+++ b/com.woltlab.wcf/templates/articleListItems.tpl
@@ -22,10 +22,9 @@
 								</li>
 								
 								{if MODULE_LIKE && $__wcf->getSession()->getPermission('user.like.canViewLike')}
-									<li>
+									<li class="wcfLikeCounter{if $article->cumulativeLikes > 0} likeCounterLiked{elseif $article->cumulativeLikes < 0}likeCounterDisliked{/if}">
 										{if $article->likes || $article->dislikes}
-											<span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>
-											{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}&plusmn;{/if}{#$article->cumulativeLikes}
+											<span class="icon icon16 fa-thumbs-o-{if $article->cumulativeLikes < 0}down{else}up{/if} jsTooltip" title="{lang likes=$article->likes dislikes=$article->dislikes}wcf.like.tooltip{/lang}"></span>{if $article->cumulativeLikes > 0}+{elseif $article->cumulativeLikes == 0}&plusmn;{/if}{#$article->cumulativeLikes}
 										{/if}
 									</li>
 								{/if}
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
index 9080f9638a..ef6aeabaf1 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
@@ -266,10 +266,12 @@ define(
 				var content = '<span class="icon icon16 fa-thumbs-o-' + (cumulativeLikes < 0 ? 'down' : 'up' ) + '"></span><span class="wcfLikeValue">';
 				if (cumulativeLikes > 0) {
 					content += '+' + StringUtil.addThousandsSeparator(cumulativeLikes);
+					data.badge.classList.add('likeCounterLiked');
 				}
 				else if (cumulativeLikes < 0) {
 					// U+2212 = minus sign
 					content += '\u2212' + StringUtil.addThousandsSeparator(Math.abs(cumulativeLikes));
+					data.badge.classList.add('likeCounterDisliked');
 				}
 				else {
 					// U+00B1 = plus-minus sign
diff --git a/wcfsetup/install/files/style/ui/like.scss b/wcfsetup/install/files/style/ui/like.scss
new file mode 100644
index 0000000000..0b46896120
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/like.scss
@@ -0,0 +1,25 @@
+.likesSummary {
+	color: $wcfContentDimmedText;
+	cursor: pointer;
+	flex: 0 0 auto;
+	
+	> .icon {
+		color: $wcfContentDimmedText;
+		margin-right: 5px;
+	}
+}
+
+.wcfLikeCounter {
+	color: $wcfContentDimmedText;
+	
+	.icon {
+		color: inherit !important;
+	}
+	
+	&.likeCounterLiked {
+		color: #060 !important;
+	}
+	&.likeCounterDisliked {
+		color: #900 !important;
+	}
+}
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 350989c052..503d91cb22 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -319,10 +319,6 @@
 	
 	@include inlineList;
 	@include wcfFontSmall;
-	
-	.wcfLikeCounter {
-		color: $wcfContentDimmedText;
-	}
 }
 
 .messageQuickOptions {
@@ -430,17 +426,6 @@
 	}
 }
 
-.likesSummary {
-	color: $wcfContentDimmedText;
-	cursor: pointer;
-	flex: 0 0 auto;
-	
-	> .icon {
-		color: $wcfContentDimmedText;
-		margin-right: 5px;
-	}
-}
-
 .messageSignature {
 	border-top: 1px solid $wcfContentBorderInner;
 	opacity: .6;
diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss
index 050241c2a3..da476a433f 100644
--- a/wcfsetup/install/files/style/ui/messageGroup.scss
+++ b/wcfsetup/install/files/style/ui/messageGroup.scss
@@ -140,7 +140,7 @@
 		> .statusDisplay {
 			display: flex;
 			float: right;
-			opacity: .6;
+			opacity: .75;
 			transition: opacity .12s;
 			
 			> .statusIcons {
-- 
2.20.1