Vasanko/cista-storage
Vasanko/cista-storage
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Keep current cursor when switching gallery/details.

Browse Source
This commit is contained in:
Leo Vasanko 2023-11-20 14:11:05 -08:00
parent b2a24fca57
commit 8592d462f2
3 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/FileExplorer.vue
View File

@ -80,8 +80,6 @@ import { connect, controlUrl } from '@/repositories/WS'
import { formatSize } from '@/utils' import { formatSize } from '@/utils'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import ContextMenu from '@imengyu/vue3-context-menu' import ContextMenu from '@imengyu/vue3-context-menu'
import type { SortOrder } from '@/utils/docsort'
import type SvgButtonVue from './SvgButton.vue'
const props = defineProps<{ const props = defineProps<{
path: Array<string> path: Array<string>
@ -219,7 +217,14 @@ let modifiedTimer: any = null
const updateModified = () => { const updateModified = () => {
nowkey.value = Math.floor(Date.now() / 1000) nowkey.value = Math.floor(Date.now() / 1000)
} }
onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) }) onMounted(() => {
updateModified(); modifiedTimer = setInterval(updateModified, 1000)
const active = document.querySelector('.cursor') as HTMLElement | null
if (active) {
active.scrollIntoView({ block: 'center', behavior: 'smooth' })
active.focus()
}
})
onUnmounted(() => { clearInterval(modifiedTimer) }) onUnmounted(() => { clearInterval(modifiedTimer) })
const mkdir = (doc: Doc, name: string) => { const mkdir = (doc: Doc, name: string) => {
const control = connect(controlUrl, { const control = connect(controlUrl, {

9
frontend/src/components/Gallery.vue
View File

@ -169,8 +169,13 @@ let modifiedTimer: any = null
const updateModified = () => { const updateModified = () => {
nowkey.value = Math.floor(Date.now() / 1000) nowkey.value = Math.floor(Date.now() / 1000)
} }
onMounted(() => { updateModified(); modifiedTimer = setInterval(updateModified, 1000) }) onMounted(() => {
onUnmounted(() => { clearInterval(modifiedTimer) }) const active = document.querySelector('.cursor') as HTMLElement | null
if (active) {
active.scrollIntoView({ block: 'center', behavior: 'smooth' })
active.focus()
}
})
const mkdir = (doc: Doc, name: string) => { const mkdir = (doc: Doc, name: string) => {
const control = connect(controlUrl, { const control = connect(controlUrl, {
open() { open() {

8
frontend/src/components/GalleryFigure.vue
View File

@ -9,12 +9,12 @@
<slot></slot> <slot></slot>
<MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" /> <MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
<div class="titlespacer"></div> <div class="titlespacer"></div>
<figcaption> <figcaption @click.prevent>
<template v-if="editing"> <template v-if="editing">
<FileRenameInput :doc=doc :rename=editing.rename :exit=editing.exit /> <FileRenameInput :doc=doc :rename=editing.rename :exit=editing.exit />
</template> </template>
<template v-else> <template v-else>
<SelectBox :doc=doc /> <SelectBox :doc=doc @click="store.cursor = doc.key"/>
<span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span> <span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
<div class=namespacer></div> <div class=namespacer></div>
</template> </template>
@ -83,11 +83,13 @@ figcaption input[type='checkbox'] {
margin: .25em 0 .25em .25em; margin: .25em 0 .25em .25em;
opacity: 0; opacity: 0;
flex-shrink: 0; flex-shrink: 0;
transition: opacity var(--transition-time) ease-in-out;
} }
figcaption input[type='checkbox']:checked, figcaption input[type='checkbox']:hover { figcaption input[type='checkbox']:checked, figcaption:hover input[type='checkbox'] {
opacity: 1; opacity: 1;
} }
figcaption span { figcaption span {
cursor: default;
padding: .5em; padding: .5em;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;