ebene/newdesigngestionnaire
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drt

Browse Source
This commit is contained in:
KONE SOREL 2026-04-11 11:34:37 +00:00
parent 40662f0e22
commit 89c8598f3a
2 changed files with 58 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Bootstrap_new/css/theme-modern.css
View File

@ -2023,16 +2023,16 @@ select[class*="selectpicker"],
/* Amélioration de la visibilité sur les fonds sombres de l'ERP */
.swal2-popup {border: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;}
/* Style ESI pour les champs requis lors du focus */
input[required]:visible:focus,
select[required]:visible:focus,
textarea[required]:visible:focus {
border-color: #dc3545 !important; /* Rouge danger */
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important; /* Halo rouge transparent */
outline: 0;
/* Focus sur un input ou textarea classique */
input[required]:focus,
textarea[required]:focus {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important;
}
/* Optionnel : Marquer les champs requis même sans focus */
.required-field {
border-left: 3px solid #dc3545 !important;
/* Focus spécifique sur le bouton du selectpicker obligatoire */
select[required] + .btn.dropdown-toggle:focus,
.bootstrap-select.show > .btn.dropdown-toggle {
border-color: #dc3545 !important;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15) !important;
}

77
Js/fonctions.js
View File

@ -46248,26 +46248,38 @@ $(function(){
/**
* Gère le style visuel des champs obligatoires lors du focus
* Version ESI - Utilise les classes Bootstrap pour plus de cohérence
* Gère le style des champs obligatoires (Standards + Selectpicker)
* Applique une bordure rouge au focus pour les éléments avec l'attribut [required]
*/
function stylechampsRequis() {
// On cible les éléments requis visibles
const $requis = $('input, select, textarea').filter('[required]:visible');
// 1. On cible tous les éléments requis (même cachés par selectpicker)
const $requis = $('input, select, textarea').filter('[required]');
// On utilise la délégation d'événements ou un cycle simple
$requis.each(function() {
const $el = $(this);
let $target = $el;
$el.on('focus', function() {
// On applique une bordure rouge subtile et une légère ombre
$el.addClass('border-danger shadow-sm');
$el.css('transition', 'all 0.3s ease');
// 2. Détection du Selectpicker
// Si c'est un selectpicker, le vrai bouton visible est .dropdown-toggle
if ($el.hasClass('selectpicker')) {
// On cherche le conteneur parent généré par le plugin puis le bouton
$target = $el.closest('.bootstrap-select').find('.dropdown-toggle');
}
// 3. Gestion des événements sur la cible visible
$target.on('focus', function() {
$(this).css({
'border-color': '#dc3545', // Rouge ESI
'box-shadow': '0 0 0 0.25rem rgba(220, 53, 69, 0.15)', // Halo subtil
'transition': 'all 0.3s ease'
});
});
$el.on('blur', function() {
// On remet la bordure initiale (subtile primaire ou grise)
$el.removeClass('border-danger shadow-sm');
$target.on('blur', function() {
$(this).css({
'border-color': '#dee2e6', // Retour au gris standard
'box-shadow': 'none'
});
});
});
}
@ -47825,33 +47837,40 @@ function formAjoutTableRef() {
type: 'post',
data: donnees,
success: function(data) {
$('#div_maj_table').html(data);
stylechampsRequis();
// 1. On initialise tous les selects du nouveau formulaire
// On ne demande PAS le focus ici (paramètre false) pour ne pas forcer l'ouverture du premier select
// 0. Injection du contenu
$('#div_maj_table').html(data);
// 1. Initialisation des composants Selectpicker
// On ne force pas le focus ici (false) pour garder le contrôle total via le point 4
actualiserSelectPicker('#div_maj_table .selectpicker', false);
// 2. Initialisation des autres composants
const formatD = (codeLangue === "en_US") ? 'mm/dd/yyyy' : 'dd/mm/yyyy';
// 2. Initialisation des Datepickers
const formatD = (codeLangue === "en_US") ? 'mm/dd/yyyy' : 'dd/mm/yyyy';
$(".datepicker").datepicker({
autoclose: true,
format: formatD
});
// 3. Focus intelligent sur le PREMIER champ du formulaire
// 3. Application des styles "Champs Requis" (Bordure rouge au focus)
// On l'appelle AVANT le focus pour que le premier champ soit déjà "armé"
stylechampsRequis();
// 4. Focus intelligent sur le PREMIER champ du formulaire
setTimeout(function() {
var $firstField = $('#div_maj_table').find('input:not([type="hidden"]), select').first();
// On cherche le premier champ saisissable qui n'est pas caché
var $firstField = $('#div_maj_table').find('input:not([type="hidden"]):not([disabled]):visible, select:not([disabled]):visible').first();
// Si le premier champ est un selectpicker, on utilise sa méthode focus dédiée
if ($firstField.hasClass('selectpicker')) {
$firstField.selectpicker('focus');
} else {
$firstField.focus();
if ($firstField.length > 0) {
if ($firstField.hasClass('selectpicker')) {
// Focus spécifique pour le composant Bootstrap-Select
$firstField.selectpicker('focus');
} else {
// Focus standard
$firstField.focus();
}
}
}, 200);
}
}
});
}