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

@@ -394,7 +394,7 @@ class AnnotationCreation extends Component {
             <>
               <Grid item xs={12} className={classes.paper}>
                 <Typography id="range-slider" variant="overline">
-                  Time range
+                  Display period
                 </Typography>
                 <Slider
                   value={valueTime}
@@ -403,6 +403,10 @@ class AnnotationCreation extends Component {
                   aria-labelledby="range-slider"
                   getAriaValueText={this.valuetextTime}
                   max={2000}
+                  color="secondary"
+                  classes={{
+                    root: classes.MuiSliderColorSecondary,
+                  }}
                 />
               </Grid>
               <div className={`${classes.paper} ${classes.selectTimeField} `}>
@@ -615,6 +619,9 @@ const styles = (theme) => ({
     border: 'none',
     margin: theme.spacing(0.5),
   },
+  MuiSliderColorSecondary: {
+    color: 'rgba(1, 0, 0, 0.38)',
+  },
   paper: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -627,16 +634,18 @@ const styles = (theme) => ({
   },
   selectTimeField: {
     alignContent: 'center',
-    boxShadow: 'rgba(149, 157, 165, 0.2) 0px 4px 5px',
     display: 'flex',
     flexDirection: 'wrap',
     gap: '5px',
     padding: '5px',
   },
   selectTimeModule: {
+    border: '1px solid rgba(0, 0, 0, 0.12)',
+    borderRadius: '4px',
     display: 'flex',
     flexWrap: 'nowrap',
     justifyContent: 'center',
+    padding: '5px',
   },
   timecontrolsbutton: {
     border: 'none',