Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create popover to choose a name for annotations export file #2599

Merged
merged 2 commits into from
Oct 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/common/readium/annotation/converter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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",
Expand Down
44 changes: 41 additions & 3 deletions src/renderer/assets/styles/components/annotations.scss
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
height: 20px;
border-radius: 50%;
border: 2px solid var(--color-extralight-grey);

&[data-selected] {
outline: 2px solid;
outline-offset: 2px;
Expand All @@ -221,10 +221,10 @@
height: 20px;
color: var(--color-primary);
}

&[data-selected] {
background-color: var(--color-blue);

svg {
color: var(--color-secondary);
}
Expand Down Expand Up @@ -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;
}
2 changes: 2 additions & 0 deletions src/renderer/assets/styles/components/annotations.scss.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion src/renderer/assets/styles/components/inputs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ select {
appearance: none;
}


.form_group {
width: 150px;
height: 25px;
Expand Down
49 changes: 40 additions & 9 deletions src/renderer/reader/components/ReaderMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" }}>
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "اللون",
"addNote": "تعليق",
"advancedMode": "الصيغة الفورية (إنشاء تلقائي بعد الاختيار)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "خيارات",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/bg.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "",
"addNote": "",
"advancedMode": "",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/ca.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/da.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Farve",
"addNote": "Lav note",
"advancedMode": "Øjeblikkelige noter (oprettes automatisk ved markering)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Indstillinger",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Farbe",
"addNote": "Notiz hinzufügen",
"advancedMode": "Sofortmodus (automatisch erstellen nach Auswahl)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Optionen",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/el.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Χρώμα",
"addNote": "Σχόλιο",
"advancedMode": "Άμεση λειτουργία (αυτόματη δημιουργία μετά την επιλογή)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Επιλογές",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/eu.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Kolore",
"addNote": "Apuntatu",
"advancedMode": "Berehalako modua (sortu automatikoki hautatu ondoren)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Aukerak",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/fi.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/gl.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/hr.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "",
"addNote": "",
"advancedMode": "",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Colore",
"addNote": "Annotare",
"advancedMode": "Modalità istantanea (creazione automatica dopo la selezione)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Opzioni",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "色",
"addNote": "注釈をつける",
"advancedMode": "インスタントモード(本文を選択するだけで自動作成)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "オプション",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/ka.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "",
"addNote": "",
"advancedMode": "",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/ko.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "",
"addNote": "",
"advancedMode": "",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/lt.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@
"Color": "Kleur",
"addNote": "Annoteren",
"advancedMode": "Instantmodus (automatisch maken na selectie)",
"annotationsExport": {
"description": "",
"title": ""
},
"annotationsOptions": "Opties",
"colors": {
"bluegreen": "",
Expand Down
4 changes: 4 additions & 0 deletions src/resources/locales/pt-br.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
Expand Down
Loading