Skip to content

Commit 656bedb

Browse files
blackforestboiblackforestboi
committed
Fix ups on behaviour of the dashboard
1 parent 63ae627 commit 656bedb

File tree

7 files changed

+183
-86
lines changed

7 files changed

+183
-86
lines changed

‎external/@worldbrain/memex-common

‎src/annotations/components/AnnotationEditable.tsx

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export interface AnnotationProps {
8585
hasReplies?: boolean
8686
appendRepliesToggle?: boolean
8787
isBulkShareProtected: boolean
88+
focusLockUntilMouseStart?: boolean
8889
repliesLoadingState?: UITaskState
8990
onReplyBtnClick?: React.MouseEventHandler
9091
isClickable?: boolean
@@ -143,6 +144,7 @@ export interface AnnotationProps {
143144
spaceName: string,
144145
unifiedAnnotationId: UnifiedAnnotation['unifiedId'],
145146
) => void
147+
setAnnotationInFocus?: (unifiedId: string) => void
146148
isInFocus?: boolean
147149
shiftSelectItem?: () => void
148150
searchTerms?: string[]
@@ -295,11 +297,16 @@ export default class AnnotationEditable extends React.Component<Props, State> {
295297
}
296298
if (this.props.isInFocus && !prevProps.isInFocus) {
297299
this.setupKeyListener()
298-
const itemBox = this.itemBoxRef.current
299-
if (itemBox && !this.props.hoverState) {
300-
itemBox.scrollIntoView({ block: 'center' })
300+
if (!this.state.hoverCard) {
301+
const itemBox = this.itemBoxRef.current
302+
if (itemBox && !this.props.hoverState) {
303+
itemBox.scrollIntoView({ block: 'center' })
304+
}
301305
}
302306
} else if (!this.props.isInFocus && prevProps.isInFocus) {
307+
// if (!this.state.hoverCard) {
308+
// this.props.setAnnotationInFocus(null)
309+
// }
303310
this.removeKeyListener()
304311
}
305312
}
@@ -949,6 +956,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
949956
this.props.unifiedId,
950957
buttonRef: this.shareMenuButtonRef,
951958
leftSideItem: this.renderAutoAddedIndicator(),
959+
showKeyShortcut: this.props.isInFocus && 'S',
952960
},
953961
{
954962
key: 'copy-paste-note-btn',
@@ -981,6 +989,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
981989
this.props.copyPasterAnnotationInstanceId ===
982990
this.props.unifiedId,
983991
buttonRef: this.copyPasterButtonRef,
992+
showKeyShortcut: this.props.isInFocus && 'C',
984993
},
985994
appendRepliesToggle && {
986995
key: 'show-replies-notes-btn',
@@ -1012,7 +1021,6 @@ export default class AnnotationEditable extends React.Component<Props, State> {
10121021
) {
10131022
return (
10141023
<ActionFooterStyled
1015-
hoverCard={this.state.hoverCard || this.props.isInFocus}
10161024
compactVersion={this.props.compactVersion}
10171025
inFocus={this.props.isInFocus}
10181026
inPageMode={this.props.contextLocation === 'in-page'}
@@ -1063,7 +1071,6 @@ export default class AnnotationEditable extends React.Component<Props, State> {
10631071

10641072
return (
10651073
<DefaultFooterStyled
1066-
hoverCard={true}
10671074
compactVersion={this.props.compactVersion}
10681075
inFocus={this.props.isInFocus}
10691076
inPageMode={this.props.contextLocation === 'in-page'}
@@ -1274,19 +1281,24 @@ export default class AnnotationEditable extends React.Component<Props, State> {
12741281
hoverTimeout = null
12751282

12761283
handleMouseEnter = () => {
1277-
this.hoverTimeout = setTimeout(() => {
1284+
if (!this.props.focusLockUntilMouseStart) {
12781285
this.setState({ hoverCard: true })
1279-
}, 300)
1286+
this.hoverTimeout = setTimeout(() => {
1287+
this.props.setAnnotationInFocus(this.props.unifiedId)
1288+
}, 300)
1289+
}
12801290
}
12811291

12821292
handleMouseLeave = () => {
1283-
if (this.hoverTimeout) {
1284-
console.log('clearing timeout')
1285-
clearTimeout(this.hoverTimeout)
1286-
this.hoverTimeout = null
1287-
}
1288-
if (!this.isAnyModalOpen()) {
1293+
if (!this.props.focusLockUntilMouseStart) {
12891294
this.setState({ hoverCard: false })
1295+
if (this.hoverTimeout) {
1296+
clearTimeout(this.hoverTimeout)
1297+
this.hoverTimeout = null
1298+
}
1299+
if (!this.isAnyModalOpen()) {
1300+
this.props.setAnnotationInFocus(null)
1301+
}
12901302
}
12911303
}
12921304

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

13021314
const actionsBox = !this.props.isEditingHighlight ? (
13031315
<HighlightActionsBox>
1304-
{this.state.hoverCard && (
1316+
{this.props.isInFocus && (
13051317
<>
13061318
{footerDeps.onDeleteIconClick && (
13071319
<TooltipBox
@@ -1376,7 +1388,9 @@ export default class AnnotationEditable extends React.Component<Props, State> {
13761388
firstDivProps={{
13771389
id: ANNOT_BOX_ID_PREFIX + this.props.unifiedId,
13781390
}}
1379-
hoverState={this.props.isInFocus}
1391+
hoverState={
1392+
this.props.isInFocus || this.state.hoverCard
1393+
}
13801394
onRef={this.itemBoxRef}
13811395
>
13821396
{this.renderDeleteScreen(footerDeps)}
@@ -1637,18 +1651,15 @@ const SaveActionBar = styled.div`
16371651

16381652
const slideInFromBottom = keyframes`
16391653
from {
1640-
opacity: 0;
16411654
margin-top: -10px;
16421655
}
16431656
to {
1644-
opacity: 1;
16451657
margin-top: 0px;
16461658
}
16471659
`
16481660

16491661
const DefaultFooterStyled = styled.div<{
16501662
compactVersion: boolean
1651-
hoverCard: boolean
16521663
inFocus: boolean
16531664
inPageMode?: boolean
16541665
inEditMode?: boolean
@@ -1662,27 +1673,26 @@ const DefaultFooterStyled = styled.div<{
16621673
box-sizing: border-box;
16631674
border-radius: 0 0 12px 12px;
16641675
position: relative;
1665-
animation: ${slideInFromBottom} 0.1s ease-out;
1666-
background: ${(props) => props.theme.colors.black}98;
1676+
background: ${(props) => props.theme.colors.black0}98;
16671677
backdrop-filter: blur(5px);
16681678
width: 100%;
1679+
opacity: 0;
16691680
16701681
${(props) =>
16711682
props.inFocus &&
16721683
css`
1673-
animation: none;
1684+
animation: ${slideInFromBottom} 0.1
1685+
cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
16741686
position: relative;
16751687
display: flex;
1688+
opacity: 1;
16761689
`};
16771690
1678-
${(props) =>
1679-
props.hoverCard &&
1680-
css`
1681-
display: flex;
1682-
`}
16831691
${(props) =>
16841692
props.inEditMode &&
16851693
css`
1694+
animation: ${slideInFromBottom} 0.1
1695+
cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
16861696
display: flex;
16871697
position: relative;
16881698
`}

‎src/dashboard-refactor/index.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import styled, { css, keyframes } from 'styled-components'
33
import browser from 'webextension-polyfill'
44
import ListShareModal from '@worldbrain/memex-common/lib/content-sharing/ui/list-share-modal'
5-
import { createGlobalStyle } from 'styled-components'
65
import { sizeConstants } from 'src/dashboard-refactor/constants'
76
import { StatefulUIElement } from 'src/util/ui-logic'
87
import { DashboardLogic } from './logic'
@@ -65,12 +64,8 @@ import {
6564
ColorThemeKeys,
6665
IconKeys,
6766
} from '@worldbrain/memex-common/lib/common-ui/styles/types'
68-
import PageCitations from 'src/citations/PageCitations'
69-
import CopyPaster from 'src/copy-paster/components/CopyPaster'
70-
import { PageSearchCopyPaster } from 'src/copy-paster'
7167
import BulkEditCopyPaster from 'src/copy-paster/BulkEditCopyPaster'
7268
import { OverlayModals } from '@worldbrain/memex-common/lib/common-ui/components/overlay-modals'
73-
import IconBox from '@worldbrain/memex-common/lib/common-ui/components/icon-box'
7469
import { TooltipBox } from '@worldbrain/memex-common/lib/common-ui/components/tooltip-box'
7570
import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'
7671

@@ -957,6 +952,20 @@ export class DashboardContainer extends StatefulUIElement<
957952
this.processEvent('getHighlightColorSettings', null)
958953
}
959954
highlightColorSettings={this.state.highlightColors}
955+
setAnnotationInFocus={(unifiedId: string) => {
956+
if (unifiedId == null) {
957+
this.processEvent('changeFocusItem', {
958+
item: {
959+
id: null,
960+
type: null,
961+
},
962+
})
963+
} else {
964+
this.processEvent('changeFocusItem', {
965+
item: { id: unifiedId, type: 'note' },
966+
})
967+
}
968+
}}
960969
getListDetailsById={this.getListDetailsById}
961970
youtubeService={this.youtubeService}
962971
toggleSortMenuShown={() =>
@@ -1072,6 +1081,7 @@ export class DashboardContainer extends StatefulUIElement<
10721081
type: type,
10731082
})
10741083
}
1084+
focusLockUntilMouseStart={this.state.focusLockUntilMouseStart}
10751085
pageInteractionProps={{
10761086
onClick: (day, pageResultId) => async (event) => {
10771087
this.processEvent('clickPageResult', {
@@ -1179,21 +1189,11 @@ export class DashboardContainer extends StatefulUIElement<
11791189
].isShareMenuShown,
11801190
}),
11811191
onMainContentHover: (day, pageId) => () => {
1182-
if (this.state.focusLockUntilMouseStart) {
1183-
return
1184-
}
1185-
this.processEvent('setPageHover', {
1186-
day,
1192+
this.processEvent('onMainContentHover', {
11871193
pageResultId: pageId,
1194+
day,
11881195
hover: 'main-content',
11891196
})
1190-
1191-
this.processEvent('changeFocusItem', {
1192-
item: {
1193-
id: pageId,
1194-
type: 'page',
1195-
},
1196-
})
11971197
},
11981198
onFooterHover: (day, pageId) => () =>
11991199
this.processEvent('setPageHover', {
@@ -1214,14 +1214,14 @@ export class DashboardContainer extends StatefulUIElement<
12141214
hover: 'lists',
12151215
}),
12161216
onUnhover: (day, pageId) => () => {
1217+
// if (this.state.focusLockUntilMouseStart) {
1218+
// return
1219+
// }
12171220
this.processEvent('setPageHover', {
12181221
day,
12191222
pageResultId: pageId,
12201223
hover: null,
12211224
})
1222-
if (this.state.focusLockUntilMouseStart) {
1223-
return
1224-
}
12251225
this.processEvent('changeFocusItem', {
12261226
item: {
12271227
id: null,

‎src/dashboard-refactor/logic.ts

Lines changed: 43 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -684,7 +684,7 @@ export class DashboardLogic extends UILogic<State, Events> {
684684
) {
685685
if (this.increment > 1) {
686686
const blurContainer = document.getElementById('BlurContainer')
687-
blurContainer.style.background = '#313239'
687+
blurContainer.style.background = this.options.theme.colors.black
688688
} else {
689689
this.emitMutation({
690690
blurEffectReset: { $set: true },
@@ -698,7 +698,7 @@ export class DashboardLogic extends UILogic<State, Events> {
698698
const blurContainer = document.getElementById(
699699
'BlurContainer',
700700
)
701-
blurContainer.style.background = '#313239'
701+
blurContainer.style.background = this.options.theme.colors.black
702702
if (
703703
// @ts-ignore
704704
!blurContainer.style.backdropFilter ||
@@ -1043,8 +1043,13 @@ export class DashboardLogic extends UILogic<State, Events> {
10431043
})
10441044
}
10451045
if (event.item?.id != null) {
1046+
const itemPos = event.item?.id?.split('-')[0]
1047+
if (parseFloat(itemPos) === currentFocusElementIndex) {
1048+
return
1049+
}
1050+
const itemId = event.item.id?.replace(/^[^-]*-/, '')
10461051
const nextFocusItemIndex = selectedBlocksArray.findIndex(
1047-
(item) => item?.id === event.item.id,
1052+
(item) => item?.id === itemId,
10481053
)
10491054

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

1061+
if (
1062+
event.item?.id == null &&
1063+
event.direction == undefined &&
1064+
event.item?.type == null
1065+
) {
1066+
this.emitMutation({
1067+
focusedBlockId: { $set: null },
1068+
})
1069+
}
1070+
10561071
if (nextItem) {
10571072
if (nextItem.type === 'page') {
10581073
this.emitMutation({
@@ -2552,7 +2567,30 @@ export class DashboardLogic extends UILogic<State, Events> {
25522567
})
25532568
}
25542569

2555-
hoverTimeout = null
2570+
onMainContentHover: EventHandler<'setPageHover'> = ({
2571+
event,
2572+
previousState,
2573+
}) => {
2574+
this.setHoverState(
2575+
event.day,
2576+
event.pageResultId,
2577+
event.hover,
2578+
previousState,
2579+
)
2580+
}
2581+
2582+
setHoverState(day, pageResultId, hover, previousState) {
2583+
this.processUIEvent('setPageHover', {
2584+
event: { pageResultId, day, hover },
2585+
previousState,
2586+
})
2587+
this.processUIEvent('changeFocusItem', {
2588+
event: {
2589+
item: { id: pageResultId, type: 'page' },
2590+
},
2591+
previousState,
2592+
})
2593+
}
25562594

25572595
setPageHover: EventHandler<'setPageHover'> = ({ event, previousState }) => {
25582596
const emitMutation = () =>
@@ -2593,22 +2631,7 @@ export class DashboardLogic extends UILogic<State, Events> {
25932631
return
25942632
}
25952633

2596-
if (event.hover === null) {
2597-
console.log('clearing timeout')
2598-
if (this.hoverTimeout) {
2599-
clearTimeout(this.hoverTimeout)
2600-
this.hoverTimeout = null
2601-
emitMutation()
2602-
return
2603-
}
2604-
}
2605-
2606-
if (this.hoverTimeout) {
2607-
clearTimeout(this.hoverTimeout)
2608-
}
2609-
this.hoverTimeout = setTimeout(() => {
2610-
emitMutation()
2611-
}, 300)
2634+
emitMutation()
26122635
}
26132636

26142637
setPageNewNoteTagPickerShown: EventHandler<

0 commit comments

Comments
 (0)