Skip to content

Commit

Permalink
Merge branch 'feature/multi-select-annotations' into hotfix/3.14.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed Mar 4, 2024
2 parents e66daea + 5463f0b commit 2708339
Show file tree
Hide file tree
Showing 9 changed files with 553 additions and 65 deletions.
2 changes: 1 addition & 1 deletion external/@worldbrain/memex-common
Submodule memex-common updated from f9c9cf to 0cec80
165 changes: 108 additions & 57 deletions src/annotations/components/AnnotationEditable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import CreationInfo from '@worldbrain/memex-common/lib/common-ui/components/crea
import Checkbox from 'src/common-ui/components/Checkbox'
import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'
import type { HighlightColor } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/types'
import CheckboxNotInput from 'src/common-ui/components/CheckboxNotInput'

export interface HighlightProps extends AnnotationProps {
body: string
Expand All @@ -53,6 +54,7 @@ export interface HighlightProps extends AnnotationProps {
export interface NoteProps extends AnnotationProps {
body?: string
comment: string
isBulkSelected: boolean
}

export interface AnnotationProps {
Expand Down Expand Up @@ -127,6 +129,8 @@ export interface AnnotationProps {
getRootElement: () => HTMLElement
toggleAutoAdd: () => void
isAutoAddEnabled?: boolean
bulkSelectAnnotation: () => void
isBulkSelected: boolean
}

export interface AnnotationEditableEventProps {
Expand Down Expand Up @@ -1184,71 +1188,110 @@ export default class AnnotationEditable extends React.Component<Props, State> {
)
}

private renderBulkSelectBtn(): JSX.Element {
return (
<TooltipBox
tooltipText={
<span>
Multi Select Items
<br />
<strong>{AnnotationEditable.MOD_KEY}+A</strong>to select
all
</span>
}
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<BulkSelectButtonBox>
<CheckboxNotInput
isChecked={this.props.isBulkSelected}
onClick={(
event: React.MouseEvent<HTMLInputElement>,
) => {
this.props.bulkSelectAnnotation()
event.stopPropagation()
}}
size={16}
/>
</BulkSelectButtonBox>
</TooltipBox>
)
}

render() {
const { annotationFooterDependencies } = this.props

const {
annotationFooterDependencies: footerDeps,
onGoToAnnotation,
bulkSelectAnnotation,
} = this.props

const actionsBox =
!this.props.isEditingHighlight && this.state.hoverCard ? (
<HighlightActionsBox>
{footerDeps.onDeleteIconClick && (
<TooltipBox
tooltipText="Delete Note"
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={footerDeps.onDeleteIconClick}
filePath={'trash'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
)}
{onGoToAnnotation && (
<TooltipBox
tooltipText="Open in Page"
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={onGoToAnnotation}
filePath={'goTo'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
)}
{footerDeps?.onEditIconClick &&
this.props.currentUserId === this.props.creatorId ? (
<TooltipBox
tooltipText={
<span>
<strong>Add/Edit Note</strong>
<br />
or double-click card
</span>
}
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={footerDeps.onEditIconClick}
filePath={'edit'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
) : undefined}
</HighlightActionsBox>
) : null
const actionsBox = !this.props.isEditingHighlight ? (
<HighlightActionsBox>
{this.state.hoverCard && (
<>
{footerDeps.onDeleteIconClick && (
<TooltipBox
tooltipText="Delete Note"
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={footerDeps.onDeleteIconClick}
filePath={'trash'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
)}
{onGoToAnnotation && (
<TooltipBox
tooltipText="Open in Page"
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={onGoToAnnotation}
filePath={'goTo'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
)}
{footerDeps?.onEditIconClick &&
this.props.currentUserId === this.props.creatorId ? (
<TooltipBox
tooltipText={
<span>
<strong>Add/Edit Note</strong>
<br />
or double-click card
</span>
}
placement="bottom"
getPortalRoot={this.props.getRootElement}
>
<Icon
onClick={footerDeps.onEditIconClick}
filePath={'edit'}
heightAndWidth={'20px'}
borderColor={'transparent'}
hoverOff
/>
</TooltipBox>
) : undefined}
</>
)}
{bulkSelectAnnotation &&
(this.props.isBulkSelected || this.state.hoverCard) &&
this.props.currentUserId === this.props.creatorId &&
bulkSelectAnnotation &&
this.renderBulkSelectBtn()}
</HighlightActionsBox>
) : null

return (
<ThemeProvider theme={this.theme}>
Expand Down Expand Up @@ -1751,3 +1794,11 @@ const TooltipTextBox = styled.div`
const CreationInfoBox = styled.div`
padding: 15px 15px 0px 15px;
`

const BulkSelectButtonBox = styled.div`
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
`
8 changes: 8 additions & 0 deletions src/dashboard-refactor/search-results/components/list-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -687,6 +687,14 @@ const DescriptionContainer = styled.div`
margin-top: 10px;
display: flex;
justify-content: flex-start;
overflow: scroll;
max-height: 70vh;
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
&:hover ${DescriptionEditContainer} {
display: flex;
Expand Down
3 changes: 2 additions & 1 deletion src/dashboard-refactor/search-results/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1237,7 +1237,7 @@ export default class SearchResultsContainer extends React.Component<
}

const ResultsScrollContainer = styled.div`
overflow-y: scroll;
overflow-y: hidden;
overflow-x: hidden;
height: fill-available;
width: fill-available;
Expand Down Expand Up @@ -1598,6 +1598,7 @@ const ResultsContainer = styled.div`
flex: 1;
height: fill-available;
height: -moz-available;
overflow: scroll;
&::-webkit-scrollbar {
display: none;
Expand Down
1 change: 0 additions & 1 deletion src/overview/search-bar/components/DateRangeSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ class DateRangeSelection extends Component<DateRangeSelectionProps> {
}

componentDidMount() {
console.log('DateRangeSelection mounted', arrowDown)
// Override clear button handlers
this.startDatePicker.onClearClick = this.handleClearClick({
isStartDate: true,
Expand Down
Loading

0 comments on commit 2708339

Please sign in to comment.