lafrite/pdf_oralia_vibe
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): bascule le flux extraction/edition en theme sombre

Browse Source 
Tout ce flux (visionneuse de donnees, fiches locataire et operation,
tagging, autocompletion, panneau de differences) etait en theme clair,
au milieu d'une application sombre : le contraste sautait a chaque
passage d'une page a l'edition d'un document.

Les surfaces, bordures, textes et etats colores suivent desormais la
palette commune. Les champs natifs (date, nombre, cases a cocher)
recoivent color-scheme: dark pour que le calendrier et les widgets
systeme s'affichent en sombre eux aussi.

Les fiches de metadonnees se repartissent sur 2 puis 3 colonnes selon la
largeur disponible, au lieu d'une seule colonne.

Le bouton « Annuler » du bandeau de tagging devient « Retour a
l'edition », qui decrit son action reelle.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Bertrand Benjamin
2026-07-25 19:50:02 +02:00
parent aa365dbb63
commit 02a3459291
13 changed files with 180 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/components/ReExtractionDiff.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="flex-shrink-0 border-b border-amber-300 bg-amber-50">
<div class="flex-shrink-0 border-b border-amber-500/40 bg-amber-500/10">
<!-- En-tête -->
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center gap-2 text-sm">
<svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
<span v-if="diff.summary.total === 0" class="font-medium text-amber-800">
<span v-if="diff.summary.total === 0" class="font-medium text-amber-300">
Nouvelle extraction — aucune différence avec la version précédente
</span>
<span v-else class="font-medium text-amber-800">
<span v-else class="font-medium text-amber-300">
Nouvelle extraction — {{ diff.summary.total }} différence{{ diff.summary.total > 1 ? 's' : '' }}
<span class="text-amber-600 font-normal">
<span class="text-amber-400/80 font-normal">
({{ diff.summary.metadata }} métadonnée{{ diff.summary.metadata > 1 ? 's' : '' }},
{{ diff.summary.locataires }} locataire{{ diff.summary.locataires > 1 ? 's' : '' }},
{{ diff.summary.operations }} opération{{ diff.summary.operations > 1 ? 's' : '' }})
@@ -22,7 +22,7 @@
<div class="flex items-center gap-2">
<button
@click="$emit('revert')"
class="px-2 py-1 text-xs text-amber-700 hover:text-amber-900 hover:bg-amber-100 rounded transition-colors"
class="px-2 py-1 text-xs text-amber-300 hover:text-amber-100 hover:bg-amber-500/20 rounded transition-colors"
title="Restaurer les données d'avant la re-extraction"
>
Revenir à la version précédente
@@ -30,13 +30,13 @@
<button
v-if="diff.summary.total > 0"
@click="open = !open"
class="px-2 py-1 text-xs text-amber-700 hover:text-amber-900 hover:bg-amber-100 rounded transition-colors"
class="px-2 py-1 text-xs text-amber-300 hover:text-amber-100 hover:bg-amber-500/20 rounded transition-colors"
>
{{ open ? 'Masquer le détail' : 'Voir le détail' }}
</button>
<button
@click="$emit('close')"
class="p-1 text-amber-500 hover:text-amber-700 hover:bg-amber-100 rounded transition-colors"
class="p-1 text-amber-400 hover:text-amber-200 hover:bg-amber-500/20 rounded transition-colors"
title="Fermer"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -50,33 +50,33 @@
<div v-if="open && diff.summary.total > 0" class="max-h-56 overflow-auto px-4 pb-3 space-y-3 text-xs">
<!-- Métadonnées -->
<div v-if="diff.metadata.length">
<div class="font-semibold text-amber-800 mb-1">Métadonnées</div>
<div class="font-semibold text-amber-300 mb-1">Métadonnées</div>
<div class="space-y-0.5">
<div v-for="(c, i) in diff.metadata" :key="'m' + i" class="flex items-baseline gap-2">
<span class="text-gray-500 w-40 flex-shrink-0">{{ c.label }}</span>
<span class="text-red-600 line-through">{{ c.before }}</span>
<span class="text-gray-400">→</span>
<span class="text-green-700 font-medium">{{ c.after }}</span>
<span class="text-red-400 line-through">{{ c.before }}</span>
<span class="text-gray-500">→</span>
<span class="text-green-400 font-medium">{{ c.after }}</span>
</div>
</div>
</div>
<!-- Locataires -->
<div v-if="diff.locataires.length">
<div class="font-semibold text-amber-800 mb-1">Locataires</div>
<div class="font-semibold text-amber-300 mb-1">Locataires</div>
<div class="space-y-1.5">
<div v-for="(loc, i) in diff.locataires" :key="'l' + i" class="bg-white/60 rounded p-1.5">
<div v-for="(loc, i) in diff.locataires" :key="'l' + i" class="bg-gray-900/70 border border-gray-700 rounded p-1.5">
<div class="flex items-center gap-2 mb-0.5">
<span :class="kindClass(loc.kind)" class="text-[10px] uppercase font-semibold px-1 rounded">
{{ kindLabel(loc.kind) }}
</span>
<span class="font-medium text-gray-700">{{ loc.title }}</span>
<span class="font-medium text-gray-200">{{ loc.title }}</span>
</div>
<div v-for="(f, j) in loc.fields" :key="j" class="flex items-baseline gap-2 pl-2">
<span class="text-gray-500 w-24 flex-shrink-0">{{ f.label }}</span>
<span class="text-red-600 line-through break-all">{{ f.before }}</span>
<span class="text-gray-400">→</span>
<span class="text-green-700 font-medium break-all">{{ f.after }}</span>
<span class="text-red-400 line-through break-all">{{ f.before }}</span>
<span class="text-gray-500">→</span>
<span class="text-green-400 font-medium break-all">{{ f.after }}</span>
</div>
</div>
</div>
@@ -84,9 +84,9 @@
<!-- Opérations -->
<div v-if="diff.operations.length">
<div class="font-semibold text-amber-800 mb-1">Opérations</div>
<div class="font-semibold text-amber-300 mb-1">Opérations</div>
<div class="space-y-1.5">
<div v-for="(op, i) in diff.operations" :key="'o' + i" class="bg-white/60 rounded p-1.5">
<div v-for="(op, i) in diff.operations" :key="'o' + i" class="bg-gray-900/70 border border-gray-700 rounded p-1.5">
<div class="flex items-center gap-2 mb-0.5">
<span :class="kindClass(op.kind)" class="text-[10px] uppercase font-semibold px-1 rounded">
{{ kindLabel(op.kind) }}
@@ -94,8 +94,8 @@
<span v-if="op.index >= 0" class="text-gray-500">opération #{{ op.index + 1 }}</span>
</div>
<div class="pl-2">
<div class="text-red-600 line-through break-all">{{ op.before }}</div>
<div class="text-green-700 font-medium break-all">{{ op.after }}</div>
<div class="text-red-400 line-through break-all">{{ op.before }}</div>
<div class="text-green-400 font-medium break-all">{{ op.after }}</div>
</div>
</div>
</div>
@@ -125,8 +125,8 @@ function kindLabel(kind) {
}
function kindClass(kind) {
if (kind === 'added') return 'bg-green-100 text-green-700'
if (kind === 'removed') return 'bg-red-100 text-red-700'
return 'bg-amber-100 text-amber-700'
if (kind === 'added') return 'bg-green-500/20 text-green-300'
if (kind === 'removed') return 'bg-red-500/20 text-red-300'
return 'bg-amber-500/20 text-amber-300'
}
</script>