Focus input when emoji picker is shown

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/Composer.vue

@@ -42,7 +42,7 @@
 				<div slot="emoji-picker" slot-scope="{ emojis, insert, display }" class="emoji-picker popovermenu">
 					<div>
 						<div>
-							<input v-model="search" type="text">
+							<input v-focus-on-create v-model="search" type="text">
 						</div>
 						<div>
 							<div v-for="(emojiGroup, category) in emojis" :key="category">
@@ -287,6 +287,7 @@ import EmojiPicker from 'vue-emoji-picker'
 import VueTribute from 'vue-tribute'
 import { VTooltip } from 'v-tooltip'
 import CurrentUserMixin from './../mixins/currentUserMixin'
+import FocusOnCreate from '../directives/focusOnCreate'
 import axios from 'nextcloud-axios'
 
 export default {
@@ -299,7 +300,8 @@ export default {
 	},
 	directives: {
 		tooltip: VTooltip,
-		ClickOutside: ClickOutside
+		ClickOutside: ClickOutside,
+		FocusOnCreate: FocusOnCreate
 	},
 	mixins: [CurrentUserMixin],
 	props: {

src/components/TimelineEntry.vue

@@ -19,7 +19,7 @@
 				</div>
 				<div class="post-message" v-html="formatedMessage" />
 			</div>
-			<div :data-timestamp="item.published" class="post-timestamp live-relative-timestamp">{{ relativeTimestamp }}</div>
+			<div :data-timestamp="timestamp" class="post-timestamp live-relative-timestamp">{{ relativeTimestamp }}</div>
 		</div>
 	</div>
 </template>
@@ -45,6 +45,9 @@ export default {
 		relativeTimestamp() {
 			return OC.Util.relativeModifiedDate(this.item.published)
 		},
+		timestamp() {
+			return Date.parse(this.item.published)
+		},
 		formatedMessage() {
 			let message = this.item.content
 			message = message.replace(/(?:\r\n|\r|\n)/g, '<br />')

src/directives/focusOnCreate.js

@@ -0,0 +1,31 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * 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
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import Vue from 'vue'
+
+export default {
+	bind: function(el) {
+		Vue.nextTick(() => {
+			el.focus()
+		})
+	}
+}