Improve attachments in UI

file/lib/data/message/Message.class.php

@@ -69,7 +69,7 @@ public function __toString() {
 	 * @param	string	$outputType	outputtype for messageparser
 	 * @return	string
 	 */
-	public function getFormattedMessage($type = 'text/html', $attachmentList = null) {
+	public function getFormattedMessage($type = 'text/html') {
 		$message = $this->message;
 		$messageParser = \wcf\system\bbcode\MessageParser::getInstance();
 		$messageParser->setOutputType($type);
@@ -90,11 +90,9 @@ public function getFormattedMessage($type = 'text/html', $attachmentList = null)
 				$message = $messageParser->parse($message, false, false, true, false);
 			break;
 			case self::TYPE_ATTACHMENT:
-				if ($attachmentList === null) {
 				$attachmentList = new \wcf\data\attachment\GroupedAttachmentList('be.bastelstu.chat.message');
 				$attachmentList->getConditionBuilder()->add('attachment.objectID IN (?)', array($this->messageID));
 				$attachmentList->readObjects();
-				}
 				
 				AttachmentBBCode::setAttachmentList($attachmentList);
 				AttachmentBBCode::setObjectID($this->messageID);
@@ -149,28 +147,12 @@ public function jsonify($raw = false) {
 			break;
 		}
 		
-		$attachment = null;
-		$attachmentList = null;
-		
-		if ($this->attachmentID !== 0) {
-			$attachmentList = new \wcf\data\attachment\GroupedAttachmentList('be.bastelstu.chat.message');
-			$attachmentList->getConditionBuilder()->add('attachment.attachmentID = ?', array($this->attachmentID));
-			$attachmentList->getConditionBuilder()->add('attachment.objectID = ?', array($this->messageID));
-			$attachmentList->readObjects();
-			
-			if (isset($attachmentList->objectIDs[0]) && $attachmentList->objectIDs[0] != 0) {
-				$attachment = $attachmentList->objects[$attachmentList->objectIDs[0]];
-				$attachment->data['imageinfo'] = WCF::getLanguage()->getDynamicVariable('wcf.attachment.image.info', array('attachment' => $attachment));
-				$attachment = $attachment->data;
-			}
-		}
-		
 		$array = array(
 			'formattedUsername' => $this->getUsername(true),
-			'formattedMessage' => $this->getFormattedMessage('text/html', ($attachmentList !== null) ? $attachmentList : null),
+			'formattedMessage' => $this->getFormattedMessage('text/html'),
 			'formattedTime' => \wcf\util\DateUtil::format(\wcf\util\DateUtil::getDateTimeByTimestamp($this->time), 'H:i:s'),
 			'separator' => $separator,
-			'message' => $this->getFormattedMessage('text/plain', ($attachmentList !== null) ? $attachmentList : null),
+			'message' => $this->getFormattedMessage('text/plain'),
 			'sender' => (int) $this->sender,
 			'username' => $this->getUsername(),
 			'time' => (int) $this->time,
@@ -178,8 +160,7 @@ public function jsonify($raw = false) {
 			'type' => (int) $this->type,
 			'roomID' => (int) $this->roomID,
 			'messageID' => (int) $this->messageID,
-			'additionalData' => $this->additionalData,
+			'additionalData' => $this->additionalData
-			'attachment' => $attachment
 		);
 		
 		if ($raw) return $array;

file/style/be.bastelstu.chat.less

@@ -192,11 +192,26 @@
 					padding: 5px 20px 5px 5px;
 					position: relative;
 					
-					.userAvatar {
+					> div.avatarContainer {
+						position: absolute;
+						width: 40px;
+						height: 38px;
+						
+						> .userAvatar {
 							float: left;
 							margin-left: 16px;
 						}
 						
+						> .avatarExtra {
+							box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+							position: absolute;
+							left: 24px;
+							bottom: -2px;
+							width: 16px;
+							height: 16px;
+						}
+					}
+					
 					.innerMessage {
 						margin-left: 46px;
 						padding: 2px 5px 5px;
@@ -219,11 +234,9 @@
 					}
 					
 					&.bubble {
+						> div.avatarContainer {
 							.userAvatar {
 								margin-left: 0;
-							
-							.icon {
-								padding: 2px;
 							}
 						}
 						

template/message.tpl

@@ -1,13 +1,14 @@
 {literal}
+	{if $message.type == $messageTypes.LEAVE || $message.type == $messageTypes.JOIN}
 		<div class="messageIcon">
-		{if $message.type == $messageTypes.LEAVE || $message.type == $messageTypes.JOIN || $message.type == $messageTypes.ATTACHMENT}
+			<span class="icon icon16 icon-{if $message.type == $messageTypes.LEAVE}signout{elseif $message.type == $messageTypes.JOIN}signin{/if}"></span>
-			<span class="icon icon16 icon-{if $message.type == $messageTypes.LEAVE}signout{elseif $message.type == $messageTypes.JOIN}signin{else}paperclip{/if}"></span>
-		{/if}
 		</div>
-	<div class="innerMessageContainer{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.INFORMATION} bubble{/if}{if $message.type == $messageTypes.WHISPER && $message.sender != $__wcf.User.userID} right{/if}">
+	{/if}
+	<div class="innerMessageContainer{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.INFORMATION || $message.type == $messageTypes.ATTACHMENT} bubble{/if}{if $message.type == $messageTypes.WHISPER && $message.sender != $__wcf.User.userID} right{/if}">
+		<div class="avatarContainer">
 			<div class="userAvatar framed">
 				{if $message.type != $messageTypes.INFORMATION}
-				{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER}
+					{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
 						{@$message.avatar[32]}
 					{else}
 						{@$message.avatar[16]}
@@ -16,6 +17,12 @@
 					<span class="icon icon32 icon-info-sign"></span>
 				{/if}
 			</div>
+			{if $message.type == $messageTypes.ATTACHMENT}
+				<small class="framed avatarExtra">
+					<span class="icon icon16 icon-paperclip"></span>
+				</small>
+			{/if}
+		</div>
 		<div class="innerMessage">
 			<span class="username">
 			{if ($message.type == $messageTypes.WHISPER && $message.sender == WCF.User.userID) || $message.type != $messageTypes.WHISPER}
@@ -36,33 +43,17 @@
 			
 			<time>{@$message.formattedTime}</time>
 			
-			{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER}
+			{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
+				{if $message.type == $messageTypes.ATTACHMENT}<span>{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang}</span>{/if}
 				<ul class="text">
 					<li>
 						{if $message.isFollowUp} <time>{@$message.formattedTime}</time>{/if}
 						{@$message.formattedMessage}
 					</li>
 				</ul>
-			{else}
-				{if $message.type == $messageTypes.ATTACHMENT && $message.attachment != null}
-					{if parseInt($message.attachment.isImage) == 1}
-						<span class="text">{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang}</span>
-						<ul>
-							<li class="attachmentThumbnail">
-								{@$message.formattedMessage}
-								<div title="{$message.attachment.imageinfo}">
-									<p>{$message.attachment.filename}</p>
-									<small>{$message.attachment.imageinfo}</small>
-								</div>
-							</li>
-						</ul>
-					{else}
-						<span class="text">{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang} {@$message.formattedMessage}</span>
-					{/if}
 			{else}
 				<span class="text">{@$message.formattedMessage}</span>
 			{/if}
-			{/if}
 		</div>
 		<span class="markContainer">
 			<input type="checkbox" value="{@$message.messageID}" />