Merge pull request #1301 from owncloud/reply-button-placement

fix placement of reply button, ref #900

Author: Gomez

css/mail.css

@@ -421,9 +421,25 @@ textarea.message-body {
 textarea.reply {
 	height: 100px;
 }
-input.submit-message {
-	float: right;
-	margin-right: 0;
+input.submit-message,
+.submit-message-wrapper {
+	position: fixed;
+	bottom: 10px;
+	right: 15px;
+}
+.submit-message-wrapper {
+	position: fixed;
+	height: 36px;
+	width: 60px;
+}
+
+.submit-message-wrapper-inside {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 100;
 }
 #reply-msg {
 	float: left;

js/communication.js

@@ -161,7 +161,6 @@ define(function(require) {
 			},
 			complete: function() {
 			},
-			accountId: null,
 			draftUID: null
 		};
 		_.defaults(options, defaultOptions);
@@ -187,7 +186,7 @@ define(function(require) {
 				subject: message.subject,
 				body: message.body,
 				attachments: message.attachments,
-				folderId: options.folderId,
+				folderId: options.folder ? options.folder.get('id') : null,
 				messageId: options.messageId,
 				draftUID: options.draftUID
 			}
@@ -209,8 +208,7 @@ define(function(require) {
 			},
 			complete: function() {
 			},
-			accountId: null,
-			folderId: null,
+			folder: null,
 			messageId: null,
 			draftUID: null
 		};
@@ -273,7 +271,7 @@ define(function(require) {
 					subject: message.subject,
 					body: message.body,
 					attachments: message.attachments,
-					folderId: options.folderId,
+					folderId: options.folder ? options.folder.get('id') : null,
 					messageId: options.messageId,
 					uid: options.draftUID
 				}

js/templates/composer.html

@@ -46,7 +46,10 @@
 					{{#if isReply}} reply{{/if}}"
 			placeholder="{{ t 'Message …' }}">{{message}}</textarea>
 	</div>
-	<input class="submit-message send primary" type="submit" value="{{submitButtonTitle}}" disabled>
+	<div class='submit-message-wrapper'>
+		<input class="submit-message send primary" type="submit" value="{{submitButtonTitle}}" disabled>
+		<div class='submit-message-wrapper-inside' ></div>
+	</div>
 	<div class="new-message-attachments">
 	</div>
 </div>

js/views/composer.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Christoph Wurst <[email protected]>
- * @copyright Christoph Wurst 2015
+ * @copyright Christoph Wurst 2016
  */
 
 define(function(require) {
@@ -37,6 +37,7 @@ define(function(require) {
 		autosized: false,
 		events: {
 			'click .submit-message': 'submitMessage',
+			'click .submit-message-wrapper-inside': 'submitMessageWrapperInside',
 			'keypress .message-body': 'handleKeyPress',
 			'input  .to': 'onInputChanged',
 			'paste  .to': 'onInputChanged',
@@ -246,6 +247,43 @@ define(function(require) {
 
 			return message;
 		},
+		submitMessageWrapperInside: function(e) {
+			// http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
+			if (this._isVisible()) {
+				this.$('.submit-message').click();
+			} else {
+				$('#mail-message').animate({
+					scrollTop: this.$el.offset().top
+				}, 1000);
+				this.$('.submit-message-wrapper-inside').hide();
+				// This function is needed because $('.message-body').focus does not focus the first line
+				this._setCaretToPos(this.$('.message-body')[0], 0);
+			}
+		},
+		_setSelectionRange: function(input, selectionStart, selectionEnd) {
+			if (input.setSelectionRange) {
+				input.focus();
+				input.setSelectionRange(selectionStart, selectionEnd);
+			} else if (input.createTextRange) {
+				var range = input.createTextRange();
+				range.collapse(true);
+				range.moveEnd('character', selectionEnd);
+				range.moveStart('character', selectionStart);
+				range.select();
+			}
+		},
+		_setCaretToPos: function(input, pos) {
+			this._setSelectionRange(input, pos, pos);
+		},
+		_isVisible: function() {
+			var $elem = this.$el;
+			var $window = $(window);
+			var docViewTop = $window.scrollTop();
+			var docViewBottom = docViewTop + $window.height();
+			var elemTop = $elem.offset().top;
+
+			return elemTop <= docViewBottom;
+		},
 		submitMessage: function() {
 			clearTimeout(this.draftTimer);
 			//
@@ -276,7 +314,8 @@ define(function(require) {
 
 			// if available get account from drop-down list
 			if (this.$('.mail-account').length > 0) {
-				this.account = this.accounts.get(this.$('.mail-account').find(':selected').val());
+				this.account = this.accounts.get(this.$('.mail-account').
+					find(':selected').val());
 			}
 
 			// send the mail
@@ -303,7 +342,8 @@ define(function(require) {
 					if (_this.draftUID !== null) {
 						// the sent message was a draft
 						if (!_.isUndefined(Radio.ui.request('messagesview:collection'))) {
-							Radio.ui.request('messagesview:collection').remove({id: _this.draftUID});
+							Radio.ui.request('messagesview:collection').
+								remove({id: _this.draftUID});
 						}
 						_this.draftUID = null;
 					}
@@ -327,7 +367,8 @@ define(function(require) {
 					cc.prop('disabled', false);
 					bcc.prop('disabled', false);
 					subject.prop('disabled', false);
-					_this.$('.new-message-attachments-action').css('display', 'inline-block');
+					_this.$('.new-message-attachments-action').
+						css('display', 'inline-block');
 					_this.$('#mail_new_attachment').prop('disabled', false);
 					newMessageBody.prop('disabled', false);
 					newMessageSend.prop('disabled', false);
@@ -337,7 +378,7 @@ define(function(require) {
 
 			if (this.isReply()) {
 				options.messageId = this.messageId;
-				options.folderId = this.folderId;
+				options.folder = this.account.get('folders').get(this.folderId);
 			}
 
 			this.submitCallback(this.account, this.getMessage(), options);
@@ -354,14 +395,14 @@ define(function(require) {
 
 			// if available get account from drop-down list
 			if (this.$('.mail-account').length > 0) {
-				this.account = this.accounts.get(this.$('.mail-account').find(':selected').val());
+				this.account = this.accounts.get(this.$('.mail-account').
+					find(':selected').val());
 			}
 
 			// send the mail
 			var _this = this;
 			this.draftCallback(this.account, this.getMessage(), {
-				account: this.account,
-				folderId: this.folderId,
+				folder: this.account.get('folders').get(this.folderId),
 				messageId: this.messageId,
 				draftUID: this.draftUID,
 				success: function(data) {
@@ -411,7 +452,8 @@ define(function(require) {
 			function extractLast(term) {
 				return split(term).pop();
 			}
-			if (!$(this).data('autocomplete')) { // If the autocomplete wasn't called yet:
+			if (!$(this).
+				data('autocomplete')) { // If the autocomplete wasn't called yet:
 				// don't navigate away from the field on tab when selecting an item
 				$(this).bind('keydown', function(event) {
 					if (event.keyCode === $.ui.keyCode.TAB &&

js/views/message.js

@@ -7,7 +7,7 @@
  * later. See the COPYING file.
  *
  * @author Christoph Wurst <[email protected]>
- * @copyright Christoph Wurst 2015
+ * @copyright Christoph Wurst 2016
  */
 
 define(function(require) {
@@ -136,14 +136,19 @@ define(function(require) {
 				});
 			});
 
+			// TODO: add folder/account reference to message
+			var account = require('state').accounts.get(this.message.get('accountId'));
+			var folderId = this.message.get('folderId');
+
 			// setup reply composer view
+			
 			this.replyComposer.show(new ComposerView({
 				//el: this.$('#reply-composer'),
 				type: 'reply',
 				onSubmit: require('communication').sendMessage,
 				onDraft: require('communication').saveDraft,
-				accountId: this.message.get('accountId'),
-				folderId: this.message.get('folderId'),
+				account: account,
+				folderId: folderId,
 				messageId: this.message.get('messageId')
 			}));
 			this.replyComposer.currentView.render({