Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ObsiViewer/CODE_BLOCK_FEATURES.md
Bruno Charest 914515efe4 ``` 
docs: restructure README with concise overview and improved organization

- Condensed README from 715 to 113 lines with streamlined feature descriptions
- Replaced verbose documentation with quick-start focused content
- Reorganized sections: removed detailed architecture, API endpoints, and Meilisearch implementation details
- Added version badges and simplified feature categories (Navigation, Markdown, Graph)
- Streamlined installation instructions with Docker-first approach and simplified local
2025-11-19 15:56:56 -05:00

4.8 KiB
Raw Blame History

✅ Bloc de Code Nimbus - Améliorations Terminées

🎯 Fonctionnalités Implémentées

1. Mode Preview / Collapse ✓

  • En mode replié : Le bloc affiche une forme de "pill" compacte (comme le bloc File)
    • Icône de code
    • Nom du langage détecté
    • Nombre de lignes
    • Bouton "Preview"
  • Clic sur le bloc replié : Expansion pour voir le code complet

2. Détection Automatique du Langage ✓

  • Utilise highlight.js pour détecter automatiquement le langage
  • Se déclenche lors de la saisie de code (si aucun langage n'est sélectionné)
  • Mise à jour automatique de l'affichage du langage

3. Menu de Sélection de Langage ✓

  • Badge cliquable affichant le langage actuel
  • Menu déroulant avec liste complète des langages supportés
  • Langages disponibles : JavaScript, TypeScript, Python, Java, C#, C++, Go, Rust, PHP, Ruby, Swift, Kotlin, Scala, HTML, CSS, SCSS, JSON, XML, YAML, Markdown, SQL, Bash, Shell, PowerShell, Dockerfile, GraphQL, Plain Text

4. Menu de Sélection de Thèmes ✓

  • Accessible via le menu principal (bouton ⋮)
  • Sous-menu avec 11 thèmes préconçus :
    • Darcula
    • Default
    • MBO
    • MDN
    • Monokai
    • Neat
    • NEO
    • Nord
    • Yeti
    • Yonce
    • Zenburn

5. Menu de Sélection de Fonts ✓

  • Accessible via le menu principal (bouton ⋮)
  • Sous-menu avec 6 polices couramment utilisées pour le code :
    • Default Mono (système)
    • Fira Code (avec ligatures)
    • JetBrains Mono
    • Consolas
    • Source Code Pro
    • Ubuntu Mono
  • Import Google Fonts pour toutes les polices web

6. Bouton "Copier dans le Presse-papiers" ✓

  • Icône de copie dans la barre d'outils
  • Animation de confirmation (✓) après copie
  • Également disponible dans le menu principal

7. Toggle Numéros de Ligne ✓

  • Bouton (#) dans la barre d'outils
  • Affichage/masquage des numéros de ligne
  • Colonne dédiée avec fond semi-transparent
  • Également dans le menu principal

8. Légende au Bas du Bloc ✓

  • Gauche :
    • Indicateur coloré (point) + Nom du langage
    • Nombre de caractères
    • Nombre de lignes
  • Droite :
    • Nom de la police actuelle (visible au survol)

9. Menu Principal Amélioré ✓

  • Bouton ⋮ (trois points verticaux)
  • Structure du menu :
    • Theme → (sous-menu)
    • Font → (sous-menu)
    • Copy code
    • Show/Hide line numbers
    • Enable/Disable wrap
    • Collapse block

10. Fonctionnalités Supplémentaires ✓

  • Word wrap : Toggle pour activer/désactiver le retour à la ligne
  • Interface responsive : Menus repositionnés intelligemment
  • Scrollbar personnalisé : Design moderne et discret
  • Icônes SVG : Utilisation d'icônes SVG pour une meilleure qualité
  • Fermeture automatique : Les menus se ferment en cliquant à l'extérieur
  • Animations fluides : Transitions douces pour toutes les interactions
  • Hover effects : Feedback visuel sur tous les éléments interactifs

🎨 Améliorations Visuelles

Header

  • Fond semi-transparent avec effet de profondeur
  • Badge de langage stylisé avec couleur primaire
  • Actions rapides (copie, numéros de ligne) facilement accessibles
  • Séparateurs visuels pour organiser l'interface

Body

  • Padding confortable pour la lisibilité
  • Scrollbar personnalisé discret
  • Support du mode sombre et clair
  • Colonne de numéros de ligne avec bordure subtile

Footer

  • Informations contextuelles toujours visibles
  • Design minimaliste qui ne distrait pas
  • Nom de police visible au survol

Collapsed State

  • Design de "pill" élégant et compact
  • Icône de code reconnaissable
  • Informations essentielles visibles
  • Hover effect pour indiquer l'interactivité

🔧 Architecture Technique

Composant Principal

  • code-block.component.ts : Logique complète réécrite
  • Utilisation de Signals Angular pour la réactivité
  • HostListener pour fermer les menus au clic extérieur
  • Gestion d'état local pour les menus et sous-menus

Styles

  • code-themes.css : 11 thèmes de couleur avec support dark/light
  • Import Google Fonts pour les polices web
  • Classes CSS pour chaque police
  • Scrollbar personnalisé

Services

  • CodeThemeService : Gestion centralisée des thèmes et langages
  • 28 langages supportés avec noms d'affichage

Modèle de Données

  • CodeProps : Interface complète avec tous les champs nécessaires
    • lang, code, theme, showLineNumbers, enableWrap, collapsed

✅ Build Réussi

Le projet compile sans erreurs avec npm run build.

📝 Notes

  • Toutes les fonctionnalités demandées ont été implémentées
  • Le design est professionnel et moderne
  • La performance est optimisée (détection de langage avec debouncing implicite)
  • Compatibilité totale avec l'architecture existante du projet Nimbus