Change on the slide bar's UI from pluggin annotation

This MR will covered two main changes documented with tickets :

• The UI changes listed there : https://gitlab.tetras-libre.fr/iiif/mirador-annotations/-/issues/13
• Some refactor explain there : https://gitlab.tetras-libre.fr/iiif/mirador-annotations/-/issues/15

Commentaires AG 7/12/2023

• Retirer le dossier .idea du code produit. Il faut que tu dises à Git d'arreter de le tracker et qu'il le supprime de son index.

  • Ignorer : ajoute .idea dans .gitignore
  • Arreter de tracker : git rm -r --cached <folder> https://stackoverflow.com/questions/1274057/how-do-i-make-git-forget-about-a-file-that-was-tracked-but-is-now-in-gitignore

• Dans le code : voir mes commentaires sur Gitlab

• Test : Pas encore testé

Commentaires AG 8/12/2023

• Utiliser la même police que Text content pour time range
• Valeurs par défaut : début et fin de vidéo
• Homogénéiser le plugin
  • Border autour des 2 blocs Début fin comme :
    • border: 1px solid rgba(0, 0, 0, 0.12);
    • border-radius: 4px;
• Changer couleur slider, text et input : rgba(0, 0, 0, 0.38);
• Wording : Time range -> Display period
• Proposition amélioration : Ajouter un indicateur de la durée d'affichage. On peut imaginer que le champ soit modifiable et que la fin soit mise à jour en consequence (début + durée)
• Non fonctionnel : Mise à jour live du slider en fonction des input
• Centrer les contenus d'input
• Amélioration Quand on édite l'annotation et qu'on sauvegarde, fermer le panneau
• Amélioration Mettre la partie "Text content" en premier tout en haut. --> Quand on annote on commence par écrire à priori
• supprimer box shadow et rajouter espace entre parties
• Proposition : à cote d'edit annotation : mettre le début du contenu avec ...

src/AnnotationCreation.js

@@ -389,6 +389,18 @@ class AnnotationCreation extends Component {
           player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
         />
         <form onSubmit={this.submitForm} className={classes.section}>
+          <Grid item xs={12}>
+            <Typography variant="overline">
+              Text Content
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <TextEditor
+                key={textEditorStateBustingKey}
+                annoHtml={textBody}
+                updateAnnotationBody={this.updateTextBody}
+            />
+          </Grid>
           <Grid container>
             { mediaIsVideo && (
             <>
@@ -450,18 +462,6 @@ class AnnotationCreation extends Component {
             <Grid item xs={12} style={{ marginBottom: 10 }}>
               <ImageFormField value={image} onChange={this.handleImgChange} />
             </Grid>
-            <Grid item xs={12}>
-              <Typography variant="overline">
-                Text Content
-              </Typography>
-            </Grid>
-            <Grid item xs={12}>
-              <TextEditor
-                key={textEditorStateBustingKey}
-                annoHtml={textBody}
-                updateAnnotationBody={this.updateTextBody}
-              />
-            </Grid>
           </Grid>
           <Grid container>
             <Grid item xs={12}>