ScoDoc/ScoDoc
ScoDoc
/
ScoDoc
8
2
Fork 15
Code Issues 145 Pull Requests Projects 3 Releases 107 Wiki Activity

Merge pull request 'Partition editor : bug add + improve UX' (#489) from lehmann/ScoDoc-Front:master into master 

Reviewed-on: #489
This commit is contained in:
Emmanuel Viennet 2022-09-06 08:42:29 +02:00
parent 0e11ccb773 c75965fdfd
commit 2069c75e9f
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/static/css/partition_editor.css
View File

@ -43,6 +43,7 @@
padding: 8px 32px 8px 8px; padding: 8px 32px 8px 8px;
margin-bottom: 16px; margin-bottom: 16px;
display: inline-block; display: inline-block;
cursor: pointer;
} }
main { main {
@ -69,7 +70,17 @@ body:not(.editionActivated) .editing {
.editionActivated #zoneChoix .etudiants>div { .editionActivated #zoneChoix .etudiants>div {
pointer-events: none; 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)}
} }
/****************/ /****************/

23
app/templates/scolar/partition_editor.html
View File

@ -182,14 +182,23 @@
/******************************/ /******************************/
/* Gestionnaire d'événements */ /* Gestionnaire d'événements */
/******************************/ /******************************/
function input() { function setEditMode() {
document.querySelector("body").classList.toggle("editionActivated"); 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() { function processEvents() {
/*--------------------*/ /*--------------------*/
/* Edition partitions */ /* 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(".ajoutPartition, .ajoutGroupe").forEach(btnPlus => { btnPlus.addEventListener("click", addPartition) })
document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) }) document.querySelectorAll(".modif").forEach(btn => { btn.addEventListener("click", editText) })
document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) }) document.querySelectorAll(".suppr").forEach(btn => { btn.addEventListener("click", suppr) })
@ -399,7 +408,7 @@
// Ajout de la zone pour chaque étudiant // Ajout de la zone pour chaque étudiant
let outputGroupes = ""; let outputGroupes = "";
document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(e => { document.querySelectorAll("#zoneChoix .grpPartitions").forEach(e => {
let etudid = e.previousElementSibling.dataset.etudid; let etudid = e.previousElementSibling.dataset.etudid;
// Préparation pour la section suivante // Préparation pour la section suivante
@ -469,7 +478,7 @@
// On sélectionne la zone // On sélectionne la zone
const range = document.createRange(); const range = document.createRange();
const selection = window.getSelection(); const selection = window.getSelection();
selection.removeAllRanges(); selection.removeAllRanges();
range.selectNodeContents(e); range.selectNodeContents(e);
selection.addRange(range); selection.addRange(range);
} }
@ -629,7 +638,7 @@
}) })
// Save positions // Save positions
if (this.dataset.idpartition) { if (this.parentElement.parentElement.parentElement.className == "partitions") {
let params = (new URL(document.location)).searchParams; let params = (new URL(document.location)).searchParams;
let formsemestre_id = params.get('formsemestre_id'); let formsemestre_id = params.get('formsemestre_id');
var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`; var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`;
@ -639,7 +648,7 @@
parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
}) })
}) })
document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(parent => { document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(parent => {
positions.forEach(position => { positions.forEach(position => {
parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
}) })