Skip to content
Snippets Groups Projects
Verified Commit f1cca29a authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Fix #611: Documented keyboard shortcuts, list is now available by pressing "h" or in the footer

parent 6fe1c3df
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
changes/changelog.d/611.enhancement 0 → 100644
+ 1
− 0
View file @ f1cca29a
Documented keyboard shortcuts, list is now available by pressing "h" or in the footer (#611)
front/src/App.vue
+ 20
− 55
View file @ f1cca29a
......@@ -25,64 +25,17 @@
<service-messages v-if="messages.length > 0" />
<router-view :key="$route.fullPath"></router-view>
<div class="ui fitted divider"></div>
<div id="footer" class="ui vertical footer segment">
<div class="ui container">
<div class="ui stackable equal height stackable grid">
<div class="three wide column">
<h4 v-translate class="ui header">Links</h4>
<div class="ui link list">
<router-link class="item" to="/about">
<translate>About this instance</translate>
</router-link>
<a href="https://funkwhale.audio" class="item" target="_blank"><translate>Official website</translate></a>
<a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate>Documentation</translate></a>
<a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">
<translate :translate-params="{version: version}" v-if="version">Source code (%{version})</translate>
<translate v-else>Source code</translate>
</a>
<a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank"><translate>Issue tracker</translate></a>
<a @click="switchInstance" class="item" >
<translate>Use another instance</translate>
<template v-if="$store.state.instance.instanceUrl !== '/'">
<br>
({{ $store.state.instance.instanceUrl }})
</template>
</a>
</div>
</div>
<div class="ten wide column">
<h4 v-translate class="ui header">About Funkwhale</h4>
<p>
<translate>Funkwhale is a free and open-source project run by volunteers. You can help us improve the platform by reporting bugs, suggesting features and share the project with your friends!</translate>
</p>
<p>
<translate>The funkwhale logo was kindly designed and provided by Francis Gading.</translate>
</p>
</div>
<div class="three wide column">
<h4 v-translate class="ui header">Options</h4>
<div class="ui form">
<div class="ui field">
<label><translate>Change language</translate></label>
<select class="ui dropdown" v-model="$language.current">
<option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
</select>
</div>
</div>
<br>
<a target="_blank" href="https://translate.funkwhale.audio/engage/funkwhale/">
<translate>Help us translate Funkwhale</translate>
</a>
</div>
</div>
</div>
</div>
<app-footer :version="version" @show:shortcuts-modal="showShortcutsModal = !showShortcutsModal"></app-footer>
<raven
v-if="$store.state.instance.settings.raven.front_enabled.value"
:dsn="$store.state.instance.settings.raven.front_dsn.value">
</raven>
<playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
<shortcuts-modal @update:show="showShortcutsModal = $event" :show="showShortcutsModal"></shortcuts-modal>
<GlobalEvents
@keydown.h.exact="showShortcutsModal = !showShortcutsModal"
/>
</template>
</div>
</template>
......@@ -92,29 +45,35 @@ import axios from 'axios'
import _ from 'lodash'
import {mapState} from 'vuex'
import { WebSocketBridge } from 'django-channels'
import GlobalEvents from '@/components/utils/global-events'
import translations from '@/translations'
import Sidebar from '@/components/Sidebar'
import AppFooter from '@/components/Footer'
import Raven from '@/components/Raven'
import ServiceMessages from '@/components/ServiceMessages'
import PlaylistModal from '@/components/playlists/PlaylistModal'
import ShortcutsModal from '@/components/ShortcutsModal'
export default {
name: 'app',
components: {
Sidebar,
AppFooter,
Raven,
PlaylistModal,
ShortcutsModal,
GlobalEvents,
ServiceMessages
},
data () {
return {
bridge: null,
nodeinfo: null,
instanceUrl: null
instanceUrl: null,
showShortcutsModal: false,
}
},
created () {
......@@ -410,4 +369,10 @@ button.reset {
-webkit-appearance: none;
text-align: inherit;
}
.ui.table > caption {
font-weight: bold;
padding: 0.5em;
text-align: left;
}
</style>
front/src/components/ShortcutsModal.vue 0 → 100644
+ 95
− 0
View file @ f1cca29a
<template>
<modal @update:show="$emit('update:show', $event)" :show="show">
<header class="header">
<translate>Keyboard shortcuts</translate>
</header>
<section class="scrolling content">
<table
class="ui compact collapsing basic fixed single line table"
v-for="section in sections"
:key="section.title">
<caption>{{ section.title }}</caption>
<tbody>
<tr v-for="shortcut in section.shortcuts" :key="shortcut.summary">
<td>{{ shortcut.summary }}</td>
<td><span class="ui label">{{ shortcut.key }}</span></td>
</tr>
</tbody>
</table>
</section>
<footer class="actions">
<div class="ui cancel button"><translate>Close</translate></div>
</footer>
</modal>
</template>
<script>
import Modal from '@/components/semantic/Modal'
export default {
props: ['show'],
components: {
Modal,
},
computed: {
sections () {
return [
{
title: this.$gettext('General shortcuts'),
shortcuts: [
{
key: 'h',
summary: this.$gettext('Show available keyboard shortcuts')
}
]
},
// space.prevent.exact="togglePlay"
// ctrl.left.prevent.exact="previous"
// ctrl.right.prevent.exact="next"
// ctrl.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
// ctrl.up.prevent.exact="$store.commit('player/incrementVolume', 0.1)"
// l.prevent.exact="$store.commit('player/toggleLooping')"
// s.prevent.exact="shuffle"
{
title: this.$gettext('Audio player shortcuts'),
shortcuts: [
{
key: 'space',
summary: this.$gettext('Pause/play the current track')
},
{
key: 'ctrl left',
summary: this.$gettext('Play previous track')
},
{
key: 'ctrl right',
summary: this.$gettext('Play next track')
},
{
key: 'ctrl up',
summary: this.$gettext('Increase volume')
},
{
key: 'ctrl down',
summary: this.$gettext('Decrease volume')
},
{
key: 'l',
summary: this.$gettext('Toggle queue looping')
},
{
key: 's',
summary: this.$gettext('Shuffle queue')
},
]
}
]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment