feat: add more keyboard shortcuts (#904)

* feat: add more keyboard shortcuts

largely fixes #895

* oops wrong test name
This commit is contained in:
Nolan Lawson 2019-01-19 16:40:31 -08:00 committed by GitHub
parent b014778761
commit 45d70e8e6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 184 additions and 43 deletions

View file

@ -0,0 +1,8 @@
import { importShowComposeDialog } from '../_components/dialog/asyncDialogs'
import { store } from '../_store/store'
export async function composeNewStatusMentioning (account) {
store.setComposeData('dialog', { text: `@${account.acct} ` })
let showComposeDialog = await importShowComposeDialog()
showComposeDialog()
}

View file

@ -6,6 +6,7 @@
<Shortcut key="g c" on:pressed="goto('/community')"/>
<Shortcut key="s" on:pressed="goto('/search')"/>
<Shortcut key="h|?" on:pressed="showShortcutHelpDialog()"/>
<Shortcut key="c" on:pressed="showComposeDialog()"/>
{#each $navPages as navPage, i}
<Shortcut key={(i + 1).toString()} on:pressed="goto(navPage.href)" />
{/each}
@ -13,7 +14,7 @@
<script>
import Shortcut from './shortcut/Shortcut'
import { goto } from '../../../__sapper__/client'
import { importShowShortcutHelpDialog } from './dialog/asyncDialogs'
import { importShowShortcutHelpDialog, importShowComposeDialog } from './dialog/asyncDialogs'
import { store } from '../_store/store'
export default {
@ -26,6 +27,10 @@
async showShortcutHelpDialog () {
let showShortcutHelpDialog = await importShowShortcutHelpDialog()
showShortcutHelpDialog()
},
async showComposeDialog () {
let showComposeDialog = await importShowComposeDialog()
showComposeDialog()
}
}
}

View file

@ -1,30 +1,58 @@
<div class="{inDialog ? 'in-dialog' : ''}">
<ul>
<li><kbd>s</kbd> to search</li>
<li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
<li><kbd>g</kbd> + <kbd>h</kbd> to go home</li>
<li><kbd>g</kbd> + <kbd>n</kbd> to go to the notifications page</li>
<li><kbd>g</kbd> + <kbd>l</kbd> to go to the local stream page</li>
<li><kbd>g</kbd> + <kbd>t</kbd> to go to the federated stream page</li>
<li><kbd>g</kbd> + <kbd>c</kbd> to go to the community page</li>
<li><kbd>j</kbd> or <kbd></kbd> to activate the next status</li>
<li><kbd>k</kbd> or <kbd></kbd> to activate the previous status</li>
<li><kbd>o</kbd> to open the active status</li>
<li><kbd>f</kbd> to favorite the active status</li>
<li><kbd>b</kbd> to boost the active status</li>
<li><kbd>r</kbd> to reply to the active status</li>
<li><kbd>x</kbd> to show or hide text behind content warning in the active status</li>
<li><kbd>y</kbd> to show or hide sensitive media in the active status</li>
<li><kbd>h</kbd> or <kbd>?</kbd> to toggle the help dialog</li>
<li><kbd>Backspace</kbd> to go back, close dialogs</li>
</ul>
<div class="shortcut-help-info {inDialog ? 'in-dialog' : ''}">
<h2>Global</h2>
<div class="hotkey-group">
<ul>
<li><kbd>c</kbd> to compose a new toot</li>
<li><kbd>s</kbd> to search</li>
<li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
<li><kbd>g</kbd> + <kbd>h</kbd> to go home</li>
<li><kbd>g</kbd> + <kbd>n</kbd> to go to notifications</li>
<li><kbd>g</kbd> + <kbd>l</kbd> to go to the local timeline</li>
<li><kbd>g</kbd> + <kbd>t</kbd> to go to the federated timeline</li>
<li><kbd>g</kbd> + <kbd>c</kbd> to go to the community page</li>
<li><kbd>h</kbd> or <kbd>?</kbd> to toggle the help dialog</li>
<li><kbd>Backspace</kbd> to go back, close dialogs</li>
</ul>
</div>
<h2>On an active toot</h2>
<div class="hotkey-group">
<ul>
<li><kbd>o</kbd> to open the thread</li>
<li><kbd>f</kbd> to favorite</li>
<li><kbd>b</kbd> to boost</li>
<li><kbd>r</kbd> to reply</li>
<li><kbd>m</kbd> to mention the author</li>
<li><kbd>p</kbd> to open the author's profile</li>
<li><kbd>x</kbd> to show or hide text behind content warning</li>
<li><kbd>y</kbd> to show or hide sensitive media</li>
<li><kbd>j</kbd> or <kbd></kbd> to activate the next toot</li>
<li><kbd>k</kbd> or <kbd></kbd> to activate the previous toot</li>
</ul>
</div>
</div>
<style>
.shortcut-help-info {
overflow-y: scroll;
scrollbar-width: none;
}
.shortcut-help-info::-webkit-scrollbar {
display: none;
}
li {
list-style-type: none;
}
.in-dialog li {
color: var(--muted-modal-text);
font-size: 0.9em;
}
.in-dialog h2 {
color: var(--muted-modal-text);
}
.hotkey-group {
margin: 0 0 10px 10px;
}
.shortcut-help-info h2 {
margin: 10px 0;
}
kbd {
color: #333;

View file

@ -10,7 +10,6 @@
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store'
import GenericDialogList from './GenericDialogList.html'
import { importShowComposeDialog } from '../asyncDialogs'
import { createDialogId } from '../helpers/createDialogId'
import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog'
@ -21,6 +20,7 @@ import { setAccountFollowed } from '../../../_actions/follow'
import { setShowReblogs } from '../../../_actions/setShowReblogs'
import { setDomainBlocked } from '../../../_actions/setDomainBlocked'
import { copyText } from '../../../_actions/copyText'
import { composeNewStatusMentioning } from '../../../_actions/mention'
export default {
oncreate,
@ -140,12 +140,8 @@ export default {
}
},
async onMentionClicked () {
let { acct } = this.get()
this.store.setComposeData('dialog', {
text: `@${acct} `
})
let showComposeDialog = await importShowComposeDialog()
showComposeDialog()
let { account } = this.get()
await composeNewStatusMentioning(account)
this.close()
},
async onFollowClicked () {
@ -185,4 +181,4 @@ export default {
GenericDialogList
}
}
</script>
</script>

View file

@ -3,14 +3,19 @@
{status} {notification} {active} {shortcutScope} on:recalculateHeight
/>
{:else}
<article class="notification-article {active ? 'active' : ''}"
<article class="notification-article {active ? 'status-active' : ''}"
tabindex="0"
aria-posinset={index}
aria-setsize={length}
aria-label={ariaLabel}
status-active={active}
>
<StatusHeader {notification} {notificationId} {status} {statusId} {timelineType}
{account} {accountId} {uuid} isStatusInNotification="true" />
{#if shortcutScope}
<Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
<Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
{/if}
</article>
{/if}
<style>
@ -20,7 +25,7 @@
padding: 10px 20px;
border-bottom: 1px solid var(--main-border);
}
.notification-article.active {
.notification-article.status-active {
background-color: var(--status-active-background);
}
@media (max-width: 767px) {
@ -34,14 +39,22 @@
<script>
import Status from './Status.html'
import StatusHeader from './StatusHeader.html'
import Shortcut from '../shortcut/Shortcut.html'
import { store } from '../../_store/store'
import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
import { goto } from '../../../../__sapper__/client'
import { composeNewStatusMentioning } from '../../_actions/mention'
export default {
components: {
Status,
StatusHeader
StatusHeader,
Shortcut
},
data: () => ({
active: false,
shortcutScope: null
}),
store: () => store,
computed: {
account: ({ notification }) => notification.account,
@ -55,6 +68,16 @@
ariaLabel: ({ status, account, $omitEmojiInDisplayNames }) => (
!status && `${getAccountAccessibleName(account, $omitEmojiInDisplayNames)} followed you, @${account.acct}`
)
},
methods: {
openAuthorProfile () {
let { accountId } = this.get()
goto(`/accounts/${accountId}`)
},
async mentionAuthor () {
let { account } = this.get()
await composeNewStatusMentioning(account)
}
}
}
</script>

View file

@ -36,7 +36,9 @@
{/if}
</article>
{#if shortcutScope}
<Shortcut scope="{shortcutScope}" key="o" on:pressed="open()"/>
<Shortcut scope={shortcutScope} key="o" on:pressed="open()" />
<Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
<Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
{/if}
<style>
@ -127,6 +129,7 @@
import { measureText } from '../../_utils/measureText'
import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
import { absoluteDateFormatter } from '../../_utils/formatters'
import { composeNewStatusMentioning } from '../../_actions/mention'
const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@ -165,6 +168,7 @@
Shortcut
},
data: () => ({
active: false,
notification: void 0,
replyVisibility: void 0,
contentPreloaded: false,
@ -197,6 +201,14 @@
open () {
let { originalStatusId } = this.get()
goto(`/statuses/${originalStatusId}`)
},
openAuthorProfile () {
let { originalAccountId } = this.get()
goto(`/accounts/${originalAccountId}`)
},
async mentionAuthor () {
let { originalAccount } = this.get()
await composeNewStatusMentioning(originalAccount)
}
},
computed: {

View file

@ -1,12 +1,14 @@
import { Selector as $ } from 'testcafe'
import {
closeDialogButton,
composeModalInput,
getNthFavorited,
getNthStatus,
getNthStatusContent,
getNthStatusMedia,
getNthStatusSensitiveMediaButton,
getNthStatusSpoiler,
getUrl, notificationsNavButton,
getUrl, modalDialog,
scrollToStatus
} from '../utils'
import { homeTimeline } from '../fixtures'
@ -128,19 +130,28 @@ test('Shortcut f toggles favorite status', async t => {
.expect(getNthFavorited(idx)).eql('false')
})
test('Shortcut f toggles favorite status in notification', async t => {
let idx = 0
test('Shortcut p toggles profile', async t => {
let idx = indexWhere(homeTimeline, _ => _.content === 'pinned toot 1')
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.click(notificationsNavButton)
.expect(getUrl()).contains('/notifications')
.expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
.expect(getNthFavorited(idx)).eql('false')
.pressKey('j '.repeat(idx + 1))
.expect(getNthStatus(idx).hasClass('status-active')).ok()
.pressKey('f')
.expect(getNthFavorited(idx)).eql('true')
.pressKey('f')
.expect(getNthFavorited(idx)).eql('false')
.pressKey('p')
.expect(getUrl()).contains('/accounts/3')
})
test('Shortcut m toggles mention', async t => {
let idx = indexWhere(homeTimeline, _ => _.content === 'pinned toot 1')
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
.pressKey('j '.repeat(idx + 1))
.expect(getNthStatus(idx).hasClass('status-active')).ok()
.pressKey('m')
.expect(composeModalInput.value).eql('@quux ')
.click(closeDialogButton)
.expect(modalDialog.exists).notOk()
})

View file

@ -0,0 +1,58 @@
import {
closeDialogButton,
composeModalInput,
getNthFavorited,
getNthStatus,
getUrl, modalDialog, notificationsNavButton
} from '../utils'
import { loginAsFoobar } from '../roles'
fixture`026-shortcuts-notification.js`
.page`http://localhost:4002`
test('Shortcut f toggles favorite status in notification', async t => {
let idx = 0
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.click(notificationsNavButton)
.expect(getUrl()).contains('/notifications')
.expect(getNthStatus(idx).exists).ok({ timeout: 30000 })
.expect(getNthFavorited(idx)).eql('false')
.pressKey('j '.repeat(idx + 1))
.expect(getNthStatus(idx).hasClass('status-active')).ok()
.pressKey('f')
.expect(getNthFavorited(idx)).eql('true')
.pressKey('f')
.expect(getNthFavorited(idx)).eql('false')
})
test('Shortcut p toggles profile in a follow notification', async t => {
let idx = 5 // "@quux followed you"
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.click(notificationsNavButton)
.expect(getUrl()).contains('/notifications')
.expect(getNthStatus(0).exists).ok({ timeout: 30000 })
.pressKey('j '.repeat(idx + 1))
.expect(getNthStatus(idx).hasClass('status-active')).ok()
.pressKey('p')
.expect(getUrl()).contains('/accounts/3')
})
test('Shortcut m toggles mention in a follow notification', async t => {
let idx = 5 // "@quux followed you"
await loginAsFoobar(t)
await t
.expect(getUrl()).eql('http://localhost:4002/')
.click(notificationsNavButton)
.expect(getUrl()).contains('/notifications')
.expect(getNthStatus(0).exists).ok({ timeout: 30000 })
.pressKey('j '.repeat(idx + 1))
.expect(getNthStatus(idx).hasClass('status-active')).ok()
.pressKey('m')
.expect(composeModalInput.value).eql('@quux ')
.click(closeDialogButton)
.expect(modalDialog.exists).notOk()
})