Skip to content

Commit

Permalink
Improve "empty" annotation sidebar views
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed May 11, 2024
1 parent 460e68d commit 4e518ad
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 102 deletions.
2 changes: 1 addition & 1 deletion external/@worldbrain/memex-common
Submodule memex-common updated from 7a835c to 45c921
1 change: 1 addition & 0 deletions src/custom-lists/ui/CollectionPicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -490,6 +490,7 @@ class SpacePicker extends StatefulUIElement<
onCancelEdit={this.handleSpaceContextMenuClose(
list.localId,
)}
getRootElement={this.props.getRootElement}
/>
</>
)
Expand Down
38 changes: 28 additions & 10 deletions src/custom-lists/ui/space-edit-menu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@ import {
import { isValidEmail } from '@worldbrain/memex-common/lib/utils/email-validation'
import { normalizedStateToArray } from '@worldbrain/memex-common/lib/common-ui/utils/normalized-state'
import { DropdownMenuBtn } from 'src/common-ui/components/dropdown-menu'
import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'

export interface Props extends Dependencies {
disableWriteOps?: boolean
onDeleteSpaceConfirm?: () => void
getRootElement: () => HTMLElement
}

// NOTE: This exists to stop click events bubbling up into web page handlers AND to stop page result <a> links
Expand Down Expand Up @@ -145,6 +147,7 @@ export default class SpaceEditMenuContainer extends StatefulUIElement<
onKeyDown={
this.handleNameEditInputKeyDown
}
autoFocus
/>
</Container>
{this.props.errorMessage && (
Expand Down Expand Up @@ -175,17 +178,32 @@ export default class SpaceEditMenuContainer extends StatefulUIElement<
<>
{this.state?.showSaveButton &&
this.state.nameValue.length > 0 && (
<Icon
filePath="check"
color="prime1"
heightAndWidth="24px"
onClick={() =>
this.processEvent(
'confirmSpaceNameEdit',
null,
)
<TooltipBox
tooltipText={
<span>
<KeyboardShortcuts
keys={['MOD_KEY', 'Enter']}
getRootElement={() =>
this.props.getRootElement()
}
/>
</span>
}
/>
placement="bottom-end"
getPortalRoot={this.props.getRootElement}
>
<Icon
filePath="check"
color="prime1"
heightAndWidth="24px"
onClick={() =>
this.processEvent(
'confirmSpaceNameEdit',
null,
)
}
/>
</TooltipBox>
)}
</>
</ButtonBox>
Expand Down
243 changes: 152 additions & 91 deletions src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -873,9 +873,9 @@ export class AnnotationsSidebar extends React.Component<
})
}

let listAnnotations: JSX.Element | JSX.Element[]
let listAnnotations: JSX.Element[] = []
if (!annotationsData?.length) {
listAnnotations = (
listAnnotations = [
<EmptyMessageContainer>
<IconBox heightAndWidth="40px">
<Icon
Expand All @@ -886,12 +886,57 @@ export class AnnotationsSidebar extends React.Component<
/>
</IconBox>
<InfoText>
{listData.type === 'page-link'
? 'Add new notes to this page link by highlighting text, or by adding existing notes to it via the Space selector on each note.'
: 'This page is added to this Space, but has no notes yet.'}
{listData.type === 'page-link' ? (
<span>
<EmptyMessageTitle>
No notes yet
</EmptyMessageTitle>
Every highlight you create while in this
<br />
view is only added to this Space.
</span>
) : // 'Add new notes to this page link by highlighting text, or by adding existing notes to it via the Space selector on each note.'
this.props.selectedListId != null ? (
<span>
<EmptyMessageTitle>
No notes yet in this Space
</EmptyMessageTitle>
Every highlight you create while in this
<br />
view is only added to this Space.
<br />
<br />
Add highlights via the
<Icon
icon="plus"
color="prime1"
heightAndWidth="20px"
hoverOff
inline
/>{' '}
button the tooltip or annotation card, or by
using [[WikiLinks]] or #hashtags in the note.
</span>
) : (
<span>
<EmptyMessageTitle>
No notes yet in this Space
</EmptyMessageTitle>
Add highlights via the
<Icon
icon="plus"
color="prime1"
heightAndWidth="24px"
hoverOff
inline
/>{' '}
button the tooltip or annotation card, or by
using [[WikiLinks]] or #hashtags in the note.
</span>
)}
</InfoText>
</EmptyMessageContainer>
)
</EmptyMessageContainer>,
]
} else {
listAnnotations = annotationsData.map((annotation, i) => {
const instanceId = generateAnnotationCardInstanceId(
Expand Down Expand Up @@ -1169,6 +1214,8 @@ export class AnnotationsSidebar extends React.Component<
})
}

console.log('listAnnotations', !annotationsData?.length)

return (
<FollowedNotesContainer zIndex={parseFloat(listData.unifiedId)}>
{(cacheUtils.deriveListOwnershipStatus(
Expand All @@ -1185,90 +1232,93 @@ export class AnnotationsSidebar extends React.Component<
!selectedListMode ? unifiedListId : undefined,
)}
</NewAnnotationBoxMyAnnotations>
<RemoteOrLocalSwitcherContainer>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'all' ||
!this.state.othersOrOwnAnnotationsState[
unifiedListId
]
}
label={
<SwitcherButtonContent>
All
<SwitcherCounter>
{allCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]: 'all',
},
})
}}
/>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'othersAnnotations'
}
label={
<SwitcherButtonContent>
Others
<SwitcherCounter>
{othersCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]:
'othersAnnotations',
},
})
}}
/>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'ownAnnotations'
}
label={
<SwitcherButtonContent>
Yours
<SwitcherCounter>
{ownCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]: 'ownAnnotations',
},
})
}}
/>
</RemoteOrLocalSwitcherContainer>
{annotationsData?.length ? (
<RemoteOrLocalSwitcherContainer>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'all' ||
!this.state.othersOrOwnAnnotationsState[
unifiedListId
]
}
label={
<SwitcherButtonContent>
All
<SwitcherCounter>
{allCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]: 'all',
},
})
}}
/>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'othersAnnotations'
}
label={
<SwitcherButtonContent>
Others
<SwitcherCounter>
{othersCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]:
'othersAnnotations',
},
})
}}
/>
<PrimaryAction
size={'small'}
active={
this.state.othersOrOwnAnnotationsState[
unifiedListId
] === 'ownAnnotations'
}
label={
<SwitcherButtonContent>
Yours
<SwitcherCounter>
{ownCounter}
</SwitcherCounter>
</SwitcherButtonContent>
}
type={'tertiary'}
onClick={() => {
this.setState({
othersOrOwnAnnotationsState: {
...this.state
.othersOrOwnAnnotationsState,
[unifiedListId]:
'ownAnnotations',
},
})
}}
/>
</RemoteOrLocalSwitcherContainer>
) : null}
{this.props.bulkSelectionState?.length > 0 &&
this.renderBulkEditBar()}
</>
Expand Down Expand Up @@ -4287,6 +4337,16 @@ const FocusModeNotifTitle = styled.div`
grid-gap: 5px;
font-weight: 500;
`
const EmptyMessageTitle = styled.div`
display: flex;
color: ${(props) => props.theme.colors.white};
font-size: 16px;
align-items: center;
justify-content: center;
font-weight: 500;
text-align: center;
margin-bottom: 10px;
`

const FocusModeNotifExplainer = styled.div`
display: flex;
Expand Down Expand Up @@ -4616,6 +4676,7 @@ const InfoText = styled.div`
text-align: center;
max-width: 80%;
margin-bottom: 10px;
line-height: 24px;
`

const FollowedListNotesContainer = styled(Margin)<{
Expand Down
3 changes: 3 additions & 0 deletions src/sidebar/annotations-sidebar/containers/AnnotationsSidebarContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1641,6 +1641,9 @@ export class AnnotationsSidebarContainer<
contentSharingBG={
this.props.contentSharingBG
}
getRootElement={
this.props.getRootElement
}
spacesBG={this.props.customListsBG}
listData={listData}
disableWriteOps={
Expand Down

0 comments on commit 4e518ad

Please sign in to comment.