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,22 +411,33 @@ class AnnotationCreation extends Component {
               </Grid>
               <div className={`${classes.paper} ${classes.selectTimeField} `}>
                 <div className={`${classes.paper} ${classes.selectTimeModule} `}>
-                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
-                    <Alarm fontSize="small" />
-                  </ToggleButton>
-                  <div>
-                    <p>Start</p>
+                  <div className={classes.buttonTimeContainer}>
+                    <div>
+                      <p className={classes.textTimeButton}>Start</p>
+                    </div>
+                    <ToggleButton
+                        value="true"
+                        title="Set current time"
+                        size="small"
+                        onClick={this.setTstartNow}
+                        className={classes.timecontrolsbutton}
+                    >
+                      <Alarm fontSize="small"/>
+                    </ToggleButton>
                   </div>
-                  <HMSInput seconds={tstart} onChange={this.updateTstart} />
+                  <HMSInput seconds={tstart} onChange={this.updateTstart}/>
                 </div>
                 <div className={`${classes.paper} ${classes.selectTimeModule}`}>
-                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
-                    <Alarm fontSize="small" />
-                  </ToggleButton>
+                  <div className={classes.buttonTimeContainer}>
                   <div>
-                    <p>End</p>
+                    <p className={classes.textTimeButton}>End</p>
                   </div>
-                  <HMSInput seconds={tend} onChange={this.updateTend} />
+                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow}
+                                className={classes.timecontrolsbutton}>
+                    <Alarm fontSize="small"/>
+                  </ToggleButton>
+                  </div>
+                  <HMSInput seconds={tend} onChange={this.updateTend}/>
                 </div>
               </div>
             </>
@@ -606,6 +617,10 @@ class AnnotationCreation extends Component {
 
 /** */
 const styles = (theme) => ({
+  buttonTimeContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
   divider: {
     margin: theme.spacing(1, 0.5),
   },
@@ -647,6 +662,10 @@ const styles = (theme) => ({
     justifyContent: 'center',
     padding: '5px',
   },
+  textTimeButton: {
+    margin:0,
+    fontSize: '15px',
+  },
   timecontrolsbutton: {
     border: 'none',
     height: '30px',