Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-02-01 18:06:45 +01:00
Code Issues Releases Wiki Activity

Merge pull request #566 from h3poteto/fix/shortcut

Browse Source 
Fix shortcut events
This commit is contained in:
AkiraFukushima 2018-08-24 08:31:17 +09:00 committed by GitHub
commit 24e39837a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 195 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/renderer/components/Login.vue
View File

@ -9,6 +9,7 @@
</el-row>
</el-header>
<el-container>
<div v-shortkey="['esc']" @shortkey="close"></div>
<login-form></login-form>
</el-container>
</el-container>

12
src/renderer/components/TimelineSpace.vue
View File

@ -5,7 +5,7 @@
:element-loading-text="$t('message.loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-shortkey="{help: ['h']}"
v-shortkey="shortcutEnabled ? {help: ['h']} : {}"
@shortkey="handleKey"
>
<side-menu></side-menu>
@ -21,7 +21,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import SideMenu from './TimelineSpace/SideMenu'
import HeaderMenu from './TimelineSpace/HeaderMenu'
import Contents from './TimelineSpace/Contents'
@ -42,7 +42,13 @@ export default {
...mapState({
loading: state => state.TimelineSpace.loading,
collapse: state => state.TimelineSpace.SideMenu.collapse
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.modalOpened
}
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)

8
src/renderer/components/TimelineSpace/Contents/Cards/Notification.vue
View File

@ -4,6 +4,7 @@
:message="message"
:filter="filter"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@select="$emit('selectNotification')"
@ -12,6 +13,7 @@
<follow v-else-if="message.type === 'follow'"
:message="message"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@select="$emit('selectNotification')"
@ -21,6 +23,7 @@
:message="message"
:filter="filter"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@select="$emit('selectNotification')"
@ -30,6 +33,7 @@
:message="message"
:filter="filter"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@select="$emit('selectNotification')"
@ -58,6 +62,10 @@ export default {
focused: {
type: Boolean,
defalt: false
},
overlaid: {
type: Boolean,
default: false
}
},
components: { Favourite, Follow, Mention, Reblog }

11
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
@shortkey="handleStatusControl"
ref="status"
@click="$emit('select')"
@ -91,6 +91,10 @@ export default {
focused: {
type: Boolean,
default: false
},
overlaid: {
type: Boolean,
default: false
}
},
data () {
@ -99,6 +103,11 @@ export default {
showAttachments: false
}
},
computed: {
shortcutEnabled: function () {
return this.focused && !this.overlaid
}
},
mounted () {
if (this.focused) {
this.$refs.status.focus()

11
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue
View File

@ -2,7 +2,7 @@
<div
class="follow"
tabIndex="0"
v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
@shortkey="handleStatusControl"
ref="status"
@click="$emit('select')"
@ -34,6 +34,15 @@ export default {
focused: {
type: Boolean,
default: false
},
overlaid: {
type: Boolean,
default: false
}
},
computed: {
shortcutEnabled: function () {
return this.focused && !this.overlaid
}
},
mounted () {

5
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Mention.vue
View File

@ -4,6 +4,7 @@
:message="message.status"
:filter="filter"
:focused="focused"
:overlaid="overlaid"
v-on:update="updateToot"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@ -30,6 +31,10 @@ export default {
focused: {
type: Boolean,
default: false
},
overlaid: {
type: Boolean,
default: false
}
},
components: { Toot },

11
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="focused ? {next: ['j'], prev: ['k']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k']} : {}"
@shortkey="handleStatusControl"
ref="status"
@click="$emit('select')"
@ -91,6 +91,10 @@ export default {
focused: {
type: Boolean,
default: false
},
overlaid: {
type: Boolean,
default: false
}
},
data () {
@ -99,6 +103,11 @@ export default {
showAttachments: false
}
},
computed: {
shortcutEnabled: function () {
return this.focused && !this.overlaid
}
},
mounted () {
if (this.focused) {
this.$refs.status.focus()

12
src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
View File

@ -2,7 +2,7 @@
<div
class="status"
tabIndex="0"
v-shortkey="focused ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p']} : {}"
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p']} : {}"
@shortkey="handleTootControl"
ref="status"
@click="$emit('selectToot')"
@ -142,12 +142,19 @@ export default {
focused: {
type: Boolean,
default: false
},
overlaid: {
type: Boolean,
default: false
}
},
computed: {
...mapState({
displayNameStyle: state => state.App.displayNameStyle
})
}),
shortcutEnabled: function () {
return this.focused && !this.overlaid
}
},
mounted () {
if (this.focused) {
@ -387,6 +394,7 @@ export default {
handleTootControl (event) {
switch (event.srcKey) {
case 'next':
console.log(this.shortcutEnabled)
this.$emit('focusNext')
break
case 'prev':

17
src/renderer/components/TimelineSpace/Contents/Favourites.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="favourites" v-shortkey="{next: ['j']}" @shortkey="handleKey">
<div id="favourites" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div class="fav" v-for="message in favourites" v-bind:key="message.id">
@ -7,6 +7,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -25,7 +26,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from './Cards/Toot'
import scrollTop from '../../utils/scroll'
@ -46,7 +47,13 @@ export default {
favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
filter: state => state.TimelineSpace.Contents.Favourites.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)
@ -171,9 +178,7 @@ export default {
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedId) {
this.focusedId = this.favourites[0].uri
}
this.focusedId = this.favourites[0].uri
break
}
}

2
src/renderer/components/TimelineSpace/Contents/Hashtag.vue
View File

@ -9,7 +9,7 @@
</el-button>
</div>
<div class="form-item input">
<input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
<input v-model="tag" :placeholder="$t('hashtag.tag_name')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
</div>
<div class="form-item" v-show="tagPage()">
<el-button type="text" @click="save">

17
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -1,5 +1,5 @@
<template>
<div name="tag" v-shortkey="{next:['j']}" @shortkey="handleKey">
<div name="tag" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -27,7 +28,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from '../Cards/Toot'
import scrollTop from '../../../utils/scroll'
@ -49,7 +50,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Hashtag.Tag.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
mounted () {
this.$store.commit('TimelineSpace/changeLoading', true)
@ -209,9 +216,7 @@ export default {
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedId) {
this.focusedId = this.timeline[0].uri
}
this.focusedId = this.timeline[0].uri
break
}
}

17
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="home" v-shortkey="{next: ['j']}" @shortkey="handleKey">
<div id="home" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -28,7 +29,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from './Cards/Toot'
import scrollTop from '../../utils/scroll'
@ -49,7 +50,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Home.heading,
unread: state => state.TimelineSpace.Contents.Home.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Home.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
@ -176,9 +183,7 @@ export default {
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedId) {
this.focusedId = this.timeline[0].uri
}
this.focusedId = this.timeline[0].uri
break
}
}

20
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -1,5 +1,5 @@
<template>
<div name="list">
<div name="list" v-shortkey="shortcutEnabled ? {next:['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -27,7 +28,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from '../Cards/Toot'
import scrollTop from '../../../utils/scroll'
@ -49,7 +50,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Lists.Show.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)
@ -201,6 +208,13 @@ export default {
},
focusToot (message) {
this.focusedId = message.uri
},
handleKey (event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri
break
}
}
}
}

