hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-22 11:01:54 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UBER-681 Do not select objects when not navigating via keyboard (#3569)

Browse Source 
Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>
This commit is contained in:
Alexander Onnikov 2023-08-08 21:18:57 +07:00 committed by GitHub
parent 6ef7d36fd8
commit 551432ff3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte
View File

@ -36,12 +36,14 @@
let list: List
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
if (dir === 'vertical') {
// Select next
list?.select(offset, of)
const listProvider = new ListSelectionProvider(
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
if (dir === 'vertical') {
// Select next
list?.select(offset, of, noScroll)
}
}
})
)
let docs: Doc[] = []
function select () {
listProvider.update(docs)

10
plugins/view-resources/src/actionImpl.ts
View File

@ -107,10 +107,16 @@ contextStore.subscribe((it) => {
$contextStore = it
})
export function select (evt: Event | undefined, offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
export function select (
evt: Event | undefined,
offset: 1 | -1 | 0,
of?: Doc,
direction?: SelectDirection,
noScroll?: boolean
): void {
closeTooltip()
if ($focusStore.provider?.select !== undefined) {
$focusStore.provider?.select(offset, of, direction)
$focusStore.provider?.select(offset, of, direction, noScroll)
evt?.preventDefault()
previewDocument.update((old) => {
if (old !== undefined) {

4
plugins/view-resources/src/components/Table.svelte
View File

@ -170,7 +170,7 @@
dispatch('row-focus', object)
}
export function select (offset: 1 | -1 | 0, of?: Doc): void {
export function select (offset: 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
let pos = (of !== undefined ? objects.findIndex((it) => it._id === of._id) : selection) ?? -1
pos += offset
if (pos < 0) {
@ -182,7 +182,7 @@
const r = refs[pos]
selection = pos
onRow(objects[pos])
if (r !== undefined) {
if (r !== undefined && !noScroll) {
r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
}
}

12
plugins/view-resources/src/components/TableBrowser.svelte
View File

@ -40,12 +40,14 @@
export let loadingProps: LoadingProps | undefined = undefined
let table: Table
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
if (dir === 'vertical') {
// Select next
table?.select(offset, of)
const listProvider = new ListSelectionProvider(
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
if (dir === 'vertical') {
// Select next
table?.select(offset, of, noScroll)
}
}
})
)
onMount(() => {
;(document.activeElement as HTMLElement)?.blur()

2
plugins/view-resources/src/components/UpDownNavigator.svelte
View File

@ -30,7 +30,7 @@
}
}
$: select(undefined, 0, element, 'vertical')
$: select(undefined, 0, element, 'vertical', true)
</script>
{#if $focusStore.focus !== undefined && $focusStore.provider !== undefined}

4
plugins/view-resources/src/components/list/List.svelte
View File

@ -98,9 +98,9 @@
selectedObjectIds = []
}
export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc): void {
export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
if (of !== undefined || offset !== 0) {
listCategories?.select(offset, of)
listCategories?.select(offset, of, undefined, noScroll)
}
}

15
plugins/view-resources/src/components/list/ListCategories.svelte
View File

@ -188,7 +188,12 @@
return -1
}
export function select (offset: 2 | 1 | -2 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
export function select (
offset: 2 | 1 | -2 | -1 | 0,
of?: Doc,
dir?: 'vertical' | 'horizontal',
noScroll?: boolean
): void {
let pos = (of != null ? docs.findIndex((it) => it._id === of._id) : selection) ?? -1
if (pos === -1) {
for (const st of categories) {
@ -276,7 +281,7 @@
} else {
const obj = stateObjs[statePos - 1]
if (obj !== undefined) {
scrollInto(objState, obj)
if (!noScroll) scrollInto(objState, obj)
dispatch('row-focus', obj)
}
}
@ -296,7 +301,7 @@
} else {
const obj = stateObjs[statePos + 1]
if (obj !== undefined) {
scrollInto(objState, obj)
if (!noScroll) scrollInto(objState, obj)
dispatch('row-focus', obj)
}
}
@ -304,11 +309,11 @@
}
}
if (offset === 0) {
scrollInto(objState, obj)
if (!noScroll) scrollInto(objState, obj)
dispatch('row-focus', obj)
}
} else {
listCategory[objState]?.select(offset, of, dir)
listCategory[objState]?.select(offset, of, dir, noScroll)
}
}
function scrollInto (statePos: number, obj: Doc): void {

12
plugins/view-resources/src/components/list/ListView.svelte
View File

@ -29,12 +29,14 @@
let divScroll: HTMLDivElement
let listWidth: number
const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
if (dir === 'vertical') {
// Select next
list?.select(offset, of)
const listProvider = new ListSelectionProvider(
(offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
if (dir === 'vertical') {
// Select next
list?.select(offset, of, noScroll)
}
}
})
)
onMount(() => {
;(document.activeElement as HTMLElement)?.blur()

11
plugins/view-resources/src/selection.ts
View File

@ -16,7 +16,7 @@ export interface SelectionFocusProvider {
// * If vertical, next will return item under.
// * If horizontal, next will return item on right.
// of - document offset from we requesting.
select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void
select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void
// Update documents content
update: (docs: Doc[]) => void
@ -110,7 +110,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
_current?: FocusSelection
private readonly unsubscribe: Unsubscriber
constructor (
private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void,
private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void,
autoDestroy = true
) {
this.unsubscribe = focusStore.subscribe((doc) => {
@ -154,10 +154,11 @@ export class ListSelectionProvider implements SelectionFocusProvider {
this.unsubscribe()
}
select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
this.delegate(offset, of, direction)
select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean): void {
this.delegate(offset, of, direction, noScroll)
}
// this is the main method that is called when docs are updated
update (docs: Doc[]): void {
this._docs = docs
@ -171,7 +172,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
this.delegate(0, undefined, 'vertical')
} else {
// Check if we don't have object, we need to select first one.
this.delegate(0, this._current?.focus, 'vertical')
this.delegate(0, this._current?.focus, 'vertical', true)
}
if (this._current?.focus === undefined) {
updateFocus({ focus: this._current?.focus, provider: this })