152 lines
4.1 KiB
Vue
152 lines
4.1 KiB
Vue
<template>
|
|
<div class="reader-controls">
|
|
<button @click="onPrevious" :disabled="isFirstPage" class="nav-button">
|
|
<ChevronLeftIcon class="h-6 w-6" />
|
|
</button>
|
|
|
|
<div class="controls-center">
|
|
<div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
|
|
<div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
|
|
<ChapterSelector
|
|
:available-chapters="availableChapters"
|
|
@chapter-selected="onChapterSelected"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-right">
|
|
<!-- Bouton paramètres intégré -->
|
|
<button @click="onToggleSettings" class="settings-button" :class="{ 'active': settingsOpen }" title="Paramètres">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button @click="onNext" :disabled="isLastPage" class="nav-button">
|
|
<ChevronRightIcon class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
|
|
import ChapterSelector from './ChapterSelector.vue';
|
|
|
|
defineProps({
|
|
currentPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
totalPages: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isFirstPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isLastPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
availableChapters: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
settingsOpen: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['previous', 'next', 'chapter-selected', 'toggle-settings']);
|
|
|
|
const onPrevious = () => emit('previous');
|
|
const onNext = () => emit('next');
|
|
const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
|
|
const onToggleSettings = () => emit('toggle-settings');
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.reader-controls {
|
|
@apply flex items-center justify-between p-4 bg-gray-800;
|
|
}
|
|
|
|
/* Responsive pour reader-controls */
|
|
@media (max-width: 480px) {
|
|
.reader-controls {
|
|
padding: 0.5rem;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.controls-center {
|
|
@apply flex flex-col items-center space-y-2;
|
|
}
|
|
|
|
/* Responsive pour controls-center */
|
|
@media (max-width: 480px) {
|
|
.controls-center {
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.controls-right {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
/* Responsive pour controls-right */
|
|
@media (max-width: 480px) {
|
|
.controls-right {
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.page-info {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.chapter-selector-wrapper {
|
|
@apply min-w-[120px] max-w-[200px];
|
|
}
|
|
|
|
/* Responsive pour chapter-selector-wrapper */
|
|
@media (max-width: 480px) {
|
|
.chapter-selector-wrapper {
|
|
min-width: 100px;
|
|
max-width: 60vw;
|
|
}
|
|
}
|
|
|
|
.nav-button {
|
|
@apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
|
|
}
|
|
|
|
/* Responsive pour nav-button */
|
|
@media (max-width: 480px) {
|
|
.nav-button {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
.nav-button:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.settings-button {
|
|
@apply px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors duration-200 flex items-center justify-center;
|
|
}
|
|
|
|
/* Responsive pour settings-button */
|
|
@media (max-width: 480px) {
|
|
.settings-button {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
.settings-button.active {
|
|
@apply bg-blue-600 hover:bg-blue-700;
|
|
}
|
|
</style>
|