20
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="local" v-shortkey="{next: ['j']}" @shortkey="handleKey">
<div id="local" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -28,7 +29,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from './Cards/Toot'
import scrollTop from '../../utils/scroll'
@ -49,7 +50,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Local.heading,
unread: state => state.TimelineSpace.Contents.Local.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Local.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
@ -79,6 +86,7 @@ export default {
}
},
focusedId: function (newState, oldState) {
console.log(newState)
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -155,6 +163,7 @@ export default {
},
focusNext () {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri)
console.log(currentIndex)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri
} else if (currentIndex < this.timeline.length) {
@ -171,13 +180,12 @@ export default {
},
focusToot (message) {
this.focusedId = message.uri
console.log(this.focusedId)
},
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedId) {
this.focusedId = this.timeline[0].uri
}
this.focusedId = this.timeline[0].uri
break
}
}

17
src/renderer/components/TimelineSpace/Contents/Notifications.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="notifications" v-shortkey="{next: ['j']}" @shortkey="handleKey">
<div id="notifications" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="index === focusedIndex"
:overlaid="modalOpened"
@focusNext="focusNext"
@focusPrev="focusPrev"
@selectNotification="focusNotification(index)"
@ -26,7 +27,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Notification from './Cards/Notification'
import scrollTop from '../../utils/scroll'
@ -47,7 +48,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Notifications.heading,
unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
filter: state => state.TimelineSpace.Contents.Notifications.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedIndex && !this.modalOpened
}
},
mounted () {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadNotifications', false)
@ -161,9 +168,7 @@ export default {
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedIndex) {
this.focusedIndex = 0
}
this.focusedIndex = 0
break
}
}

