diff --git a/static/style.css b/static/style.css index 014e4160..9bda1b28 100644 --- a/static/style.css +++ b/static/style.css @@ -114,7 +114,7 @@ body.objectEditBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden .content-objectEdit .colLeft{ overflow-y:auto; height:100%; } .content-objectEdit .colRight{ display:flex; flex-direction:column; min-height:0; height:100%; } .content-objectEdit .colRight h2{ flex:0 0 auto; } -.content-objectEdit .colRight > .hint{ flex:0 0 auto; } +.content-objectEdit .colRight > .hint, .content-objectEdit .colRight > button{ flex:0 0 auto; } .fieldsTableWrap{ flex:1 1 auto; min-height:0; overflow:auto; border:1px solid var(--border); border-radius:8px; } .fieldsTable{ width:100%; border-collapse:collapse; font-size:12.5px; } @@ -149,7 +149,6 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d width:100%; max-width:1600px; } -.content-builder > .fieldRow:first-child{ flex:0 0 auto; } /* 3 colonnes : ajout d'éléments (gauche) / écran en grand (centre) / propriétés (droite) — toutes les trois occupent exactement la même hauteur (celle qui reste @@ -375,37 +374,26 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p .floatPanelReopenBtn{ display:none !important; } } -/* ---------- Logique de la scène : éditeur de flow à nœuds ---------- */ -/* Panneau du bas, dans le même flux flexbox que .builder3 (pas une - surcouche/overlay) : replié, il ne prend que la hauteur de son en-tête et - .builder3 récupère tout le reste de l'espace ; ouvert, sa hauteur est - fixée en pixels (réglable à la souris via la poignée juste au-dessus) et - .builder3 rétrécit d'autant automatiquement — jamais l'un par-dessus - l'autre. */ -.flowPanel{ - flex:0 0 auto; border:1px solid var(--border); border-radius:10px; background:var(--panel); - margin-top:8px; display:flex; flex-direction:column; overflow:hidden; +/* ---------- Onglets du centre : Écran / Logique de la scène / Timeline + d'animation ---------- */ +/* Un seul onglet visible à la fois (voir switchBuilderTab() dans + screen_edit.html), chacun occupant tout l'espace disponible dans + .builderCanvasArea — remplace l'ancien panneau du bas rétractable/ + redimensionnable à la souris : un onglet "prend toute la place" par + nature, pas besoin d'une poignée de redimensionnement séparée, et en + changer d'onglet équivaut à "fermer" celui qu'on quitte. */ +.builderTabs{ display:flex; gap:2px; flex:0 0 auto; border-bottom:1px solid var(--border); margin-bottom:10px; } +.builderTabBtn{ + background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; + padding:8px 12px; color:var(--text-dim); font-size:12.5px; cursor:pointer; } -.flowPanelHeader{ - flex:0 0 auto; padding:10px 16px; font-weight:700; cursor:pointer; user-select:none; - display:flex; align-items:center; gap:6px; -} -.flowPanelHeader:hover{ background:var(--panel2); } -.flowToggleIcon{ color:var(--text-dim); font-size:11px; transition:transform .15s; display:inline-block; } -.flowPanel.open .flowToggleIcon{ transform:rotate(90deg); } -.flowPanelBody{ flex:1 1 auto; min-height:0; padding:0 16px 16px; display:none; flex-direction:column; } -.flowPanel.open .flowPanelBody{ display:flex; } -.flowToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; flex:0 0 auto; } +.builderTabBtn:hover{ color:var(--text); } +.builderTabBtn.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } -.flowResizeHandle{ - flex:0 0 auto; height:10px; margin-top:6px; cursor:row-resize; position:relative; display:none; -} -.flowResizeHandle.visible{ display:block; } -.flowResizeHandle::before{ - content:""; position:absolute; left:50%; top:3px; width:60px; height:4px; - background:var(--border); border-radius:2px; transform:translateX(-50%); -} -.flowResizeHandle:hover::before{ background:var(--accent); } +.builderTabPanel{ flex:1 1 auto; min-height:0; display:none; flex-direction:column; } +.builderTabPanel.active{ display:flex; } + +.flowToolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; flex:0 0 auto; } .nodeForm{ border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; background:var(--panel2); max-width:420px; flex:0 0 auto; } .nodeForm label{ margin-top:8px; } diff --git a/templates/object_form.html b/templates/object_form.html index b86a0075..4d0fa670 100644 --- a/templates/object_form.html +++ b/templates/object_form.html @@ -24,10 +24,10 @@

