Un commentaire d'espace de travail est un élément graphique dans lequel vous pouvez saisir du texte. Il est généralement utilisé pour documenter des éléments concernant votre code, tout comme les commentaires dans un langage de programmation textuel.
Activer les commentaires de l'espace de travail
Pour activer les commentaires d'espace de travail dans votre application, vous devez donner aux utilisateurs un moyen de les créer. Pour ce faire, vous pouvez ajouter un élément de menu contextuel qui crée un commentaire dans l'espace de travail. Vous pouvez enregistrer des éléments de menu contextuel par défaut pour créer, supprimer et dupliquer des commentaires dans l'espace de travail avec le code suivant:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
Vous pouvez également créer vos propres options de menu contextuel ou ajouter à l'utilisateur un autre moyen d'ajouter des commentaires à l'espace de travail. Pour en savoir plus sur les options de menu contextuel, consultez Menus contextuels.
Personnalisez visuellement les commentaires
Il existe plusieurs façons de personnaliser l'apparence des commentaires de l'espace de travail. Celles-ci utilisent du code CSS et non des thèmes. Il est possible de contrôler la plupart des couleurs et des tailles des différentes parties du commentaire, mais pas leur position.
Variables CSS de couleur
Vous pouvez définir la variable CSS commentFillColour pour modifier la couleur d'arrière-plan de la zone de texte. Vous pouvez définir la variable CSS commentBorderColour pour modifier la couleur de la barre supérieure du commentaire et sa bordure.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
Classes CSS
Différentes classes CSS sont attribuées à différents éléments de la vue Commentaires, ce qui vous permet de modifier le style des éléments.
| Classe(s) CSS | Images |
|---|---|
| blocklyComment, blocklyDraggable | 
|
| blocklySelected, blocklyCommentHighlight |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklyCommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
Utilisation de base de CSS
Dans la plupart des cas, vous pouvez appliquer vos attributs personnalisés avec la classe CSS appropriée:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS pour le texte
Toutefois, pour le texte, vous devez être plus spécifique afin de remplacer le CSS généré par le moteur de rendu.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
CSS pour les sélections sélectionnées
De plus, pour mettre en surbrillance le commentaire lorsqu'il est sélectionné, l'objet auquel le CSS doit être appliqué change selon que le commentaire est réduit ou non. Une fois l'élément réduit, appliquez-le à l'élément blocklyCommentTopbarBackground. Sinon, appliquez-le à l'élément blocklyCommentHighlight.
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
Icônes
Les classes blocklyFoldoutIcon, blocklyDeleteIcon et blocklyResizeHandle sont toutes appliquées aux éléments <image>. Cela signifie que si vous souhaitez modifier la couleur ou la forme d'une icône, vous pouvez inclure une autre image dans votre dossier multimédia.
| Nom de l'image | Images |
|---|---|
| plie-flèche.svg | |
| supprimer-icon.svg | |
| resize-handle.svg | |
Icône Supprimer
L'icône de suppression est masquée par défaut. Si vous souhaitez l'activer, vous devez utiliser un CSS pour le rendre visible:
.blocklyDeleteIcon {
display: block;
}