デッキのキーボードショートカットを強化

src/client/app/common/scripts/note-mixin.ts

@@ -29,14 +29,18 @@ export default (opts: Opts = {}) => ({
 	computed: {
 		keymap(): any {
 			return {
-				'r|left': () => this.reply(true),
+				'r': () => this.reply(true),
 				'e|a|plus': () => this.react(true),
-				'q|right': () => this.renote(true),
+				'q': () => this.renote(true),
 				'f|b': this.favorite,
 				'delete|ctrl+d': this.del,
-				'ctrl+q|ctrl+right': this.renoteDirectly,
+				'ctrl+q': this.renoteDirectly,
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
+				'shift+up': () => this.$emit('parentFocus', 'up'),
+				'shift+down': () => this.$emit('parentFocus', 'down'),
+				'shift+left': () => this.$emit('parentFocus', 'left'),
+				'shift+right': () => this.$emit('parentFocus', 'right'),
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,

src/client/app/desktop/views/pages/deck/deck.column-core.vue

@@ -1,14 +1,14 @@
 <template>
 <x-widgets-column v-if="column.type == 'widgets'" :column="column" :is-stacked="isStacked"/>
 <x-notifications-column v-else-if="column.type == 'notifications'" :column="column" :is-stacked="isStacked"/>
-<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'home'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'local'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/>
+<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
-<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked"/>
+<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked" @parentFocus="parentFocus"/>
 </template>
 
 <script lang="ts">
@@ -43,7 +43,11 @@ export default Vue.extend({
 	methods: {
 		focus() {
 			this.$children[0].focus();
-		}
+		},
+
+		parentFocus(direction) {
+			this.$emit('parentFocus', direction);
+		},
 	}
 });
 </script>

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -17,7 +17,13 @@
 	<!--<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"/>
+			<x-note
+				:note="note"
+				:key="note.id"
+				@update:note="onNoteUpdated(i, $event)"
+				:media-view="mediaView"
+				:mini="true"
+				@parentFocus="parentFocus"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
 				<span>%fa:angle-up%{{ note._datetext }}</span>
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
@@ -105,6 +111,10 @@ export default Vue.extend({
 			(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();
 		},
 
+		parentFocus(direction) {
+			this.$emit('parentFocus', direction);
+		},
+
 		onNoteUpdated(i, note) {
 			Vue.set((this as any).notes, i, note);
 		},

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -20,18 +20,21 @@
 		:media-only="column.isMediaOnly"
 		:media-view="column.isMediaView"
 		ref="tl"
+		@parentFocus="parentFocus"
 	/>
 	<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"
+		@parentFocus="parentFocus"
 	/>
 	<x-tl v-else
 		:src="column.type"
 		:media-only="column.isMediaOnly"
 		:media-view="column.isMediaView"
 		ref="tl"
+		@parentFocus="parentFocus"
 	/>
 </x-column>
 </template>
@@ -97,7 +100,11 @@ export default Vue.extend({
 
 		focus() {
 			this.$refs.tl.focus();
-		}
+		},
+
+		parentFocus(direction) {
+			this.$emit('parentFocus', direction);
+		},
 	}
 });
 </script>

src/client/app/desktop/views/pages/deck/deck.tl.vue

@@ -1,5 +1,5 @@
 <template>
-<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView" @parentFocus="parentFocus"/>
 </template>
 
 <script lang="ts">
@@ -143,7 +143,11 @@ export default Vue.extend({
 
 		focus() {
 			(this.$refs.timeline as any).focus();
-		}
+		},
+
+		parentFocus(direction) {
+			this.$emit('parentFocus', direction);
+		},
 	}
 });
 </script>

src/client/app/desktop/views/pages/deck/deck.vue

@@ -4,10 +4,10 @@
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
-					<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true"/>
+					<x-column-core :ref="id" :key="id" :column="columns.find(c => c.id == id)" :is-stacked="true" @parentFocus="moveFocus(id, $event)"/>
 				</template>
 			</div>
-			<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])"/>
+			<x-column-core v-else :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id == ids[0])" @parentFocus="moveFocus(ids[0], $event)"/>
 		</template>
 		<template v-if="temporaryColumn">
 			<x-user-column v-if="temporaryColumn.type == 'user'" :acct="temporaryColumn.acct" :key="temporaryColumn.acct"/>
@@ -264,15 +264,66 @@ export default Vue.extend({
 		focus() {
 			// Flatten array of arrays
 			const ids = [].concat.apply([], this.layout);
-			const firstTl = ids.find(id => {
+			const firstTl = ids.find(id => this.isTlColumn(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();
 			}
+		},
+
+		moveFocus(id, direction) {
+			let targetColumn;
+
+			if (direction == 'right') {
+				const currentColumnIndex = this.layout.findIndex(ids => ids.includes(id));
+				this.layout.some((ids, i) => {
+					if (i <= currentColumnIndex) return false;
+					const tl = ids.find(id => this.isTlColumn(id));
+					if (tl) {
+						targetColumn = tl;
+						return true;
+					}
+				});
+			} else if (direction == 'left') {
+				const currentColumnIndex = [...this.layout].reverse().findIndex(ids => ids.includes(id));
+				[...this.layout].reverse().some((ids, i) => {
+					if (i <= currentColumnIndex) return false;
+					const tl = ids.find(id => this.isTlColumn(id));
+					if (tl) {
+						targetColumn = tl;
+						return true;
+					}
+				});
+			} else if (direction == 'down') {
+				const currentColumn = this.layout.find(ids => ids.includes(id));
+				const currentIndex = currentColumn.indexOf(id);
+				currentColumn.some((_id, i) => {
+					if (i <= currentIndex) return false;
+					if (this.isTlColumn(_id)) {
+						targetColumn = _id;
+						return true;
+					}
+				});
+			} else if (direction == 'up') {
+				const currentColumn = [...this.layout.find(ids => ids.includes(id))].reverse();
+				const currentIndex = currentColumn.indexOf(id);
+				currentColumn.some((_id, i) => {
+					if (i <= currentIndex) return false;
+					if (this.isTlColumn(_id)) {
+						targetColumn = _id;
+						return true;
+					}
+				});
+			}
+
+			if (targetColumn) {
+				this.$refs[targetColumn][0].focus();
+			}
+		},
+
+		isTlColumn(id) {
+			const column = this.columns.find(c => c.id === id);
+			return ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(column.type);
 		}
 	}
 });

src/docs/keyboard-shortcut.ja-JP.md

@@ -25,9 +25,9 @@
 	<tbody>
 		<tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
 		<tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
-		<tr><td><kbd class="key">←</kbd>, <kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+		<tr><td><kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
-		<tr><td><kbd class="key">→</kbd>, <kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+		<tr><td><kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
-		<tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">→</kbd></kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+		<tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
 		<tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
 		<tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
 		<tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>お気に入りに登録</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
@@ -86,6 +86,19 @@
 	</tbody>
 </table>
 
+## デッキ
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td>投稿にフォーカスした状態で<kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">↑</kbd></kbd></td><td>上のカラムにフォーカス</td><td>-</td></tr>
+		<tr><td>投稿にフォーカスした状態で<kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">↓</kbd></kbd></td><td>下のカラムにフォーカス</td><td>-</td></tr>
+		<tr><td>投稿にフォーカスした状態で<kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">→</kbd></kbd></td><td>右のカラムにフォーカス</td><td>-</td></tr>
+		<tr><td>投稿にフォーカスした状態で<kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">←</kbd></kbd></td><td>左のカラムにフォーカス</td><td>-</td></tr>
+	</tbody>
+</table>
+
 # 例
 <table>
 	<thead>