From 29a4cfb4104ffd2bc77e3550fffd9971f298361d Mon Sep 17 00:00:00 2001 From: Pierre Marx Date: Thu, 4 Sep 2025 16:14:42 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20Refonte=20moderne=20du=20panneau=20de?= =?UTF-8?q?=20notes=20avec=20design=20lat=C3=A9ral?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Transformation en panneau latéral droit au lieu du bas - Header avec gradient violet et design moderne - Ajout bouton Effacer et amélioration du placeholder - Suppression du badge rouge de notification - Animations fluides et redimensionnement automatique de la webview - Interface plus cohérente et intuitive --- docs/changelog.md | 33 +++++++++++ index.html | 14 ++++- renderer.js | 48 ++++++++++++++-- styles-modern.css | 144 +++++++++++++++++++++++++++++++++++----------- 4 files changed, 197 insertions(+), 42 deletions(-) diff --git a/docs/changelog.md b/docs/changelog.md index b58ba18..7384e48 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -1,5 +1,38 @@ # Changelog - SimpleConnect Electron +## [1.2.11] - 2025-09-04 + +### Ajouté +- **Panneau de notes latéral moderne** : Refonte complète de l'interface des notes + - Panneau qui glisse depuis la droite de l'écran (au lieu du bas) + - Header avec gradient violet et icône intégrée + - Placeholder avec suggestions d'utilisation + - Nouveau bouton "Effacer" pour réinitialiser les notes + - Footer dédié pour les actions + - Animation fluide cubic-bezier pour l'ouverture/fermeture + +### Modifié +- **Design du panneau de notes** : Interface plus moderne et cohérente + - Hauteur complète (100vh - 60px) au lieu d'une fenêtre popup + - Position proche du bouton d'activation pour meilleure cohérence + - Bouton de fermeture circulaire avec effet hover + - Textarea avec fond grisé qui devient blanc au focus + - Notifications modernes remplaçant les alert() natifs + - Webview qui se redimensionne automatiquement quand les notes sont ouvertes + +### Supprimé +- **Badge de notification rouge** : Suppression de l'indicateur de contenu + - Plus de point rouge sur le bouton des notes + - Suppression du code JavaScript de surveillance du contenu + - Interface plus épurée sans distractions visuelles +- **Code du bouton flottant** : Nettoyage du CSS non utilisé + +### Technique +- Nouvelle classe `.notes-open` pour ajuster la webview +- Animation `slideInRight` pour l'apparition du panneau +- Fonction `clearNotes()` avec confirmation avant effacement +- Tooltips modernes sur les boutons avec pseudo-éléments CSS + ## [1.2.10] - 2025-09-04 ### Modifié diff --git a/index.html b/index.html index 98cd482..26c5e67 100644 --- a/index.html +++ b/index.html @@ -103,7 +103,7 @@
- +

Notes rapides

