Show attachments as blocks instead of list to allow enhanced actions

css/mail.css

@@ -604,20 +604,30 @@ input.submit-message,
 .mail-message-attachments {
 	margin-bottom: 20px;
 }
-.mail-message-attachment {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.mail-message-attachments .attachments > div {
+	position: relative;
+	display: inline-block;
+	width: calc(25% - 12px);
+	border: 1px solid #f5f5f5;
+	margin: 5px;
+	padding: 6px;
 }
-.mail-message-attachment-image {
-	margin-bottom: 32px;
+.mail-message-attachments .mail-attached-image {
+	max-width: 100%;
+	max-height: 100px;
 }
 .attachment-save-to-cloud,
 .attachment-download {
+	position: absolute;
 	height: 32px;
-	min-width: 32px;
-	float: left;
-	display: inline-block;
+	width: 32px;
+	bottom: 3px;
+}
+.attachment-save-to-cloud {
+	right: 3px;
+}
+.attachment-download {
+	right: 41px;
 }
 /* show icon + text for Download all button
 	as well as when there is only one attachment */
@@ -628,6 +638,14 @@ input.submit-message,
 	background-position: 9px center;
 	padding-left: 32px;
 }
+.attachment-name {
+	display: inline-block;
+	width: calc(100% - 110px);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
 /* show attachment size less prominent */
 .attachment-size {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

js/templates/message-attachment.html

@@ -0,0 +1,8 @@
+{{#if isImage}}
+<img class="mail-attached-image" src="{{downloadUrl}}">
+<br>
+{{/if}}
+<img class="attachment-icon" src="{{mimeUrl}}" />
+<span class="attachment-name">{{fileName}} <span class="attachment-size">({{humanFileSize size}})</span></span>
+<a class="button icon-download attachment-download" href="{{downloadUrl}}" title="{{ t 'Download attachment' }}"></a>
+<button class="icon-folder attachment-save-to-cloud" title="{{ t 'Save to Files' }}"></button>

js/templates/message-attachments.html

@@ -0,0 +1,40 @@
+<div class="attachments">
+
+</div>
+<p>
+	<button data-message-id="{{id}}" class="icon-folder attachments-save-to-cloud">{{ t 'Save all to Files' }}</button>
+</p>
+
+<!-- {{#if attachment}}
+<ul>
+	<li class="mail-message-attachment mail-message-attachment-single" data-message-id="{{attachment.messageId}}" data-attachment-id="{{attachment.id}}" data-attachment-mime="{{attachment.mime}}">
+		{{#if attachment.isImage}}
+		<img class="mail-attached-image" src="{{attachment.downloadUrl}}">
+		<br>
+		{{/if}}
+		<img class="attachment-icon" src="{{attachment.mimeUrl}}" />
+		{{attachment.fileName}} <span class="attachment-size">({{humanFileSize attachment.size}})</span><br/>
+		<a class="button icon-download attachment-download" href="{{attachment.downloadUrl}}">{{ t 'Download attachment' }}</a>
+		<button class="icon-folder attachment-save-to-cloud">{{ t 'Save to Files' }}</button>
+	</li>
+</ul>
+{{/if}}
+{{#if attachments}}
+<ul>
+	{{#each attachments}}
+	<li class="mail-message-attachment {{#if isImage}}mail-message-attachment-image{{/if}}" data-message-id="{{messageId}}" data-attachment-id="{{id}}" data-attachment-mime="{{mime}}">
+		{{#if isImage}}
+		<img class="mail-attached-image" src="{{downloadUrl}}">
+		<br>
+		{{/if}}
+		<a class="button icon-download attachment-download" href="{{downloadUrl}}" title="{{ t 'Download attachment' }}"></a>
+		<button class="icon-folder attachment-save-to-cloud" title="{{ t 'Save to Files' }}"></button>
+		<img class="attachment-icon" src="{{mimeUrl}}" />
+		{{fileName}} <span class="attachment-size">({{humanFileSize size}})</span>
+	</li>
+	{{/each}}
+</ul>
+<p>
+	<button data-message-id="{{id}}" class="icon-folder attachments-save-to-cloud">{{ t 'Save all to Files' }}</button>
+</p>
+{{/if}} -->

js/templates/message.html

@@ -33,41 +33,7 @@ <h2 title="{{subject}}">{{subject}}</h2>
 	</div>
 	{{/if}}
 
-	<div class="mail-message-attachments">
-		{{#if attachment}}
-		<ul>
-			<li class="mail-message-attachment mail-message-attachment-single" data-message-id="{{attachment.messageId}}" data-attachment-id="{{attachment.id}}" data-attachment-mime="{{attachment.mime}}">
-				{{#if attachment.isImage}}
-					<img class="mail-attached-image" src="{{attachment.downloadUrl}}">
-					<br>
-				{{/if}}
-				<img class="attachment-icon" src="{{attachment.mimeUrl}}" />
-				{{attachment.fileName}} <span class="attachment-size">({{humanFileSize attachment.size}})</span><br/>
-				<a class="button icon-download attachment-download" href="{{attachment.downloadUrl}}">{{ t 'Download attachment' }}</a>
-				<button class="icon-folder attachment-save-to-cloud">{{ t 'Save to Files' }}</button>
-			</li>
-		</ul>
-		{{/if}}
-		{{#if attachments}}
-		<ul>
-			{{#each attachments}}
-			<li class="mail-message-attachment {{#if isImage}}mail-message-attachment-image{{/if}}" data-message-id="{{messageId}}" data-attachment-id="{{id}}" data-attachment-mime="{{mime}}">
-				{{#if isImage}}
-					<img class="mail-attached-image" src="{{downloadUrl}}">
-					<br>
-				{{/if}}
-				<a class="button icon-download attachment-download" href="{{downloadUrl}}" title="{{ t 'Download attachment' }}"></a>
-				<button class="icon-folder attachment-save-to-cloud" title="{{ t 'Save to Files' }}"></button>
-				<img class="attachment-icon" src="{{mimeUrl}}" />
-				{{fileName}} <span class="attachment-size">({{humanFileSize size}})</span>
-			</li>
-			{{/each}}
-		</ul>
-		<p>
-			<button data-message-id="{{id}}" class="icon-folder attachments-save-to-cloud">{{ t 'Save all to Files' }}</button>
-		</p>
-		{{/if}}
-	</div>
+	<div class="mail-message-attachments"></div>
 	<div id="reply-composer"></div>
 	<input type="button" id="forward-button" value="{{ t 'Forward' }}">
 </div>

js/views/app.js

@@ -102,11 +102,6 @@ define(function(require) {
 			// Resize iframe
 			var iframe = $('#mail-content iframe');
 			iframe.height(iframe.contents().find('html').height() + 20);
-
-			// resize width of attached images
-			$('.mail-message-attachments .mail-attached-image').each(function() {
-				$(this).css('max-width', $('.mail-message-body').width());
-			});
 		},
 		render: function() {
 			// This view doesn't need rendering

js/views/message.js

@@ -17,8 +17,10 @@ define(function(require) {
 	var Handlebars = require('handlebars');
 	var _ = require('underscore');
 	var $ = require('jquery');
+	var Attachments = require('models/attachments');
 	var HtmlHelper = require('util/htmlhelper');
 	var ComposerView = require('views/composer');
+	var MessageAttachmentsView = require('views/messageattachments');
 	var MessageTemplate = require('text!templates/message.html');
 
 	return Marionette.LayoutView.extend({
@@ -30,7 +32,8 @@ define(function(require) {
 			messageIframe: 'iframe'
 		},
 		regions: {
-			replyComposer: '#reply-composer'
+			replyComposer: '#reply-composer',
+			attachments: '.mail-message-attachments'
 		},
 		initialize: function(options) {
 			this.message = options.model;
@@ -127,19 +130,14 @@ define(function(require) {
 		onShow: function() {
 			this.ui.messageIframe.on('load', _.bind(this.onIframeLoad, this));
 
-			// Set max width for attached images
-			var _this = this;
-			this.$('.mail-message-attachments img.mail-attached-image').each(function() {
-				$(this).css({
-					'max-width': _this.$('.mail-message-body').width(),
-					'height': 'auto'
-				});
-			});
-
 			// TODO: add folder/account reference to message
 			var account = require('state').accounts.get(this.message.get('accountId'));
 			var folderId = this.message.get('folderId');
 
+			this.attachments.show(new MessageAttachmentsView({
+				collection: new Attachments(this.message.get('attachments'))
+			}));
+
 			// setup reply composer view
 			this.replyComposer.show(new ComposerView({
 				//el: this.$('#reply-composer'),

js/views/messageattachment.js

@@ -0,0 +1,35 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Handlebars = require('handlebars');
+	var Marionette = require('marionette');
+	var MessageAttachmentTemplate = require('text!templates/message-attachment.html');
+
+	/**
+	 * @class MessageAttachmentView
+	 */
+	var MessageAttachmentView = Marionette.ItemView.extend({
+		template: Handlebars.compile(MessageAttachmentTemplate)
+	});
+
+	return MessageAttachmentView;
+});

js/views/messageattachments.js

@@ -0,0 +1,45 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Handlebars = require('handlebars');
+	var Marionette = require('marionette');
+	var AttachmentView = require('views/messageattachment');
+	var AttachmentsTemplate = require('text!templates/message-attachments.html');
+
+	/**
+	 * 
+	 * @type MessageAttachmentsView
+	 */
+	var MessageAttachmentsView = Marionette.CompositeView.extend({
+		/**
+		 * @lends Marionette.CompositeView
+		 */
+		template: Handlebars.compile(AttachmentsTemplate),
+		childView: AttachmentView,
+		childViewContainer: '.attachments',
+		initialize: function(options) {
+			console.log(arguments);
+		}
+	});
+
+	return MessageAttachmentsView;
+});