From ec797574eb8329c8e4184a85ae08f9a21403fe84 Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Wed, 18 May 2022 10:04:49 +0200
Subject: [PATCH] Block of actions of selected pages

---
 public/js/organization.js       | 13 ++++++++++---
 templates/organization.html.php | 11 +++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/js/organization.js b/public/js/organization.js
index 3950070..5fb96dd 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -269,19 +269,26 @@ var updatePageState = function(page) {
 
 var updateGlobalState = function() {
     document.querySelector('#container_btn_select').classList.add('opacity-50');
+    document.querySelector('#container_btn_select').classList.remove('border-primary');
+    document.querySelector('#container_btn_select .card-header').classList.remove('bg-primary', 'text-white');
+    document.querySelector('#container_btn_select .card-header').classList.add('text-muted');
     document.querySelectorAll('#container_btn_select button').forEach(function(button) {
-        button.classList.add('btn-outline-dark');
+        button.classList.add('btn-outline-secondary');
         button.classList.remove('btn-outline-primary');
         button.setAttribute('disabled', 'disabled');
     });
     document.querySelector('#container-btn-save-select').classList.add('d-none');
     document.querySelector('#container-btn-save').classList.remove('d-none');
-
+    document.querySelector('#container_btn_select .card-header span').innerText = "Aucune";
     if(isSelectionMode()) {
+        document.querySelector('#container_btn_select .card-header span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
         document.querySelector('#container_btn_select').classList.remove('opacity-50');
+        document.querySelector('#container_btn_select').classList.add('border-primary');
+        document.querySelector('#container_btn_select .card-header').classList.remove('text-muted');
+        document.querySelector('#container_btn_select .card-header').classList.add('bg-primary', 'text-white');
         document.querySelectorAll('#container_btn_select button').forEach(function(button) {
             button.classList.add('btn-outline-primary');
-            button.classList.remove('btn-outline-dark');
+            button.classList.remove('btn-outline-secondary');
             button.removeAttribute('disabled');
         });
         document.querySelector('#container-btn-save-select').classList.remove('d-none');
diff --git a/templates/organization.html.php b/templates/organization.html.php
index a0c40a4..2b69c0d 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -65,10 +65,13 @@
                     <input id="input_pdf_upload_2" class="form-control d-none" type="file" accept=".pdf,application/pdf">
                 </div>
                 <hr />
-                <div id="container_btn_select" class="d-grid gap-2 mt-2 opacity-50">
-                    <button id="btn_rotate_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-dark"><i class="bi bi-arrow-clockwise"></i> Tourner les pages sélectionnées de 90°</button>
-                    <button id="btn_delete_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-dark"><i class="bi bi-trash"></i> Supprimer les pages sélectionnées</button>
-                    <button id="btn_cancel_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-dark"><i class="bi bi-check-square"></i> Annuler la sélection de pages</button>
+                <div id="container_btn_select" class="opacity-50 card">
+                    <div class="card-header small text-center"><span>Aucune</span> page(s) séléctionnée(s)</div>
+                    <div class="card-body d-grid gap-2">
+                    <button id="btn_rotate_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-clockwise"></i> Tourner de 90°</button>
+                    <button id="btn_delete_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-trash"></i> Supprimer</button>
+                    <button id="btn_cancel_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-check-square"></i> Désélectionner</button>
+                    </div>
                 </div>
 
                 <div class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100">