Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Ajoute icône/largeur/arrondi/gras/majuscules à l'étiquette (badge)

Browse Source 
Nouveaux attributs par élément (svg_markup/width/border_radius/bold/
uppercase, tous vides ou False par défaut = comportement historique
inchangé), réglables depuis le panneau Propriétés — même esprit que
bold/align/color déjà présents sur titre/paragraphe. Fixer une largeur
implique toujours de sortir de l'étirement pleine largeur par défaut
(align-self:flex-start posé automatiquement avec elle).

Le kicker "Module obligatoire" du thème Sécurité Incendie s'en sert
maintenant (icône flamme, largeur au contenu, arrondi complet, gras,
majuscules) pour être conforme à la maquette d'origine — la puce
décorative CSS générique qui la remplaçait disparaît du thème.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-09-24 11:36:30 +02:00
co-authored by Claude Sonnet 5
parent 1296edc2f8
commit e03bea39c5
9 changed files with 194 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/document/js/document-editor.js
+17 -3
View File
@@ -1800,11 +1800,25 @@ function forgeDocRenderBadgeProps(panel, el) {
panel.innerHTML = `
${forgeDocPropsHeader('étiquette')}
<div class="docField"><label for="docBadgeContent">Contenu</label><input type="text" id="docBadgeContent" value="${forgeDocEscapeHtml(a.content || '')}"></div>
<div class="docField"><label for="docBadgeSvg">Icône SVG (optionnel)</label><textarea id="docBadgeSvg" rows="3">${forgeDocEscapeHtml(a.svg_markup || '')}</textarea></div>
<div class="docField">
<span class="docFieldLabel">Mise en forme</span>
<div class="docToolbarRow">
<button type="button" class="docFmtBtn ${a.bold ? 'is-active' : ''}" id="docBadgeBoldBtn" title="Gras">B</button>
<button type="button" class="docFmtBtn ${a.uppercase ? 'is-active' : ''}" id="docBadgeUppercaseBtn" title="Majuscules">AA</button>
</div>
</div>
<div class="docField"><label for="docBadgeWidth">Largeur (optionnel, ex. fit-content, 220px)</label><input type="text" id="docBadgeWidth" value="${forgeDocEscapeHtml(a.width || '')}" placeholder="pleine largeur"></div>
<div class="docField"><label for="docBadgeRadius">Arrondi des bords (optionnel, ex. 7px, 999px)</label><input type="text" id="docBadgeRadius" value="${forgeDocEscapeHtml(a.border_radius || '')}"></div>
${forgeDocDeleteButtonHtml()}
`;
document.getElementById('docBadgeContent').addEventListener('change', (e) => {
forgeDocUpdateAttributes(el.id, { ...el.attributes, content: e.target.value });
});
function patch(partial) { forgeDocUpdateAttributes(el.id, { ...el.attributes, ...partial }); }
document.getElementById('docBadgeContent').addEventListener('change', (e) => patch({ content: e.target.value }));
document.getElementById('docBadgeSvg').addEventListener('change', (e) => patch({ svg_markup: e.target.value.trim() }));
document.getElementById('docBadgeBoldBtn').addEventListener('click', () => patch({ bold: !a.bold }));
document.getElementById('docBadgeUppercaseBtn').addEventListener('click', () => patch({ uppercase: !a.uppercase }));
document.getElementById('docBadgeWidth').addEventListener('change', (e) => patch({ width: e.target.value.trim() }));
document.getElementById('docBadgeRadius').addEventListener('change', (e) => patch({ border_radius: e.target.value.trim() }));
}
function forgeDocRenderCarteProps(panel, el) {
static/document/themes/securite-incendie.css
+18 -7
View File
@@ -61,10 +61,15 @@
background: linear-gradient(90deg, var(--theme-safety-red), var(--theme-hazard-amber));
}
/* ---- Étiquette (badge) : encart compact type avertissement/repère,
avec une puce décorative (::before, glyphe générique — le kind
"badge" du moteur ne porte aucun slot d'icône, voir
document_engine/rendering/render_document_element.py::_render_badge). ---- */
/* ---- Étiquette (badge) : encart compact type avertissement/repère.
L'icône est maintenant un vrai contenu (attribut svg_markup, voir
_render_badge) plutôt qu'un glyphe CSS décoratif — un thème n'a plus
qu'à dimensionner l'icône fournie, jamais à en inventer une. Largeur/
arrondi/gras/majuscules restent des attributs PAR ÉLÉMENT (voir
element_kind_labels.element_default_attributes) : ce thème ne pose
ici que l'apparence par défaut d'un badge SANS ces réglages (pleine
largeur, 7px d'arrondi) — le contenu-seed du kicker "Module
obligatoire" les override lui-même (voir securite_incendie_seed.py). ---- */
.docBadge {
display: inline-flex;
align-items: center;
@@ -79,10 +84,16 @@
border-radius: 7px;
}
.docBadge::before {
content: "●";
.docBadgeIcon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--theme-safety-red);
font-size: 9px;
}
.docBadgeIcon svg {
width: 13px;
height: 13px;
}
/* ---- Liste à puces / numérotée : coche sécurité / pastille panneau ---- */