diff --git a/cista-front/index.html b/cista-front/index.html
index 02d3a51..34a5c8d 100644
--- a/cista-front/index.html
+++ b/cista-front/index.html
@@ -6,7 +6,7 @@
-
+
diff --git a/cista-front/package.json b/cista-front/package.json
index 31f3cd8..3d4afba 100644
--- a/cista-front/package.json
+++ b/cista-front/package.json
@@ -19,6 +19,7 @@
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"pinia": "^2.1.6",
+ "pinia-plugin-persistedstate": "^3.2.0",
"unplugin-vue-components": "^0.25.2",
"vite-plugin-rewrite-all": "^1.0.1",
"vite-svg-loader": "^4.0.0",
diff --git a/cista-front/src/App.vue b/cista-front/src/App.vue
index 3ceb69e..d2a96ae 100644
--- a/cista-front/src/App.vue
+++ b/cista-front/src/App.vue
@@ -47,9 +47,12 @@ watchEffect(() => {
})
const headerMain = ref(null)
let vert = 0
-let vertInterval: any = null
+let timer: any = null
const globalShortcutHandler = (event: KeyboardEvent) => {
- if (event.repeat) return
+ if (event.repeat) {
+ if (event.key === 'ArrowUp' || event.key === 'ArrowDown') event.preventDefault()
+ return
+ }
//console.log("key pressed", event)
const c = documentStore.fileExplorer.isCursor()
const keyup = event.type === 'keyup'
@@ -78,10 +81,21 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
documentStore.fileExplorer.cursorSelect()
} else return
event.preventDefault()
- if (vertInterval !== null) clearInterval(vertInterval)
- vertInterval = null
- if (vert) {
- vertInterval = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, 30)
+ if (!vert) {
+ if (timer) {
+ clearInterval(timer)
+ timer = null
+ }
+ return
+ }
+ if (!timer) {
+ // Initial move, then t0 delay until repeats at tr intervals
+ documentStore.fileExplorer.cursorMove(vert)
+ const t0 = 200, tr = 30
+ timer = setTimeout(
+ () => timer = setInterval(() => { documentStore.fileExplorer.cursorMove(vert) }, tr),
+ t0 - tr
+ )
}
}
onMounted(() => {
@@ -105,9 +119,3 @@ export type { Path }
-
-
diff --git a/cista-front/src/assets/main.css b/cista-front/src/assets/main.css
index 8c0c073..43c2a42 100644
--- a/cista-front/src/assets/main.css
+++ b/cista-front/src/assets/main.css
@@ -42,11 +42,11 @@
@media print {
:root {
--primary-color: black;
- --primary-background: transparent;
- --header-background: transparent;
+ --primary-background: none;
+ --header-background: none;
--header-color: black;
}
- nav, .menu {
+ nav, .menu, .rename-button {
display: none;
}
.breadcrumb > a {
@@ -73,7 +73,14 @@
padding: 0 !important;
}
.selection input { display: none }
- .selection input:checked { display: inherit }
+ .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 */
@@ -89,6 +96,9 @@ body {
color: var(--primary-color);
margin: 0;
}
+tbody .size, tbody .modified {
+ font-family: 'Roboto Mono';
+}
header {
background-color: var(--header-background);
color: var(--header-color);
@@ -96,6 +106,10 @@ header {
main {
height: 100%;
}
+::selection {
+ color: #000;
+ background: yellow !important;
+}
button {
font: inherit;
color: inherit;
@@ -132,7 +146,3 @@ main {
padding-bottom: 3rem; /* convenience space on the bottom */
overflow-y: scroll;
}
-thead tr {
- position: sticky;
- top: 0;
-}
diff --git a/cista-front/src/components/FileExplorer.vue b/cista-front/src/components/FileExplorer.vue
index 3d6704e..403ea26 100644
--- a/cista-front/src/components/FileExplorer.vue
+++ b/cista-front/src/components/FileExplorer.vue
@@ -96,7 +96,7 @@
@focus.stop="cursor = doc"
>{{ doc.name }}
-
+
| {{ doc.modified }} |
@@ -119,7 +119,7 @@ import type { Document, FolderDocument } from '@/repositories/Document'
import FileRenameInput from './FileRenameInput.vue'
import createWebSocket from '@/repositories/WS'
import { formatSize, formatUnixDate } from '@/utils'
-import { useRouter } from 'vue-router'
+import { isNavigationFailure, useRouter } from 'vue-router'
const props = withDefaults(
defineProps<{
@@ -213,9 +213,18 @@ defineExpose({
`file-${cursor.value.key}`
) as HTMLTableRowElement | null
// @ts-ignore
- if (tr) tr.scrollIntoView({ block: 'center', behavior: 'instant' })
+ scrolltr = tr
+ if (!scrolltimer) {
+ scrolltimer = setTimeout(() => {
+ scrolltr.scrollIntoView({ block: 'center', behavior: 'smooth' })
+ scrolltimer = null
+ }, 300)
+ }
}
})
+let scrolltimer: any = null
+let scrolltr: any = null
+
watchEffect(() => {
if (cursor.value) {
const a = document.querySelector(
@@ -292,7 +301,10 @@ const allSelected = computed({
}
}
})
-
+watchEffect(() => {
+ if (cursor.value && cursor.value !== editing.value) editing.value = null
+ if (editing.value) cursor.value = editing.value
+})
const contextMenu = (ev: Event, doc: Document) => {
console.log('Context menu', ev, doc)
}
@@ -303,20 +315,29 @@ table {
width: 100%;
table-layout: fixed;
}
+thead tr {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+}
+tbody tr {
+ position: relative;
+}
table thead input[type='checkbox'] {
position: inherit;
width: 1rem;
height: 1rem;
+ margin: 0.5rem;
}
table tbody input[type='checkbox'] {
width: 2rem;
height: 2rem;
}
table .selection {
- width: 1rem;
+ width: 2rem;
}
table .modified {
- width: 9rem;
+ width: 10rem;
}
table .size {
width: 4rem;
@@ -338,14 +359,15 @@ table td {
}
.name {
white-space: nowrap;
+ position: relative;
}
-.name button {
- visibility: hidden;
+.name .rename-button {
padding-left: 1rem;
+ position: absolute;
+ right: 0;
+ animation: appear calc(5 * var(--transition-time)) linear;
}
-.name:hover button {
- visibility: visible;
-}
+@keyframes appear { from { opacity: 0 } 80% { opacity: 0 } to { opacity: 1 } }
thead tr {
background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
color: #000;
@@ -379,21 +401,6 @@ tbody tr.cursor {
transform: rotate(90deg);
color: #000;
}
-.more-action {
- display: flex;
- flex-direction: column;
- justify-content: start;
-}
-.action-container {
- display: flex;
- align-items: center;
-}
-.edit-action {
- min-width: 5%;
-}
-.carousel-container {
- height: inherit;
-}
.name a {
text-decoration: none;
}
@@ -405,9 +412,10 @@ tbody .selection input {
position: absolute;
opacity: 0;
left: 0;
+ top: 0;
}
.selection input:checked {
- opacity: 1;
+ opacity: .7;
}
.file .selection::before {
content: '📄 ';
diff --git a/cista-front/src/components/FileRenameInput.vue b/cista-front/src/components/FileRenameInput.vue
index c0dd316..e765a89 100644
--- a/cista-front/src/components/FileRenameInput.vue
+++ b/cista-front/src/components/FileRenameInput.vue
@@ -11,7 +11,7 @@
-
+
+
Cista
@@ -9,7 +9,7 @@
-
+