Compare commits

..

No commits in common. "4c7b310f824020146193a398637584eeff72c9b0" and "139ff51dcd98dd732f1ebd10acf9ba84ffe7d739" have entirely different histories.

14 changed files with 104 additions and 159 deletions

View File

@ -9,7 +9,6 @@ lerna-debug.log*
# No locking
package-lock.json
yarn.lock
node_modules
.DS_Store
@ -17,7 +16,6 @@ dist
dist-ssr
coverage
*.local
components.d.ts
/cypress/videos/
/cypress/screenshots/

24
cista-front/components.d.ts vendored Normal file
View File

@ -0,0 +1,24 @@
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
BreadCrumb: typeof import('./src/components/BreadCrumb.vue')['default']
FileExplorer: typeof import('./src/components/FileExplorer.vue')['default']
FileRenameInput: typeof import('./src/components/FileRenameInput.vue')['default']
FileViewer: typeof import('./src/components/FileViewer.vue')['default']
HeaderMain: typeof import('./src/components/HeaderMain.vue')['default']
HeaderSelected: typeof import('./src/components/HeaderSelected.vue')['default']
LoginModal: typeof import('./src/components/LoginModal.vue')['default']
ModalDialog: typeof import('./src/components/ModalDialog.vue')['default']
NotificationLoading: typeof import('./src/components/NotificationLoading.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SvgButton: typeof import('./src/components/SvgButton.vue')['default']
UploadButton: typeof import('./src/components/UploadButton.vue')['default']
}
}

View File

@ -52,11 +52,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
const c = documentStore.fileExplorer.isCursor()
const keyup = event.type === 'keyup'
if (event.repeat) {
if (
event.key === 'ArrowUp' ||
event.key === 'ArrowDown' ||
(c && event.code === 'Space')
) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || (c && event.code === 'Space')) {
event.preventDefault()
}
return
@ -74,11 +70,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
documentStore.fileExplorer.toggleSelectAll()
}
// Keys 1-3 to sort columns
else if (
c &&
keyup &&
(event.key === '1' || event.key === '2' || event.key === '3')
) {
else if (c && keyup && (event.key === '1' || event.key === '2' || event.key === '3')) {
documentStore.fileExplorer.toggleSortColumn(+event.key)
}
// Rename
@ -93,22 +85,17 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
event.preventDefault()
if (!vert) {
if (timer) {
clearTimeout(timer) // Good for either timeout or interval
clearTimeout(timer) // Good for either timeout or interval
timer = null
}
return
}
if (!timer) {
// Initial move, then t0 delay until repeats at tr intervals
const select = event.shiftKey
documentStore.fileExplorer.cursorMove(vert, select)
const t0 = 200,
tr = 30
documentStore.fileExplorer.cursorMove(vert)
const t0 = 200, tr = 30
timer = setTimeout(
() =>
(timer = setInterval(() => {
documentStore.fileExplorer.cursorMove(vert, select)
}, tr)),
() => timer = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, tr),
t0 - tr
)
}

View File

