feat: Add shortcuts to the media dialog (#930)
* Add shortcuts to the media dialog * fix: unify logic for next/prev buttons and keyboard shortcuts * fix: add info about left/right shortcuts
This commit is contained in:
parent
84e9bfc8e5
commit
437236bf3c
|
@ -29,6 +29,12 @@
|
|||
<li><kbd>k</kbd> or <kbd>↑</kbd> to activate the previous toot</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2>Media</h2>
|
||||
<div class="hotkey-group">
|
||||
<ul>
|
||||
<li><kbd>←</kbd> - <kbd>→</kbd> to go to next or previous</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.shortcut-help-info {
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
disabled={scrolledItem === 0}
|
||||
label="Show previous media"
|
||||
href="#fa-angle-left"
|
||||
on:click="onClick(scrolledItem - 1)"
|
||||
on:click="prev()"
|
||||
/>
|
||||
{#each dots as dot, i (dot.i)}
|
||||
<IconButton
|
||||
|
@ -42,7 +42,7 @@
|
|||
disabled={scrolledItem === length - 1}
|
||||
label="Show next media"
|
||||
href="#fa-angle-right"
|
||||
on:click="onClick(scrolledItem + 1)"
|
||||
on:click="next()"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
@ -50,6 +50,9 @@
|
|||
|
||||
|
||||
</ModalDialog>
|
||||
|
||||
<Shortcut scope='mediaDialog' key="ArrowLeft" on:pressed="prev()" />
|
||||
<Shortcut scope='mediaDialog' key="ArrowRight" on:pressed="next()" />
|
||||
<style>
|
||||
:global(.media-modal-dialog) {
|
||||
max-width: calc(100vw);
|
||||
|
@ -125,6 +128,7 @@
|
|||
import ModalDialog from './ModalDialog.html'
|
||||
import MediaInDialog from './MediaInDialog.html'
|
||||
import IconButton from '../../IconButton.html'
|
||||
import Shortcut from '../../shortcut/Shortcut.html'
|
||||
import { show } from '../helpers/showDialog'
|
||||
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
|
||||
import debounce from 'lodash-es/debounce'
|
||||
|
@ -132,6 +136,9 @@
|
|||
import { smoothScroll } from '../../../_utils/smoothScroll'
|
||||
import { doubleRAF } from '../../../_utils/doubleRAF'
|
||||
import { store } from '../../../_store/store'
|
||||
import {
|
||||
pushShortcutScope,
|
||||
popShortcutScope } from '../../../_utils/shortcuts'
|
||||
|
||||
export default {
|
||||
oncreate () {
|
||||
|
@ -148,9 +155,12 @@
|
|||
} else {
|
||||
this.setupScroll()
|
||||
}
|
||||
pushShortcutScope('mediaDialog')
|
||||
},
|
||||
ondestroy () {
|
||||
this.teardownScroll()
|
||||
|
||||
popShortcutScope('mediaDialog')
|
||||
},
|
||||
store: () => store,
|
||||
computed: {
|
||||
|
@ -162,7 +172,8 @@
|
|||
components: {
|
||||
ModalDialog,
|
||||
MediaInDialog,
|
||||
IconButton
|
||||
IconButton,
|
||||
Shortcut
|
||||
},
|
||||
helpers: {
|
||||
nth (i) {
|
||||
|
@ -198,6 +209,18 @@
|
|||
this.scrollToItem(i, true)
|
||||
}
|
||||
},
|
||||
next () {
|
||||
let { scrolledItem, length } = this.get()
|
||||
if (scrolledItem < length - 1) {
|
||||
this.scrollToItem(scrolledItem + 1, true)
|
||||
}
|
||||
},
|
||||
prev () {
|
||||
let { scrolledItem } = this.get()
|
||||
if (scrolledItem > 0) {
|
||||
this.scrollToItem(scrolledItem - 1, true)
|
||||
}
|
||||
},
|
||||
scrollToItem (i, smooth) {
|
||||
let { length } = this.get()
|
||||
let { scroller } = this.refs
|
||||
|
|
Loading…
Reference in a new issue