From 8b8aa16fa777866fc212acfcbd76a45885cb3f08 Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Sat, 21 May 2022 01:43:49 +0200
Subject: [PATCH] The "deselect the selected pages" button become a cross at
 the top right of the block

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

diff --git a/public/js/organization.js b/public/js/organization.js
index 925ca3e..d0e3321 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -345,7 +345,7 @@ var updateGlobalState = function() {
     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) {
+    document.querySelectorAll('#container_btn_select .card-body button').forEach(function(button) {
         button.classList.add('btn-outline-secondary');
         button.classList.remove('btn-outline-primary');
         button.setAttribute('disabled', 'disabled');
@@ -357,7 +357,7 @@ var updateGlobalState = function() {
         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) {
+        document.querySelectorAll('#container_btn_select .card-body button').forEach(function(button) {
             button.classList.add('btn-outline-primary');
             button.classList.remove('btn-outline-secondary');
             button.removeAttribute('disabled');
diff --git a/templates/organization.html.php b/templates/organization.html.php
index 671c1c0..bd7bddf 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -66,12 +66,11 @@
                 </div>
                 <hr />
                 <div id="container_btn_select" class="opacity-50 card">
-                    <div class="card-header small text-center p-1"><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>
-                    <button id="save-select" class="btn btn-sm btn-outline-secondary" disabled="disabled" form="form_pdf" type="submit"><i class="bi bi-download"></i> Télécharger le PDF</button>
+                    <div class="card-header small text-center p-1"><span>Aucune</span> page(s) séléctionnée(s) <button id="btn_cancel_select" type="button" class="btn-close btn-close-white float-end" aria-label="Close"></button></div>
+                    <div class="card-body d-grid gap-2 p-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="save-select" class="btn btn-sm btn-outline-secondary" disabled="disabled" form="form_pdf" type="submit"><i class="bi bi-download"></i> Télécharger</button>
                     </div>
                 </div>