Add a Font Awesome icon gallery to the properties panel, draggable onto the screen

New "Icône" widget (<i class="...">, color/size customizable exactly like any other widget) plus a curated set of ~250 verified Font Awesome 5 Free solid icon names (fontawesome_icons.py) — not the full ~1500-icon catalog, since an embedded list needs to be guaranteed accurate (a wrong class name silently renders as a blank glyph); any other valid FA5 class still works by typing it directly into the widget's "Icône" setting.

The gallery lives in the (now always-visible) top of the right floating panel, searchable, with each tile both clickable and HTML5-draggable onto the canvas — either action posts to element_add with the chosen icon_class, which now seeds the new element's class instead of leaving it on the generic default. Available in the element-type template editor too, since it reuses screen_edit.html.

Loads Font Awesome 5.15.4 (cdnjs) alongside the existing animate.css/Bulma links, in both the editor and /play.

Verified end to end: gallery renders with real icon glyphs, clicking/simulated-drop creates a correctly-classed <i> element, and the actual /play route renders it with Font Awesome loaded. Full suite green (89).
This commit is contained in:
william
2026-08-24 19:10:25 +02:00
parent 850242d1d4
commit cc0442ef5f
8 changed files with 162 additions and 0 deletions
+16
View File
@@ -315,4 +315,20 @@ WIDGETS = {
"w": 60, "h": 40, "default_content": "",
"controls": BULMA_TABS_CONTROLS,
},
"icone": {
# La classe Font Awesome ("fa-solid fa-xxx") EST le contenu visuel de
# ce widget — posée soit en cliquant/glissant une icône depuis la
# galerie du panneau de propriétés (voir routes/elements/element_add.py,
# qui pré-remplit ce réglage), soit tapée à la main ici pour n'importe
# quelle icône Font Awesome 5 hors de la sélection curatée de la
# galerie (voir fontawesome_icons.py).
"label": "Icône", "icon": "🔤", "tag": "i", "has_content": False,
"w": 15, "h": 15, "default_content": "",
"controls": [
c_text("icon_class", "Icône (classe Font Awesome 5)", "attr:class",
default="fa-solid fa-star", placeholder="fa-solid fa-heart", group="Contenu"),
c_slider("font-size", "Taille", "style:font-size", min=10, max=160, default=32, group="Texte"),
c_color("color", "Couleur", "style:color", "#e8eaf0", group="Texte"),
],
},
}