From 3de858850e0dc564a7ce6fbe5eaecb5d1da3af93 Mon Sep 17 00:00:00 2001 From: arthur-lemeur <113124595+arthur-lemeur@users.noreply.github.com> Date: Mon, 21 Oct 2024 15:30:14 +0200 Subject: [PATCH] fix(annotations): annotations menu UI (PR #2609) Co-authored-by: Pierre Leroux --- src/renderer/assets/icons/avatar-icon.svg | 3 + src/renderer/assets/icons/export-icon.svg | 3 + src/renderer/assets/icons/filter3-icon.svg | 3 + src/renderer/assets/icons/import-icon.svg | 3 + .../assets/styles/components/annotations.scss | 30 +- .../styles/components/annotations.scss.d.ts | 2 + src/renderer/reader/components/ReaderMenu.tsx | 1008 +++++++++-------- 7 files changed, 560 insertions(+), 492 deletions(-) create mode 100644 src/renderer/assets/icons/avatar-icon.svg create mode 100644 src/renderer/assets/icons/export-icon.svg create mode 100644 src/renderer/assets/icons/filter3-icon.svg create mode 100644 src/renderer/assets/icons/import-icon.svg diff --git a/src/renderer/assets/icons/avatar-icon.svg b/src/renderer/assets/icons/avatar-icon.svg new file mode 100644 index 000000000..c2f2d8386 --- /dev/null +++ b/src/renderer/assets/icons/avatar-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/renderer/assets/icons/export-icon.svg b/src/renderer/assets/icons/export-icon.svg new file mode 100644 index 000000000..81a2f0881 --- /dev/null +++ b/src/renderer/assets/icons/export-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/renderer/assets/icons/filter3-icon.svg b/src/renderer/assets/icons/filter3-icon.svg new file mode 100644 index 000000000..4eca03b71 --- /dev/null +++ b/src/renderer/assets/icons/filter3-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/renderer/assets/icons/import-icon.svg b/src/renderer/assets/icons/import-icon.svg new file mode 100644 index 000000000..1b7dbfbed --- /dev/null +++ b/src/renderer/assets/icons/import-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss index 8d01aee19..9f04b298d 100644 --- a/src/renderer/assets/styles/components/annotations.scss +++ b/src/renderer/assets/styles/components/annotations.scss @@ -110,6 +110,11 @@ color: var(--color-primary); } + .button_primary_blue:hover { + color: var(--color-secondary); + background-color: var(--color-blue); + } + @include scrollbar_styling; &::-webkit-scrollbar-track { @@ -137,20 +142,20 @@ padding: 0 10px; } + &_line { + display: flex; + align-items: center; + justify-content: space-between; + width: calc(100%); + gap: 20px; + padding-right: 10px; + } + &_trigger_button { width: 30px; height: 30px; position: relative; - background-color: var(--color-extralight-grey); padding: 5px; - border-radius: 4px; - // box-shadow: 1px 0 5px var(--color-light-grey); - border: 1px solid var(--color-verylight-grey); - - &:hover { - background-color: var(--color-verylight-grey-alt2); - - } svg { width: 20px; @@ -635,6 +640,13 @@ justify-content: space-between; padding: 0 5px; + p { + padding-left: 0; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + } + >div { display: inherit; align-items: center; diff --git a/src/renderer/assets/styles/components/annotations.scss.d.ts b/src/renderer/assets/styles/components/annotations.scss.d.ts index 3c8ffe5c7..56533053a 100644 --- a/src/renderer/assets/styles/components/annotations.scss.d.ts +++ b/src/renderer/assets/styles/components/annotations.scss.d.ts @@ -17,6 +17,7 @@ export declare const annotations_filter_button: string; export declare const annotations_filter_color: string; export declare const annotations_filter_container: string; export declare const annotations_filter_drawtype: string; +export declare const annotations_filter_line: string; export declare const annotations_filter_nbOfFilters: string; export declare const annotations_filter_tag: string; export declare const annotations_filter_tagGroup: string; @@ -33,6 +34,7 @@ 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 form_group: string; export declare const my_combobox_container: string; export declare const my_item: string; export declare const popover_dialog_reader: string; diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx index 3bfdaed3f..20eeb88f4 100644 --- a/src/renderer/reader/components/ReaderMenu.tsx +++ b/src/renderer/reader/components/ReaderMenu.tsx @@ -19,20 +19,23 @@ import * as StylesCombobox from "readium-desktop/renderer/assets/styles/componen import classNames from "classnames"; import * as React from "react"; -import * as Dialog from "@radix-ui/react-dialog"; import FocusLock from "react-focus-lock"; import { isAudiobookFn } from "readium-desktop/common/isManifestType"; -// import {TextArea} from 'react-aria-components'; -import { IBookmarkState } from "readium-desktop/common/redux/states/bookmark"; -import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState"; -import * as SaveIcon from "readium-desktop/renderer/assets/icons/floppydisk-icon.svg"; -import * as ImportIcon from "readium-desktop/renderer/assets/icons/import.svg"; +import SVG from "readium-desktop/renderer/common/components/SVG"; + +import * as SaveIcon from "readium-desktop/renderer/assets/icons/export-icon.svg"; +import * as ImportIcon from "readium-desktop/renderer/assets/icons/import-icon.svg"; import * as DeleteIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg"; import * as EditIcon from "readium-desktop/renderer/assets/icons/pen-icon.svg"; import * as BookmarkIcon from "readium-desktop/renderer/assets/icons/bookmarkMultiple-icon.svg"; import * as BookOpenIcon from "readium-desktop/renderer/assets/icons/bookOpen-icon.svg"; - +import * as TocIcon from "readium-desktop/renderer/assets/icons/toc-icon.svg"; +import * as LandmarkIcon from "readium-desktop/renderer/assets/icons/landmark-icon.svg"; +import * as TargetIcon from "readium-desktop/renderer/assets/icons/target-icon.svg"; +import * as SearchIcon from "readium-desktop/renderer/assets/icons/search-icon.svg"; +import * as AnnotationIcon from "readium-desktop/renderer/assets/icons/annotations-icon.svg"; +import * as CalendarIcon from "readium-desktop/renderer/assets/icons/calendar-icon.svg"; import * as DockLeftIcon from "readium-desktop/renderer/assets/icons/dockleft-icon.svg"; import * as DockRightIcon from "readium-desktop/renderer/assets/icons/dockright-icon.svg"; import * as DockModalIcon from "readium-desktop/renderer/assets/icons/dockmodal-icon.svg"; @@ -41,22 +44,33 @@ import * as ArrowRightIcon from "readium-desktop/renderer/assets/icons/baseline- import * as ArrowLeftIcon from "readium-desktop/renderer/assets/icons/baseline-arrow_left_ios-24px.svg"; import * as ArrowLastIcon from "readium-desktop/renderer/assets/icons/arrowLast-icon.svg"; import * as ArrowFirstIcon from "readium-desktop/renderer/assets/icons/arrowFirst-icon.svg"; -import * as Tabs from "@radix-ui/react-tabs"; - -import * as TocIcon from "readium-desktop/renderer/assets/icons/toc-icon.svg"; -import * as LandmarkIcon from "readium-desktop/renderer/assets/icons/landmark-icon.svg"; -import * as TargetIcon from "readium-desktop/renderer/assets/icons/target-icon.svg"; -import * as SearchIcon from "readium-desktop/renderer/assets/icons/search-icon.svg"; -import * as AnnotationIcon from "readium-desktop/renderer/assets/icons/annotations-icon.svg"; -import * as CalendarIcon from "readium-desktop/renderer/assets/icons/calendar-icon.svg"; +import * as CheckIcon from "readium-desktop/renderer/assets/icons/singlecheck-icon.svg"; +import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg"; +import * as MenuIcon from "readium-desktop/renderer/assets/icons/filter3-icon.svg"; +import * as OptionsIcon from "readium-desktop/renderer/assets/icons/filter2-icon.svg"; +import * as SortIcon from "readium-desktop/renderer/assets/icons/sort-icon.svg"; +import * as HighLightIcon from "readium-desktop/renderer/assets/icons/highlight-icon.svg"; +import * as UnderLineIcon from "readium-desktop/renderer/assets/icons/underline-icon.svg"; +import * as TextStrikeThroughtIcon from "readium-desktop/renderer/assets/icons/TextStrikethrough-icon.svg"; +import * as TextOutlineIcon from "readium-desktop/renderer/assets/icons/TextOutline-icon.svg"; +import * as AvatarIcon from "readium-desktop/renderer/assets/icons/avatar-icon.svg"; // import * as DuplicateIcon from "readium-desktop/renderer/assets/icons/duplicate-icon.svg"; -import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState"; +import * as Tabs from "@radix-ui/react-tabs"; +import * as Popover from "@radix-ui/react-popover"; +import * as AlertDialog from "@radix-ui/react-alert-dialog"; +import * as Dialog from "@radix-ui/react-dialog"; +import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox"; +import { MySelectProps, Select, SelectItem } from "readium-desktop/renderer/common/components/Select"; +import { ListBox, ListBoxItem, TextArea } from "react-aria-components"; +import type { Selection } from "react-aria-components"; +import { AnnotationEdit, annotationsColorsLight } from "./AnnotationEdit"; +import { TagGroup, TagList, Tag, Label } from "react-aria-components"; +// import {TextArea} from 'react-aria-components'; +// import { DialogTrigger as DialogTriggerReactAria, Popover as PopoverReactAria, Dialog as DialogReactAria } from "react-aria-components"; +import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState"; import { Link } from "@r2-shared-js/models/publication-link"; - -import SVG from "readium-desktop/renderer/common/components/SVG"; - import { ILink, TToc } from "../pdf/common/pdfReader.type"; import { IReaderMenuProps } from "./options-values"; import ReaderMenuSearch from "./ReaderMenuSearch"; @@ -64,43 +78,23 @@ import ReaderMenuSearch from "./ReaderMenuSearch"; // import { SectionData } from "./sideMenu/sideMenuData"; // import UpdateBookmarkForm from "./UpdateBookmarkForm"; -import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox"; -import { MySelectProps, Select, SelectItem } from "readium-desktop/renderer/common/components/Select"; import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector"; import { Publication as R2Publication } from "@r2-shared-js/models/publication"; import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator"; import { useDispatch } from "readium-desktop/renderer/common/hooks/useDispatch"; import { Locator } from "@r2-shared-js/models/locator"; -// import { DialogTrigger as DialogTriggerReactAria, Popover as PopoverReactAria, Dialog as DialogReactAria } from "react-aria-components"; -import { ListBox, ListBoxItem, TextArea } from "react-aria-components"; -import { AnnotationEdit, annotationsColorsLight } from "./AnnotationEdit"; import { IAnnotationState, IColor, TAnnotationState, TDrawType } from "readium-desktop/common/redux/states/renderer/annotation"; import { readerActions } from "readium-desktop/common/redux/actions"; import { readerLocalActionLocatorHrefChanged, readerLocalActionSetConfig } from "../redux/actions"; - -import * as CheckIcon from "readium-desktop/renderer/assets/icons/singlecheck-icon.svg"; -import * as Popover from "@radix-ui/react-popover"; import { useReaderConfig, useSaveReaderConfig } from "readium-desktop/renderer/common/hooks/useReaderConfig"; import { ReaderConfig } from "readium-desktop/common/models/reader"; -import * as AlertDialog from "@radix-ui/react-alert-dialog"; - -import * as TrashIcon from "readium-desktop/renderer/assets/icons/trash-icon.svg"; -import * as MenuIcon from "readium-desktop/renderer/assets/icons/filter-icon.svg"; -import * as OptionsIcon from "readium-desktop/renderer/assets/icons/filter2-icon.svg"; -import * as SortIcon from "readium-desktop/renderer/assets/icons/sort-icon.svg"; -import * as HighLightIcon from "readium-desktop/renderer/assets/icons/highlight-icon.svg"; -import * as UnderLineIcon from "readium-desktop/renderer/assets/icons/underline-icon.svg"; -import * as TextStrikeThroughtIcon from "readium-desktop/renderer/assets/icons/TextStrikethrough-icon.svg"; -import * as TextOutlineIcon from "readium-desktop/renderer/assets/icons/TextOutline-icon.svg"; -import { TagGroup, TagList, Tag, Label } from "react-aria-components"; import { ObjectKeys } from "readium-desktop/utils/object-keys-values"; - -import type { Selection } from "react-aria-components"; import { rgbToHex } from "readium-desktop/common/rgb"; import { IReadiumAnnotationModelSet } from "readium-desktop/common/readium/annotation/annotationModel.type"; import { convertAnnotationListToReadiumAnnotationSet } from "readium-desktop/common/readium/annotation/converter"; import { ImportAnnotationsDialog } from "readium-desktop/renderer/common/components/ImportAnnotationsDialog"; - +import { IBookmarkState } from "readium-desktop/common/redux/states/bookmark"; +import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState"; // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -456,6 +450,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState const tagName = tagsStringArray[0] || ""; const dockedEditAnnotation = isEdited && dockedMode; const annotationColor = rgbToHex(annotation.color); + const creatorMyself = useSelector((state: IReaderRootState) => state.creator); const dispatch = useDispatch(); const [__] = useTranslator(); @@ -499,6 +494,8 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState return <>; } + const creatorName = (annotation.creator?.id !== creatorMyself.id ? annotation.creator?.name : creatorMyself.name) || ""; + return (

{bprogression}

+ {creatorName + ? +
+ +

{creatorName}

+
+ : <> + }
- - - - -
- - - - - - - - - + + + + + + + classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} + style={{ marginBottom: "5px" }} + > + {__("reader.annotations.sorting.progression")} + + + classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} + style={{ marginBottom: "5px" }} + > + {__("reader.annotations.sorting.lastcreated")} + + + classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} + > + {__("reader.annotations.sorting.lastmodified")} + + + + + + + + + + + + + + +
+ + +
+ + +
+ + + {(item) => {item.name}} + +
+ + +
+ + +
+ + +
+ + + {(item) => } + +
+ + +
+ + +
+ + +
+ + + {(item) => } + +
+ + +
+ + +
+ + +
+ + + {(item) => {item.name}} + +
+ + + + + + +
+ + - - - - -
{ - e.preventDefault(); - }} - > -

