templates/feedback/_modal.html.twig line 1

Open in your IDE?
  1. <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  2. <div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
  3.   <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
  4.     <div class="modal-content">
  5.       <div class="modal-header" style="background-color: #f5f7ff; border-bottom: 1px solid #e1e3ea;">
  6.         <h5 class="modal-title" id="feedbackModalLabel">
  7.           <i class="fa-regular fa-message me-2"></i>
  8.           Signaler un bug ou proposer une amélioration
  9.         </h5>
  10.         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  11.       </div>
  12.       
  13.       <div class="modal-body pb-5">
  14.         <form id="feedbackForm" novalidate>
  15.           
  16.           <div class="mb-4">
  17.             <label class="form-label fw-semibold">Type de feedback <span class="text-danger">*</span></label>
  18.             <div class="d-grid gap-2" style="grid-template-columns: 1fr 1fr;">
  19.               <button type="button" class="btn btn-feedback-type active" data-type="BUG" id="feedback-type-bug">
  20.                 <i class="fa-solid fa-bug me-2"></i>
  21.                 Bug
  22.               </button>
  23.               <button type="button" class="btn btn-feedback-type" data-type="IMPROVEMENT" id="feedback-type-improvement">
  24.                 <i class="fa-solid fa-lightbulb me-2"></i>
  25.                 Amélioration
  26.               </button>
  27.             </div>
  28.             <input type="hidden" name="type" id="feedback-type" value="BUG">
  29.           </div>
  30.           
  31.           <div class="mb-3">
  32.             <label for="feedback-title" class="form-label fw-semibold">Titre <span class="text-danger">*</span></label>
  33.             <input type="text" 
  34.                    class="form-control" 
  35.                    id="feedback-title" 
  36.                    name="title" 
  37.                    placeholder="Ex: Affichage cassé page entreprise"
  38.                    required
  39.                    minlength="5"
  40.                    maxlength="255">
  41.             <div class="invalid-feedback">Le titre doit contenir au moins 5 caractères.</div>
  42.           </div>
  43.           
  44.           <div class="mb-3">
  45.             <label for="feedback-description" class="form-label fw-semibold">Problème constaté <span class="text-danger">*</span></label>
  46.             <textarea class="form-control" 
  47.                       id="feedback-description" 
  48.                       name="issueDescription" 
  49.                       rows="3" 
  50.                       placeholder="Décrivez le problème en quelques mots..."
  51.                       required
  52.                       minlength="40"></textarea>
  53.             <div class="d-flex justify-content-between mt-1">
  54.               <div class="invalid-feedback d-block" id="feedback-description-error" style="display: none !important;"></div>
  55.               <small class="text-muted ms-auto" id="feedback-description-counter">0/10 caractères minimum</small>
  56.             </div>
  57.           </div>
  58.           
  59.           <div class="mb-4">
  60.             <label class="form-label fw-semibold">Niveau de priorité <span class="text-danger">*</span></label>
  61.             <div class="d-grid gap-2" style="grid-template-columns: repeat(3, 1fr);">
  62.               <button type="button" class="btn btn-priority btn-sm" data-priority="1">Détails</button>
  63.               <button type="button" class="btn btn-priority btn-sm" data-priority="3">Mineur</button>
  64.               <button type="button" class="btn btn-priority btn-sm" data-priority="8">Modéré</button>
  65.               <button type="button" class="btn btn-priority btn-sm active" data-priority="21">Important</button>
  66.               <button type="button" class="btn btn-priority btn-sm" data-priority="43">Urgent</button>
  67.               <button type="button" class="btn btn-priority btn-sm" data-priority="66">Critique</button>
  68.             </div>
  69.             <input type="hidden" name="priorityScore" id="feedback-priority" value="21">
  70.           </div>
  71.           
  72.           <div class="mb-4">
  73.             <label for="feedback-expected" class="form-label fw-semibold">Comportement souhaité <span class="text-muted fw-normal">(optionnel)</span></label>
  74.             <textarea class="form-control" 
  75.                       id="feedback-expected" 
  76.                       name="expectedBehavior" 
  77.                       rows="2" 
  78.                       placeholder="Expliquez le comportement attendu..."></textarea>
  79.             <div class="invalid-feedback">Si renseigné, ce champ doit contenir au moins 10 caractères.</div>
  80.           </div>
  81.           
  82.           <div class="mb-3">
  83.             <label class="form-label fw-semibold">
  84.               Pièces jointes <span class="text-muted fw-normal">(max. 4)</span>
  85.             </label>
  86.             <div class="d-flex gap-3 mb-2">
  87.               <a href="#" class="text-decoration-none" id="feedback-add-capture">
  88.                 <i class="fa-solid fa-camera me-1"></i>
  89.                 <span id="feedback-add-capture-text">Capturer une autre page</span>
  90.               </a>
  91.               <label class="text-decoration-none" style="cursor: pointer;">
  92.                 <i class="fa-solid fa-upload me-1"></i>
  93.                 Depuis l'ordinateur
  94.                 <input type="file" 
  95.                        id="feedback-upload-file" 
  96.                        class="d-none" 
  97.                        accept="image/png,image/jpeg,image/gif,image/webp"
  98.                        multiple>
  99.               </label>
  100.             </div>
  101.             
  102.             <div id="feedback-screenshots-preview" class="d-grid gap-2" style="grid-template-columns: repeat(4, 1fr);"></div>
  103.             <div id="feedback-screenshots-error" class="text-danger small mt-1" style="display: none;"></div>
  104.           </div>
  105.           
  106.           <input type="hidden" name="pageUrl" id="feedback-page-url">
  107.           <input type="hidden" name="metadata" id="feedback-metadata">
  108.           
  109.         </form>
  110.       </div>
  111.       
  112.       <div class="modal-footer" style="background-color: #f8f9fa;">
  113.         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  114.         <button type="button" class="btn btn-primary" id="feedback-submit">
  115.           <span id="feedback-submit-text">Envoyer</span>
  116.           <span id="feedback-submit-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
  117.         </button>
  118.       </div>
  119.     </div>
  120.   </div>
  121. </div>
  123. <div class="modal fade" id="feedbackScreenshotPreviewModal" tabindex="-1" aria-hidden="true">
  124.   <div class="modal-dialog modal-dialog-centered modal-xl">
  125.     <div class="modal-content">
  126.       <div class="modal-header">
  127.         <h6 class="modal-title" id="feedbackScreenshotPreviewTitle">Aperçu</h6>
  128.         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
  129.       </div>
  130.       <div class="modal-body text-center p-0">
  131.         <img id="feedbackScreenshotPreviewImage" class="img-fluid" alt="Aperçu du screenshot" style="max-height: 80vh;">
  132.       </div>
  133.     </div>
  134.   </div>
  135. </div>
  138. <style>
  139.   .btn-feedback-type {
  140.     background-color: #fff;
  141.     border: 1px solid #e1e3ea;
  142.     color: #3f4254;
  143.     padding: 0.75rem 1rem;
  144.     font-weight: 500;
  145.     transition: all 0.2s ease;
  146.   }
  147.   
  148.   .btn-feedback-type:hover {
  149.     background-color: #f8f9fa;
  150.     border-color: #c5d5fb;
  151.   }
  152.   
  153.   .btn-feedback-type.active {
  154.     background-color: #eef6ff;
  155.     border-color: #3e97ff;
  156.     color: #1d3b73;
  157.   }
  158.   
  159.   .btn-priority {
  160.     background-color: #fff;
  161.     border: 1px solid #e1e3ea;
  162.     color: #3f4254;
  163.     font-size: 0.75rem;
  164.     padding: 0.5rem;
  165.     transition: all 0.2s ease;
  166.   }
  167.   
  168.   .btn-priority:hover {
  169.     background-color: #f8f9fa;
  170.     border-color: #c5d5fb;
  171.   }
  172.   
  173.   .btn-priority.active {
  174.     background-color: #eef6ff;
  175.     border-color: #3e97ff;
  176.     color: #1d3b73;
  177.   }
  178.   
  179.   .feedback-screenshot-item {
  180.     position: relative;
  181.     border: 1px solid #e1e3ea;
  182.     border-radius: 0.5rem;
  183.     overflow: hidden;
  184.     background-color: #f8f9fa;
  185.     cursor: pointer;
  186.   }
  187.   
  188.   .feedback-screenshot-item img,
  189.   .feedback-screenshot-item video {
  190.     width: 100%;
  191.     height: 60px;
  192.     object-fit: cover;
  193.   }
  194.   
  195.   .feedback-screenshot-item .feedback-screenshot-delete {
  196.     position: absolute;
  197.     top: 4px;
  198.     right: 4px;
  199.     background: rgba(220, 53, 69, 0.9);
  200.     color: white;
  201.     border: none;
  202.     border-radius: 50%;
  203.     width: 20px;
  204.     height: 20px;
  205.     font-size: 10px;
  206.     display: flex;
  207.     align-items: center;
  208.     justify-content: center;
  209.     opacity: 0;
  210.     transition: opacity 0.2s ease;
  211.     cursor: pointer;
  212.   }
  213.   
  214.   .feedback-screenshot-item:hover .feedback-screenshot-delete {
  215.     opacity: 1;
  216.   }
  217.   
  218.   .feedback-screenshot-item .feedback-screenshot-name {
  219.     font-size: 10px;
  220.     color: #6c757d;
  221.     padding: 4px;
  222.     white-space: nowrap;
  223.     overflow: hidden;
  224.     text-overflow: ellipsis;
  225.   }
  226.   
  227.   .feedback-screenshot-item .feedback-screenshot-icon {
  228.     position: absolute;
  229.     bottom: 24px;
  230.     left: 4px;
  231.     font-size: 10px;
  232.     color: #6c757d;
  233.   }
  234. </style>