feat: add "i" as shortcut to open media (#1890)

fixes #1883
This commit is contained in:
Nolan Lawson 2020-11-14 14:13:38 -08:00 committed by GitHub
parent 742a76b4dd
commit 870fa0e93c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 3 deletions

View file

@ -41,11 +41,12 @@
<li><kbd>f</kbd> to favorite</li>
<li><kbd>b</kbd> to boost</li>
<li><kbd>r</kbd> to reply</li>
<li><kbd>i</kbd> to open images, video, or audio</li>
<li><kbd>y</kbd> to show or hide sensitive media</li>
<li><kbd>m</kbd> to mention the author</li>
<li><kbd>p</kbd> to open the author's profile</li>
<li><kbd>l</kbd> to open the card's link in a new tab</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>
</ul>
</div>
<h2>Media</h2>

View file

@ -40,6 +40,9 @@
{:else}
<MediaAttachments {mediaAttachments} {sensitive} {sensitiveShown} {uuid} />
{/if}
{#if enableShortcuts}
<Shortcut scope={shortcutScope} key="i" on:pressed="showFirstMedia()" />
{/if}
<style>
.status-sensitive-media-container {
grid-area: media;
@ -167,6 +170,7 @@
import { store } from '../../_store/store'
import { registerClickDelegate } from '../../_utils/delegate'
import { classname } from '../../_utils/classname'
import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog'
export default {
oncreate () {
@ -229,6 +233,11 @@
})
}
return true
},
async showFirstMedia () {
const { mediaAttachments } = this.get()
const showMediaDialog = await importShowMediaDialog()
showMediaDialog(mediaAttachments, 0)
}
}
}

View file

@ -9,7 +9,7 @@ import {
getNthStatusSpoiler,
getUrl, modalDialog,
scrollToStatus,
isNthStatusActive, getActiveElementRectTop, scrollToTop, isActiveStatusPinned
isNthStatusActive, getActiveElementRectTop, scrollToTop, isActiveStatusPinned, getFirstModalMedia
} from '../utils'
import { homeTimeline } from '../fixtures'
import { loginAsFoobar } from '../roles'
@ -95,7 +95,7 @@ test('Shortcut x shows/hides spoilers', async t => {
.expect(getNthStatusContent(1 + idx).hasClass('shown')).notOk()
})
test('Shortcut y shows/hides sensitive image', async t => {
test('Shortcut y shows/hides sensitive image, i opens', async t => {
const idx = homeTimeline.findIndex(_ => _.content === "here's a secret kitten")
await loginAsFoobar(t)
await t
@ -109,6 +109,8 @@ test('Shortcut y shows/hides sensitive image', async t => {
.expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^http:\/\//)
.pressKey('y')
.expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^blob:http:\/\/localhost/)
.pressKey('i')
.expect(getFirstModalMedia().getAttribute('alt')).eql('kitten')
})
test('Shortcut f toggles favorite status', async t => {

View file

@ -301,6 +301,10 @@ export const getScrollTop = exec(() => {
return document.scrollingElement.scrollTop || 0
})
export function getFirstModalMedia () {
return $('.modal-dialog .media-container img')
}
export function getNthMediaAltInput (n) {
return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt textarea`)
}