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

@@ -138,7 +138,7 @@ class AnnotationCreation extends Component {
       textEditorStateBustingKey: 0,
       xywh: null,
       // eslint-disable-next-line sort-keys
-      valueTime: [20, 37],
+      valueTime: [20, 40],
       ...annoState,
       valuetextTime: '',
     };
@@ -358,11 +358,12 @@ class AnnotationCreation extends Component {
       activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl,
       strokeColor, popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode,
       textBody, svg, tstart, tend,
-      textEditorStateBustingKey, image,
+      textEditorStateBustingKey, image, valueTime,
     } = this.state;
 
     const mediaIsVideo = typeof VideosReferences.get(windowId) !== 'undefined';
 
+    // let value = [20, 47]
     return (
       <CompanionWindow
         title={annotation ? 'Edit annotation' : 'New annotation'}
@@ -499,15 +500,13 @@ class AnnotationCreation extends Component {
                   Start
                 </Typography>
               </Grid>
-
-
               <Grid item xs={12} className={classes.paper}>
                 <Typography id="range-slider" gutterBottom>
                   Time range
                 </Typography>
                 <Slider
-                  value={this.valueTime}
-                  onChange={this.handleChangeTime}
+                  value={valueTime}
+                  // onChange={this.handleChangeTime}
                   valueLabelDisplay="auto"
                   aria-labelledby="range-slider"
                   getAriaValueText={this.valuetextTime}