Improve front end design of attachment

file/js/be.bastelstu.Chat.litcoffee

@@ -909,7 +909,7 @@ Create a message containing the uploaded attachment
 						$('#timsChatUpload > span.icon-spinner').removeClass('icon-spinner').addClass 'icon-ban-circle'
 						
 						# error message
-						$('#timsChatUploadContainer').append """<small class="innerError">#{WCF.Language.get('wcf.attachment.upload.error.tooLarge')}</small>"""
+						$('#timsChatUpload').addClass('uploadFailed').after """<small class="innerError">#{WCF.Language.get('wcf.attachment.upload.error.tooLarge')}</small>"""
 						
 						do @_error
 						li.addClass 'uploadFailed'
@@ -979,6 +979,7 @@ Create a message containing the uploaded attachment
 									</span>
 								</li>"""
 							li.parent().append deleteButton
+							fileUploaded = yes
 						else
 							$('#timsChatUpload .icon-spinner').removeClass('icon-spinner').addClass 'icon-ban-circle'
 							
@@ -990,20 +991,22 @@ Create a message containing the uploaded attachment
 							$('#timsChatUpload').addClass('uploadFailed').after """<small class="innerError">#{WCF.Language.get('wcf.attachment.upload.error.' + errorMessage)}</small>"""
 							do $('#timsChatUploadDropdownMenu .sendAttachmentButton').remove
 							do $('#timsChatUploadDropdownMenu .uploadButton').show
-						
+							fileUploaded = no
+							
 					do WCF.DOMNodeInsertedHandler.execute
 					
-					fileUploaded = yes
 					$('#timsChatUpload > span.icon').removeClass('icon-spinner').addClass 'icon-ok-sign'
 					do $('#timsChatUploadDropdownMenu .uploadProgress').remove
 					do $('#timsChatUploadDropdownMenu .sendAttachmentButton').show
 					
 				_error: (jqXHR, textStatus, errorThrown) ->
 					$('#timsChatUpload > .icon-spinner').removeClass('icon-spinner').addClass 'icon-ban-circle'
-					$('#timsChatUpload').addClass('uploadFailed').after """<small class="innerError">#{WCF.Language.get('wcf.attachment.upload.error.uploadFailed')}</small>"""
+					unless $('#timsChatUpload').hasClass('uploadFailed')
+						$('#timsChatUpload').addClass('uploadFailed').after """<small class="innerError">#{WCF.Language.get('wcf.attachment.upload.error.uploadFailed')}</small>"""
 					
 					do $('#timsChatUploadDropdownMenu .uploadProgress').remove
 					do $('#timsChatUploadDropdownMenu .uploadButton').show
+					fileUploaded = no
 					
 			Action = {}
 			Action.Delete = WCF.Action.Delete.extend

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') {
+	public function getFormattedMessage($type = 'text/html', $attachmentList = null) {
 		$message = $this->message;
 		$messageParser = \wcf\system\bbcode\MessageParser::getInstance();
 		$messageParser->setOutputType($type);
@@ -90,14 +90,16 @@ public function getFormattedMessage($type = 'text/html') {
 				$message = $messageParser->parse($message, false, false, true, false);
 			break;
 			case self::TYPE_ATTACHMENT:
-				$attachmentList = new \wcf\data\attachment\GroupedAttachmentList('be.bastelstu.chat.message');
+				if ($attachmentList === null) {
-				$attachmentList->getConditionBuilder()->add('attachment.objectID IN (?)', array($this->messageID));
+					$attachmentList = new \wcf\data\attachment\GroupedAttachmentList('be.bastelstu.chat.message');
-				$attachmentList->readObjects();
+					$attachmentList->getConditionBuilder()->add('attachment.objectID IN (?)', array($this->messageID));
+					$attachmentList->readObjects();
+				}
 				
 				AttachmentBBCode::setAttachmentList($attachmentList);
 				AttachmentBBCode::setObjectID($this->messageID);
 				
-				$message = $messageParser->parse('[attach]'. $message .'[/attach]', 0, 0, true, false);
+				$message = $messageParser->parse($message, false, false, true, false);
 			break;
 			case self::TYPE_WHISPER:
 			case self::TYPE_NORMAL:
@@ -147,12 +149,28 @@ 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(),
+			'formattedMessage' => $this->getFormattedMessage('text/html', ($attachmentList !== null) ? $attachmentList : null),
 			'formattedTime' => \wcf\util\DateUtil::format(\wcf\util\DateUtil::getDateTimeByTimestamp($this->time), 'H:i:s'),
 			'separator' => $separator,
-			'message' => $this->getFormattedMessage('text/plain'),
+			'message' => $this->getFormattedMessage('text/plain', ($attachmentList !== null) ? $attachmentList : null),
 			'sender' => (int) $this->sender,
 			'username' => $this->getUsername(),
 			'time' => (int) $this->time,
@@ -160,7 +178,8 @@ 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/lib/data/message/MessageAction.class.php

@@ -247,15 +247,12 @@ public function sendAttachment() {
 				'roomID' => $this->parameters['room']->roomID,
 				'sender' => WCF::getUser()->userID,
 				'username' => WCF::getUser()->username,
-				'receiver' => null,
 				'time' => TIME_NOW,
 				'type' => Message::TYPE_ATTACHMENT,
-				'message' => $this->parameters['objectID'],
+				'message' => '[attach]'. $this->parameters['objectID'] .'[/attach]',
-				'enableSmilies' => 0,
-				'enableHTML' => 0,
 				'color1' => $this->parameters['userData']['color1'],
 				'color2' => $this->parameters['userData']['color2'],
-				'additionalData' => null
+				'attachmentID' => $this->parameters['objectID']
 			)
 		));
 		

