Improved styling of like counters

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index 17915318d6b9a1ab5113ca0ca2d9a56cc6c61562..1935b63afdcb6c4ee86c2ef51e81e5819f2857b9 100644 (file)
--- 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 9080f9638a7219ffdf0a3648da8c86fffa333591..ef6aeabaf16a03651ea7265c9e8bc55adf62698c 100644 (file)
--- 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 (file)
index 0000000..0b46896
--- /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 350989c052aaedddd6af211404636eb8f057dea5..503d91cb2201ba52934a5798ae8b578c62dbc5d8 100644 (file)
--- 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 050241c2a388bc39c59cc21fdf3e343b6b4f4b0d..da476a433f93f227c7e893ca39b42199875a4c50 100644 (file)
--- 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 {