Merge pull request #562 from h3poteto/iss-561

closes #561 Add shortcut help modal
This commit is contained in:
AkiraFukushima 2018-08-23 08:35:48 +09:00 committed by GitHub
commit b59f6be6cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 183 additions and 2 deletions

View File

@ -148,6 +148,21 @@
}, },
"list_membership": { "list_membership": {
"title": "List Memberships" "title": "List Memberships"
},
"shortcut": {
"title": "Keyboard shortcuts",
"ctrl_number": "Switch accounts",
"ctrl_k": "Jump to other timelines",
"ctrl_n": "Open the new toot modal",
"ctrl_enter": "Post the toot",
"j": "Select the next toot",
"k": "Select the previous toot",
"r": "Reply to the toot",
"b": "Reblog the toot",
"f": "Favourite the toot",
"o": "Open details of the toot",
"p": "Open account profile of the toot",
"esc": "Close current page"
} }
}, },
"cards": { "cards": {

View File

@ -148,6 +148,21 @@
}, },
"list_membership": { "list_membership": {
"title": "リストメンバー管理" "title": "リストメンバー管理"
},
"shortcut": {
"title": "キーボードショートカット",
"ctrl_number": "アカウントの切り替え",
"ctrl_k": "タイムラインの移動",
"ctrl_n": "トゥートモーダルの表示",
"ctrl_enter": "トゥート送信",
"j": "次のトゥートを選択",
"k": "前のトゥートを選択",
"r": "リプライ",
"b": "ブースト",
"f": "お気に入り",
"o": "トゥート詳細を開く",
"p": "発言主のプロフィールを開く",
"esc": "ページを閉じる"
} }
}, },
"cards": { "cards": {

View File

@ -5,6 +5,8 @@
:element-loading-text="$t('message.loading')" :element-loading-text="$t('message.loading')"
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-background="rgba(0, 0, 0, 0.8)"
v-shortkey="{help: ['h']}"
@shortkey="handleKey"
> >
<side-menu></side-menu> <side-menu></side-menu>
<div :class="collapse ? 'page-narrow':'page'"> <div :class="collapse ? 'page-narrow':'page'">
@ -159,6 +161,13 @@ export default {
}, },
onDragOver (e) { onDragOver (e) {
e.preventDefault() e.preventDefault()
},
handleKey (event) {
switch (event.srcKey) {
case 'help':
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true)
break
}
} }
} }
} }

View File

@ -5,6 +5,7 @@
<image-viewer></image-viewer> <image-viewer></image-viewer>
<list-membership></list-membership> <list-membership></list-membership>
<add-list-member></add-list-member> <add-list-member></add-list-member>
<shortcut></shortcut>
</div> </div>
</template> </template>
@ -14,6 +15,7 @@ import Jump from './Modals/Jump'
import ImageViewer from './Modals/ImageViewer' import ImageViewer from './Modals/ImageViewer'
import ListMembership from './Modals/ListMembership' import ListMembership from './Modals/ListMembership'
import AddListMember from './Modals/AddListMember' import AddListMember from './Modals/AddListMember'
import Shortcut from './Modals/Shortcut'
export default { export default {
name: 'modals', name: 'modals',
@ -22,7 +24,8 @@ export default {
Jump, Jump,
ImageViewer, ImageViewer,
ListMembership, ListMembership,
AddListMember AddListMember,
Shortcut
} }
} }
</script> </script>

View File

@ -0,0 +1,126 @@
<template>
<el-dialog
:title="$t('modals.shortcut.title')"
:visible.sync="shortcutModal"
width="500px"
class="shortcut-modal"
>
<table class="shortcuts">
<tbody>
<tr>
<td><kbd>Ctrl(Cmd) + 1, 2, 3...</kbd></td>
<td>{{ $t('modals.shortcut.ctrl_number') }}</td>
</tr>
<tr>
<td><kbd>Ctrl(Cmd) + k</kbd></td>
<td>{{ $t('modals.shortcut.ctrl_k') }}</td>
</tr>
<tr>
<td><kbd>Ctrl(Cmd) + n</kbd></td>
<td>{{ $t('modals.shortcut.ctrl_n') }}</td>
</tr>
<tr>
<td><kbd>Ctrl(Cmd) + Enter</kbd></td>
<td>{{ $t('modals.shortcut.ctrl_enter') }}</td>
</tr>
<tr>
<td><kbd>j</kbd></td>
<td>{{ $t('modals.shortcut.j') }}</td>
</tr>
<tr>
<td><kbd>k</kbd></td>
<td>{{ $t('modals.shortcut.k') }}</td>
</tr>
<tr>
<td><kbd>r</kbd></td>
<td>{{ $t('modals.shortcut.r') }}</td>
</tr>
<tr>
<td><kbd>b</kbd></td>
<td>{{ $t('modals.shortcut.b') }}</td>
</tr>
<tr>
<td><kbd>f</kbd></td>
<td>{{ $t('modals.shortcut.f') }}</td>
</tr>
<tr>
<td><kbd>o</kbd></td>
<td>{{ $t('modals.shortcut.o') }}</td>
</tr>
<tr>
<td><kbd>p</kbd></td>
<td>{{ $t('modals.shortcut.p') }}</td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td>{{ $t('modals.shortcut.esc') }}</td>
</tr>
</tbody>
</table>
</el-dialog>
</template>
<script>
export default {
name: 'shortcut',
computed: {
shortcutModal: {
get () {
return this.$store.state.TimelineSpace.Modals.Shortcut.modalOpen
},
set (value) {
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', value)
}
}
}
}
</script>
<style lang="scss" scoped>
.shortcut-modal /deep/ {
.el-dialog__header {
background-color: #4a5664;
.el-dialog__title {
color: #ebeef5;
}
}
.shortcuts {
text-align: left;
border-collapse: collapse;
line-height: 28px;
width: 100%;
tr {
border: none;
&:nth-child(even) {
background-color: #fafafa;
}
&:hover {
background-color: #f2f6fc;
}
td {
padding: 4px 8px;
}
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: solid 1px #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
}
}
}
</style>

View File

@ -3,6 +3,7 @@ import ImageViewer from './Modals/ImageViewer'
import Jump from './Modals/Jump' import Jump from './Modals/Jump'
import ListMembership from './Modals/ListMembership' import ListMembership from './Modals/ListMembership'
import AddListMember from './Modals/AddListMember' import AddListMember from './Modals/AddListMember'
import Shortcut from './Modals/Shortcut'
const Modals = { const Modals = {
namespaced: true, namespaced: true,
@ -11,7 +12,8 @@ const Modals = {
NewToot, NewToot,
Jump, Jump,
ListMembership, ListMembership,
AddListMember AddListMember,
Shortcut
} }
} }

View File

@ -0,0 +1,11 @@
export default {
namespaced: true,
state: {
modalOpen: false
},
mutations: {
changeModal (state, value) {
state.modalOpen = value
}
}
}