Skip to content

Commit

Permalink
fix(annotation): creator filter UI fixes (Fixes #2758 PR #2768)
Browse files Browse the repository at this point in the history 
Co-authored-by: Arthur Le Meur <arthur@edrlab.org>
  • Loading branch information
@panaC @arthur-lemeur
panaC and arthur-lemeur authored Feb 3, 2025
1 parent fcb900d commit 5c684b7
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 22 deletions.
1 change: 1 addition & 0 deletions src/renderer/assets/styles/components/annotations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -656,6 +656,7 @@
display: inherit;
align-items: center;
overflow: hidden;
padding: 2px;

button {
padding: 5px;
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/assets/styles/components/tags.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@
margin-bottom: 5px;


&:has(a:focus) {
outline: var(--color-blue) solid 2px !important;
outline-offset: -2px;
}


a {
display: flex;
align-items: center;
Expand Down
71 changes: 53 additions & 18 deletions src/renderer/reader/components/ReaderMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -432,9 +432,11 @@ export const computeProgression = (spineItemLinks: Link[], locator: Locator) =>
return percent;
};

const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState, isEdited: boolean, triggerEdition: (v: boolean) => void, setTagFilter: (v: string) => void } & Pick<IReaderMenuProps, "goToLocator">> = (props) => {
const getUuidFromUrn = (v: string | undefined) => `${v?.startsWith("urn:uuid:") ? v.split("urn:uuid:")[1] : v}`;

const { goToLocator, setTagFilter } = props;
const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState, isEdited: boolean, triggerEdition: (v: boolean) => void, setTagFilter: (v: string) => void, setCreatorFilter: (v: string) => void } & Pick<IReaderMenuProps, "goToLocator">> = (props) => {

const { goToLocator, setTagFilter, setCreatorFilter } = props;
const r2Publication = useSelector((state: IReaderRootState) => state.reader.info.r2Publication);
const dockingMode = useReaderConfig("readerDockingMode");
// const setReaderConfig = useSaveReaderConfig();
Expand Down Expand Up @@ -492,7 +494,8 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
return <></>;
}

const creatorName = (annotation.creator?.id !== creatorMyself.id ? annotation.creator?.name : creatorMyself.name) || "";
const creatorName = (getUuidFromUrn(annotation.creator?.id) !== getUuidFromUrn(creatorMyself.id) ? (annotation.creator?.name || getUuidFromUrn(annotation.creator?.id)) : creatorMyself.name) || "";
const creatorId = (getUuidFromUrn(annotation.creator?.id) !== getUuidFromUrn(creatorMyself.id) ? getUuidFromUrn(annotation.creator?.id) : getUuidFromUrn(creatorMyself.id)) || "";

return (<li
className={stylesAnnotations.annotations_line}
Expand Down Expand Up @@ -564,12 +567,25 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
{tagName ? <div className={stylesTags.tags_wrapper} aria-label={__("catalog.tags")}>
<div className={stylesTags.tag}>
<a onClick={() => setTagFilter(tagName)}

onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
if (e.key === "Enter" || e.key === "Space") {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " " || e.key === "Enter") { // WORKS
e.preventDefault();
setTagFilter(tagName);
e.currentTarget.click();
}
}}>
}}
className="R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE"
tabIndex={0}>
{tagName}
</a>
</div>
Expand All @@ -592,7 +608,27 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
?
<div>
<SVG ariaHidden svg={AvatarIcon} />
<p style={{overflow: "hidden", textOverflow: "ellipsis", padding: "0"}} title={creatorName}>{creatorName}</p>
<a onClick={() => setCreatorFilter(creatorId)}

onKeyDown={(e) => {
// if (e.code === "Space") {
if (e.key === " " || e.altKey || e.ctrlKey) {
e.preventDefault(); // prevent scroll
}
}}
onKeyUp={(e) => {
// Includes screen reader tests:
// if (e.code === "Space") { WORKS
// if (e.key === "Space") { DOES NOT WORK
// if (e.key === "Enter") { WORKS
if (e.key === " " || e.key === "Enter") { // WORKS
e.preventDefault();
e.currentTarget.click();
}
}}
tabIndex={0}>
<p style={{ overflow: "hidden", textOverflow: "ellipsis", padding: "0" }} title={creatorName}>{creatorName}</p>
</a>
</div>
: <></>
}
Expand Down Expand Up @@ -678,7 +714,6 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
const selectionIsSet = (a: Selection): a is Set<string> => typeof a === "object";
const MAX_MATCHES_PER_PAGE = 5;

const userNumber: Record<string, number> = {};

