diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 491c77747a..1556d06601 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/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,
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 0f64406a75..dd2483c5c2 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
@@ -1,14 +1,14 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
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 98cc1e13a4..ec1298369a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -17,7 +17,13 @@
-
+
%fa:angle-up%{{ note._datetext }}
%fa:angle-down%{{ _notes[i + 1]._datetext }}
@@ -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);
},
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 6faef36439..6aa4711dae 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
@@ -20,18 +20,21 @@
:media-only="column.isMediaOnly"
:media-view="column.isMediaView"
ref="tl"
+ @parentFocus="parentFocus"
/>
@@ -97,7 +100,11 @@ export default Vue.extend({
focus() {
this.$refs.tl.focus();
- }
+ },
+
+ parentFocus(direction) {
+ this.$emit('parentFocus', direction);
+ },
}
});
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl.vue b/src/client/app/desktop/views/pages/deck/deck.tl.vue
index e9507cdf29..318e661b71 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 232ffee238..46b4fde7ef 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -4,10 +4,10 @@
-
+
-
+
@@ -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 c = this.columns.find(c => c.id === id);
- const isTlColumn = ['home', 'local', 'hybrid', 'global', 'list', 'hashtag', 'mentions', 'direct'].includes(c.type);
- return isTlColumn;
- });
+ const firstTl = ids.find(id => this.isTlColumn(id));
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);
}
}
});
diff --git a/src/docs/keyboard-shortcut.ja-JP.md b/src/docs/keyboard-shortcut.ja-JP.md
index d1d8989a81..40ecfc27da 100644
--- a/src/docs/keyboard-shortcut.ja-JP.md
+++ b/src/docs/keyboard-shortcut.ja-JP.md
@@ -25,9 +25,9 @@
↑, K, Shift + Tab | 上の投稿にフォーカスを移動 | - |
↓, J, Tab | 下の投稿にフォーカスを移動 | - |
- ←, R | 返信フォームを開く | Reply |
- →, Q | Renoteフォームを開く | Quote |
- Ctrl + →, Ctrl + Q | 即刻Renoteする(フォームを開かずに) | - |
+ R | 返信フォームを開く | Reply |
+ Q | Renoteフォームを開く | Quote |
+ Ctrl + Q | 即刻Renoteする(フォームを開かずに) | - |
E, A, + | リアクションフォームを開く | Emote, reAction |
0~9 | 数字に対応したリアクションをする(対応については後述) | - |
F, B | お気に入りに登録 | Favorite, Bookmark |
@@ -86,6 +86,19 @@
+## デッキ
+
+
+ ショートカット | 効果 | 由来 |
+
+
+ 投稿にフォーカスした状態でShift + ↑ | 上のカラムにフォーカス | - |
+ 投稿にフォーカスした状態でShift + ↓ | 下のカラムにフォーカス | - |
+ 投稿にフォーカスした状態でShift + → | 右のカラムにフォーカス | - |
+ 投稿にフォーカスした状態でShift + ← | 左のカラムにフォーカス | - |
+
+
+
# 例