colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(conversion): aligner l'UI de conversion sur le design system import #20

Merged
colgora merged 2 commits from style/conversion-ui-align-import into main 2026-03-15 20:24:43 +01:00
Conversation 0 Commits 2 Files Changed 1 +103 -95
1 changed files with 103 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
View File

@@ -1,34 +1,24 @@
<template>
<div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
<div class="overflow-y-auto flex-1">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col h-full">
<Toolbar :config="toolbarConfig" />
<div class="overflow-y-auto flex-1">
<div class="px-6 py-8">
<!-- Zone d'upload -->
<section class="border-t border-gray-200 dark:border-gray-700 pt-6">
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichier</h2>
<FileUploadArea
:selected-file="conversionStore.currentFile"
:disabled="conversionStore.isProcessing"
@file-selected="handleFileSelected"
@file-cleared="handleFileClear"
/>
</section>
<div v-if="conversionStore.hasSelectedFile && !conversionStore.hasSucceeded" class="mt-6 flex justify-center">
<button
@click="handleConvert"
:disabled="conversionStore.isProcessing"
:class="[
'flex items-center gap-2 px-6 py-3 text-white font-medium rounded-lg transition-colors',
conversionStore.isProcessing
? 'bg-gray-400 cursor-not-allowed'
: 'bg-green-600 hover:bg-green-700'
]"
>
<ArrowPathIcon :class="['w-5 h-5', conversionStore.isProcessing && 'animate-spin']" />
{{ conversionStore.isProcessing ? 'Conversion en cours...' : 'Convertir en CBZ' }}
</button>
</div>
<!-- Progression -->
<section v-if="showProgress" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
<ConversionProgress
v-if="showProgress"
class="mt-6"
:is-converting="conversionStore.isProcessing"
:progress="conversionStore.conversionProgress"
:is-success="conversionStore.hasSucceeded"
@@ -40,10 +30,12 @@
@download="handleDownload"
@reset="handleReset"
/>
</section>
<div v-if="conversionStore.conversionCount > 0" class="mt-8">
<!-- Historique -->
<section v-if="conversionStore.conversionCount > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Historique</h3>
<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Historique</h2>
<button
@click="conversionStore.clearHistory()"
class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
@@ -51,7 +43,7 @@
Effacer
</button>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="divide-y divide-gray-100 dark:divide-gray-700/50">
<div
v-for="(conversion, index) in conversionStore.conversionHistory"
:key="index"
@@ -69,7 +61,7 @@
</div>
</div>
</div>
</div>
</section>
</div>
</div>
@@ -79,6 +71,7 @@
<script setup>
import { ArrowPathIcon } from '@heroicons/vue/24/outline';
import { computed, onMounted } from 'vue';
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
import { useConversionStore } from '../../application/store/conversionStore';
import { useNotifications } from '../../../../shared/composables/useNotifications';
import ConversionProgress from '../components/ConversionProgress.vue';
@@ -92,6 +85,21 @@ const showProgress = computed(() =>
(conversionStore.isProcessing || conversionStore.hasSucceeded || conversionStore.hasError)
);
const toolbarConfig = computed(() => ({
leftSection: [
{ type: 'label', text: 'Conversion CBR → CBZ', class: 'text-sm font-medium' },
],
rightSection: [
...(conversionStore.hasSelectedFile && !conversionStore.hasSucceeded ? [{
type: 'button',
icon: ArrowPathIcon,
label: conversionStore.isProcessing ? 'Conversion en cours...' : 'Convertir en CBZ',
onClick: handleConvert,
disabled: conversionStore.isProcessing,
}] : []),
],
}));
const handleFileSelected = (file) => {
conversionStore.selectFile(file);
};