@@ -111,9 +111,17 @@
- +
+ + +
diff --git a/renderer.js b/renderer.js index f5d2f03..8e63731 100644 --- a/renderer.js +++ b/renderer.js @@ -63,6 +63,12 @@ document.addEventListener('DOMContentLoaded', async () => { saveNotesBtn.addEventListener('click', saveNotes); } + // Bouton effacer notes + const clearNotesBtn = document.getElementById('clearNotesBtn'); + if (clearNotesBtn) { + clearNotesBtn.addEventListener('click', clearNotes); + } + // Bouton toggle notes const toggleNotesBtn = document.getElementById('toggleNotesBtn'); if (toggleNotesBtn) { @@ -84,6 +90,7 @@ document.addEventListener('DOMContentLoaded', async () => { // Charger les préférences utilisateur loadUserPreferences(); + // Gérer les boutons de la modal de déconnexion (si on est sur la page principale) const cancelLogoutBtn = document.getElementById('cancelLogoutBtn'); const confirmLogoutBtn = document.getElementById('confirmLogoutBtn'); @@ -672,7 +679,10 @@ function updateCallStats() { async function saveNotes() { const notes = document.getElementById('quickNotes').value; - if (!notes.trim()) return; + if (!notes.trim()) { + showNotification('Aucune note à sauvegarder', 'error'); + return; + } const result = await ipcRenderer.invoke('save-notes', { content: notes, @@ -680,8 +690,9 @@ async function saveNotes() { }); if (result.success) { - alert('Notes sauvegardées !'); - document.getElementById('quickNotes').value = ''; + showNotification('Notes sauvegardées avec succès !', 'success'); + // Optionnel : garder les notes ou les effacer + // document.getElementById('quickNotes').value = ''; } } @@ -835,6 +846,7 @@ function validateTerminal(terminal) { function toggleNotes() { const notesSection = document.getElementById('notesSection'); const toggleBtn = document.getElementById('toggleNotesBtn'); + const webviewContainer = document.getElementById('webviewContainer'); if (notesSection.classList.contains('visible')) { hideNotes(); @@ -846,28 +858,54 @@ function toggleNotes() { function showNotes() { const notesSection = document.getElementById('notesSection'); const toggleBtn = document.getElementById('toggleNotesBtn'); + const webviewContainer = document.getElementById('webviewContainer'); notesSection.classList.add('visible'); toggleBtn.classList.add('active'); + // Ajuster la largeur de la webview pour faire de la place aux notes + if (webviewContainer) { + webviewContainer.classList.add('notes-open'); + } + // Sauvegarder la préférence localStorage.setItem('notesVisible', 'true'); - // Focus sur le textarea - document.getElementById('quickNotes').focus(); + // Focus sur le textarea avec un délai pour l'animation + setTimeout(() => { + const textarea = document.getElementById('quickNotes'); + if (textarea) { + textarea.focus(); + textarea.setSelectionRange(textarea.value.length, textarea.value.length); + } + }, 300); } function hideNotes() { const notesSection = document.getElementById('notesSection'); const toggleBtn = document.getElementById('toggleNotesBtn'); + const webviewContainer = document.getElementById('webviewContainer'); notesSection.classList.remove('visible'); toggleBtn.classList.remove('active'); + // Restaurer la largeur normale de la webview + if (webviewContainer) { + webviewContainer.classList.remove('notes-open'); + } + // Sauvegarder la préférence localStorage.setItem('notesVisible', 'false'); } +function clearNotes() { + const textarea = document.getElementById('quickNotes'); + if (textarea && confirm('Êtes-vous sûr de vouloir effacer toutes les notes ?')) { + textarea.value = ''; + textarea.focus(); + } +} + // === GESTION DES PRÉFÉRENCES UTILISATEUR === function loadUserPreferences() { // Charger l'état des notes diff --git a/styles-modern.css b/styles-modern.css index 9d6bf5e..c358d7b 100644 --- a/styles-modern.css +++ b/styles-modern.css @@ -612,95 +612,171 @@ body { border: none; } -/* === ZONE DE NOTES === */ +/* === ZONE DE NOTES - PANNEAU LATÉRAL === */ .notes-section { + position: fixed; + top: 60px; /* Juste sous le header */ + right: -400px; /* Caché par défaut */ + width: 380px; + height: calc(100vh - 60px); background: white; - border-top: 2px solid #667eea; - position: absolute; - bottom: 0; - left: 0; - right: 0; - transition: transform 0.3s ease; - transform: translateY(100%); - box-shadow: 0 -4px 12px rgba(0,0,0,0.1); + box-shadow: -4px 0 20px rgba(0,0,0,0.1); + transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; + display: flex; + flex-direction: column; + border-left: 1px solid #e1e4e8; } .notes-section.visible { - transform: translateY(0); + right: 0; + animation: slideInRight 0.3s ease-out; +} + +@keyframes slideInRight { + from { + right: -400px; + opacity: 0; + } + to { + right: 0; + opacity: 1; + } } .notes-header { display: flex; justify-content: space-between; align-items: center; - padding: 15px 20px; - background: #f8f9fa; - border-bottom: 1px solid #e9ecef; + padding: 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-bottom: none; } .notes-header h4 { margin: 0; - color: #333; - font-size: 16px; + color: white; + font-size: 18px; font-weight: 600; + display: flex; + align-items: center; + gap: 10px; +} + +.notes-header h4::before { + content: '📝'; + font-size: 20px; } .btn-close-notes { - background: none; + background: rgba(255, 255, 255, 0.2); border: none; - font-size: 24px; - color: #999; + font-size: 20px; + color: white; cursor: pointer; padding: 0; - width: 30px; - height: 30px; + width: 32px; + height: 32px; display: flex; align-items: center; justify-content: center; - border-radius: 4px; + border-radius: 50%; transition: all 0.2s; } .btn-close-notes:hover { - background: white; - color: #333; + background: rgba(255, 255, 255, 0.3); + transform: scale(1.1); } .notes-section textarea { + flex: 1; width: 100%; - min-height: 120px; - padding: 15px 20px; + padding: 20px; border: none; resize: none; - font-family: inherit; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; - line-height: 1.5; + line-height: 1.6; + background: #fafbfc; } .notes-section textarea:focus { outline: none; + background: white; +} + +.notes-section textarea::placeholder { + color: #959da5; + font-style: italic; +} + +.notes-footer { + padding: 15px 20px; + background: white; + border-top: 1px solid #e1e4e8; + display: flex; + gap: 10px; } .btn-small { - margin: 0 20px 15px 20px; - padding: 8px 20px; - background: #667eea; + flex: 1; + padding: 10px 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; - border-radius: 6px; + border-radius: 8px; cursor: pointer; font-size: 14px; - font-weight: 500; + font-weight: 600; transition: all 0.2s; } .btn-small:hover { - background: #5a6fd8; transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); } +.btn-small.btn-clear { + flex: 0.5; + background: #f1f3f5; + color: #495057; +} + +.btn-small.btn-clear:hover { + background: #e9ecef; + box-shadow: none; +} + +/* Ajustement de la webview quand les notes sont visibles */ +.webview-container.notes-open { + margin-right: 380px; + transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Tooltip moderne pour le bouton notes */ +.btn-icon[title]::after { + content: attr(title); + position: absolute; + bottom: -35px; + right: 0; + background: rgba(0, 0, 0, 0.9); + color: white; + padding: 6px 12px; + border-radius: 6px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s; + z-index: 1000; +} + +.btn-icon[title]:hover::after { + opacity: 1; +} + + /* === MODAL === */ .modal { display: none;