17
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="public" v-shortkey="{next: ['j']}" @shortkey="handleKey">
<div id="public" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
@ -9,6 +9,7 @@
:message="message"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@ -28,7 +29,7 @@
</template>
<script>
import { mapState } from 'vuex'
import { mapState, mapGetters } from 'vuex'
import Toot from './Cards/Toot'
import scrollTop from '../../utils/scroll'
@ -49,7 +50,13 @@ export default {
heading: state => state.TimelineSpace.Contents.Public.heading,
unread: state => state.TimelineSpace.Contents.Public.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Public.filter
})
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
return !this.focusedId && !this.modalOpened
}
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)
@ -198,9 +205,7 @@ export default {
handleKey (event) {
switch (event.srcKey) {
case 'next':
if (!this.focusedId) {
this.focusedId = this.timeline[0].uri
}
this.focusedId = this.timeline[0].uri
break
}
}

2
src/renderer/components/TimelineSpace/Contents/Search.vue
View File

@ -10,7 +10,7 @@
:value="item.target">
</el-option>
</el-select>
<input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
<input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
<div class="clearfix"></div>
</el-form>
</div>

2
src/renderer/components/TimelineSpace/Contents/SideBar.vue
View File

@ -1,6 +1,6 @@
<template>
<transition name="slide-detail">
<div id="side_bar" v-if="openSideBar">
<div id="side_bar" v-if="openSideBar" v-shortkey="['esc']" @shortkey="close">
<div class="header">
<i class="el-icon-loading" v-show="loading"></i>
<i class="el-icon-close" @click="close"></i>

33
src/renderer/components/TimelineSpace/HeaderMenu.vue
View File

@ -17,7 +17,9 @@
<div>
<el-form>
<el-form-item :label="$t('header_menu.filter.title')">
<el-input v-model="filter" :placeholder="$t('header_menu.filter.placeholder')"></el-input>
<div class="input-wrapper">
<input v-model="filter" :placeholder="$t('header_menu.filter.placeholder')" v-shortkey.avoid v-on:keyup.enter="applyFilter(filter)"></input>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="applyFilter(filter)">{{ $t('header_menu.filter.apply') }}</el-button>
@ -234,4 +236,33 @@ export default {
}
}
}
.input-wrapper {
position: relative;
font-size: 14px;
display: inline-block;
width: 100%;
input {
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
&:focus {
outline: none;
border-color: #409eff;
}
}
}
</style>

11
src/renderer/store/TimelineSpace/Modals.js
View File

@ -14,6 +14,17 @@ const Modals = {
ListMembership,
AddListMember,
Shortcut
},
getters: {
modalOpened: (state, getters, rootState) => {
const imageViewer = rootState.TimelineSpace.Modals.ImageViewer.modalOpen
const newToot = rootState.TimelineSpace.Modals.NewToot.modalOpen
const jump = rootState.TimelineSpace.Modals.Jump.modalOpen
const listMembership = rootState.TimelineSpace.Modals.ListMembership.modalOpen
const addListMember = rootState.TimelineSpace.Modals.AddListMember.modalOpen
const shortcut = rootState.TimelineSpace.Modals.Jump.modalOpen
return imageViewer || newToot || jump || listMembership || addListMember || shortcut
}
}
}