const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationUUID: () => void, doFocus: number, popoverBoundary: HTMLDivElement, advancedAnnotationsOnChange: () => void, quickAnnotationsOnChange: () => void, marginAnnotationsOnChange: () => void, hideAnnotationOnChange: () => void, serialAnnotator: boolean } & Pick<IReaderMenuProps, "goToLocator">> = (props) => {

Expand Down Expand Up @@ -712,7 +747,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
return (!selectionIsSet(tagArrayFilter) || !tagArrayFilter.size || tags.some((tagsValueName) => tagArrayFilter.has(tagsValueName))) &&
(!selectionIsSet(colorArrayFilter) || !colorArrayFilter.size || colorArrayFilter.has(colorHex)) &&
(!selectionIsSet(drawTypeArrayFilter) || !drawTypeArrayFilter.size || drawTypeArrayFilter.has(drawType)) &&
(!selectionIsSet(creatorArrayFilter) || !creatorArrayFilter.size || creatorArrayFilter.has(creator?.id));
(!selectionIsSet(creatorArrayFilter) || !creatorArrayFilter.size || creatorArrayFilter.has(getUuidFromUrn(creator?.id)));

})
: annotationsListAll;
Expand Down Expand Up @@ -747,7 +782,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
if (drawTypeArrayFilter !== "all" && !drawTypeArrayFilter.has(annotationFound.drawType) && drawTypeArrayFilter.size !== 0) {
setDrawTypeArrayFilter(new Set([]));
}
if (creatorArrayFilter !== "all" && !creatorArrayFilter.has(annotationFound.creator?.id) && creatorArrayFilter.size !== 0) {
if (creatorArrayFilter !== "all" && !creatorArrayFilter.has(getUuidFromUrn(annotationFound.creator?.id)) && creatorArrayFilter.size !== 0) {
setCreatorArrayFilter(new Set([]));
}
}
Expand Down Expand Up @@ -827,8 +862,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
const creatorList = annotationsListAll.map(([, { creator }]) => creator).filter(v => v);
const creatorSet = creatorList.reduce<Record<string, string>>((acc, { id, name }) => {
if (!acc[id]) {
if (!userNumber[id]) userNumber[id] = ObjectKeys(userNumber).length + 1;
return { ...acc, [id]: (id !== creatorMyself.id ? name : creatorMyself.name) || `unknown${userNumber[id]}` };
return { ...acc, [getUuidFromUrn(id)]: (getUuidFromUrn(id) !== getUuidFromUrn(creatorMyself.id) ? name : creatorMyself.name) || getUuidFromUrn(id) };
}
return acc;
}, {});
Expand Down Expand Up @@ -1054,13 +1088,13 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
style={{ marginBottom: "20px" }}
>
<details id="annotationListCreator">
<summary className={stylesAnnotations.annotations_filter_tagGroup} style={{ pointerEvents: selectCreatorOptions.length < 2 ? "none" : "auto", opacity: selectCreatorOptions.length < 2 ? "0.5" : "1" }}
tabIndex={selectCreatorOptions.length < 2 ? -1 : 0}
<summary className={stylesAnnotations.annotations_filter_tagGroup} style={{ pointerEvents: !selectCreatorOptions.length ? "none" : "auto", opacity: !selectCreatorOptions.length ? "0.5" : "1" }}
tabIndex={!selectCreatorOptions.length ? -1 : 0}
>
<Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByCreator")}</Label>
<div style={{ display: "flex", gap: "10px" }}>
<button
tabIndex={selectCreatorOptions.length < 2 ? -1 : 0}
tabIndex={!selectCreatorOptions.length ? -1 : 0}
style={{ width: "fit-content", minWidth: "unset" }}
className={creatorArrayFilter === "all" ? stylesButtons.button_primary_blue : stylesButtons.button_secondary_blue}
onClick={() => {
Expand All @@ -1074,7 +1108,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
{__("reader.annotations.filter.all")}
</button>
<button
tabIndex={selectCreatorOptions.length < 2 ? -1 : 0}
tabIndex={!selectCreatorOptions.length ? -1 : 0}
style={{ width: "fit-content", minWidth: "unset" }}
className={stylesButtons.button_secondary_blue}
onClick={() => {
Expand All @@ -1085,7 +1119,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
</button>
</div>
</summary>
<TagList items={selectCreatorOptions} className={stylesAnnotations.annotations_filter_taglist} style={{ margin: selectCreatorOptions.length < 2 ? "0" : "20px 0" }}>
<TagList items={selectCreatorOptions} className={stylesAnnotations.annotations_filter_taglist} style={{ margin: !selectCreatorOptions.length ? "0" : "20px 0" }}>
{(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.id} textValue={item.name}>{item.name}</Tag>}
</TagList>
</details>
Expand Down Expand Up @@ -1133,7 +1167,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
<button onClick={() => {
const annotations = annotationListFiltered.map(([, anno]) => {
const { creator } = anno;
if (creator?.id === creatorMyself.id) {
if (getUuidFromUrn(creator?.id) === getUuidFromUrn(creatorMyself.id)) {
return { ...anno, creator: { ...creatorMyself, id: "urn:uuid:" + creatorMyself.id } };
}
return anno;
Expand Down Expand Up @@ -1345,6 +1379,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
isEdited={annotationItem.uuid === annotationItemEditedUUID}
triggerEdition={triggerEdition(annotationItem)}
setTagFilter={(v) => setTagArrayFilter(new Set([v]))}
setCreatorFilter={(v) => setCreatorArrayFilter(new Set([v]))}
/>,
)}
</ol>
Expand Down
8 changes: 4 additions & 4 deletions src/resources/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,10 +346,10 @@
"export": "Sauvegarder sous",
"filter": {
"all": "Tous",
"filterByColor": "Filtré par couleur",
"filterByCreator": "Filtré par créateur",
"filterByDrawtype": "Filtré par Surlignage",
"filterByTag": "Filtré par tag",
"filterByColor": "Filtrer par couleur",
"filterByCreator": "Filtrer par créateur",
"filterByDrawtype": "Filtrer par Surlignage",
"filterByTag": "Filtrer par tag",
"filterOptions": "Filtre options",
"none": "Aucun"
},
Expand Down

0 comments on commit 5c684b7

Please sign in to comment.