Concept

Le mode édition visuel permet de manipuler les widgets de manière intuitive et visuelle, offrant un contrôle précis sur la disposition et l'apparence des éléments sur l'interface. En utilisant ce mode, les utilisateurs peuvent ajouter, déplacer, redimensionner et personnaliser les widgets sans avoir à manipuler directement le code source.

Description

En mode édition visuel, un volet latéral apparaît. Ce volet est composé de deux zones avec des boutons et d'une zone de visualisation ( ci-dessous encadrée en bleu ) :

Le mode édition visuel offre aux utilisateurs la possibilité d'accomplir plusieurs actions sur les widgets pour personnaliser la partie visuelle :

  • Sélection des widgets :
    • Sélection par zone : Les utilisateurs peuvent sélectionner des widgets en encadrant une zone autour d'eux. Lorsque l'utilisateur fait glisser la souris pour encadrer plusieurs widgets, tous les widgets situés à l'intérieur de cette zone sont sélectionnés.
    • Sélection par clic : Les utilisateurs peuvent également sélectionner un widget en cliquant directement dessus. Une fois sélectionné, le widget peut être déplacé, redimensionné ou supprimé

( voir la page NEW_PAGE - 003.7 - SEF-10950 - Fonctionnement du mode édition visuel - Météo )

  • Ajout de widget :
    • Séparateur : Les séparateurs sont des éléments visuels utilisés pour diviser ou organiser le contenu sur une page. Les utilisateurs peuvent ajouter un séparateur en le faisant glisser et en le positionnant à l'endroit désiré sur la toile de conception.
    • Météo : Les utilisateurs peuvent ajouter un widget de type météo. 

( voir la page NEW_PAGE - 003.7 - SEF-10950 - Mode ajout des widgets - Edition visuelle - Météo  )

  • Pousser les widgets :

Lorsque les utilisateurs ajoutent de nouveaux widgets ou déplacent des widgets existants, il peut être nécessaire de "pousser" les widgets adjacents pour créer de l'espace

  • Décaler les widgets :

Les utilisateurs peuvent décaler les widgets en les faisant glisser vers de nouveaux emplacements sur la toile de conception.

  • Redimensionnement des widgets :

Les utilisateurs peuvent redimensionner un widget en faisant glisser les poignées de redimensionnement situées sur les bords ou les coins du widget.

  • Création d'espace/suppression d'espace :

Les utilisateurs peuvent créer de l'espace entre les widgets ou supprimer de l'espace