file/style/be.bastelstu.chat.less

@@ -10,7 +10,7 @@
 	from {
 		border-color: @wcfContainerBorderColor;
 	}
-
+	
 	to {
 		border-color: @wcfInputHoverBorderColor;
 	}
@@ -92,7 +92,7 @@
 				> .userAvatar, .userAvatar > .icon {
 					cursor: pointer;
 				}
-
+				
 				> .userAvatar {
 					&.large {
 						display: none;
@@ -102,7 +102,7 @@
 						display: block;
 					}
 				}
-
+				
 				&.active {
 					> .userAvatar {
 						&.large {

install.sql

@@ -22,10 +22,12 @@ CREATE TABLE chat1_message (
 	color1		INT(10)		NOT NULL DEFAULT 0,
 	color2		INT(10)		NOT NULL DEFAULT 0,
 	additionalData	TEXT		DEFAULT NULL,
+	attachmentID	INT(10)		DEFAULT NULL,
 	
 	KEY (roomID),
 	KEY (sender),
-	KEY (receiver)
+	KEY (receiver),
+	KEY (attachmentID)
 );
 
 DROP TABLE IF EXISTS chat1_room;
@@ -69,6 +71,7 @@ ALTER TABLE wcf1_user ADD COLUMN chatLastSeen INT(10) NOT NULL DEFAULT 0;
 ALTER TABLE chat1_message ADD FOREIGN KEY (receiver) REFERENCES wcf1_user (userID) ON DELETE CASCADE;
 ALTER TABLE chat1_message ADD FOREIGN KEY (roomID) REFERENCES chat1_room (roomID) ON DELETE CASCADE;
 ALTER TABLE chat1_message ADD FOREIGN KEY (sender) REFERENCES wcf1_user (userID) ON DELETE SET NULL;
+ALTER TABLE chat1_message ADD FOREIGN KEY (attachmentID) REFERENCES wcf1_attachment (attachmentID) ON DELETE CASCADE;
 
 ALTER TABLE chat1_room ADD FOREIGN KEY (owner) REFERENCES wcf1_user (userID) ON DELETE SET NULL;
 

language/de.xml

@@ -194,6 +194,8 @@ Probieren Sie den Chat neu zu laden<!-- , bei Risiken und Nebenwirkungen fragen
 		<item name="chat.message.5.unban"><![CDATA[hat {@$link} entbannt.]]></item>
 		<item name="chat.message.5.ungmute"><![CDATA[hat {@$link} global entknebelt.]]></item>
 		<item name="chat.message.5.ungban"><![CDATA[hat {@$link} global entbannt.]]></item>
+		<!-- 12 = TYPE_ATTACHMENT -->
+		<item name="chat.message.12"><![CDATA[hat eine Datei geteilt:]]></item>
 		
 		<item name="chat.message.color.success"><![CDATA[Die Farbe wurde erfolgreich geändert.]]></item>
 		<item name="chat.message.temproom.success"><![CDATA[Der temporäre Raum „{$roomName}“ wurde erfolgreich erstellt. Laden Sie die Raumliste neu, damit dieser sichtbar wird.]]></item>

template/chat.tpl

@@ -29,7 +29,8 @@
 						'wcf.attachment.upload.error.uploadFailed': '{lang}wcf.attachment.upload.error.uploadFailed{/lang}',
 						'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
 						'wcf.attachment.insert': '{lang}wcf.attachment.insert{/lang}',
-						'wcf.attachment.delete.sure': '{lang}wcf.attachment.delete.sure{/lang}'
+						'wcf.attachment.delete.sure': '{lang}wcf.attachment.delete.sure{/lang}',
+						'chat.message.{$messageTypes[TYPE_ATTACHMENT]}': '{lang}chat.message.{$messageTypes[TYPE_ATTACHMENT]}{/lang}'
 					});
 					
 					// Boot the chat
@@ -135,13 +136,13 @@
 			
 			*}{if MODULE_ATTACHMENT && $__wcf->session->getPermission('user.chat.canUploadAttachment')}{*
 			*}<li id="timsChatUploadContainer" class="dropdown" data-max-size="{$attachmentHandler->getMaxSize()}">
-				<a id="timsChatUpload" class="dropdownToggle button jsTooltip" title="{lang}wcf.global.button.upload{/lang}" data-toggle="timsChatUploadContainer">
+				<a id="timsChatUpload" class="dropdownToggle button jsTooltip" title="{lang}wcf.attachment.attachments{/lang}" data-toggle="timsChatUploadContainer">
 						<span class="icon icon16 icon-paper-clip"></span>
-						<span class="invisible">{lang}wcf.global.button.upload{/lang}</span>
+						<span class="invisible">{lang}wcf.attachment.attachments{/lang}</span>
 				</a>
 				<ul id="timsChatUploadDropdownMenu" class="dropdownMenu">
 					<li class="uploadButton" style="margin-top: 0;">
-						<span><label for="timsChatUploadInput">Upload file</label></span>
+						<span><label for="timsChatUploadInput">{lang}wcf.global.button.upload{/lang}</label></span>
 					</li>
 				</ul>
 			</li>{/if}{*

template/message.tpl

@@ -1,7 +1,7 @@
 {literal}
 	<div class="messageIcon">
-		{if $message.type == $messageTypes.LEAVE || $message.type == $messageTypes.JOIN}
+		{if $message.type == $messageTypes.LEAVE || $message.type == $messageTypes.JOIN || $message.type == $messageTypes.ATTACHMENT}
-			<span class="icon icon16 icon-{if $message.type == $messageTypes.LEAVE}signout{else}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}">
@@ -44,7 +44,24 @@
 					</li>
 				</ul>
 			{else}
-				<span class="text">{@$message.formattedMessage}</span>
+				{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">