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

@@ -411,12 +411,12 @@ class AnnotationCreation extends Component {
             { mediaIsVideo && (
             <>
               <Grid item xs={12} className={classes.paper}>
-                <Typography>
-                  {mediaIsVideo ? mediaVideo?.video.duration : null}
-                </Typography>
                 <Typography id="range-slider" variant="overline">
                   Display period
                 </Typography>
+               {/*  <Typography>
+                  {mediaIsVideo ? mediaVideo?.video.duration : null}
+                </Typography> */}
                 <Slider
                   value={valueTime}
                   onChange={this.handleChangeTime}
@@ -692,6 +692,7 @@ const styles = (theme) => ({
   textTimeButton: {
     fontSize: '15px',
     margin: 0,
+    minWidth: '40px',
   },
   timecontrolsbutton: {
     border: 'none',
@@ -699,7 +700,6 @@ const styles = (theme) => ({
     margin: 'auto',
     marginLeft: '0',
     marginRight: '5px',
-    width: '30px',
   },
 });