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>f</kbd> to favorite</li>
<li><kbd>b</kbd> to boost</li> <li><kbd>b</kbd> to boost</li>
<li><kbd>r</kbd> to reply</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>m</kbd> to mention the author</li>
<li><kbd>p</kbd> to open the author's profile</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>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>x</kbd> to show or hide text behind content warning</li>
<li><kbd>y</kbd> to show or hide sensitive media</li>
</ul> </ul>
</div> </div>
<h2>Media</h2> <h2>Media</h2>

View File

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

View File

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

View File

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