Move popups to another template, improve position and add completion to editing input

client/stylesheets/base.less

@@ -1448,13 +1448,15 @@ a.github-fork {
 	-moz-user-select: text;
 	-ms-user-select: text;
 	user-select: text;
+	.input-message-editing-container {
+		.calc(width, ~"100% - 16px");
+	}
 	.input-message-editing {
-		display: block;
 		resize: none;
+		display: block;
 		padding-top: 9px;
 		padding-bottom: 9px;
 		overflow-y: hidden;
-		.calc(width, ~"100% - 16px");
 	}
 	.edit-room-title {
 		color: @secondary-font-color;
@@ -1487,11 +1489,14 @@ a.github-fork {
 		width: 100%;
 		min-height: @footer-min-height;
 	}
+	.message-popup-position {
+		position: relative;
+	}
 	.message-popup {
 		position: absolute;
 		background: #FAFAFA;
 		z-index: 101;
-		bottom: @footer-min-height;
+		bottom: 0px;
 		left: 0px;
 		right: 0px;
 		overflow: hidden;

client/views/app/chatMessageDashboard.coffee

@@ -48,6 +48,13 @@ Template.chatMessageDashboard.helpers
 		text = text.replace(/#/g, '\\#')
 		return text
 
+	getPupupConfig: ->
+		template = Template.instance()
+		return {
+			getInput: ->
+				return template.find('.input-message-editing')
+		}
+
 Template.chatMessageDashboard.events
 	'mousedown .edit-message': ->
 		self = this

client/views/app/chatMessageDashboard.html

@@ -16,7 +16,10 @@
 					<i class="icon-pencil edit-message"></i>
 				</span>
 				{{#if isEditing}}
-					<textarea class="input-message-editing" contenteditable="true">{{message 'true'}}</textarea>
+					<div class="input-message-editing-container">
+						{{> messagePopupConfig getPupupConfig}}
+						<textarea class="input-message-editing" contenteditable="true">{{message 'true'}}</textarea>
+					</div>
 				{{else}}
 					<div>
 						{{#markdown}}{{#emojione}}{{message}}{{/emojione}}{{/markdown}}

client/views/app/chatWindowDashboard.coffee

@@ -259,66 +259,12 @@ Template.chatWindowDashboard.helpers
 		else
 			return t('chatWindowDashboard.See_all')
 
-	popupUserConfig: ->
+	getPupupConfig: ->
 		template = Template.instance()
-		config =
-			title: 'People'
-			collection: Meteor.users
-			template: 'messagePopupUser'
-			getInput: ->
-				return template.find('.input-message')
-			getFilter: (collection, filter) ->
-				exp = new RegExp(filter, 'i')
-				return collection.find({username: {$exists: true}, $or: [{name: exp}, {username: exp}]}, {limit: 10})
-			getValue: (_id, collection) ->
-				return collection.findOne(_id)?.username
-
-		return config
-
-	popupChannelConfig: ->
-		template = Template.instance()
-		config =
-			title: 'Channels'
-			collection: ChatRoom
-			trigger: '#'
-			template: 'messagePopupChannel'
-			getInput: ->
-				return template.find('.input-message')
-			getFilter: (collection, filter) ->
-				return collection.find({t: 'c', name: new RegExp(filter, 'i')}, {limit: 10})
-			getValue: (_id, collection) ->
-				return collection.findOne(_id)?.name
-
-		return config
-
-	popupEmojiConfig: ->
-		template = Template.instance()
-		config =
-			title: 'Emoji'
-			collection: emojione.emojioneList
-			template: 'messagePopupEmoji'
-			trigger: ':'
-			prefix: ''
+		return {
 			getInput: ->
 				return template.find('.input-message')
-			getFilter: (collection, filter) ->
-				results = []
-				for shortname, data of collection
-					if shortname.indexOf(filter) > -1
-						results.push
-							_id: shortname
-							data: data
-
-					if results.length > 10
-						break
-
-				if filter.length >= 3
-					results.sort (a, b) ->
-						a.length > b.length
-
-				return results
-
-		return config
+		}
 
 
 Template.chatWindowDashboard.events

client/views/app/chatWindowDashboard.html

@@ -53,11 +53,11 @@
 				<span>{{_ "chatWindowDashboard.New_messages"}}</span>
 			</div>
 		</div>
-		{{> messagePopup popupEmojiConfig}} {{> messagePopup popupChannelConfig}} {{> messagePopup popupUserConfig}}
 		<footer class="footer">
 			<form class="message-form" method="post" action="/">
 				<div>
 					<!--input type="text" class="input-message" value="" /-->
+					{{> messagePopupConfig getPupupConfig}}
 					<textarea name="msg" class="input-message"></textarea>
 					<i class="icon-paper-plane" title="{{_ "chatWindowDashboard.Send_Message"}}"></i>
 				</div>

client/views/app/message-popup-config.coffee

+Template.messagePopupConfig.helpers
+	popupUserConfig: ->
+		self = this
+		template = Template.instance()
+		config =
+			title: 'People'
+			collection: Meteor.users
+			template: 'messagePopupUser'
+			getInput: self.getInput
+			getFilter: (collection, filter) ->
+				exp = new RegExp(filter, 'i')
+				return collection.find({username: {$exists: true}, $or: [{name: exp}, {username: exp}]}, {limit: 10})
+			getValue: (_id, collection) ->
+				return collection.findOne(_id)?.username
+
+		return config
+
+	popupChannelConfig: ->
+		self = this
+		template = Template.instance()
+		config =
+			title: 'Channels'
+			collection: ChatRoom
+			trigger: '#'
+			template: 'messagePopupChannel'
+			getInput: self.getInput
+			getFilter: (collection, filter) ->
+				return collection.find({t: 'c', name: new RegExp(filter, 'i')}, {limit: 10})
+			getValue: (_id, collection) ->
+				return collection.findOne(_id)?.name
+
+		return config
+
+	popupEmojiConfig: ->
+		self = this
+		template = Template.instance()
+		config =
+			title: 'Emoji'
+			collection: emojione.emojioneList
+			template: 'messagePopupEmoji'
+			trigger: ':'
+			prefix: ''
+			getInput: self.getInput
+			getFilter: (collection, filter) ->
+				results = []
+				for shortname, data of collection
+					if shortname.indexOf(filter) > -1
+						results.push
+							_id: shortname
+							data: data
+
+					if results.length > 10
+						break
+
+				if filter.length >= 3
+					results.sort (a, b) ->
+						a.length > b.length
+
+				return results
+
+		return config
\ No newline at end of file

client/views/app/message-popup-config.html

+<template name="messagePopupConfig">
+	{{> messagePopup popupEmojiConfig}}
+	{{> messagePopup popupChannelConfig}}
+	{{> messagePopup popupUserConfig}}
+</template>
\ No newline at end of file

client/views/app/message-popup.html

 <template name="messagePopup">
 	{{#if isOpen}}
-		<div class="message-popup">
-			<div class="message-popup-title">
-				{{title}}
-			</div>
-			<div>
-				{{#each data}}
-					<div class="popup-item" data-id="{{_id}}">
-						{{> Template.dynamic template=../template}}
-					</div>
-				{{/each}}
+		<div class="message-popup-position">
+			<div class="message-popup">
+				<div class="message-popup-title">
+					{{title}}
+				</div>
+				<div>
+					{{#each data}}
+						<div class="popup-item" data-id="{{_id}}">
+							{{> Template.dynamic template=../template}}
+						</div>
+					{{/each}}
+				</div>
 			</div>
 		</div>
 	{{/if}}