Skip to content

Commit

Permalink
Fix ups on behaviour of the dashboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed Jun 14, 2024
1 parent 63ae627 commit 656bedb
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 86 deletions.
2 changes: 1 addition & 1 deletion external/@worldbrain/memex-common
Submodule memex-common updated from 6c6a06 to 1f2c08
62 changes: 36 additions & 26 deletions src/annotations/components/AnnotationEditable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ export interface AnnotationProps {
hasReplies?: boolean
appendRepliesToggle?: boolean
isBulkShareProtected: boolean
focusLockUntilMouseStart?: boolean
repliesLoadingState?: UITaskState
onReplyBtnClick?: React.MouseEventHandler
isClickable?: boolean
Expand Down Expand Up @@ -143,6 +144,7 @@ export interface AnnotationProps {
spaceName: string,
unifiedAnnotationId: UnifiedAnnotation['unifiedId'],
) => void
setAnnotationInFocus?: (unifiedId: string) => void
isInFocus?: boolean
shiftSelectItem?: () => void
searchTerms?: string[]
Expand Down Expand Up @@ -295,11 +297,16 @@ export default class AnnotationEditable extends React.Component<Props, State> {
}
if (this.props.isInFocus && !prevProps.isInFocus) {
this.setupKeyListener()
const itemBox = this.itemBoxRef.current
if (itemBox && !this.props.hoverState) {
itemBox.scrollIntoView({ block: 'center' })
if (!this.state.hoverCard) {
const itemBox = this.itemBoxRef.current
if (itemBox && !this.props.hoverState) {
itemBox.scrollIntoView({ block: 'center' })
}
}
} else if (!this.props.isInFocus && prevProps.isInFocus) {
// if (!this.state.hoverCard) {
// this.props.setAnnotationInFocus(null)
// }
this.removeKeyListener()
}
}
Expand Down Expand Up @@ -949,6 +956,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
this.props.unifiedId,
buttonRef: this.shareMenuButtonRef,
leftSideItem: this.renderAutoAddedIndicator(),
showKeyShortcut: this.props.isInFocus && 'S',
},
{
key: 'copy-paste-note-btn',
Expand Down Expand Up @@ -981,6 +989,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
this.props.copyPasterAnnotationInstanceId ===
this.props.unifiedId,
buttonRef: this.copyPasterButtonRef,
showKeyShortcut: this.props.isInFocus && 'C',
},
appendRepliesToggle && {
key: 'show-replies-notes-btn',
Expand Down Expand Up @@ -1012,7 +1021,6 @@ export default class AnnotationEditable extends React.Component<Props, State> {
) {
return (
<ActionFooterStyled
hoverCard={this.state.hoverCard || this.props.isInFocus}
compactVersion={this.props.compactVersion}
inFocus={this.props.isInFocus}
inPageMode={this.props.contextLocation === 'in-page'}
Expand Down Expand Up @@ -1063,7 +1071,6 @@ export default class AnnotationEditable extends React.Component<Props, State> {

return (
<DefaultFooterStyled
hoverCard={true}
compactVersion={this.props.compactVersion}
inFocus={this.props.isInFocus}
inPageMode={this.props.contextLocation === 'in-page'}
Expand Down Expand Up @@ -1274,19 +1281,24 @@ export default class AnnotationEditable extends React.Component<Props, State> {
hoverTimeout = null

handleMouseEnter = () => {
this.hoverTimeout = setTimeout(() => {
if (!this.props.focusLockUntilMouseStart) {
this.setState({ hoverCard: true })
}, 300)
this.hoverTimeout = setTimeout(() => {
this.props.setAnnotationInFocus(this.props.unifiedId)
}, 300)
}
}

handleMouseLeave = () => {
if (this.hoverTimeout) {
console.log('clearing timeout')
clearTimeout(this.hoverTimeout)
this.hoverTimeout = null
}
if (!this.isAnyModalOpen()) {
if (!this.props.focusLockUntilMouseStart) {
this.setState({ hoverCard: false })
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout)
this.hoverTimeout = null
}
if (!this.isAnyModalOpen()) {
this.props.setAnnotationInFocus(null)
}
}
}

Expand All @@ -1301,7 +1313,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {

const actionsBox = !this.props.isEditingHighlight ? (
<HighlightActionsBox>
{this.state.hoverCard && (
{this.props.isInFocus && (
<>
{footerDeps.onDeleteIconClick && (
<TooltipBox
Expand Down Expand Up @@ -1376,7 +1388,9 @@ export default class AnnotationEditable extends React.Component<Props, State> {
firstDivProps={{
id: ANNOT_BOX_ID_PREFIX + this.props.unifiedId,
}}
hoverState={this.props.isInFocus}
hoverState={
this.props.isInFocus || this.state.hoverCard
}
onRef={this.itemBoxRef}
>
{this.renderDeleteScreen(footerDeps)}
Expand Down Expand Up @@ -1637,18 +1651,15 @@ const SaveActionBar = styled.div`

const slideInFromBottom = keyframes`
from {
opacity: 0;
margin-top: -10px;
}
to {
opacity: 1;
margin-top: 0px;
}
`

const DefaultFooterStyled = styled.div<{
compactVersion: boolean
hoverCard: boolean
inFocus: boolean
inPageMode?: boolean
inEditMode?: boolean
Expand All @@ -1662,27 +1673,26 @@ const DefaultFooterStyled = styled.div<{
box-sizing: border-box;
border-radius: 0 0 12px 12px;
position: relative;
animation: ${slideInFromBottom} 0.1s ease-out;
background: ${(props) => props.theme.colors.black}98;
background: ${(props) => props.theme.colors.black0}98;
backdrop-filter: blur(5px);
width: 100%;
opacity: 0;
${(props) =>
props.inFocus &&
css`
animation: none;
animation: ${slideInFromBottom} 0.1
cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
position: relative;
display: flex;
opacity: 1;
`};
${(props) =>
props.hoverCard &&
css`
display: flex;
`}
${(props) =>
props.inEditMode &&
css`
animation: ${slideInFromBottom} 0.1
cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
display: flex;
position: relative;
`}
Expand Down
40 changes: 20 additions & 20 deletions src/dashboard-refactor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react'
import styled, { css, keyframes } from 'styled-components'
import browser from 'webextension-polyfill'
import ListShareModal from '@worldbrain/memex-common/lib/content-sharing/ui/list-share-modal'
import { createGlobalStyle } from 'styled-components'
import { sizeConstants } from 'src/dashboard-refactor/constants'
import { StatefulUIElement } from 'src/util/ui-logic'
import { DashboardLogic } from './logic'
Expand Down Expand Up @@ -65,12 +64,8 @@ import {
ColorThemeKeys,
IconKeys,
} from '@worldbrain/memex-common/lib/common-ui/styles/types'
import PageCitations from 'src/citations/PageCitations'
import CopyPaster from 'src/copy-paster/components/CopyPaster'
import { PageSearchCopyPaster } from 'src/copy-paster'
import BulkEditCopyPaster from 'src/copy-paster/BulkEditCopyPaster'
import { OverlayModals } from '@worldbrain/memex-common/lib/common-ui/components/overlay-modals'
import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/tooltip-box'
import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'

Expand Down Expand Up @@ -957,6 +952,20 @@ export class DashboardContainer extends StatefulUIElement<
this.processEvent('getHighlightColorSettings', null)
}
highlightColorSettings={this.state.highlightColors}
setAnnotationInFocus={(unifiedId: string) => {
if (unifiedId == null) {
this.processEvent('changeFocusItem', {
item: {
id: null,
type: null,
},
})
} else {
this.processEvent('changeFocusItem', {
item: { id: unifiedId, type: 'note' },
})
}
}}
getListDetailsById={this.getListDetailsById}
youtubeService={this.youtubeService}
toggleSortMenuShown={() =>
Expand Down Expand Up @@ -1072,6 +1081,7 @@ export class DashboardContainer extends StatefulUIElement<
type: type,
})
}
focusLockUntilMouseStart={this.state.focusLockUntilMouseStart}
pageInteractionProps={{
onClick: (day, pageResultId) => async (event) => {
this.processEvent('clickPageResult', {
Expand Down Expand Up @@ -1179,21 +1189,11 @@ export class DashboardContainer extends StatefulUIElement<
].isShareMenuShown,
}),
onMainContentHover: (day, pageId) => () => {
if (this.state.focusLockUntilMouseStart) {
return
}
this.processEvent('setPageHover', {
day,
this.processEvent('onMainContentHover', {
pageResultId: pageId,
day,
hover: 'main-content',
})

this.processEvent('changeFocusItem', {
item: {
id: pageId,
type: 'page',
},
})
},
onFooterHover: (day, pageId) => () =>
this.processEvent('setPageHover', {
Expand All @@ -1214,14 +1214,14 @@ export class DashboardContainer extends StatefulUIElement<
hover: 'lists',
}),
onUnhover: (day, pageId) => () => {
// if (this.state.focusLockUntilMouseStart) {
// return
// }
this.processEvent('setPageHover', {
day,
pageResultId: pageId,
hover: null,
})
if (this.state.focusLockUntilMouseStart) {
return
}
this.processEvent('changeFocusItem', {
item: {
id: null,
Expand Down
63 changes: 43 additions & 20 deletions src/dashboard-refactor/logic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -684,7 +684,7 @@ export class DashboardLogic extends UILogic<State, Events> {
) {
if (this.increment > 1) {
const blurContainer = document.getElementById('BlurContainer')
blurContainer.style.background = '#313239'
blurContainer.style.background = this.options.theme.colors.black
} else {
this.emitMutation({
blurEffectReset: { $set: true },
Expand All @@ -698,7 +698,7 @@ export class DashboardLogic extends UILogic<State, Events> {
const blurContainer = document.getElementById(
'BlurContainer',
)
blurContainer.style.background = '#313239'
blurContainer.style.background = this.options.theme.colors.black
if (
// @ts-ignore
!blurContainer.style.backdropFilter ||
Expand Down Expand Up @@ -1043,8 +1043,13 @@ export class DashboardLogic extends UILogic<State, Events> {
})
}
if (event.item?.id != null) {
const itemPos = event.item?.id?.split('-')[0]
if (parseFloat(itemPos) === currentFocusElementIndex) {
return
}
const itemId = event.item.id?.replace(/^[^-]*-/, '')
const nextFocusItemIndex = selectedBlocksArray.findIndex(
(item) => item?.id === event.item.id,
(item) => item?.id === itemId,
)

nextItem = selectedBlocksArray[nextFocusItemIndex]
Expand All @@ -1053,6 +1058,16 @@ export class DashboardLogic extends UILogic<State, Events> {
})
}

if (
event.item?.id == null &&
event.direction == undefined &&
event.item?.type == null
) {
this.emitMutation({
focusedBlockId: { $set: null },
})
}

if (nextItem) {
if (nextItem.type === 'page') {
this.emitMutation({
Expand Down Expand Up @@ -2552,7 +2567,30 @@ export class DashboardLogic extends UILogic<State, Events> {
})
}

hoverTimeout = null
onMainContentHover: EventHandler<'setPageHover'> = ({
event,
previousState,
}) => {
this.setHoverState(
event.day,
event.pageResultId,
event.hover,
previousState,
)
}

setHoverState(day, pageResultId, hover, previousState) {
this.processUIEvent('setPageHover', {
event: { pageResultId, day, hover },
previousState,
})
this.processUIEvent('changeFocusItem', {
event: {
item: { id: pageResultId, type: 'page' },
},
previousState,
})
}

setPageHover: EventHandler<'setPageHover'> = ({ event, previousState }) => {
const emitMutation = () =>
Expand Down Expand Up @@ -2593,22 +2631,7 @@ export class DashboardLogic extends UILogic<State, Events> {
return
}

if (event.hover === null) {
console.log('clearing timeout')
if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout)
this.hoverTimeout = null
emitMutation()
return
}
}

if (this.hoverTimeout) {
clearTimeout(this.hoverTimeout)
}
this.hoverTimeout = setTimeout(() => {
emitMutation()
}, 300)
emitMutation()
}

setPageNewNoteTagPickerShown: EventHandler<
Expand Down
Loading

0 comments on commit 656bedb

Please sign in to comment.