sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(translate): redesign glossary and translate images card layout to match mockup compact styling
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m31s
Details

Browse Source
This commit is contained in:
sepehr
2026-05-31 10:58:22 +02:00
parent a5b18b5a24
commit cd8a57324d
3 changed files with 271 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/app/dashboard/translate/page.tsx
View File

@@ -525,40 +525,48 @@ export default function TranslatePage() {
</div>
)}
{/* Glossary — Pro + LLM mode only */}
{config.isPro && config.mode === 'llm' && (
<GlossarySelector
sourceLang={config.sourceLang}
targetLang={config.targetLang}
isPro={config.isPro}
glossaryId={config.glossaryId}
onChange={config.setGlossaryId}
disabled={submit.isSubmitting}
/>
)}
{/* Glossary selector */}
<GlossarySelector
sourceLang={config.sourceLang}
targetLang={config.targetLang}
isPro={config.isPro}
mode={config.mode}
glossaryId={config.glossaryId}
onChange={config.setGlossaryId}
disabled={submit.isSubmitting}
/>
{/* Translate Images — Office files and LLM mode only */}
{!isPdf && config.mode === 'llm' && (
<div className="flex items-start justify-between rounded-2xl border border-black/5 dark:border-white/5 bg-brand-muted/30 dark:bg-white/5 p-4">
<div className="flex gap-3 min-w-0 flex-1">
<ImageIcon className="size-4 shrink-0 text-brand-accent mt-0.5" />
<div className="flex flex-col text-left">
<span className="text-[10px] font-bold uppercase tracking-tight text-brand-dark dark:text-white">
{t('dashboard.translate.translateImages') || 'Traduire les images'}
</span>
<span className="text-[8px] text-brand-dark/40 dark:text-white/40 font-bold uppercase tracking-widest mt-1.5 leading-normal">
{t('dashboard.translate.translateImagesDesc') || 'Traduire les textes incrustés'}
</span>
</div>
{/* Translate Images */}
<div className="bg-brand-muted/30 dark:bg-white/[0.02] border border-black/[0.03] dark:border-white/[0.03] p-4 rounded-xl space-y-3">
<div className="flex justify-between items-center">
<div className="flex items-center gap-2">
<ImageIcon className="size-3.5 text-brand-accent shrink-0" />
<span className="text-[9px] font-black uppercase tracking-[0.1em] text-brand-dark dark:text-white">
{t('dashboard.translate.translateImages') || "Traduire les images"}
</span>
</div>
<Switch
checked={config.translateImages}
checked={config.translateImages && config.mode === 'llm'}
onCheckedChange={config.setTranslateImages}
disabled={submit.isSubmitting}
aria-label={t('dashboard.translate.translateImages')}
disabled={submit.isSubmitting || config.mode === 'classic'}
aria-label={t('dashboard.translate.translateImages') || "Traduire les images"}
/>
</div>
)}
{config.mode === 'classic' ? (
<div className="p-2.5 bg-brand-dark/5 dark:bg-white/5 rounded-lg text-center">
<span className="text-[7.5px] font-black uppercase opacity-45 block">
Indisponible en mode Standard (IA uniquement)
</span>
</div>
) : (
<div className="px-1">
<span className="text-[7.5px] font-medium text-brand-dark/50 dark:text-white/50 block leading-normal">
{t('dashboard.translate.translateImagesDesc') || "Détecter et traduire automatiquement les textes incrustés dans vos images."}
</span>
</div>
)}
</div>
{/* PDF mode selector */}
{isPdf && (