Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #3527 from h3poteto/iss-3300/move-focus 

refs #3300 Enable shortcut to move focus on statuses
This commit is contained in:
AkiraFukushima 2022-08-12 22:30:40 +09:00 committed by GitHub
parent 718ebdef42 9076649000
commit ccab008810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 314 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -30,6 +30,7 @@ module.exports = {
argsIgnorePattern: '^_'
}
],
'@typescript-eslint/no-explicit-any': 'off',
camelcase: 'off',
'@typescript-eslint/camelcase': 'off',
'space-before-function-paren': 'off'

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

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
></toot>
@ -29,6 +27,7 @@
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import { useStore } from '@/store'
import { useI18next } from 'vue3-i18next'
import { useRoute } from 'vue-router'
@ -54,14 +53,16 @@ export default defineComponent({
const focusedId = ref<string | null>(null)
const heading = ref<boolean>(true)
const scroller = ref<any>()
const { j, k } = useMagicKeys()
const bookmarks = computed(() => store.state.TimelineSpace.Contents.Bookmarks.bookmarks)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Bookmarks.lazyLoading)
const account = computed(() => store.state.TimelineSpace.account)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@ -86,6 +87,17 @@ export default defineComponent({
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = bookmarks.value[0].uri
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const onScroll = (event: Event) => {
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
@ -158,8 +170,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
openSideBar,

26
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -31,6 +29,7 @@
<script lang="ts">
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { useStore } from '@/store'
import { useI18next } from 'vue3-i18next'
@ -56,6 +55,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -71,8 +71,9 @@ export default defineComponent({
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(async () => {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
@ -125,6 +126,23 @@ export default defineComponent({
})
}
})
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const initialize = async () => {
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_TIMELINE}`).catch(_ => {
@ -237,8 +255,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
openSideBar,

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

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
>
@ -30,6 +28,7 @@
<script lang="ts">
import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import { useStore } from '@/store'
import { ElMessage } from 'element-plus'
import { useI18next } from 'vue3-i18next'
@ -52,14 +51,16 @@ export default defineComponent({
const heading = ref<boolean>(false)
const focusedId = ref<string | null>(null)
const scroller = ref<any>()
const { j, k } = useMagicKeys()
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const account = computed(() => store.state.TimelineSpace.account)
const favourites = computed(() => store.state.TimelineSpace.Contents.Favourites.favourites)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.Favourites.lazyLoading)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@ -94,6 +95,17 @@ export default defineComponent({
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = favourites.value[0].uri
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const onScroll = (event: Event) => {
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
@ -165,8 +177,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
openSideBar,

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

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -31,6 +29,7 @@
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, ref, toRefs, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
@ -56,6 +55,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const { tag } = toRefs(props)
const focusedId = ref<string | null>(null)
@ -71,8 +71,9 @@ export default defineComponent({
const scrolling = computed(() => store.state.TimelineSpace.Contents.Hashtag.Tag.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
store.commit(`TimelineSpace/Contents/${CONTENTS_MUTATION.CHANGE_LOADING}`, true)
@ -116,6 +117,24 @@ export default defineComponent({
})
}
})
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
onBeforeUnmount(() => {
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
reset()
@ -265,8 +284,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
sizeChanged,

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

@ -17,8 +17,6 @@
:filters="filters"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -39,6 +37,7 @@
<script lang="ts">
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, watch, onUnmounted } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
@ -64,6 +63,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -81,19 +81,10 @@ export default defineComponent({
const scrolling = computed(() => store.state.TimelineSpace.Contents.Home.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const filters = computed(() => store.getters[`${space}/filters`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
// const shortcutEnabled = computed(() => {
// if (modalOpened.value) {
// return false
// }
// if (!focusedId.value) {
// return true
// }
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
// return currentFocusedIndex.value === -1
// })
const shortcutEnabled = computed(() => !modalOpened.value)
const filteredTimeline = computed(() => {
return timeline.value.filter(toot => {
if ('url' in toot) {
@ -167,6 +158,23 @@ export default defineComponent({
},
{ deep: true }
)
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {

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

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -31,6 +29,7 @@
<script lang="ts">
import { defineComponent, toRefs, ref, computed, onMounted, onBeforeUpdate, watch, onBeforeUnmount, onUnmounted } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { useI18next } from 'vue3-i18next'
@ -52,6 +51,7 @@ export default defineComponent({
const space = 'TimelineSpace/Contents/Lists/Show'
const store = useStore()
const i18n = useI18next()
const { j, k } = useMagicKeys()
const { list_id } = toRefs(props)
const focusedId = ref<string | null>(null)
@ -67,8 +67,9 @@ export default defineComponent({
const scrolling = computed(() => store.state.TimelineSpace.Contents.Lists.Show.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
document.getElementById('scroller')?.addEventListener('scroll', onScroll)
@ -111,6 +112,24 @@ export default defineComponent({
})
}
})
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
onBeforeUnmount(() => {
store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMING}`)
observer.value?.disconnect()
@ -260,8 +279,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
sizeChanged,

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

@ -11,8 +11,6 @@
:filters="[]"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -31,6 +29,7 @@
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
@ -56,6 +55,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -71,8 +71,9 @@ export default defineComponent({
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(async () => {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_LOCAL_TIMELINE}`, false)
@ -136,6 +137,24 @@ export default defineComponent({
}
})
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const initialize = async () => {
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LOCAL_TIMELINE}`).catch(_ => {
ElMessage({
@ -246,8 +265,6 @@ export default defineComponent({
modalOpened,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
sizeChanged,

36
src/renderer/components/TimelineSpace/Contents/Mentions.vue
View File

@ -16,8 +16,6 @@
:overlaid="modalOpened"
:filters="[]"
v-on:update="updateToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectNotification="focusNotification(item)"
@sizeChanged="sizeChanged"
@ -37,6 +35,7 @@
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { useI18next } from 'vue3-i18next'
import { useRoute } from 'vue-router'
@ -63,6 +62,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -78,18 +78,9 @@ export default defineComponent({
const scrolling = computed(() => store.state.TimelineSpace.Contents.Mentions.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const currentFocusedIndex = computed(() => mentions.value.findIndex(notification => focusedId.value === notification.id))
// const shortcutEnabled = computed(() => {
// if (modalOpened.value) {
// return false
// }
// if (!focusedId.value) {
// return true
// }
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
// return currentFocusedIndex.value === -1
// })
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_HOME_TIMELINE}`, false)
@ -148,6 +139,23 @@ export default defineComponent({
},
{ deep: true }
)
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = mentions.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
@ -258,8 +266,6 @@ export default defineComponent({
focusedId,
modalOpened,
updateToot,
focusNext,
focusPrev,
focusSidebar,
focusNotification,
sizeChanged,

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

@ -16,8 +16,6 @@
:overlaid="modalOpened"
:filters="filters"
v-on:update="updateToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectNotification="focusNotification(item)"
>
@ -36,6 +34,7 @@
<script lang="ts">
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
@ -62,6 +61,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -77,20 +77,12 @@ export default defineComponent({
const scrolling = computed(() => store.state.TimelineSpace.Contents.Notifications.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const filters = computed(() => store.getters[`${space}/filters}`])
const handledNotifications = computed(() => store.getters[`${space}/handledNotifications`])
const currentFocusedIndex = computed(() => notifications.value.findIndex(notification => focusedId.value === notification.id))
// const shortcutEnabled = computed(() => {
// if (modalOpened.value) {
// return false
// }
// if (!focusedId.value) {
// return true
// }
// // Sometimes toots are deleted, so perhaps focused toot don't exist.
// return currentFocusedIndex.value === -1
// })
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(() => {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_NOTIFICATIONS}`, false)
store.dispatch(`${space}/${ACTION_TYPES.RESET_BADGE}`)
@ -151,6 +143,24 @@ export default defineComponent({
},
{ deep: true }
)
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
store.commit(`${space}/${ACTION_TYPES.RESET_BADGE}`)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = handledNotifications.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {

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

@ -11,8 +11,6 @@
:filters="filters"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
@ -31,6 +29,7 @@
<script lang="ts">
import { computed, defineComponent, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, ref, watch } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import moment from 'moment'
import { ElMessage } from 'element-plus'
import { Entity } from 'megalodon'
@ -56,6 +55,7 @@ export default defineComponent({
const route = useRoute()
const i18n = useI18next()
const { reloadable } = useReloadable(store, route, i18n)
const { j, k } = useMagicKeys()
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
@ -71,9 +71,10 @@ export default defineComponent({
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const filters = computed(() => store.getters[`${space}/filters`])
const currentFocusedIndex = computed(() => timeline.value.findIndex(toot => focusedId.value === toot.uri + toot.id))
const shortcutEnabled = computed(() => !modalOpened.value)
onMounted(async () => {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_PUBLIC_TIMELINE}`, false)
@ -137,6 +138,24 @@ export default defineComponent({
}
})
watch(focusedId, (newVal, _oldVal) => {
if (newVal && heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, false)
} else if (newVal === null && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
})
whenever(and(j, shortcutEnabled), () => {
if (focusedId.value === null) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
} else {
focusNext()
}
})
whenever(and(k, shortcutEnabled), () => {
focusPrev()
})
const initialize = async () => {
await store.dispatch(`${space}/${ACTION_TYPES.FETCH_PUBLIC_TIMELINE}`).catch(_ => {
ElMessage({
@ -250,8 +269,6 @@ export default defineComponent({
filters,
updateToot,
deleteToot,
focusNext,
focusPrev,
focusSidebar,
focusToot,
sizeChanged,

31
src/renderer/components/organisms/Notification.vue
View File

@ -7,8 +7,6 @@
:focused="focused"
:overlaid="overlaid"
reactionType="favourite"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -18,8 +16,6 @@
:message="message"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -29,8 +25,6 @@
:message="message"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -43,8 +37,6 @@
:overlaid="overlaid"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -56,8 +48,6 @@
:focused="focused"
:overlaid="overlaid"
reactionType="quote"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -69,21 +59,6 @@
:focused="focused"
:overlaid="overlaid"
reactionType="reblog"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
</StatusReaction>
<StatusReaction
v-else-if="message.type === 'emoji_reaction'"
:message="message"
:filters="filters"
:focused="focused"
:overlaid="overlaid"
reactionType="reaction"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -94,8 +69,6 @@
:filters="filters"
:focused="focused"
:overlaid="overlaid"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -107,8 +80,6 @@
:focused="focused"
:overlaid="overlaid"
reactionType="poll-vote"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>
@ -120,8 +91,6 @@
:focused="focused"
:overlaid="overlaid"
reactionType="poll-expired"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@select="$emit('selectNotification')"
>

24
src/renderer/components/organisms/Notification/Follow.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relationship" tabIndex="0" @click="$emit('select')" role="article" aria-label="follow event">
<div ref="notificationRef" class="relationship" tabIndex="0" role="article" aria-label="follow event" @click="$emit('select')">
<div class="follow">
<div class="action">
<div class="action-mark">
@ -28,7 +28,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType, computed, toRefs } from 'vue'
import { defineComponent, PropType, computed, toRefs, ref, nextTick, watch } from 'vue'
import { Entity } from 'megalodon'
import { useStore } from '@/store'
import FailoverImg from '@/components/atoms/FailoverImg.vue'
@ -55,13 +55,27 @@ export default defineComponent({
default: false
}
},
emits: ['select'],
setup(props) {
const { focused, overlaid } = toRefs(props)
const { focused } = toRefs(props)
const store = useStore()
const notificationRef = ref<any>(null)
const shortcutEnabled = computed(() => focused.value && !overlaid.value)
// const shortcutEnabled = computed(() => focused.value && !overlaid.value)
const displayNameStyle = computed(() => store.state.App.displayNameStyle)
watch(focused, (newVal, oldVal) => {
if (newVal) {
nextTick(() => {
notificationRef.value.focus()
})
} else if (oldVal && !newVal) {
nextTick(() => {
notificationRef.value.blur()
})
}
})
const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
const openUser = (account: Entity.Account) => {
store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
@ -70,7 +84,7 @@ export default defineComponent({
}
return {
shortcutEnabled,
notificationRef,
username,
openUser
}

24
src/renderer/components/organisms/Notification/FollowRequest.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relationship" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="follow event">
<div ref="notificationRef" class="relationship" tabIndex="0" role="article" aria-label="follow event" @click="$emit('select')">
<div class="follow-request">
<div class="action">
<div class="action-mark">
@ -28,7 +28,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType, computed, toRefs } from 'vue'
import { defineComponent, PropType, computed, toRefs, ref, watch, nextTick } from 'vue'
import { Entity } from 'megalodon'
import { useStore } from '@/store'
import FailoverImg from '@/components/atoms/FailoverImg.vue'
@ -55,13 +55,27 @@ export default defineComponent({
default: false
}
},
emits: ['select'],
setup(props) {
const { focused, overlaid } = toRefs(props)
const { focused } = toRefs(props)
const store = useStore()
const notificationRef = ref<any>(null)
const shortcutEnabled = computed(() => focused.value && !overlaid.value)
// const shortcutEnabled = computed(() => focused.value && !overlaid.value)
const displayNameStyle = computed(() => store.state.App.displayNameStyle)
watch(focused, (newVal, oldVal) => {
if (newVal) {
nextTick(() => {
notificationRef.value.focus()
})
} else if (oldVal && !newVal) {
nextTick(() => {
notificationRef.value.blur()
})
}
})
const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
const openUser = (account: Entity.Account) => {
store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
@ -70,7 +84,7 @@ export default defineComponent({
}
return {
shortcutEnabled,
notificationRef,
username,
openUser
}

2
src/renderer/components/organisms/Notification/Mention.vue
View File

@ -7,8 +7,6 @@
:overlaid="overlaid"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@selectToot="$emit('select')"
>

2
src/renderer/components/organisms/Notification/Status.vue
View File

@ -28,8 +28,6 @@
:overlaid="overlaid"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="$emit('focusNext')"
@focusPrev="$emit('focusPrev')"
@focusRight="$emit('focusRight')"
@selectToot="$emit('select')"
>

24
src/renderer/components/organisms/Notification/StatusReaction.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="status" tabIndex="0" @click="$emit('select')" role="article" :aria-label="reactionType">
<div ref="notificationRef" class="status" tabIndex="0" role="article" :aria-label="reactionType" @click="$emit('select')">
<div v-show="filtered" class="filtered">Filtered</div>
<div v-show="!filtered" class="status-reaction">
<div class="action">
@ -94,7 +94,7 @@
</template>
<script lang="ts">
import { defineComponent, computed, toRefs, ref, PropType } from 'vue'
import { defineComponent, computed, toRefs, ref, PropType, watch, nextTick } from 'vue'
import { Entity } from 'megalodon'
import moment from 'moment'
import { useRouter, useRoute } from 'vue-router'
@ -138,20 +138,22 @@ export default defineComponent({
default: false
}
},
emits: ['select'],
setup(props) {
const store = useStore()
const router = useRouter()
const route = useRoute()
const { focused, overlaid, message, filters, reactionType } = toRefs(props)
const { focused, message, filters, reactionType } = toRefs(props)
const showContent = ref<boolean>(false)
const showAttachments = ref<boolean>(false)
const notificationRef = ref<any>(null)
const displayNameStyle = computed(() => store.state.App.displayNameStyle)
const timeFormat = computed(() => store.state.App.timeFormat)
const language = computed(() => store.state.App.language)
const hideAllAttachments = computed(() => store.state.App.hideAllAttachments)
const shortcutEnabled = computed(() => focused.value && !overlaid.value)
// const shortcutEnabled = computed(() => focused.value && !overlaid.value)
const timestamp = computed(() => parseDatetime(message.value.created_at, timeFormat.value, language.value))
const readableTimestamp = computed(() => {
moment.locale(language.value)
@ -205,6 +207,18 @@ export default defineComponent({
}
})
watch(focused, (newVal, oldVal) => {
if (newVal) {
nextTick(() => {
notificationRef.value.focus()
})
} else if (oldVal && !newVal) {
nextTick(() => {
notificationRef.value.blur()
})
}
})
const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
const tootClick = (e: MouseEvent) => {
const parsedTag = findTag(e.target as HTMLElement, 'status-reaction')
@ -251,11 +265,11 @@ export default defineComponent({
return {
showContent,
showAttachments,
notificationRef,
displayNameStyle,
timeFormat,
language,
hideAllAttachments,
shortcutEnabled,
timestamp,
readableTimestamp,
username,

55
src/renderer/components/organisms/Toot.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="status" tabIndex="0" ref="status" @click="$emit('selectToot', message)" role="article" aria-label="toot">
<div ref="statusRef" class="status" tabIndex="0" role="article" aria-label="toot" @click="$emit('selectToot', message)">
<div v-if="filtered" class="filtered">Filtered</div>
<div v-if="!filtered" class="toot">
<div class="reblogger" v-if="message.reblog && !message.quote">
@ -237,7 +237,8 @@
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed, toRefs } from 'vue'
import { defineComponent, PropType, ref, computed, toRefs, watch, nextTick } from 'vue'
import { useMagicKeys, whenever, and } from '@vueuse/core'
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import data from 'emoji-mart-vue-fast/data/all.json'
import moment from 'moment'
@ -304,6 +305,7 @@ export default defineComponent({
default: false
}
},
emits: ['selectToot', 'focusRight', 'focusLeft'],
setup(props, ctx) {
const space = 'organisms/Toot'
const store = useStore()
@ -311,7 +313,9 @@ export default defineComponent({
const router = useRouter()
const i18n = useI18next()
const { focused, overlaid, message, filters } = toRefs(props)
const { l, h, r, b, f, o, p, i, x } = useMagicKeys()
const statusRef = ref<any>(null)
const showContent = ref(store.state.App.ignoreCW)
const showAttachments = ref(store.state.App.ignoreNSFW)
const hideAllAttachments = ref(store.state.App.hideAllAttachments)
@ -390,6 +394,51 @@ export default defineComponent({
return QuoteSupported(sns.value, account.value.domain)
})
whenever(and(l, shortcutEnabled), () => {
ctx.emit('focusRight')
})
whenever(and(h, shortcutEnabled), () => {
ctx.emit('focusLeft')
})
whenever(and(r, shortcutEnabled), () => {
openReply()
})
whenever(and(b, shortcutEnabled), () => {
changeReblog(originalMessage.value)
})
whenever(and(f, shortcutEnabled), () => {
changeFavourite(originalMessage.value)
})
whenever(and(o, shortcutEnabled), () => {
openDetail(message.value)
})
whenever(and(p, shortcutEnabled), () => {
openUser(originalMessage.value.account)
})
whenever(and(i, shortcutEnabled), () => {
const images = mediaAttachments.value
if (images.length === 0) {
return
}
openImage(images[0].url, images)
})
whenever(and(x, shortcutEnabled), () => {
toggleSpoiler()
toggleCW()
})
watch(focused, (newVal, oldVal) => {
if (newVal) {
nextTick(() => {
statusRef.value.focus()
})
} else if (oldVal && !newVal) {
nextTick(() => {
statusRef.value.blur()
})
}
})
const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
const accountName = (account: Entity.Account) => accountNameWithStyle(account, displayNameStyle.value)
const tootClick = (e: MouseEvent) => {
@ -628,6 +677,7 @@ export default defineComponent({
}
return {
statusRef,
emojiIndex,
displayNameStyle,
timeFormat,
@ -635,7 +685,6 @@ export default defineComponent({
sns,
account,
bookmarkSupported,
shortcutEnabled,
originalMessage,
timestamp,
readableTimestamp,