Rend le panneau "Nouvel objet" compact — lignes de tableau, pas des cartes
Chaque champ prenait une grosse carte (~250px de haut : libellés Bulma pleine taille, "Retirer ce champ" en texte) — inutilisable pour un objet à 10+ champs, ce qui est pourtant l'usage visé par ce panneau. Remplacé par une vraie ligne de tableau dense, sur le même principe que "Champs existants" dans object_edit.html (déjà compact et sobre dans le reste de l'outil) : une ligne = un champ, colonnes Nom/Type/Objet lié/Mini/Maxi/Obligatoire, action "Retirer" réduite à une icône. Les colonnes conditionnelles (Objet lié pour une relation, Mini/Maxi pour un nombre) restent TOUJOURS présentes — sans quoi les colonnes de lignes différentes ne s'aligneraient plus — seul leur contenu bascule entre le vrai champ de saisie et un espace réservé "—", au lieu de masquer toute la cellule comme avant. object_form.js adapté en conséquence : bounds désormais 2 cibles séparées (mini/maxi, chacune dans sa propre cellule) au lieu d'une seule enveloppe commune, et chaque bascule s'accompagne de celle de son espace réservé. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
d875557254
commit
e1216e99d5
+20
-4
@@ -17,12 +17,28 @@
|
||||
var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal'];
|
||||
|
||||
function wireRow(row) {
|
||||
// Ligne de TABLEAU dense (une ligne = un champ, comme "Champs
|
||||
// existants" dans object_edit.html) : "Objet lié" et "Mini"/"Maxi"
|
||||
// gardent toujours leur colonne (jamais masquée, sinon les colonnes
|
||||
// des différentes lignes ne s'alignent plus) — seul leur CONTENU
|
||||
// bascule entre le vrai champ de saisie et un espace réservé "—"
|
||||
// quand il ne s'applique pas au type choisi.
|
||||
var typeSelect = row.querySelector('.fieldTypeSelect');
|
||||
var relationWrap = row.querySelector('.relationTarget');
|
||||
var boundsWrap = row.querySelector('.boundsTarget');
|
||||
var relationTarget = row.querySelector('.relationTarget');
|
||||
var relationPlaceholder = row.querySelector('.relationPlaceholder');
|
||||
var boundsTargets = row.querySelectorAll('.boundsTarget');
|
||||
var boundsPlaceholders = row.querySelectorAll('.boundsPlaceholder');
|
||||
|
||||
function toggle(target, placeholder, visible) {
|
||||
target.style.display = visible ? '' : 'none';
|
||||
placeholder.style.display = visible ? 'none' : '';
|
||||
}
|
||||
|
||||
function syncFieldTypeVisibility() {
|
||||
relationWrap.style.display = typeSelect.value === 'relation' ? 'block' : 'none';
|
||||
if (boundsWrap) boundsWrap.style.display = NUMERIC_FIELD_TYPES.includes(typeSelect.value) ? 'flex' : 'none';
|
||||
var isRelation = typeSelect.value === 'relation';
|
||||
var isNumeric = NUMERIC_FIELD_TYPES.includes(typeSelect.value);
|
||||
toggle(relationTarget, relationPlaceholder, isRelation);
|
||||
boundsTargets.forEach(function (el, i) { toggle(el, boundsPlaceholders[i], isNumeric); });
|
||||
}
|
||||
typeSelect.addEventListener('change', syncFieldTypeVisibility);
|
||||
syncFieldTypeVisibility();
|
||||
|
||||
@@ -213,8 +213,11 @@
|
||||
position persistée en localStorage ici, contrairement aux panneaux de
|
||||
l'éditeur d'écran — inutile pour un panneau ouvert ponctuellement).
|
||||
Contenu repris de l'ancienne page "Définir un nouvel objet"
|
||||
(object_form.html, retirée) : même formulaire, même gabarit de ligne
|
||||
de champ, même script (object_form.js). -->
|
||||
(object_form.html, retirée), mais avec un gabarit de ligne dense —
|
||||
une vraie ligne de tableau (comme "Champs existants" dans
|
||||
object_edit.html) plutôt qu'une grosse carte par champ — pensé pour
|
||||
ajouter beaucoup de champs d'affilée sans que le panneau explose en
|
||||
hauteur. -->
|
||||
<div class="floatPanel floatPanel--center hidden" id="newObjectPanel">
|
||||
<div class="floatPanelHeader" id="newObjectPanelHeader">
|
||||
<span class="floatPanelTitle">⋮⋮ Nouvel objet</span>
|
||||
@@ -226,80 +229,64 @@
|
||||
<label for="object_name">Nom de l'objet (ex. Personnage, Niveau, Question...)</label>
|
||||
<input type="text" id="object_name" name="object_name" required autocomplete="off">
|
||||
</div>
|
||||
<h2 style="margin-top:16px;">Champs</h2>
|
||||
<button type="button" class="button is-outlined is-fullwidth mb-2" id="btnAddField">+ Ajouter un champ</button>
|
||||
<div id="fieldsList"></div>
|
||||
|
||||
<div class="dashPanelHeader" style="margin-top:14px;">
|
||||
<h2>Champs</h2>
|
||||
<button type="button" class="button is-small" id="btnAddField">+ Ajouter un champ</button>
|
||||
</div>
|
||||
<div class="fieldsTableWrap">
|
||||
<table class="table is-fullwidth is-hoverable fieldsTable">
|
||||
<thead>
|
||||
<tr><th>Nom</th><th>Type</th><th>Objet lié</th><th>Mini</th><th>Maxi</th><th>Obligatoire</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody id="fieldsList"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="actionsRow"><button type="submit" class="primary">Créer l'objet</button></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="fieldRowTemplate">
|
||||
<div class="fieldRowCard box">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Nom du champ</label>
|
||||
<div class="control"><input class="input" type="text" name="field_name[]" placeholder="ex. nom, description, pv..." required></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Type</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<tr>
|
||||
<td><input class="input is-small" type="text" name="field_name[]" placeholder="ex. nom, pv..." required></td>
|
||||
<td>
|
||||
<div class="select is-small">
|
||||
<select name="field_type[]" class="fieldTypeSelect">
|
||||
{% for key, val in field_types.items() %}
|
||||
<option value="{{ key }}">{{ val.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relationTarget field" style="display:none;">
|
||||
<label class="label">Objet lié</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
</td>
|
||||
<td>
|
||||
<div class="select is-small relationTarget" style="display:none;">
|
||||
<select name="field_relation[]">
|
||||
{% for d in definitions %}
|
||||
<option value="{{ d.id }}">{{ d.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% if not definitions %}
|
||||
<p class="help">Aucun autre objet défini.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="boundsTarget columns" style="display:none;">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Valeur mini</label>
|
||||
<div class="control"><input class="input" type="number" step="any" name="field_min[]" placeholder="ex. 0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Valeur maxi</label>
|
||||
<div class="control"><input class="input" type="number" step="any" name="field_max[]" placeholder="ex. 100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">Obligatoire ?</label>
|
||||
<div class="control">
|
||||
<div class="select is-fullwidth">
|
||||
<span class="has-text-grey relationPlaceholder">—</span>
|
||||
</td>
|
||||
<td>
|
||||
<input class="input is-small boundsTarget" type="number" step="any" name="field_min[]" placeholder="0" style="display:none;">
|
||||
<span class="has-text-grey boundsPlaceholder">—</span>
|
||||
</td>
|
||||
<td>
|
||||
<input class="input is-small boundsTarget" type="number" step="any" name="field_max[]" placeholder="100" style="display:none;">
|
||||
<span class="has-text-grey boundsPlaceholder">—</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="select is-small">
|
||||
<select name="field_required[]">
|
||||
<option value="0">Non</option>
|
||||
<option value="1">Oui</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="button is-small is-danger btnRemoveField">🗑️ Retirer ce champ</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="fieldsTableActions"><button type="button" class="button is-small is-danger btnRemoveField">🗑️</button></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script src="{{ url_for('static', filename='object_form.js') }}"></script>
|
||||
|
||||
Reference in New Issue
Block a user