@ -46,9 +46,7 @@
--header-background: none;
--header-color: black;
}
nav,
.menu,
.rename-button {
nav, .menu, .rename-button {
display: none;
}
.breadcrumb > a {
@ -59,12 +57,8 @@
clip-path: none !important;
max-width: none !important;
}
.breadcrumb > a::after {
content: '/';
}
.breadcrumb svg {
fill: black !important;
}
.breadcrumb > a::after { content: '/'; }
.breadcrumb svg { fill: black !important; }
main {
height: auto !important;
padding-bottom: 0 !important;
@ -78,27 +72,22 @@
min-width: 0 !important;
padding: 0 !important;
}
.selection input {
display: none;
}
.selection input:checked {
display: inherit;
}
.selection input { display: none }
.selection input:checked { display: inherit; }
tbody .selection input:checked {
opacity: 1 !important;
transform: scale(0.5);
top: 0.1rem !important;
left: -0.3rem !important;
}
}
/* Hide scrollbar for all browsers */
main::-webkit-scrollbar {
display: none;
}
main::-webkit-scrollbar { display: none; }
main {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
body {
background-color: var(--primary-background);
@ -107,8 +96,7 @@ body {
color: var(--primary-color);
margin: 0;
}
tbody .size,
tbody .modified {
tbody .size, tbody .modified {
font-family: 'Roboto Mono';
}
header {
@ -133,9 +121,6 @@ button {
min-width: 1rem;
min-height: 1rem;
}
input {
margin: 0;
}
:focus {
outline: none;
}
@ -148,7 +133,6 @@ a:hover {
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
gap: 0;
}
@ -158,7 +142,7 @@ table {
flex-direction: column;
}
main {
height: calc(100svh - 9rem); /* fill almost the rest of the screen after header */
padding-bottom: 3rem; /* convenience space on the bottom */
height: calc(100svh - 9rem); /* fill almost the rest of the screen after header */
padding-bottom: 3rem; /* convenience space on the bottom */
overflow-y: scroll;
}

View File

@ -8,7 +8,10 @@
</template>
<script setup lang="ts">
import home from '@/assets/svg/home.svg'
//import home from '@/assets/svg/home.svg'
import { defineProps, defineAsyncComponent } from 'vue'
const home = defineAsyncComponent(() => import(`@/assets/svg/home.svg`))
const props = defineProps<{
path: Array<string>

View File

@ -48,11 +48,7 @@
"
/>
</td>
<td class="modified right">
<time :datetime="new Date(editing.mtime).toISOString().replace('.000', '')">{{
editing.modified
}}</time>
</td>
<td class="modified right">{{ editing.modified }}</td>
<td class="size right">{{ editing.sizedisp }}</td>
<td class="menu"></td>
</tr>
@ -96,30 +92,17 @@
:href="url_for(doc)"
tabindex="-1"
@contextmenu.stop
@click.stop
@focus.stop="cursor = doc"
>{{ doc.name }}</a
>
<button
v-if="cursor == doc"
class="rename-button"
@click="() => (editing = doc)"
>
🖊
</button>
<button v-if="cursor == doc" class="rename-button" @click="() => (editing = doc)">🖊</button>
</template>
</td>
<td class="modified right">
<time
:datetime="new Date(1000 * doc.mtime).toISOString().replace('.000', '')"
>{{ doc.modified }}</time
>
</td>
<td class="modified right">{{ doc.modified }}</td>
<td class="size right">{{ doc.sizedisp }}</td>
<td class="menu">
<button
tabindex="-1"
@click.stop="contextMenu($event, doc)"
>
<button tabindex="-1" @click.stop="cursor = doc; contextMenu($event, doc)">
</button>
</td>
@ -207,6 +190,7 @@ defineExpose({
editing.value = cursor.value
},
cursorSelect() {
console.log('select', documentStore.selected)
const doc = cursor.value
if (!doc) return
if (documentStore.selected.has(doc.key)) {
@ -216,31 +200,19 @@ defineExpose({
}
this.cursorMove(1)
},
cursorMove(d: number, select = false) {
cursorMove(d: number) {
// Move cursor up or down (keyboard navigation)
const documents = sorted(props.documents as FolderDocument[])
if (documents.length === 0) {
cursor.value = null
return
}
const N = documents.length
const mod = (a: number, b: number) => ((a % b) + b) % b
const increment = (i: number, d: number) => mod(i + d, N + 1)
const index =
cursor.value !== null ? documents.indexOf(cursor.value) : documents.length
const moveto = increment(index, d)
cursor.value = documents[moveto] ?? null
const tr = cursor.value ? document.getElementById(`file-${cursor.value.key}`) : null
if (select) {
// Go forwards, possibly wrapping over the end; the last entry is not toggled
let [begin, end] = d > 0 ? [index, moveto] : [moveto, index]
for (let p = begin; p !== end; p = increment(p, 1)) {
if (p === N) continue
const key = documents[p].key
if (documentStore.selected.has(key)) documentStore.selected.delete(key)
else documentStore.selected.add(key)
}
}
const index = cursor.value !== null ? documents.indexOf(cursor.value) : -1
cursor.value = documents[mod(index + d, documents.length + 1)] ?? null
const tr = document.getElementById(
`file-${cursor.value.key}`
) as HTMLTableRowElement | null
// @ts-ignore
scrolltr = tr
if (!scrolltimer) {
@ -335,7 +307,6 @@ watchEffect(() => {
if (editing.value) cursor.value = editing.value
})
const contextMenu = (ev: Event, doc: Document) => {
cursor.value = doc
console.log('Context menu', ev, doc)
}
</script>
@ -365,12 +336,9 @@ table tbody input[type='checkbox'] {
}
table .selection {
width: 2rem;
height: 2rem;
text-align: center;
text-overflow: clip;
}
table .modified {
width: 8rem;
width: 10rem;
}
table .size {
width: 4rem;
@ -395,21 +363,12 @@ table td {
position: relative;
}
.name .rename-button {
padding-left: 1rem;
position: absolute;
right: 0;
animation: appear calc(5 * var(--transition-time)) linear;
}
@keyframes appear {
from {
opacity: 0;
}
80% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes appear { from { opacity: 0 } 80% { opacity: 0 } to { opacity: 1 } }
thead tr {
background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
color: #000;
@ -420,6 +379,9 @@ tbody tr.cursor {
.right {
text-align: right;
}
.selection {
width: 2em;
}
.sortcolumn:hover {
cursor: pointer;
}
@ -443,19 +405,18 @@ tbody tr.cursor {
.name a {
text-decoration: none;
}
tr {
height: 2.5rem;
}
tbody .selection input {
z-index: 1;
position: absolute;
opacity: 0;
left: 0.5rem;
left: 0;
top: 0;
}
.selection {
width: 2em;
height: 2em;
}
.selection input:checked {
opacity: 0.7;
opacity: .7;
}
.file .selection::before {
content: '📄 ';

View File

@ -3,7 +3,6 @@
ref="input"
id="FileRenameInput"
type="text"
autocorrect="off"
v-model="name"
@blur="exit"
@keyup.esc="exit"
@ -35,11 +34,7 @@ const props = defineProps<{
const apply = () => {
props.exit()
if (
props.doc.key !== 'new' &&
(name.value === props.doc.name || name.value.length === 0)
)
return
if (props.doc.key !== 'new' && (name.value === props.doc.name || name.value.length === 0)) return
props.rename(props.doc, name.value)
}
</script>
@ -49,9 +44,9 @@ input#FileRenameInput {
color: var(--primary-color);
background: var(--primary-background);
border: 0;
border-radius: 0.3rem;
padding: 0.4rem;
margin: -0.4rem;
border-radius: .3rem;
padding: .4rem;
margin: -.4rem;
width: 100%;
outline: none;
font: inherit;

View File

@ -46,7 +46,7 @@ defineExpose({
/>
</template>
<SvgButton ref="searchButton" name="find" @click="toggleSearchInput" />
<SvgButton name="cog" @click="console.log('settings menu')" />
<SvgButton name="cog" @click="console.log('TODO open settings')" />
</div>
</nav>
</template>

View File

@ -8,12 +8,12 @@ import router from './router'
import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
const app = createApp(App)
app.config.errorHandler = err => {
/* handle error */
console.log(err)
}
const pinia = createPinia()
pinia.use(piniaPluginPersistedState)
app.use(pinia)

View File

@ -30,13 +30,13 @@ export type errorEvent = {
// Raw types the backend /api/watch sends us
export type FileEntry = {
key: FUID
id: FUID
size: number
mtime: number
}
export type DirEntry = {
key: FUID
id: FUID
size: number
mtime: number
dir: DirList
@ -47,7 +47,7 @@ export type DirList = Record<string, FileEntry | DirEntry>
export type UpdateEntry = {
name: string
deleted?: boolean
key?: FUID
id?: FUID
size?: number
mtime?: number
dir?: DirList
@ -99,7 +99,7 @@ export class DocumentHandler {
this.handleUpdateMessage(msg)
break
case !!msg.space:
console.log('Watch space', msg.space)
console.log("Watch space", msg.space)
break
case !!msg.error:
this.handleError(msg)
@ -109,14 +109,14 @@ export class DocumentHandler {
}
private handleRootMessage({ root }: { root: DirEntry }) {
console.log('Watch root', root)
console.log("Watch root", root)
if (this.store && this.store.root) {
this.store.user.isLoggedIn = true
this.store.root = root
}
}
private handleUpdateMessage(updateData: { update: UpdateEntry[] }) {
console.log('Watch update', updateData.update)
console.log("Watch update", updateData.update)
let node: DirEntry = this.store.root
for (const elem of updateData.update) {
if (elem.deleted) {
@ -127,7 +127,7 @@ export class DocumentHandler {
// @ts-ignore
node = node.dir[elem.name] ||= {}
}
if (elem.key !== undefined) node.key = elem.key
if (elem.id !== undefined) node.id = elem.id
if (elem.size !== undefined) node.size = elem.size
if (elem.mtime !== undefined) node.mtime = elem.mtime
if (elem.dir !== undefined) node.dir = elem.dir

View File

@ -60,10 +60,10 @@ export const useDocumentStore = defineStore({
// Transform data
const dataMapped = []
for (const [name, attr] of Object.entries(matched)) {
const { key, size, mtime } = attr
const { id, size, mtime } = attr
const element: Document = {
name,
key,
key: id,
size,
sizedisp: formatSize(size),
mtime,
@ -182,22 +182,21 @@ export const useDocumentStore = defineStore({
if (!('dir' in data)) return
for (const [name, attr] of Object.entries(data.dir)) {
const fullname = path ? `${path}/${name}` : name
const key = attr.key
// Is this the file we are looking for? Ignore if nested within another selection.
let r = relpath
if (selected.has(key) && !relpath) {
ret.selected.add(key)
if (selected.has(attr.id) && !relpath) {
ret.selected.add(attr.id)
ret.rootdir[name] = attr
r = name
} else if (relpath) {
r = `${relpath}/${name}`
}
if (r) {
ret.entries[key] = attr
ret.fullpath[key] = fullname
ret.relpath[key] = r
ret.ids.push(key)
if (!('dir' in attr)) ret.url[key] = `/files/${fullname}`
ret.entries[attr.id] = attr
ret.fullpath[attr.id] = fullname
ret.relpath[attr.id] = r
ret.ids.push(attr.id)
if (!('dir' in attr)) ret.url[attr.id] = `/files/${fullname}`
}
traverseDir(attr, fullname, r)
}

View File

@ -27,31 +27,28 @@ export function formatUnixDate(t: number) {
return 'now'
}
if (Math.abs(diff) <= 60000) {
return formatter.format(Math.round(diff / 1000), 'second').replace(' ago', '').replaceAll(' ', '\u202F')
return formatter.format(Math.round(diff / 1000), 'second')
}
if (Math.abs(diff) <= 3600000) {
return formatter.format(Math.round(diff / 60000), 'minute').replace('utes', '').replace('ute', '').replaceAll(' ', '\u202F')
return formatter.format(Math.round(diff / 60000), 'minute')
}
if (Math.abs(diff) <= 86400000) {
return formatter.format(Math.round(diff / 3600000), 'hour').replaceAll(' ', '\u202F')
return formatter.format(Math.round(diff / 3600000), 'hour')
}
if (Math.abs(diff) <= 604800000) {
return formatter.format(Math.round(diff / 86400000), 'day').replaceAll(' ', '\u202F')
return formatter.format(Math.round(diff / 86400000), 'day')
}
let d = date.toLocaleDateString('en-ie', {
const d = date.toLocaleDateString("us", {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric'
}).replace("Sept", "Sep")
if (d.length === 14) d = d.replace(' ', ' \u2007') // dom < 10 alignment (add figure space)
d = d.replaceAll(' ', '\u202F').replace('\u202F', '\u00A0') // nobr spaces, thin w/ date but not weekday
d = d.slice(0, -4) + d.slice(-2) // Two digit year is enough
return d
return (d.length === 16 ? d : d.replace(', ', ',\u202F\u2007')).replaceAll(' ', '\u202F')
}
export function getFileExtension(filename: string) {

View File

@ -110,13 +110,13 @@ class ErrorMsg(msgspec.Struct):
class FileEntry(msgspec.Struct):
key: str
id: str
size: int
mtime: int
class DirEntry(msgspec.Struct):
key: str
id: str
size: int
mtime: int
dir: DirList
@ -146,7 +146,7 @@ class UpdateEntry(msgspec.Struct, omit_defaults=True):
name: str = ""
deleted: bool = False
key: str | None = None
id: str | None = None
size: int | None = None
mtime: int | None = None
dir: DirList | None = None

View File

@ -90,9 +90,7 @@ def format_tree():
return msgspec.json.encode(
{
"update": [
UpdateEntry(
key=root.key, size=root.size, mtime=root.mtime, dir=root.dir
),
UpdateEntry(id=root.id, size=root.size, mtime=root.mtime, dir=root.dir),
],
},
).decode()
@ -101,11 +99,10 @@ def format_tree():
def walk(path: Path) -> DirEntry | FileEntry | None:
try:
s = path.stat()
key = fuid(s)
assert key, repr(key)
id_ = fuid(s)
mtime = int(s.st_mtime)
if path.is_file():
return FileEntry(key, s.st_size, mtime)
return FileEntry(id_, s.st_size, mtime)
tree = {
p.name: v
@ -118,7 +115,7 @@ def walk(path: Path) -> DirEntry | FileEntry | None:
mtime = max(mtime, *(v.mtime for v in tree.values()))
else:
size = 0
return DirEntry(key, size, mtime, tree)
return DirEntry(id_, size, mtime, tree)
except FileNotFoundError:
return None
except OSError as e: