PointTrackApp / src /components /ShortcutsView.vue
2nzi's picture
first commit
b4f9490 verified
<template>
<div class="shortcuts-view">
<div class="shortcuts-header">
<h3>Raccourcis Clavier</h3>
</div>
<div class="shortcuts-content">
<div class="shortcuts-section">
<h4>Labellisation</h4>
<div class="shortcut-list">
<div class="shortcut-item">
<div class="shortcut-key">1</div>
<div class="shortcut-description">Player Team 1</div>
</div>
<div class="shortcut-item">
<div class="shortcut-key">2</div>
<div class="shortcut-description">Player Team 2</div>
</div>
<div class="shortcut-item">
<div class="shortcut-key">3</div>
<div class="shortcut-description">Ball</div>
</div>
</div>
</div>
<div class="shortcuts-section">
<h4>Objets</h4>
<div class="shortcut-list">
<div class="shortcut-item">
<div class="shortcut-key">N</div>
<div class="shortcut-description">Créer un nouvel objet</div>
</div>
<div class="shortcut-item">
<div class="shortcut-key">Ctrl + Suppr</div>
<div class="shortcut-description">Supprimer l'objet sélectionné</div>
</div>
</div>
</div>
<div class="shortcuts-section">
<h4>Navigation</h4>
<div class="shortcut-list">
<div class="shortcut-item">
<div class="shortcut-key">Espace</div>
<div class="shortcut-description">Lecture/Pause vidéo</div>
</div>
<div class="shortcut-item">
<div class="shortcut-key">←/→</div>
<div class="shortcut-description">Avancer/Reculer dans la vidéo</div>
</div>
<div class="shortcut-item">
<div class="shortcut-key">Échap</div>
<div class="shortcut-description">Fermer les popups</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ShortcutsView'
}
</script>
<style scoped>
.shortcuts-view {
height: 100%;
padding: 16px;
color: white;
overflow-y: auto;
}
.shortcuts-header {
margin-bottom: 20px;
text-align: center;
}
.shortcuts-header h3 {
margin: 0;
font-size: 1.2rem;
color: #fff;
}
.shortcuts-content {
display: flex;
flex-direction: column;
gap: 24px;
}
.shortcuts-section h4 {
margin: 0 0 12px 0;
font-size: 1rem;
border-bottom: 1px solid #4a4a4a;
padding-bottom: 4px;
}
.shortcut-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.shortcut-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: #3c3c3c;
border-radius: 6px;
transition: background 0.2s;
}
.shortcut-item:hover {
background: #4a4a4a;
}
.shortcut-key {
background: #555;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.8rem;
font-weight: bold;
min-width: 60px;
text-align: center;
border: 1px solid #666;
}
.shortcut-description {
flex: 1;
color: #e2e8f0;
font-size: 0.9rem;
}
</style>