From c75965fdfdb9a770cb7a5252e73b2dafc7dc04f0 Mon Sep 17 00:00:00 2001 From: lehmann Date: Tue, 6 Sep 2022 01:01:01 +0200 Subject: [PATCH] Partition editor : bug add + improve UX --- app/static/css/partition_editor.css | 13 +++++++++++- app/templates/scolar/partition_editor.html | 23 +++++++++++++++------- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/app/static/css/partition_editor.css b/app/static/css/partition_editor.css index 61e872e084..b0b89fef4d 100644 --- a/app/static/css/partition_editor.css +++ b/app/static/css/partition_editor.css @@ -43,6 +43,7 @@ padding: 8px 32px 8px 8px; margin-bottom: 16px; display: inline-block; + cursor: pointer; } main { @@ -69,7 +70,17 @@ body:not(.editionActivated) .editing { .editionActivated #zoneChoix .etudiants>div { pointer-events: none; - opacity: 0.5; + opacity: 0.2; +} + +.highlight { + animation: boing 0.12s alternate; + animation-iteration-count: 4; + display: inline-block; +} + +@keyframes boing { + 100% {transform: translateY(-20px)} } /****************/ diff --git a/app/templates/scolar/partition_editor.html b/app/templates/scolar/partition_editor.html index 4e641e781b..6faf84099e 100644 --- a/app/templates/scolar/partition_editor.html +++ b/app/templates/scolar/partition_editor.html @@ -182,14 +182,23 @@ /******************************/ /* Gestionnaire d'événements */ /******************************/ - function input() { - document.querySelector("body").classList.toggle("editionActivated"); + function setEditMode() { + let editing = document.querySelector("[contentEditable=true]"); + if (!editing) { + document.querySelector("body").classList.toggle("editionActivated"); + return; + } + this.checked = true; + if(!editing.classList.contains("highlight")) { + editing.classList.add("highlight"); + setTimeout(()=>{editing.classList.remove("highlight")}, 1000); + } } function processEvents() { /*--------------------*/ /* Edition partitions */ /*--------------------*/ - document.querySelector(".edition>input").addEventListener("input", input); + document.querySelector(".edition>input").addEventListener("input", setEditMode); document.querySelectorAll(".ajoutPartition, .ajoutGroupe").forEach(btnPlus => { btnPlus.addEventListener("click", addPartition) }) document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) }) document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) }) @@ -399,7 +408,7 @@ // Ajout de la zone pour chaque étudiant let outputGroupes = ""; - document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(e => { + document.querySelectorAll("#zoneChoix .grpPartitions").forEach(e => { let etudid = e.previousElementSibling.dataset.etudid; // Préparation pour la section suivante @@ -469,7 +478,7 @@ // On sélectionne la zone const range = document.createRange(); const selection = window.getSelection(); - selection.removeAllRanges(); + selection.removeAllRanges(); range.selectNodeContents(e); selection.addRange(range); } @@ -629,7 +638,7 @@ }) // Save positions - if (this.dataset.idpartition) { + if (this.parentElement.parentElement.parentElement.className == "partitions") { let params = (new URL(document.location)).searchParams; let formsemestre_id = params.get('formsemestre_id'); var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`; @@ -639,7 +648,7 @@ parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) }) }) - document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(parent => { + document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(parent => { positions.forEach(position => { parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) })