Skip to content

Commit

Permalink
Merge pull request #164 from mitaai/ui-bugs
Browse files Browse the repository at this point in the history 
UI bugs
  • Loading branch information
@blms
blms authored Apr 5, 2021
2 parents 3a4ff7b + c54ebd7 commit 61510e8
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 143 deletions.
36 changes: 17 additions & 19 deletions src/components/AnnotationCard/AnnotationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,10 +112,15 @@ function AnnotationCard({
const [cancelingAnnotation, setCancelingAnnotation] = useState(false);
const [savingAnnotation, setSavingAnnotation] = useState(false);
const [deletingAnnotation, setDeletingAnnotation] = useState(false);
const [updateFocusOfAnnotation, setUpdateFocusOfAnnotation] = useState(annotation.editing);
const [
updateFocusOfAnnotation,
setUpdateFocusOfAnnotation,
] = useState(annotation.editing);
const [hovered, setHovered] = useState();
const [newSelectedUsersToShare, setNewSelectedUsersToShare] = useState(null);

const leftRightPositionForAnnotation = annotationData.editing ? -10 : 15;

let selectedUsersToShare = newSelectedUsersToShare;
if (selectedUsersToShare === null) {
selectedUsersToShare = annotationData.permissions.sharedTo === undefined
Expand Down Expand Up @@ -249,7 +254,7 @@ function AnnotationCard({
// update the annotation data
SetAndSaveAnnotationData(newAnnotationData);
// focus annotation so that things get shifted to their correct spots
focusOnAnnotation();
setUpdateFocusOfAnnotation(true);
}).catch((err) => {
setAlerts((prevState) => [...prevState, { text: err.message, variant: 'danger' }]);
setSavingAnnotation(false);
Expand All @@ -275,7 +280,7 @@ function AnnotationCard({
setNewSelectedUsersToShare(null);
// then after everything is done we will focus
// on the annotation so that things get shifted to their correct spots
focusOnAnnotation();
setUpdateFocusOfAnnotation(true);
}).catch((err) => {
setAlerts((prevState) => [...prevState, { text: err.message, variant: 'danger' }]);
setSavingAnnotation(false);
Expand All @@ -290,18 +295,14 @@ function AnnotationCard({

if (annotationData.new) {
setCancelingAnnotation(true);
// simulating the time it takes to delete the annotation
// from the database and make sure the connection is secure and worked properly
setTimeout(() => {
// if it is a new annotation then cancel should delete the annotation
// after we remove the annotation we need to remove the classes from
// the text that was highlighted and then make the document selectable again
$('.text-currently-being-annotated.active').removeClass('text-currently-being-annotated active');
// we also need to make the document selectable again
$('#document-content-container').removeClass('unselectable');
// we need to delete this annotation from the channel it is in
deleteAnnotationFromChannels(side, annotationData._id);
}, 500);
// if it is a new annotation then cancel should delete the annotation
// after we remove the annotation we need to remove the classes from
// the text that was highlighted and then make the document selectable again
$('.text-currently-being-annotated.active').removeClass('text-currently-being-annotated active');
// we also need to make the document selectable again
$('#document-content-container').removeClass('unselectable');
// we need to delete this annotation from the channel it is in
deleteAnnotationFromChannels(side, annotationData._id);
} else {
setNewAnnotationTags(null);
setNewAnnotationPermissions(null);
Expand Down Expand Up @@ -526,7 +527,7 @@ function AnnotationCard({
useEffect(() => {
if (updateFocusOfAnnotation) {
focusOnAnnotation();
setUpdateFocusOfAnnotation(false);
setUpdateFocusOfAnnotation();
}
}, [updateFocusOfAnnotation]);

Expand All @@ -538,8 +539,6 @@ function AnnotationCard({
}
}, [expanded, hovered]);

const leftRightPositionForAnnotation = annotationData.editing ? -10 : 15;

return (
<>
<Card
Expand Down Expand Up @@ -767,7 +766,6 @@ function AnnotationCard({
} else {
annotationData.editing = true;
SetAndSaveAnnotationData(annotationData);
setUpdateFocusOfAnnotation(true);
}
}}
>
Expand Down
95 changes: 46 additions & 49 deletions src/components/Document/Document.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ export default function Document({
const [selector, setSelector] = useState(null);
const [selectedTextToAnnotate, setSelectedTextToAnnotate] = useState();
const [showCannotAnnotateDocumentToast, setShowCannotAnnotateDocumentToast] = useState(false);
const [annotationsHighlighted, setAnnotationsHighlighted] = useState();

const activateAnnotation = (e) => {
const annoId = $(e.target).attr('annotation-id');
Expand Down Expand Up @@ -349,72 +348,70 @@ export default function Document({
}, [documentToAnnotate]);

useEffect(() => {
// eslint-disable-next-line no-undef
if (!annotationsHighlighted) {
document.addEventListener('selectionchange', () => { // eslint-disable-line no-undef
const selection = document.getSelection(); // eslint-disable-line no-undef
if (selection.rangeCount === 1) {
const range = selection.getRangeAt(0);
if (range.collapsed) {
// we need to wait 500ms because clicking the annotate button can
// trigger this event so we want the annotate button to be clicked
// before removing it from the dom
setTimeout(() => {
setTarget(null);
setShow();
}, 100);
}
}
});
document.addEventListener('selectionchange', debounce(async (documentContainer) => { // eslint-disable-line no-undef
// we need to make sure that the annotate button disappears
// while the document selection is being made
if (target !== null || show) {
const removeEventListener1 = document.addEventListener('selectionchange', () => { // eslint-disable-line no-undef
const selection = document.getSelection(); // eslint-disable-line no-undef
if (selection.rangeCount === 1) {
const range = selection.getRangeAt(0);
if (range.collapsed) {
// if the range collapse meaning that their is no text selected this could me that
// either the user deselected the text or they clicked the annotate button that deselected
// the text. Either way the annotate button needs to hide
setTarget(null);
setShow();
}
}
});
const removeEventListener2 = document.addEventListener('selectionchange', debounce(async (documentContainer) => { // eslint-disable-line no-undef
// we need to make sure that the annotate button disappears
// while the document selection is being made
if (target !== null || show) {
setTarget(null);
setShow();
}

if (!$('#document-content-container').hasClass('unselectable')) {
if (!$('#document-content-container').hasClass('unselectable')) {
// if the reason why the selection change is because you selected text
// to annotate then don't remove class active from a text that was selected
// otherwise the selection change so any text that was selected by the user
// is no longer needed so we need to remove styling
if (selectedTextToAnnotate === undefined) {
if (selectedTextToAnnotate === undefined) {
// if we are making a new selection we need to make sure all old selections are removed
$('.text-currently-being-annotated').removeClass('active');
$('#document-content-container').removeClass('unselectable');
} else {
setSelectedTextToAnnotate();
}
$('.text-currently-being-annotated').removeClass('active');
$('#document-content-container').removeClass('unselectable');
} else {
setSelectedTextToAnnotate();
}

// eslint-disable-next-line no-undef
const selection = document.getSelection();
if (selection.rangeCount === 1) {
const range = selection.getRangeAt(0);
if (!range.collapsed && range.toString().length > 0) {
// eslint-disable-next-line no-undef
const selection = document.getSelection();
if (selection.rangeCount === 1) {
const range = selection.getRangeAt(0);
if (!range.collapsed && range.toString().length > 0) {
// we need to make sure this selection happened inside the
// document card container and not some where outside of the document
if ($(range.commonAncestorContainer.parentElement).parents('#document-card-container').length !== 0) {
if ($(range.commonAncestorContainer.parentElement).parents('#document-card-container').length !== 0) {
// make sure the range is something
// eslint-disable-next-line no-undef
const scope = document.createRange();
scope.selectNodeContents(documentContainer);
// we need to make sure that the selection the user made is inside the
// scope, meaning that everything they selected is inside the document and
// not outside the document
const mySelector = await customDescibeTextQuote(range, scope);
positionAnnotateButton(selection, mySelector);
}
const scope = document.createRange();
scope.selectNodeContents(documentContainer);
// we need to make sure that the selection the user made is inside the
// scope, meaning that everything they selected is inside the document and
// not outside the document
const mySelector = await customDescibeTextQuote(range, scope);
positionAnnotateButton(selection, mySelector);
}
}
}
}
}, 500, myRef.current));

//
}, 500, myRef.current));
setAnnotationsHighlighted(true);
setTimeout(highlightTextForAllAnnotations, 100, annotations);
}
});
highlightTextForAllAnnotations(annotations);

return () => {
removeEventListener1();
removeEventListener2();
};
}, []);

useEffect(() => {
// when the document is scrolled it updates the position of the Annotation Pen Tooltip so
Expand Down
102 changes: 44 additions & 58 deletions src/components/FilterPopover/FilterPopover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
Col,
Button,
OverlayTrigger,
Overlay,
Popover,
Form,
Card,
Expand All @@ -33,7 +32,7 @@ import { FirstNameLastInitial } from '../../utils/nameUtil';
import { DocumentFiltersContext, DocumentAnnotationsContext } from '../../contexts/DocumentContext';


function FilterPopover({ session, container }) {
function FilterPopover({ session }) {
const [
channelAnnotations, , , , , ,
annotationIdBeingEdited, , scrollToAnnotation,
Expand All @@ -45,8 +44,6 @@ function FilterPopover({ session, container }) {
] = useContext(DocumentFiltersContext);
const [byTagsTypeheadMarginTop, setByTagsTypeheadMarginTop] = useState(0);
const [byTagsTypeheadMarginBottom, setByTagsTypeheadMarginBottom] = useState(0);
const [show, setShow] = useState(false);
const [target, setTarget] = useState(null);

const GetNumberOfMatchesForThisPermission = (permissions) => {
const ids = FilterAnnotations(channelAnnotations, {
Expand Down Expand Up @@ -215,13 +212,8 @@ function FilterPopover({ session, container }) {
setDocumentFilters({ ...documentFilters, annotationIds });
};

const handlePermissionsClick = (ev, n) => {
if (annotationIdBeingEdited !== undefined) {
setShow(true);
setTarget(ev.target);
} else {
setShow(false);
setTarget(null);
const handlePermissionsClick = (n) => {
if (annotationIdBeingEdited === undefined) {
updateFilters('permissions', n);
}
};
Expand Down Expand Up @@ -364,7 +356,6 @@ function FilterPopover({ session, container }) {
id="scroll-to-annotation-text"
onClick={() => {
scrollToAnnotation();
setShow(false);
}}
onKeyDown={() => {}}
>
Expand All @@ -377,58 +368,53 @@ function FilterPopover({ session, container }) {
</Popover>
);

const unsavedChangesOverlay = (
<Overlay
show={show}
target={target}
placement="bottom"
container={container.current}
containerPadding={20}
onHide={() => { setShow(false); }}
rootClose
>
{unsavedChangesPopoverComponent}
</Overlay>
);

const filterActive = (documentFilters.filters.annotatedBy.length
+ documentFilters.filters.byTags.length > 0);

return (
<>
<ButtonGroup size="sm" aria-label="Permissions" className="permissions-buttons">
<Button
variant={documentFilters.filters.permissions === 0 ? 'primary' : 'outline-primary'}
onClick={(ev) => { handlePermissionsClick(ev, 0); }}
>
<PersonFill size="1.2em" />
<div className="mine">
<span className="text">Mine</span>
<Badge variant="light">{numberOfMatchesForPermissions[0]}</Badge>
</div>
</Button>
<Button
variant={documentFilters.filters.permissions === 1 ? 'primary' : 'outline-primary'}
onClick={(ev) => { handlePermissionsClick(ev, 1); }}
>
<PeopleFill size="1.2em" />
<div className="shared-with-groups">
<span className="text">Shared with group(s)</span>
<Badge variant="light">{numberOfMatchesForPermissions[1]}</Badge>
</div>
</Button>
<Button
variant={documentFilters.filters.permissions === 2 ? 'primary' : 'outline-primary'}
onClick={(ev) => { handlePermissionsClick(ev, 2); }}
>
<PersonPlusFill size="1.2em" />
<div className="shared-with-me">
<span className="text">Shared with me</span>
<Badge variant="light">{numberOfMatchesForPermissions[2]}</Badge>
</div>
</Button>
</ButtonGroup>
{unsavedChangesOverlay}
<OverlayTrigger
trigger="click"
key="unsaved-changes-popover"
placement="bottom"
rootClose
overlay={annotationIdBeingEdited === undefined ? <div /> : unsavedChangesPopoverComponent}
>
<ButtonGroup size="sm" aria-label="Permissions" className="permissions-buttons">
<Button
variant={documentFilters.filters.permissions === 0 ? 'primary' : 'outline-primary'}
onClick={() => { handlePermissionsClick(0); }}
>
<PersonFill size="1.2em" />
<div className="mine">
<span className="text">Mine</span>
<Badge variant="light">{numberOfMatchesForPermissions[0]}</Badge>
</div>
</Button>
<Button
variant={documentFilters.filters.permissions === 1 ? 'primary' : 'outline-primary'}
onClick={() => { handlePermissionsClick(1); }}
>
<PeopleFill size="1.2em" />
<div className="shared-with-groups">
<span className="text">Shared with group(s)</span>
<Badge variant="light">{numberOfMatchesForPermissions[1]}</Badge>
</div>
</Button>
<Button
variant={documentFilters.filters.permissions === 2 ? 'primary' : 'outline-primary'}
onClick={() => { handlePermissionsClick(2); }}
>
<PersonPlusFill size="1.2em" />
<div className="shared-with-me">
<span className="text">Shared with me</span>
<Badge variant="light">{numberOfMatchesForPermissions[2]}</Badge>
</div>
</Button>
</ButtonGroup>

</OverlayTrigger>
<OverlayTrigger
trigger="click"
key="filter-popover"
Expand Down
8 changes: 3 additions & 5 deletions src/components/SecondNavbar/SecondNavbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useEffect } from 'react';
import {
Nav, Navbar, Breadcrumb, Container, Modal, Table, Row, Col,
} from 'react-bootstrap';
Expand Down Expand Up @@ -34,8 +34,6 @@ const SecondNavbar = ({
state: 'State',
};

const ref = useRef(null);

const [showMoreDocumentInfo, setShowMoreDocumentInfo] = useState();
const [mobileView, setMobileView] = useState();

Expand Down Expand Up @@ -117,8 +115,8 @@ const SecondNavbar = ({
<div style={{ marginTop: 6, marginRight: 6 }}>
<DocumentZoomSlider />
</div>
<div ref={ref} style={{ display: 'flex', flexWrap: 'nowrap' }}>
<FilterPopover session={session} container={ref} />
<div style={{ display: 'flex', flexWrap: 'nowrap' }}>
<FilterPopover session={session} />
</div>
</div>
</Col>
Expand Down
Loading

1 comment on commit 61510e8

@vercel
Copy link

@vercel vercel bot commented on 61510e8 Apr 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.