fix: la section Aide est positionnée comme Settings (v7.69.3)
La section Aide et la section Settings partagent le même gabarit (`.settings-overlay` / `.settings-panel`) et la même feuille de style (`static/css/settings.css`), mais affichaient deux rendus différents. Cause : `help.html` neutralisait son overlay via un style INLINE sur la balise — `position:static`, `background:none`, `backdrop-filter:none`, `padding:0` — et imposait par-dessus un panneau `width:100%;max-width:1050px; height:calc(100vh - 120px);margin:0 auto`. Settings, lui, laissait `settings.css` faire son travail : overlay `fixed;inset:0` avec fond flouté, panneau `85vh` centré par `margin:auto`. Résultat perçu : Aide s'affichait comme un bloc posé dans la page, Settings comme une modale centrée floutant l'arrière-plan — malgré un code quasi identique. Correctif : les surcharges inline sont retirées de `help.html`. La géométrie vient désormais entièrement de `settings.css`, commun aux deux pages. Aucune valeur n'est dupliquée ; les deux balises sont strictement identiques. Vérifié en e2e en comparant les géométries CALCULÉES des deux pages (pas des valeurs de code) : overlay `fixed` avec fond opère des deux côtés, panneau 1050x765 centré à top:68px, bouton close à 13/13px du coin du panneau — les deux jeux de mesures sont identiques. Tests : `tests/test_v7693_help_positioning.py` (5) verrouille l'absence de surcharges inline et l'identité de balise avec Settings ; `e2e/v7693_help_positioning.spec.js` compare les géométries calculées. NON INCLUS — double-clic sur le bouton close de Settings : le bug a été REPRODUIT en e2e et sa cause racine identifiée, mais le correctif n'est volontairement PAS dans ce commit. Voir ROADMAP.md § v7.69.3 pour le relevé complet et la prochaine étape. pytest 1421 passed / 0 failed · ruff OK · e2e 15/15 verts sur l'instance déployée
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
// v7.69.3 — la section Aide doit avoir le MÊME positionnement que Settings
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const FD_BASE = process.env.FD_BASE_URL || 'http://localhost:8081';
|
||||
const USER = process.env.FD_USER || '[email protected]';
|
||||
const PASS = process.env.FD_PASS || 'e2e-secret-123';
|
||||
|
||||
async function login(page) {
|
||||
await page.goto(`${FD_BASE}/auth/login?provider=local`, { waitUntil: 'domcontentloaded' });
|
||||
await page.fill('#email', USER);
|
||||
await page.fill('#password', PASS);
|
||||
await page.click('.btn-primary');
|
||||
await page.waitForURL('**/workspaces', { timeout: 8000 }).catch(() => {});
|
||||
}
|
||||
|
||||
// géométrie de l'overlay + du panneau, telle que perçue à l'écran
|
||||
const geo = (page) =>
|
||||
page.evaluate(() => {
|
||||
const ov = document.querySelector('.settings-overlay');
|
||||
const pn = document.querySelector('.settings-panel');
|
||||
const o = getComputedStyle(ov);
|
||||
const p = getComputedStyle(pn);
|
||||
const r = pn.getBoundingClientRect();
|
||||
return {
|
||||
ovPosition: o.position,
|
||||
ovBgSet: o.backgroundColor !== 'rgba(0, 0, 0, 0)',
|
||||
pnWidth: Math.round(r.width),
|
||||
pnHeight: Math.round(r.height),
|
||||
pnCentered: Math.abs(r.left - (window.innerWidth - r.width) / 2) < 24,
|
||||
pnTop: Math.round(r.top),
|
||||
closeTop: Math.round(document.querySelector('.settings-close').getBoundingClientRect().top - r.top),
|
||||
closeRight: Math.round(r.right - document.querySelector('.settings-close').getBoundingClientRect().right),
|
||||
};
|
||||
});
|
||||
|
||||
test('Aide et Settings partagent le même positionnement', async ({ page }) => {
|
||||
await login(page);
|
||||
await page.goto(`${FD_BASE}/help`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(400);
|
||||
const h = await geo(page);
|
||||
|
||||
await page.goto(`${FD_BASE}/settings`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(400);
|
||||
const s = await geo(page);
|
||||
|
||||
console.log('HELP =', JSON.stringify(h));
|
||||
console.log('SETTING=', JSON.stringify(s));
|
||||
|
||||
// l'overlay de Aide n'est plus désactivé en inline
|
||||
expect(h.ovPosition).toBe(s.ovPosition);
|
||||
expect(h.ovPosition).toBe('fixed');
|
||||
expect(h.ovBgSet).toBe(true);
|
||||
// panneau centré et de la même taille que Settings
|
||||
expect(h.pnCentered).toBe(true);
|
||||
expect(h.pnWidth).toBe(s.pnWidth);
|
||||
expect(h.pnHeight).toBe(s.pnHeight);
|
||||
// le bouton close occupe la même place relative au panneau
|
||||
expect(h.closeTop).toBe(s.closeTop);
|
||||
expect(h.closeRight).toBe(s.closeRight);
|
||||
await page.goto(`${FD_BASE}/help`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(300);
|
||||
await page.screenshot({ path: 'shots/v7693-help-overlay.png' });
|
||||
});
|
||||
Reference in New Issue
Block a user