{__("reader.annotations.annotationsExport.description")}

-
- - + + + + + + + + + + { + e.preventDefault(); + }} + > +

{__("reader.annotations.annotationsExport.description")}

+
+ + +
+ + + + + + + + + + + + + + + {__("dialog.deleteAnnotations")} + + {__("dialog.deleteAnnotationsText", { annotationListLength: annotationListFiltered.length })} + +
+ + + + + +
- - - - - - - - - - - - - - - - - classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} - style={{ marginBottom: "5px" }} - > - {__("reader.annotations.sorting.progression")} - - - classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} - style={{ marginBottom: "5px" }} - > - {__("reader.annotations.sorting.lastcreated")} - - - classNames(StylesCombobox.my_item, isFocused ? StylesCombobox.focused : "", isSelected ? StylesCombobox.selected : "")} - > - {__("reader.annotations.sorting.lastmodified")} - - - - - - - - - - - - - -
- - -
- -
- - - {(item) => {item.name}} - -
- - -
- - -
- - +
+

{__("reader.annotations.advancedMode")}

-
- - {(item) => } - -
- - -
- - -
- - + +
+ {/* : <>} */} +
+ + +
+
+ +
- - {(item) => } - -
- - -
- - -
- - +

{__("reader.annotations.toggleMarginMarks")}

+
+
+ +
- - {(item) => {item.name}} - -
- - - - +

{__("reader.annotations.hide")}

+
+ + + + +
{annotationsPagedArray.map(([timestamp, annotationItem], _i) => @@ -1197,7 +1368,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU {item => {item.name}} */} - { setPageNumber(pageOptions.find((option) => option.id === parseInt(e.currentTarget.value, 10)).id); setTimeout(() => paginatorAnnotationsRef.current?.focus(), 100); }} @@ -2322,148 +2494,18 @@ export const ReaderMenu: React.FC = (props) => {
- - - - - - - -
- - -
- {/* : <>} */} -
- - -
-
- - -
-
- - -
- - - - - - +