From 128847afed80c493c3eee54f5b625651644d0577 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 31 Jan 2016 22:38:09 +0100
Subject: [PATCH] Updated visual appearance of like summary

---
 .../files/js/WoltLab/WCF/Ui/Like/Handler.js   | 23 +++++++++--
 wcfsetup/install/files/style/ui/message.scss  | 38 ++++++++++++++-----
 2 files changed, 48 insertions(+), 13 deletions(-)

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 9689417ad4..81ac286b04 100644
--- 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 2dc37b2a4d..3c6e8595ac 100644
--- 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;
-- 
2.20.1