From 1782e51169f5d1d390a7916a9a102bc015cb5cdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 3 Dec 2018 13:10:44 +0100
Subject: [PATCH] Focus input when emoji picker is shown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Composer.vue      |  6 ++++--
 src/components/TimelineEntry.vue |  5 ++++-
 src/directives/focusOnCreate.js  | 31 +++++++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/directives/focusOnCreate.js

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index f778e3d9..d2b9513e 100644
--- a/src/components/Composer.vue
+++ b/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: {
diff --git a/src/components/TimelineEntry.vue b/src/components/TimelineEntry.vue
index 4d49befe..8b95c2bb 100644
--- a/src/components/TimelineEntry.vue
+++ b/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 />')
diff --git a/src/directives/focusOnCreate.js b/src/directives/focusOnCreate.js
new file mode 100644
index 00000000..d2a73db0
--- /dev/null
+++ b/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()
+		})
+	}
+}