williamandClaude Sonnet 5
746feb3796
Nouvelle colonne _document_pages.vertical_align (top/center/bottom,
"top" par défaut, migration incluse pour les supports existants).
Quand l'onglet "Pages" du panneau gauche est actif, le panneau
Propriétés (droite) affiche maintenant l'alignement de la page active
au lieu des propriétés d'un élément — un contrôle segmenté qui persiste
via une nouvelle route dédiée et met à jour le canevas immédiatement.
Le contenu-seed des thèmes porte désormais aussi ce réglage par page
(seed_pages devient une liste de {vertical_align, blocks} plutôt qu'une
liste de listes de blocs) : la page de titre du thème "Sécurité
Incendie" est centrée verticalement, comme demandé, cohérente avec la
maquette d'origine. L'aperçu de thème (iframe de la modale) reflète
aussi ce réglage par page.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
295 lines
13 KiB
HTML
295 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Forge Engine — {{ support.name }}{% endblock %}
|
||
{% block body_class %}objectEditBody{% endblock %}
|
||
{% block content_class %}{% endblock %}
|
||
{% block extra_head %}
|
||
<link rel="stylesheet"
|
||
href="{{ url_for('static', filename='document/document-editor.css') }}">
|
||
{% if active_theme %}
|
||
{% if active_theme.font_url %}
|
||
<link rel="stylesheet" href="{{ active_theme.font_url }}">
|
||
{% endif %}
|
||
<link rel="stylesheet"
|
||
href="{{ url_for('static', filename=active_theme.css_path) }}">
|
||
{% endif %}
|
||
{% endblock %}
|
||
{% block content %}
|
||
<div class="docEditor3" id="docEditor3" data-slug="{{ support.slug }}">
|
||
<div class="docTopbar">
|
||
<div class="docCrumb">
|
||
<a href="{{ url_for('index') }}" class="docCrumbDim">Mes formations</a>
|
||
<svg width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M9 6l6 6-6 6" />
|
||
</svg>
|
||
<span class="docCrumbCur">{{ support.name }}</span>
|
||
</div>
|
||
<div class="docTopbarActions">
|
||
<button type="button"
|
||
class="docIconBtn"
|
||
id="docUndoBtn"
|
||
aria-label="Annuler"
|
||
disabled
|
||
title="Annuler (Ctrl+Z)">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M8 6L4 10l4 4" />
|
||
<path d="M4 10h9a6 6 0 1 1-4.2 10.2" />
|
||
</svg>
|
||
</button>
|
||
<button type="button"
|
||
class="docIconBtn"
|
||
id="docRedoBtn"
|
||
aria-label="Rétablir"
|
||
disabled
|
||
title="Rétablir (Ctrl+Y)">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M16 6l4 4-4 4" />
|
||
<path d="M20 10h-9a6 6 0 1 0 4.2 10.2" />
|
||
</svg>
|
||
</button>
|
||
<div class="docDividerV"></div>
|
||
<button type="button"
|
||
class="docBtnSecondary docBtnPrimary"
|
||
id="docPreviewBtn">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</svg><span class="docBtnLabel">Aperçu</span>
|
||
</button>
|
||
<button type="button"
|
||
class="docBtnSecondary"
|
||
id="docTemplateBtn">
|
||
<svg width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="1.8"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round">
|
||
<rect x="3" y="3" width="7" height="7" rx="1" />
|
||
<rect x="14" y="3" width="7" height="7" rx="1" />
|
||
<rect x="3" y="14" width="7" height="7" rx="1" />
|
||
<rect x="14" y="14" width="7" height="7" rx="1" />
|
||
</svg><span class="docBtnLabel">Utiliser un modèle</span>
|
||
</button>
|
||
<div class="docDividerV"></div>
|
||
<div class="docWidthPicker"
|
||
id="docWidthPicker"
|
||
role="group"
|
||
aria-label="Largeur d'aperçu">
|
||
<button type="button" class="docWidthBtn is-active" data-width="">Bureau</button>
|
||
<button type="button" class="docWidthBtn" data-width="768">Tablette</button>
|
||
<button type="button" class="docWidthBtn" data-width="375">Mobile</button>
|
||
</div>
|
||
<div class="docDividerV"></div>
|
||
<button type="button"
|
||
class="docIconBtn docThemeToggle"
|
||
id="docThemeToggle"
|
||
aria-label="Changer de thème"></button>
|
||
</div>
|
||
</div>
|
||
<div class="docBodyWrap">
|
||
<div class="docSidebarClose" id="docCloseLeft">← Retour au document</div>
|
||
<div class="docSidebar docSidebarLeft" id="docSidebarLeft">
|
||
{# Panneau gauche à onglets (retour utilisateur du 23/09/2026 :
|
||
"il dois avoir deux onglets") : "Mise en page" (bibliothèque
|
||
d'éléments, contenu inchangé) actif par défaut — le panneau
|
||
"Pages" (gestion complète des pages : liste/réordonner/ajouter/
|
||
supprimer/renommer) est un espace dédié plein-écran plutôt que
|
||
de se partager la hauteur avec la bibliothèque comme les
|
||
itérations précédentes (bande de vignettes, puis carrousel). #}
|
||
<div class="docSidebarTabs" role="tablist">
|
||
<button type="button"
|
||
class="docSidebarTab"
|
||
id="docTabPages"
|
||
role="tab"
|
||
aria-selected="false"
|
||
aria-controls="docTabPanelPages"
|
||
data-tab="pages">Pages</button>
|
||
<button type="button"
|
||
class="docSidebarTab is-active"
|
||
id="docTabLayout"
|
||
role="tab"
|
||
aria-selected="true"
|
||
aria-controls="docTabPanelLayout"
|
||
data-tab="layout">Mise en page</button>
|
||
</div>
|
||
<div class="docSidebarTabPanel"
|
||
id="docTabPanelPages"
|
||
role="tabpanel"
|
||
aria-labelledby="docTabPages"
|
||
hidden>
|
||
{# Bouton d'ajout EN HAUT, toujours visible (retour utilisateur du
|
||
23/09/2026 : "le bouton pour ajouter une page dois être en haut
|
||
toujours visible" — avec beaucoup de pages, il disparaissait en
|
||
bas de la liste défilante). #}
|
||
<button type="button" class="docBtnSecondary docPageManagerAdd" id="docPageManagerAdd">+ Ajouter une page</button>
|
||
<div class="docPageManagerList" id="docPageManagerList">
|
||
{% for page in pages %}
|
||
<div class="docPageRow {{ 'is-active' if page.id == active_page.id else '' }}"
|
||
role="button"
|
||
tabindex="0"
|
||
draggable="true"
|
||
data-page-id="{{ page.id }}">
|
||
{# //NOSONAR Web:S6819,Web:MouseEventWithoutKeyboardEquivalentCheck - div+role=button
|
||
volontaire : la rangée contient de vrais <button> d'action (renommer/supprimer),
|
||
qu'un <button> englobant ne pourrait pas contenir validement. L'équivalent clavier
|
||
(Entrée/Espace) est posé côté JS (forgeDocRenderPageManagerList), donc le finding
|
||
clavier de Sonar est un faux positif : l'analyseur statique ne voit pas les
|
||
addEventListener dynamiques. #}
|
||
<span class="docPageRowHandle" aria-hidden="true">⠿</span>
|
||
<span class="docPageRowNumber">{{ loop.index }}</span>
|
||
<span class="docPageRowTitle"><span class="docPageRowTitleText">{{ page.title }}</span></span>
|
||
<span class="docPageRowActions">
|
||
<button type="button"
|
||
class="docPageRowRename"
|
||
data-page-id="{{ page.id }}"
|
||
aria-label="Renommer cette page"
|
||
title="Renommer cette page">✎</button>
|
||
<button type="button"
|
||
class="docPageRowDelete"
|
||
data-page-id="{{ page.id }}"
|
||
aria-label="Supprimer cette page"
|
||
title="Supprimer cette page"
|
||
{{ 'disabled' if pages|length <= 1 else '' }}>✕</button>
|
||
</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="docSidebarTabPanel" id="docTabPanelLayout" role="tabpanel" aria-labelledby="docTabLayout">
|
||
{% for category_key, category in element_library.items() %}
|
||
<div>
|
||
<div class="docSectionLabel">{{ category.label }}</div>
|
||
<div class="docLibList">
|
||
{% for kind in category.kinds %}
|
||
<div class="docLibItem docLibItem--row"
|
||
draggable="true"
|
||
data-add="{{ kind }}">
|
||
<span class="docLibIcon docLibIcon--{{ kind }}"></span>
|
||
<span>{{ element_kind_labels[kind] }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="docCanvasArea" id="docCanvasArea">
|
||
<div class="docPage" id="docPage">
|
||
<div class="docPageContent"
|
||
id="docPageContent"
|
||
data-vertical-align="{{ active_page.vertical_align }}">{{ rendered_document|safe }}</div>
|
||
{# //NOSONAR S5247 - rendered_document vient de document_engine.render_document, qui échappe (html.escape) tout contenu utilisateur avant interpolation (voir document_engine/rendering/render_document_element.py) ; jamais de HTML brut non échappé ici #}
|
||
</div>
|
||
<button type="button"
|
||
class="docPreviewExitBtn"
|
||
id="docPreviewExitBtn"
|
||
aria-label="Retour à l'éditeur"
|
||
title="Retour à l'éditeur">✕ Retour à l'éditeur</button>
|
||
<div class="docZoomPill">
|
||
<button type="button" id="docZoomOut" aria-label="Zoom -">−</button>
|
||
<span id="docZoomVal">100%</span>
|
||
<button type="button" id="docZoomIn" aria-label="Zoom +">+</button>
|
||
</div>
|
||
<div class="docPageNavPill" id="docPageNavPill">
|
||
<button type="button" id="docPagePrevBtn" aria-label="Page précédente">‹</button>
|
||
<span id="docPageNavLabel"></span>
|
||
<button type="button" id="docPageNextBtn" aria-label="Page suivante">›</button>
|
||
</div>
|
||
</div>
|
||
<div class="docSidebarClose" id="docCloseRight">← Retour au document</div>
|
||
<div class="docSidebar docSidebarRight" id="docSidebarRight">
|
||
<div id="docPropsPanel">
|
||
<div class="docSectionLabel">Propriétés</div>
|
||
<div class="docEmptyState">Sélectionnez un élément du document pour voir ses propriétés.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="docBottomNav" id="docBottomNav">
|
||
<button type="button" data-target="left">Éléments</button>
|
||
<button type="button" data-target="doc" class="is-active">Document</button>
|
||
<button type="button" data-target="right">Propriétés</button>
|
||
</div>
|
||
</div>
|
||
<div class="docModalBackdrop" id="docScenarioTreeModal">
|
||
<div class="docModalDialog">
|
||
<div class="docModalHeader">
|
||
<span class="docModalTitle" id="docScenarioTreeModalTitle">Arbre du scénario</span>
|
||
<button type="button"
|
||
class="docModalCloseBtn"
|
||
id="docScenarioTreeModalClose"
|
||
aria-label="Fermer">✕</button>
|
||
</div>
|
||
<div class="docModalBody" id="docScenarioTreeModalBody"></div>
|
||
</div>
|
||
</div>
|
||
<div class="docModalBackdrop" id="docTemplateModal">
|
||
<div class="docModalDialog docModalDialog--wide">
|
||
<div class="docModalHeader">
|
||
<span class="docModalTitle">Utiliser un modèle</span>
|
||
<button type="button"
|
||
class="docModalCloseBtn"
|
||
id="docTemplateModalClose"
|
||
aria-label="Fermer">✕</button>
|
||
</div>
|
||
<div class="docModalBody docTemplateModalBody">
|
||
<div class="docTemplateList" id="docTemplateList"></div>
|
||
<div class="docTemplatePreviewPane">
|
||
<iframe class="docTemplatePreviewFrame"
|
||
id="docTemplatePreviewFrame"
|
||
title="Aperçu du modèle"></iframe>
|
||
<div class="docTemplatePreviewEmpty"
|
||
id="docTemplatePreviewEmpty">Sélectionnez un modèle pour le visualiser.</div>
|
||
<div class="docTemplatePreviewActions"
|
||
id="docTemplatePreviewActions"
|
||
hidden>
|
||
<button type="button" class="docBtnSecondary" id="docTemplateKeepContentBtn">Utiliser mon contenu actuel</button>
|
||
<button type="button" class="docBtnSecondary docBtnPrimary" id="docTemplateUseContentBtn">Utiliser le contenu du modèle</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
window.FORGE_DOCUMENT = {
|
||
slug: {{ support.slug|tojson }},
|
||
elements: {{ elements|tojson }},
|
||
elementKindLabels: {{ element_kind_labels|tojson }},
|
||
pages: {{ pages|tojson }},
|
||
activePageId: {{ active_page.id|tojson }},
|
||
themes: {{ document_themes|tojson }},
|
||
activeThemeId: {{ support.theme|tojson }}
|
||
};
|
||
</script>
|
||
<script src="{{ url_for('static', filename='document/js/document-editor.js') }}"></script>
|
||
{% endblock %}
|