Champs

+
-
diff --git a/templates/screen_edit.html b/templates/screen_edit.html index 13d69615..a3bfe719 100644 --- a/templates/screen_edit.html +++ b/templates/screen_edit.html @@ -12,16 +12,6 @@
  • {{ screen.name }}
  • {% endblock %} {% block content %} -
    -
    -
    -
    -
    - {% if not screen.is_template %} - ▶️ Jouer depuis le début - {% endif %} -
    - {% if screen.is_template %}

    🧩 Contenu d'un élément de jeu réutilisable. @@ -67,6 +57,25 @@

    + +
    +
    +
    +
    + {% if not screen.is_template %} + ▶️ Jouer depuis le début + {% endif %} + {% set current_aspect = screen.preview_aspect or '9/16' %} +
    + + + +
    +

    Éléments de cet écran

    {% if top_level_elements %}
    @@ -149,27 +158,299 @@
    - +
    {% set current_aspect = screen.preview_aspect or '9/16' %} -
    - Aperçu : - - - + {% if not screen.is_template %} +
    + + +
    -
    -
    - {% for el in top_level_elements %} -
    -
    {{ el.rendered_html|safe }}
    -
    + {% endif %} + +
    +
    +
    + {% for el in top_level_elements %} +
    +
    {{ el.rendered_html|safe }}
    +
    +
    + {% endfor %}
    - {% endfor %} +
    +

    Glisse pour déplacer, tire le coin pour redimensionner, clique pour sélectionner.

    +
    + + {% if not screen.is_template %} +
    +
    + + + + Clique un point de sortie d'un nœud, puis le point d'entrée d'un autre nœud, pour les relier. Reclique une connexion pour la supprimer. +
    + + + +
    + +
    -

    Glisse pour déplacer, tire le coin pour redimensionner, clique pour sélectionner.

    + +
    +
    + + +
    + + + +
    +
    +
    +
    +
    + {% endif %}
    -
    - - -
    -
    - ▸ 🔀 Logique de la scène — nœuds et connexions -
    -
    -
    - - - - Clique un point de sortie d'un nœud, puis le point d'entrée d'un autre nœud, pour les relier. Reclique une connexion pour la supprimer. -
    - - - -
    - -
    -
    -
    -
    - - -
    - - -
    -
    - ▸ 🎬 Timeline d'animation -
    -
    -
    - - -
    - - - -
    -
    -
    -
    -
    -
    -{% endif %} {% endblock %} diff --git a/tests/test_animations.py b/tests/test_animations.py index 6fdde7ee..27e374d0 100644 --- a/tests/test_animations.py +++ b/tests/test_animations.py @@ -89,7 +89,7 @@ def test_clip_delete_removes_it(client, game): def test_screen_edit_exposes_timeline_panel_and_animate_css_cdn(client, game): screen_id = _create_screen(client, game) html = client.get(f"/game/{game}/screens/{screen_id}/edit").data.decode() - assert "animPanel" in html + assert "animTabPanel" in html assert "Timeline d'animation" in html assert "animate.css" in html diff --git a/tests/test_onglets_widget.py b/tests/test_onglets_widget.py index 34b37ecd..ba855b3d 100644 --- a/tests/test_onglets_widget.py +++ b/tests/test_onglets_widget.py @@ -20,10 +20,13 @@ def _create_onglets(client, slug, screen_id): def _tab_rename_ids(html): """Ids des formulaires de renommage DANS le bloc "Onglets" du panneau de - propriétés — pas le premier /elements//rename de la page, qui est le - champ "Nommer" générique de l'élément actuellement sélectionné (pas - forcément un onglet, ex. l'élément Onglets lui-même).""" - block = html.split("Onglets (", 1)[-1] + propriétés — pas le premier /elements//rename de la page (le champ + "Nommer" générique de l'élément actuellement sélectionné), ni une + occurrence de "Onglets (" dans une liste déroulante d'éléments de la + Logique de la scène (ex. ""), qui existe + aussi sur la page — seul l'en-tête du groupe de réglages ("🗂️ + Onglets (") repère sans ambiguïté le bloc de propriétés lui-même.""" + block = html.split(">🗂️ Onglets (", 1)[-1] return [int(x) for x in re.findall(r"/elements/(\d+)/rename", block)]