デッキで'T'のショートカットを使えるように

4 files changed, 53 insertions, 7 deletions

diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
index e1490cb0e4..0f64406a75 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
@@ -38,6 +38,12 @@ export default Vue.extend({
 			required: false,
 			default: false
 		}
+	},
+
+	methods: {
+		focus() {
+			this.$children[0].focus();
+		}
 	}
 });
 </script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index e9fcba65f1..98cc1e13a4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -14,8 +14,8 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!--<transition-group name="mk-notes" class="transition">-->
-	<div class="notes">
+	<!--<transition-group name="mk-notes" class="transition" ref="notes">-->
+	<div class="notes" ref="notes">
 		<template v-for="(note, i) in _notes">
 			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" :media-view="mediaView" :mini="true"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
@@ -102,7 +102,7 @@ export default Vue.extend({
 
 	methods: {
 		focus() {
-			(this.$el as any).children[0].focus();
+			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
 		},
 
 		onNoteUpdated(i, note) {
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 586e815b2a..6faef36439 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -14,9 +14,25 @@
 		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
 		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
 	</div>
-	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
-	<x-hashtag-tl v-else-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
-	<x-tl v-else :src="column.type" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
+
+	<x-list-tl v-if="column.type == 'list'"
+		:list="column.list"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
+	<x-hashtag-tl v-else-if="column.type == 'hashtag'"
+		:tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
+	<x-tl v-else
+		:src="column.type"
+		:media-only="column.isMediaOnly"
+		:media-view="column.isMediaView"
+		ref="tl"
+	/>
 </x-column>
 </template>
 
@@ -77,6 +93,10 @@ export default Vue.extend({
 	methods: {
 		onChangeSettings(v) {
 			this.$store.dispatch('settings/saveDeck');
+		},
+
+		focus() {
+			this.$refs.tl.focus();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 787402fd03..232ffee238 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style" :class="{ center: $store.state.device.deckColumnAlign == 'center' }">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style" :class="{ center: $store.state.device.deckColumnAlign == 'center' }" v-hotkey.global="keymap">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
@@ -55,6 +55,12 @@ export default Vue.extend({
 
 		temporaryColumn(): any {
 			return this.$store.state.device.deckTemporaryColumn;
+		},
+
+		keymap(): any {
+			return {
+				't': this.focus
+			};
 		}
 	},
 
@@ -253,6 +259,20 @@ export default Vue.extend({
 					}
 				}]
 			});
+		},
+
+		focus() {
+			// Flatten array of arrays
+			const ids = [].concat.apply([], this.layout);
+			const firstTl = ids.find(id => {
+				const c = this.columns.find(c => c.id === id);
+				const isTlColumn = ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(c.type);
+				return isTlColumn;
+			});
+
+			if (firstTl) {
+				this.$refs[firstTl][0].focus();
+			}
 		}
 	}
 });