From 41bd436d3ef96f89d8a4be77d6686fd3fab1fc3f Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 20 Oct 2018 02:40:37 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=83=83=E3=82=AD=E3=81=AE=E3=82=AD?= =?UTF-8?q?=E3=83=BC=E3=83=9C=E3=83=BC=E3=83=89=E3=82=B7=E3=83=A7=E3=83=BC?= =?UTF-8?q?=E3=83=88=E3=82=AB=E3=83=83=E3=83=88=E3=82=92=E5=BC=B7=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/app/common/scripts/note-mixin.ts | 10 ++- .../views/pages/deck/deck.column-core.vue | 22 ++++--- .../desktop/views/pages/deck/deck.notes.vue | 12 +++- .../views/pages/deck/deck.tl-column.vue | 9 ++- .../app/desktop/views/pages/deck/deck.tl.vue | 8 ++- .../app/desktop/views/pages/deck/deck.vue | 65 +++++++++++++++++-- src/docs/keyboard-shortcut.ja-JP.md | 19 +++++- 7 files changed, 119 insertions(+), 26 deletions(-) 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 @@ <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 == 'local'" :column="column" :is-stacked="isStacked"/> -<x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked"/> -<x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked"/> -<x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/> -<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked"/> -<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/> -<x-direct-column v-else-if="column.type == 'direct'" :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" @parentFocus="parentFocus"/> +<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" @parentFocus="parentFocus"/> +<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" @parentFocus="parentFocus"/> +<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" @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> 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 @@ <!--<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); }, 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" /> <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> 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 @@ <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> 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 @@ <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 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 @@ <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">→</kbd>, <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="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</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">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>