jules/photobooth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX partage : masquer Recommencer pendant impression/email, detail pellicule, reset copies

Browse Source 
- Ecran partage : boutons bas masqués quand formulaire impression ou email ouvert
- "Terminer" remplacé par "Recommencer" (retour mode, pas accueil)
- Reset photoImpression/formatImpression/nbExemplaires dans recommencer()
- Bouton Pellicule affiche "N poses = 2 tirages" pour expliquer le strip dupliqué
- CSS .mode-detail pour sous-titre discret sur bouton mode
- Bump cache versions (style v18, app v27, share v11)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules
2026-09-20 20:32:42 +02:00
parent 4931a29d45
commit 61b9a72f10
4 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/css/style.css
View File

@@ -386,6 +386,13 @@ html, body {
font-size: 8rem; font-size: 8rem;
} }
.mode-detail {
font-size: 0.85rem;
opacity: 0.6;
font-weight: 400;
margin-top: -0.3rem;
}
/* === Booth info (code + QR sur accueil) === */ /* === Booth info (code + QR sur accueil) === */
.booth-info { .booth-info {
position: absolute; position: absolute;

10
frontend/index.html
View File

@@ -7,7 +7,7 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="google" content="notranslate"> <meta name="google" content="notranslate">
<meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Language" content="fr">
<link rel="stylesheet" href="/css/style.css?v=17"> <link rel="stylesheet" href="/css/style.css?v=18">
<link rel="stylesheet" href="/css/themes.css?v=2"> <link rel="stylesheet" href="/css/themes.css?v=2">
</head> </head>
<body> <body>
@@ -104,6 +104,7 @@
<button class="btn-mode" data-mode="multi" id="btn-multi"> <button class="btn-mode" data-mode="multi" id="btn-multi">
<div class="mode-icone mode-icone-large">&#127902;</div> <div class="mode-icone mode-icone-large">&#127902;</div>
<span>Pellicule</span> <span>Pellicule</span>
<span class="mode-detail" id="pellicule-detail"></span>
</button> </button>
</div> </div>
<button class="btn-retour" onclick="allerA('accueil')">Retour</button> <button class="btn-retour" onclick="allerA('accueil')">Retour</button>
@@ -278,8 +279,7 @@
</div> </div>
<div id="statut-partage" class="statut-partage cache"></div> <div id="statut-partage" class="statut-partage cache"></div>
<div class="partage-bas"> <div class="partage-bas">
<button class="btn-action" id="btn-terminer" onclick="allerA('accueil')">Terminer</button> <button class="btn-action" id="btn-terminer" onclick="recommencer()">Recommencer</button>
<button class="btn-secondaire" onclick="recommencer()">Nouvelle photo</button>
</div> </div>
</section> </section>
@@ -1177,11 +1177,11 @@
</style> </style>
<script src="/js/websocket.js?v=16"></script> <script src="/js/websocket.js?v=16"></script>
<script src="/js/app.js?v=26"></script> <script src="/js/app.js?v=27"></script>
<script src="/js/camera.js?v=26"></script> <script src="/js/camera.js?v=26"></script>
<script src="/js/effects.js?v=4"></script> <script src="/js/effects.js?v=4"></script>
<script src="/js/gallery.js?v=5"></script> <script src="/js/gallery.js?v=5"></script>
<script src="/js/share.js?v=10"></script> <script src="/js/share.js?v=11"></script>
<script src="/js/admin.js?v=17"></script> <script src="/js/admin.js?v=17"></script>
</body> </body>
</html> </html>

11
frontend/js/app.js
View File

@@ -147,6 +147,9 @@ function arreterTimeoutAdmin() {}
function recommencer() { function recommencer() {
photosSession = []; photosSession = [];
photoFinale = null; photoFinale = null;
photoImpression = null;
formatImpression = null;
nbExemplaires = 1;
allerA('mode'); allerA('mode');
} }
@@ -281,6 +284,14 @@ function setupModes() {
allerA('capture'); allerA('capture');
}); });
}); });
majDetailPellicule();
}
function majDetailPellicule() {
const el = document.getElementById('pellicule-detail');
if (!el) return;
const nb = config.multi_shot?.nombre_photos || 4;
el.textContent = `${nb} poses = 2 tirages`;
} }
async function chargerCadresChoix() { async function chargerCadresChoix() {

14
frontend/js/share.js
View File

@@ -3,11 +3,17 @@
let nbExemplaires = 1; let nbExemplaires = 1;
let copiesMax = 2; let copiesMax = 2;
function _masquerBoutonsBas(masquer) {
const bas = document.querySelector('#ecran-partage .partage-bas');
if (bas) bas.style.display = masquer ? 'none' : '';
}
async function ouvrirImpression() { async function ouvrirImpression() {
copiesMax = config.impression?.copies_max || 2; copiesMax = config.impression?.copies_max || 2;
nbExemplaires = 1; nbExemplaires = 1;
document.getElementById('nb-exemplaires').textContent = nbExemplaires; document.getElementById('nb-exemplaires').textContent = nbExemplaires;
cadreChoisi = null; cadreChoisi = null;
_masquerBoutonsBas(true);
if (modeActuel === 'multi') { if (modeActuel === 'multi') {
document.getElementById('form-impression').classList.remove('cache'); document.getElementById('form-impression').classList.remove('cache');
@@ -25,6 +31,7 @@ async function ouvrirImpression() {
function fermerImpression() { function fermerImpression() {
document.getElementById('form-impression').classList.add('cache'); document.getElementById('form-impression').classList.add('cache');
cadreChoisi = null; cadreChoisi = null;
_masquerBoutonsBas(false);
} }
function confirmerCadreImpression() { function confirmerCadreImpression() {
@@ -35,6 +42,7 @@ function confirmerCadreImpression() {
function annulerCadreImpression() { function annulerCadreImpression() {
document.getElementById('popup-cadre-impression').classList.add('cache'); document.getElementById('popup-cadre-impression').classList.add('cache');
cadreChoisi = null; cadreChoisi = null;
_masquerBoutonsBas(false);
} }
async function chargerCadresChoixImpression() { async function chargerCadresChoixImpression() {
@@ -105,7 +113,8 @@ function changerExemplaires(delta) {
async function lancerImpression() { async function lancerImpression() {
if (!photoFinale) return; if (!photoFinale) return;
fermerImpression(); document.getElementById('form-impression').classList.add('cache');
cadreChoisi = null;
const btnTerminer = document.getElementById('btn-terminer'); const btnTerminer = document.getElementById('btn-terminer');
if (btnTerminer) { btnTerminer.disabled = true; btnTerminer.style.opacity = '0.4'; } if (btnTerminer) { btnTerminer.disabled = true; btnTerminer.style.opacity = '0.4'; }
// Pour les strips, imprimer la version 2 bandes sur 10x15 // Pour les strips, imprimer la version 2 bandes sur 10x15
@@ -118,6 +127,7 @@ async function lancerImpression() {
format_papier: formatImpression || undefined, format_papier: formatImpression || undefined,
}); });
if (btnTerminer) { btnTerminer.disabled = false; btnTerminer.style.opacity = ''; } if (btnTerminer) { btnTerminer.disabled = false; btnTerminer.style.opacity = ''; }
_masquerBoutonsBas(false);
if (resultat.attente) { if (resultat.attente) {
afficherStatutEco('⏳', resultat.message || 'Votre photo sortira avec la suivante !', 'attente-eco'); afficherStatutEco('⏳', resultat.message || 'Votre photo sortira avec la suivante !', 'attente-eco');
} else if (resultat.jumeau && resultat.succes) { } else if (resultat.jumeau && resultat.succes) {
@@ -134,12 +144,14 @@ async function lancerImpression() {
async function ouvrirEmail() { async function ouvrirEmail() {
document.getElementById('form-email').classList.remove('cache'); document.getElementById('form-email').classList.remove('cache');
document.getElementById('input-email').value = ''; document.getElementById('input-email').value = '';
_masquerBoutonsBas(true);
await chargerSuggestionsEmail(); await chargerSuggestionsEmail();
} }
function fermerEmail() { function fermerEmail() {
document.getElementById('form-email').classList.add('cache'); document.getElementById('form-email').classList.add('cache');
document.getElementById('input-email').value = ''; document.getElementById('input-email').value = '';
_masquerBoutonsBas(false);
} }
async function chargerSuggestionsEmail() { async function chargerSuggestionsEmail() {