Improve styling of the react button

See #2508

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 17da51536114e97cd2f50ada28a4b3c39b410720..098fdbda05cf98593c588e42179de4a2aff0d04b 100644 (file)
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -164,7 +164,7 @@
                                {if MODULE_LIKE && $__wcf->session->getPermission('user.like.canLike') && (LIKE_ALLOW_FOR_OWN_CONTENT || $article->userID != $__wcf->user->userID)}
                                        <div class="col-xs-12 col-md-6">
                                                <ul class="articleLikeButtons buttonGroup">
-                                                       <li class="jsOnly"><span class="button reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}">{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{@$__wcf->getReactionHandler()->getReactionTypeByID($articleLikeData[$article->articleID]->reactionTypeID)->renderIcon()}{else}<img src="{$__wcf->getPath()}/images/reaction/reactionIcon.svg" class="reactionType" alt="">{/if}</span></li>
+                                                       <li class="jsOnly"><span class="button reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{$articleLikeData[$article->articleID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></span></li>
                                                        <li class="jsReportArticle jsOnly" data-object-id="{@$articleContent->articleContentID}"><a href="#" title="{lang}wcf.moderation.report.reportContent{/lang}" class="button jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.moderation.report.reportContent{/lang}</span></a></li>
                                                </ul>
                                        </div>

diff --git a/com.woltlab.wcf/templates/commentList.tpl b/com.woltlab.wcf/templates/commentList.tpl
index 98ea76a0cbc1dd478dc09597986e8ddaaf812fd6..d2417b3fc70aea63058ffc83bc8757560334e87f 100644 (file)
--- a/com.woltlab.wcf/templates/commentList.tpl
+++ b/com.woltlab.wcf/templates/commentList.tpl
@@ -56,7 +56,7 @@
                                                                {/if}
                                                                
                                                                {if MODULE_LIKE && $__wcf->session->getPermission('user.like.canLike') && (LIKE_ALLOW_FOR_OWN_CONTENT || $comment->userID != $__wcf->user->userID)}
-                                                                       <li class="jsOnly"><a href="#" class="reactButton jsTooltip" title="{lang}wcf.reactions.react{/lang}">{if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID}{@$__wcf->getReactionHandler()->getReactionTypeByID($likeData[comment][$comment->commentID]->reactionTypeID)->renderIcon()}{else}<img src="{$__wcf->getPath()}/images/reaction/reactionIcon.svg" class="reactionType">{/if} <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>
+                                                                       <li class="jsOnly"><a href="#" class="reactButton jsTooltip {if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $likeData[comment][$comment->commentID]|isset && $likeData[comment][$comment->commentID]->reactionTypeID}{$likeData[comment][$comment->commentID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>
                                                                {/if}
                                                                
                                                                {event name='commentOptions'}

diff --git a/com.woltlab.wcf/templates/commentResponseList.tpl b/com.woltlab.wcf/templates/commentResponseList.tpl
index 85e5f30184611dc5bcfb106d8b26dd64672b87ad..4997ac97f07ed990cc21be49d88ec82c15254efb 100644 (file)
--- a/com.woltlab.wcf/templates/commentResponseList.tpl
+++ b/com.woltlab.wcf/templates/commentResponseList.tpl
@@ -48,7 +48,7 @@
                                                                <li class="jsReportCommentResponse jsOnly" data-object-id="{@$response->responseID}"><a href="#" title="{lang}wcf.moderation.report.reportContent{/lang}" class="jsTooltip"><span class="icon icon16 fa-exclamation-triangle"></span> <span class="invisible">{lang}wcf.moderation.report.reportContent{/lang}</span></a></li>
                                                        {/if}
                                                        
-                                                       {if MODULE_LIKE && $__wcf->session->getPermission('user.like.canLike') && (LIKE_ALLOW_FOR_OWN_CONTENT || $response->userID != $__wcf->user->userID)}<li class="jsOnly"><a href="#" class="reactButton jsTooltip" title="{lang}wcf.reactions.react{/lang}">{if $likeData[response][$response->responseID]|isset && $likeData[response][$response->responseID]->reactionTypeID}{@$__wcf->getReactionHandler()->getReactionTypeByID($likeData[response][$response->responseID]->reactionTypeID)->renderIcon()}{else}<img src="{$__wcf->getPath()}/images/reaction/reactionIcon.svg" class="reactionType">{/if} <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>{/if}
+                                                       {if MODULE_LIKE && $__wcf->session->getPermission('user.like.canLike') && (LIKE_ALLOW_FOR_OWN_CONTENT || $response->userID != $__wcf->user->userID)}<li class="jsOnly"><a href="#" class="reactButton jsTooltip {if $likeData[response][$comment->commentID]|isset && $likeData[response][$comment->commentID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $likeData[response][$comment->commentID]|isset && $likeData[response][$comment->commentID]->reactionTypeID}{$likeData[response][$comment->commentID]->reactionTypeID}{else}0{/if}"><span class="icon icon16 fa-smile-o"></span> <span class="invisible">{lang}wcf.reactions.react{/lang}</span></a></li>{/if}
                                                        
                                                        {event name='commentOptions'}
                                                </ul>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
index 6e8c813b3fbffa10908fdcfe30c5663f42e14098..35dd5751e1a10ad93a56236647b8fa1fe22d9ab8 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Like/Handler.js
@@ -222,17 +222,14 @@ define(
                        button.href = '#';
                        button.title = title;
                        
-                       var icon = elCreate('img');
-                       icon.className = 'reactionType';
+                       var icon = elCreate('span');
+                       icon.className = 'icon icon16 fa-smile-o';
                        
                        if (reactionTypeID === undefined || reactionTypeID == 0) {
-                               icon.src = WCF_PATH+'images/reaction/reactionIcon.svg';
                                elData(icon, 'reaction-type-id', 0);
                        }
                        else {
-                               icon.src = REACTION_TYPES[reactionTypeID].iconPath;
-                               elData(icon, 'reaction-type-id', reactionTypeID);
-                               
+                               elData(button, 'reaction-type-id', reactionTypeID);
                                button.classList.add("active");
                        }
                        

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
index 83911b8d52814a711c3426c380bc4ced3edbb127..67130a5f51bbed348d648d167ffb5cacb7240d3f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Reaction/Handler.js
@@ -166,34 +166,29 @@ define(
                                messageFooterGroup.appendChild(button);
                        },
                        
-                       _rebuildMobileView: function(objectID) {
-                               if (this._containers.get(objectID).reactButton.closest('.messageFooterGroup > .jsMobileNavigation')) {
-                                       var messageFooterGroup = this._containers.get(objectID).reactButton.parentElement.parentElement.parentElement;
-                                       var button = elBySel('.mobileReactButton', messageFooterGroup);
-                                       
-                                       if (button !== null) {
-                                               button.innerHTML = this._containers.get(objectID).reactButton.innerHTML;
-                                       }
-                               }
-                       },
-                       
                        _updateReactButton: function(objectID, reactionTypeID) {
                                if (reactionTypeID) {
                                        this._containers.get(objectID).reactButton.classList.add('active');
-                                       
-                                       // update icon 
-                                       elBySel('img', this._containers.get(objectID).reactButton).src = REACTION_TYPES[reactionTypeID].iconPath;
-                                       elData(elBySel('img', this._containers.get(objectID).reactButton), 'reaction-type-id', reactionTypeID);
+                                       elData(this._containers.get(objectID).reactButton, 'reaction-type-id', reactionTypeID);
                                }
                                else {
+                                       elData(this._containers.get(objectID).reactButton, 'reaction-type-id', 0);
                                        this._containers.get(objectID).reactButton.classList.remove('active');
-                                       
-                                       // update icon
-                                       elBySel('img', this._containers.get(objectID).reactButton).src = WCF_PATH + 'images/reaction/reactionIcon.svg';
-                                       elData(elBySel('img', this._containers.get(objectID).reactButton), 'reaction-type-id', 0);
                                }
+                       },
+                       
+                       _markReactionAsActive() {
+                               var reactionTypeID = elData(this._containers.get(this._popoverCurrentObjectId).reactButton, 'reaction-type-id');
                                
-                               this._rebuildMobileView(objectID);
+                               //  clear old active state
+                               var elements = elBySelAll('.reactionTypeButton.active', this._getPopover());
+                               for (var i = 0, length = elements.length; i < length; i++) {
+                                       elements[i].classList.remove('active');
+                               }
+                               
+                               if (reactionTypeID != 0) {
+                                       elBySel('.reactionTypeButton[data-reaction-type-id="'+reactionTypeID+'"]', this._getPopover()).classList.add('active');
+                               }
                        },
                        
                        /**
@@ -228,14 +223,15 @@ define(
                                        this._closePopover(this._popoverCurrentObjectId, this._containers.get(this._popoverCurrentObjectId).reactButton);
                                }
                                
+                               this._popoverCurrentObjectId = objectId;
+                               this._markReactionAsActive();
+                               
                                UiAlignment.set(this._getPopover(), element, {
                                        pointer: true,
                                        horizontal: (this._options.isButtonGroupNavigation) ? 'left' :'center',
                                        vertical: 'top'
                                });
                                
-                               this._popoverCurrentObjectId = objectId;
-                               
                                if (this._options.isButtonGroupNavigation) {
                                        // find nav element
                                        var nav = element.closest('nav');

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index 6be622e99bcbc0d83d030667700be474ba446cda..27a74dcc7a75de52a9dbaf9aa301841710aab256 100644 (file)
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -40,7 +40,6 @@ img.reactionType {
        background-color: $wcfContentBackground;
        border-radius: 3px;
        color: $wcfContentText;
-       padding: 15px;
        
        a {
                color: $wcfContentLink;
@@ -60,29 +59,52 @@ img.reactionType {
        }
        
        @include screen-md-down {
+               padding: 5px 0px;
+               
                > ul > li.reactionTypeButton {
                        margin: 0px;
                        display: block;
-                       padding: 5px 10px;
+                       padding: 5px 25px;
                }
                
                > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
                        vertical-align: middle;
                        padding-left: 5px;
                }
+               
+               > ul > li.reactionTypeButton.active {
+                       background-color: $wcfContentBorderInner; // @TODO maybe find a better color value
+               }
        }
        
        @include screen-lg {
+               padding: 5px 15px;
+               
                > ul > li.reactionTypeButton > .reactionTypeButtonTitle {
                        display: none;
                }
                
                > ul > li.reactionTypeButton {
-                       display: inline;
+                       display: inline-block;
+                       padding-top: 10px;
+                       padding-bottom: 10px;
                        cursor: pointer;
                        margin-left: 10px;
                }
                
+               > ul > li.reactionTypeButton.active {
+                       padding-left: 5px;
+                       padding-right: 5px;
+               }
+               
+               > ul > li.reactionTypeButton.active > img {
+                       transform: scale(1.4);
+               }
+               
+               > ul > li.reactionTypeButton.active > img:hover {
+                       transform: scale(1.2);
+               }
+               
                > ul > li.reactionTypeButton:first-child {
                        margin-left: 0px;
                }