Updated visual appearance of like summary

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 9689417ad44fc2540551afae003935427ab57dc7..81ac286b047b91eba515cb30a831cc3906b10e6f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Like/Handler.js
@@ -47,6 +47,8 @@ define(
                                isSingleItem: false,
                                markListItemAsActive: false,
                                renderAsButton: true,
+                               summaryPrepend: true,
+                               summaryUseIcon: true,
                                
                                // permissions
                                canDislike: false,
@@ -59,7 +61,7 @@ define(
                                buttonAppendToSelector: '',
                                buttonBeforeSelector: '.messageFooterButtons > .toTopLink',
                                containerSelector: '',
-                               summarySelector: '.messageFooterNotes'
+                               summarySelector: '.messageFooterGroup'
                        }, options);
                        
                        this.initContainers(options, objectType);
@@ -109,16 +111,29 @@ define(
                _buildWidget: function(element, elementData) {
                        // build summary
                        if (this._options.canViewSummary) {
-                               var summary, summaryContainer = elBySel(this._options.summarySelector, element), summaryContent;
+                               var summary, summaryContainer = elBySel(this._options.summarySelector, element), summaryContent, summaryIcon;
                                if (summaryContainer !== null) {
-                                       summary = elCreate('p');
+                                       summary = elCreate('div');
                                        summary.className = 'likesSummary';
                                        
+                                       if (this._options.summaryUseIcon) {
+                                               summaryIcon = elCreate('span');
+                                               summaryIcon.className = 'icon icon16 fa-thumbs-o-up';
+                                               summary.appendChild(summaryIcon);
+                                       }
+                                       
                                        summaryContent = elCreate('span');
+                                       summaryContent.className = 'likesSummaryContent';
                                        summaryContent.addEventListener('click', this._showSummary.bind(this, element));
                                        summary.appendChild(summaryContent);
                                        
-                                       summaryContainer.appendChild(summary);
+                                       if (this._options.summaryPrepend) {
+                                               DomUtil.prepend(summary, summaryContainer);
+                                       }
+                                       else {
+                                               summaryContainer.appendChild(summary);
+                                       }
+                                       
                                        elementData.summary = summaryContent;
                                        
                                        this._updateSummary(element);

diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 2dc37b2a4d6a0b4425ac37109157af4b56c8ecac..3c6e8595acf7cb80b378d444cc94218b95fb0852 100644 (file)
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -121,7 +121,7 @@
 /* content */
 .messageContent {
        display: flex;
-       flex: 1 auto;
+       flex: auto;
        flex-direction: column;
        margin-left: 30px;
        
@@ -179,7 +179,7 @@
 
 /* content - body */
 .messageBody {
-       flex: 1 1 auto;
+       flex: auto;
        
        &.editor {
                align-items: center;
@@ -191,7 +191,7 @@
                }
                
                > .editorContainer {
-                       flex: 1 auto;
+                       flex: auto;
                }
        }
 }
@@ -202,18 +202,14 @@
        margin-top: 20px;
 }
 
-.messageFooterNote,
-.messageFooterNotes > .likesSummary {
+.messageFooterNote {
        border-left: 5px solid $wcfContentBorderInner;
        color: $wcfContentDimmedText;
+       margin-top: 10px;
        padding: 5px 10px;
        
        @extend .wcfFontSmall;
        
-       &:not(:first-child) {
-               margin-top: 10px;
-       }
-       
        a {
                color: $wcfContentDimmedLink;
                
@@ -224,6 +220,30 @@
        }
 }
 
+.messageFooterGroup {
+       align-items: center;
+       display: flex;
+       flex-wrap: wrap;
+       margin-top: 10px;
+       
+       > .likesSummary {
+               color: $wcfContentDimmedText;
+               cursor: pointer;
+               flex: 0 0 auto;
+               
+               @extend .wcfFontSmall;
+               
+               > .icon {
+                       color: $wcfContentDimmedText;
+                       margin-right: 5px;
+               }
+       }
+       
+       > .messageFooterButtons {
+               flex: auto;
+       }
+}
+
 .messageSignature {
        border-top: 1px solid rgb(238, 238, 238);
        opacity: .6;