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

This commit is contained in:
syuilo 2018-10-19 15:03:23 +09:00
parent e8de29ae79
commit 3d497cedfc
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 53 additions and 7 deletions

View file

@ -38,6 +38,12 @@ export default Vue.extend({
required: false, required: false,
default: false default: false
} }
},
methods: {
focus() {
this.$children[0].focus();
}
} }
}); });
</script> </script>

View file

@ -14,8 +14,8 @@
</div> </div>
<!-- トランジションを有効にするとなぜかメモリリークする --> <!-- トランジションを有効にするとなぜかメモリリークする -->
<!--<transition-group name="mk-notes" class="transition">--> <!--<transition-group name="mk-notes" class="transition" ref="notes">-->
<div class="notes"> <div class="notes" ref="notes">
<template v-for="(note, i) in _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"/>
<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date"> <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: { methods: {
focus() { 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) { onNoteUpdated(i, note) {

View file

@ -14,9 +14,25 @@
<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch> <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> <ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
</div> </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-list-tl v-if="column.type == 'list'"
<x-tl v-else :src="column.type" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/> :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> </x-column>
</template> </template>
@ -77,6 +93,10 @@ export default Vue.extend({
methods: { methods: {
onChangeSettings(v) { onChangeSettings(v) {
this.$store.dispatch('settings/saveDeck'); this.$store.dispatch('settings/saveDeck');
},
focus() {
this.$refs.tl.focus();
} }
} }
}); });

View file

@ -1,6 +1,6 @@
<template> <template>
<mk-ui :class="$style.root"> <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"> <template v-for="ids in layout">
<div v-if="ids.length > 1" class="folder"> <div v-if="ids.length > 1" class="folder">
<template v-for="id, i in ids"> <template v-for="id, i in ids">
@ -55,6 +55,12 @@ export default Vue.extend({
temporaryColumn(): any { temporaryColumn(): any {
return this.$store.state.device.deckTemporaryColumn; 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();
}
} }
} }
}); });