feat(annotations): add a popover to choose a name to export annotatio…

…ns list (PR #2599) Co-authored-by: Pierre Leroux <[email protected]>
edrlab · Oct 7, 2024 · fafec42 · fafec42
1 parent 93d5095
commit fafec42
Show file tree

Hide file tree

Showing 33 changed files with 201 additions and 16 deletions.
diff --git a/src/common/readium/annotation/converter.ts b/src/common/readium/annotation/converter.ts
@@ -77,7 +77,7 @@ export function convertAnnotationToReadiumAnnotationModel(annotation: IAnnotatio
     };
 }
 
-export function convertAnnotationListToReadiumAnnotationSet(annotationArray: IAnnotationState[], publicationView: PublicationView): IReadiumAnnotationModelSet {
+export function convertAnnotationListToReadiumAnnotationSet(annotationArray: IAnnotationState[], publicationView: PublicationView, label?: string): IReadiumAnnotationModelSet {
 
     const currentDate = new Date();
     const dateString: string = currentDate.toISOString();
@@ -93,7 +93,7 @@ export function convertAnnotationListToReadiumAnnotationSet(annotationArray: IAn
             homepage: "https://thorium.edrlab.org",
         },
         generated: dateString,
-        label: "Annotations set",
+        label: label || "Annotations set",
         about: {
             "dc:identifier": [publicationView.workIdentifier ? ((publicationView.workIdentifier.startsWith("urn:") ? "" : "urn:isbn:") + publicationView.workIdentifier) : ""],
             "dc:format": "application/epub+zip",

diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
@@ -203,7 +203,7 @@
     height: 20px;
     border-radius: 50%;
     border: 2px solid var(--color-extralight-grey);
-    
+
     &[data-selected] {
       outline: 2px solid;
       outline-offset: 2px;
@@ -221,10 +221,10 @@
       height: 20px;
       color: var(--color-primary);
     }
-    
+
     &[data-selected] {
       background-color: var(--color-blue);
-      
+
       svg {
         color: var(--color-secondary);
       }
@@ -661,6 +661,44 @@
   margin-top: 5px;
 }
 
+.annotationsTitle_form {
+  &_container {
+    width: fit-content;
+    height: fit-content;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 0 15px;
+    color: var(--color-primary);
+
+    .form_group {
+      width: unset;
+    }
+
+    input {
+      width: 100%;
+      padding: 0;
+      height: 25px;
+      margin-left: 5px;
+    }
+
+    label {
+      background-color: var(--color-extralight-grey);
+    }
+
+    button {
+      width: 100%;
+      height: 25px;
+    }
+
+    p {
+      margin: 0;
+    }
+
+  }
+}
+
 .CSS_END_components_annotations {
   display: none;
 }
diff --git a/src/renderer/assets/styles/components/annotations.scss.d.ts b/src/renderer/assets/styles/components/annotations.scss.d.ts
@@ -26,13 +26,15 @@ export declare const annotations_line: string;
 export declare const annotations_options: string;
 export declare const annotations_sorting_container: string;
 export declare const annotations_tab: string;
+export declare const annotationsTitle_form_container: string;
 export declare const button_primary_blue: string;
 export declare const colorPicker: string;
 export declare const CSS_END_components_annotations: string;
 export declare const CSS_START_components_annotations: string;
 export declare const docked_annotation_line: string;
 export declare const drawType_active: string;
 export declare const my_combobox_container: string;
+export declare const my_item: string;
 export declare const popover_dialog_reader: string;
 export declare const react_aria_ComboBox: string;
 export declare const react_aria_Label: string;

diff --git a/src/renderer/assets/styles/components/inputs.scss b/src/renderer/assets/styles/components/inputs.scss
@@ -77,7 +77,6 @@ select {
   appearance: none;
 }
 
-
 .form_group {
   width: 150px;
   height: 25px;

diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx
@@ -820,6 +820,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
 
     const nbOfFilters = ((tagArrayFilter === "all") ? selectTagOption.length : tagArrayFilter.size) + ((colorArrayFilter === "all") ? annotationsColors.length : colorArrayFilter.size) + ((drawTypeArrayFilter === "all") ? selectDrawtypesOptions.length : drawTypeArrayFilter.size);
 
+    const annotationTitle = React.useRef<HTMLInputElement>(null);
+
     return (
         <>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "end", width: "100%", gap: "20px", marginTop: "-35px" }}>
@@ -858,15 +860,44 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                         </AlertDialog.Content>
                     </AlertDialog.Portal>
                 </AlertDialog.Root>
-                <button className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}
-                    onClick={async () => {
-                        const annotations = annotationList.map(([, anno]) => anno);
-                        const contents = convertAnnotationListToReadiumAnnotationSet(annotations, publicationView);
-                        downloadAnnotationJSON(contents, "myAnnotationSet");
-                    }}
-                    title={__("catalog.exportAnnotation")}>
-                    <SVG svg={SaveIcon} />
-                </button>
+                <Popover.Root>
+                    <Popover.Trigger asChild>
+                        <button className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationList.length}
+                            title={__("catalog.exportAnnotation")}>
+                            <SVG svg={SaveIcon} />
+                        </button>
+                    </Popover.Trigger>
+                    <Popover.Portal>
+                        <Popover.Content collisionBoundary={popoverBoundary} avoidCollisions alignOffset={-10} align="end" hideWhenDetached sideOffset={5} className={stylesAnnotations.annotations_sorting_container} style={{ maxHeight: Math.round(window.innerHeight / 2), padding: "15px 0"}}>
+                            <Popover.Arrow className={stylesDropDown.PopoverArrow} aria-hidden style={{ fill: "var(--color-extralight-grey)" }} />
+                            <form 
+                            className={stylesAnnotations.annotationsTitle_form_container}
+                            onSubmit={async (e) => {
+                                e.preventDefault();
+                                const annotations = annotationList.map(([, anno]) => anno);
+                                const label = annotationTitle?.current.value || "Annotations_set";
+                                const contents = convertAnnotationListToReadiumAnnotationSet(annotations, publicationView, label);
+                                downloadAnnotationJSON(contents, label);
+                            }}
+                            >
+                                <p>{__("reader.annotations.annotationsExport.description")}</p>
+                                <div className={stylesInputs.form_group}>
+                                    <label htmlFor="annotationsTitle">{__("reader.annotations.annotationsExport.title")}</label>
+                                    <input 
+                                    type="text"
+                                    name="annotationsTitle"
+                                    id="annotationsTitle"
+                                    ref={annotationTitle} 
+                                    className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE" />
+                                </div>
+                                <button type="submit" className={stylesButtons.button_primary_blue}>
+                                    <SVG svg={SaveIcon} />
+                                    {__("catalog.export")}
+                                </button>
+                            </form>
+                        </Popover.Content>
+                    </Popover.Portal>
+                </Popover.Root>
                 <Popover.Root>
                     <Popover.Trigger asChild>
                         <button aria-label="Menu" className={stylesAnnotations.annotations_filter_trigger_button}

diff --git a/src/resources/locales/ar.json b/src/resources/locales/ar.json
@@ -307,6 +307,10 @@
       "Color": "اللون",
       "addNote": "تعليق",
       "advancedMode": "الصيغة الفورية (إنشاء تلقائي بعد الاختيار)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "خيارات",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/bg.json b/src/resources/locales/bg.json
@@ -307,6 +307,10 @@
       "Color": "",
       "addNote": "",
       "advancedMode": "",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/ca.json b/src/resources/locales/ca.json
@@ -307,6 +307,10 @@
       "Color": "Color",
       "addNote": "Anotació",
       "advancedMode": "Mode instantani (creació automàtica després de seleccionar)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opcions",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/da.json b/src/resources/locales/da.json
@@ -307,6 +307,10 @@
       "Color": "Farve",
       "addNote": "Lav note",
       "advancedMode": "Øjeblikkelige noter (oprettes automatisk ved markering)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Indstillinger",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/de.json b/src/resources/locales/de.json
@@ -307,6 +307,10 @@
       "Color": "Farbe",
       "addNote": "Notiz hinzufügen",
       "advancedMode": "Sofortmodus (automatisch erstellen nach Auswahl)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Optionen",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/el.json b/src/resources/locales/el.json
@@ -307,6 +307,10 @@
       "Color": "Χρώμα",
       "addNote": "Σχόλιο",
       "advancedMode": "Άμεση λειτουργία (αυτόματη δημιουργία μετά την επιλογή)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Επιλογές",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json
@@ -307,6 +307,10 @@
       "Color": "Color",
       "addNote": "Annotate",
       "advancedMode": "Instant mode (auto create after select)",
+      "annotationsExport": {
+        "description": "Name this set of annotations",
+        "title": "Title"
+      },
       "annotationsOptions": "Options",
       "colors": {
         "bluegreen": "Blue-green",

diff --git a/src/resources/locales/es.json b/src/resources/locales/es.json
@@ -307,6 +307,10 @@
       "Color": "Color",
       "addNote": "Anotar",
       "advancedMode": "Modo instantáneo (creación automática al seleccionar)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opciones",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/eu.json b/src/resources/locales/eu.json
@@ -307,6 +307,10 @@
       "Color": "Kolore",
       "addNote": "Apuntatu",
       "advancedMode": "Berehalako modua (sortu automatikoki hautatu ondoren)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Aukerak",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/fi.json b/src/resources/locales/fi.json
@@ -307,6 +307,10 @@
       "Color": "Väri",
       "addNote": "Lisää muistiinpano",
       "advancedMode": "Välitön tila (luo suoraan valinnasta)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Asetukset",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json
@@ -307,6 +307,10 @@
       "Color": "Couleur",
       "addNote": "Annoter",
       "advancedMode": "Mode instantané (création automatique après sélection)",
+      "annotationsExport": {
+        "description": "Nommez cette liste d'annotations",
+        "title": "Titre"
+      },
       "annotationsOptions": "Options",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/gl.json b/src/resources/locales/gl.json
@@ -307,6 +307,10 @@
       "Color": "Cor",
       "addNote": "Anotar",
       "advancedMode": "Modo instantáneo (creación automática ao seleccionar)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opcións",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/hr.json b/src/resources/locales/hr.json
@@ -307,6 +307,10 @@
       "Color": "",
       "addNote": "",
       "advancedMode": "",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/it.json b/src/resources/locales/it.json
@@ -307,6 +307,10 @@
       "Color": "Colore",
       "addNote": "Annotare",
       "advancedMode": "Modalità istantanea (creazione automatica dopo la selezione)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opzioni",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/ja.json b/src/resources/locales/ja.json
@@ -307,6 +307,10 @@
       "Color": "色",
       "addNote": "注釈をつける",
       "advancedMode": "インスタントモード（本文を選択するだけで自動作成）",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "オプション",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/ka.json b/src/resources/locales/ka.json
@@ -307,6 +307,10 @@
       "Color": "",
       "addNote": "",
       "advancedMode": "",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/ko.json b/src/resources/locales/ko.json
@@ -307,6 +307,10 @@
       "Color": "",
       "addNote": "",
       "advancedMode": "",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/lt.json b/src/resources/locales/lt.json
@@ -307,6 +307,10 @@
       "Color": "Spalva",
       "addNote": "Pridėti pastabą",
       "advancedMode": "Momentinis režimas (pažymėjus sukurti automatiškai)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Parinktys",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/nl.json b/src/resources/locales/nl.json
@@ -307,6 +307,10 @@
       "Color": "Kleur",
       "addNote": "Annoteren",
       "advancedMode": "Instantmodus (automatisch maken na selectie)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opties",
       "colors": {
         "bluegreen": "",

diff --git a/src/resources/locales/pt-br.json b/src/resources/locales/pt-br.json
@@ -307,6 +307,10 @@
       "Color": "Cor",
       "addNote": "Anotar",
       "advancedMode": "Modo instantâneo (criação automática após seleção)",
+      "annotationsExport": {
+        "description": "",
+        "title": ""
+      },
       "annotationsOptions": "Opções",
       "colors": {
         "bluegreen": "",