From 589e5a682c388533af1c07c1ce364406da780f91 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Sun, 5 Nov 2023 13:13:32 +0000 Subject: [PATCH] Smoother UI and various other adjustments. --- cista-front/index.html | 2 +- cista-front/package.json | 1 + cista-front/src/App.vue | 32 ++++++---- cista-front/src/assets/main.css | 26 +++++--- cista-front/src/components/FileExplorer.vue | 62 +++++++++++-------- .../src/components/FileRenameInput.vue | 18 +++--- cista-front/src/main.ts | 7 ++- cista-front/src/repositories/Document.ts | 5 ++ cista-front/src/stores/documents.ts | 8 ++- cista-front/src/utils/index.ts | 31 +++++++++- cista-front/tsconfig.app.json | 1 + cista-front/tsconfig.vitest.json | 1 - ...-file-2fc04ac1.js => add-file-860b0008.js} | 2 +- ...der-94f58a28.js => add-folder-46075955.js} | 2 +- .../{arrow-21a21451.js => arrow-d1d93a71.js} | 2 +- ...ows-h-b550237f.js => arrows-h-a25d1e88.js} | 2 +- ...ows-v-caecdc3b.js => arrows-v-84510588.js} | 2 +- .../{check-046415f8.js => check-314a71f1.js} | 2 +- .../{code-4bea7bf3.js => code-7ddd03ee.js} | 2 +- .../{cog-ecf051b6.js => cog-0600c910.js} | 2 +- .../{copy-5b170f54.js => copy-b2c1f092.js} | 2 +- ...le-6e490c88.js => create-file-a0087f06.js} | 2 +- ...-1568e94d.js => create-folder-ee73f2da.js} | 2 +- .../{cross-27a61986.js => cross-ee8a27f3.js} | 2 +- .../{disk-5653090a.js => disk-fb827eb0.js} | 2 +- ...nload-ec9f2727.js => download-9e198838.js} | 2 +- ...on-08d41d7b.js => exclamation-1bb88697.js} | 2 +- .../{eye-0e667df9.js => eye-ccbaef38.js} | 2 +- .../{find-30f89a67.js => find-c89145a7.js} | 2 +- ...een-c6a4526c.js => fullscreen-f50b5fd6.js} | 2 +- ...{github-8848d98d.js => github-89189e12.js} | 2 +- .../{home-dada510e.js => home-44e69561.js} | 2 +- cista/wwwroot/assets/index-38f20193.js | 9 +++ cista/wwwroot/assets/index-7ec49b54.css | 1 + cista/wwwroot/assets/index-7f877540.js | 9 --- cista/wwwroot/assets/index-f1593eb2.css | 1 - .../{info-3df4ac5e.js => info-e0567137.js} | 2 +- .../{link-c46ae613.js => link-3aa23063.js} | 2 +- .../{logo-d85fdccc.js => logo-d2990a75.js} | 2 +- .../{loop-cc973f38.js => loop-d068db71.js} | 2 +- .../{menu-e55e97c7.js => menu-695d1201.js} | 2 +- .../{next-19846e48.js => next-a6561c6e.js} | 2 +- .../{open-f15f038e.js => open-d708c568.js} | 2 +- .../{paste-1a4eb209.js => paste-472b462e.js} | 2 +- .../{pause-6a903b0a.js => pause-0977a845.js} | 2 +- ...{pencil-8d9c2a53.js => pencil-c1143bcd.js} | 2 +- .../{play-36147315.js => play-127b97fe.js} | 2 +- .../{plus-e1eb8193.js => plus-af1460f6.js} | 2 +- ...vious-b395fe95.js => previous-aa9f1db1.js} | 2 +- ...{reload-f2a93360.js => reload-bad5d91e.js} | 2 +- ...{rename-08cee169.js => rename-e3e7c6aa.js} | 2 +- ...ssors-307de9f3.js => scissors-a9893c7e.js} | 2 +- ...huffle-fc22ffda.js => shuffle-b7e0bde0.js} | 2 +- ...{signin-48d65111.js => signin-24d369e8.js} | 2 +- ...ignout-25062183.js => signout-f1b0e166.js} | 2 +- .../{skip-9f8471f2.js => skip-14475311.js} | 2 +- ...pinner-cdd81338.js => spinner-ddd43494.js} | 2 +- .../{stop-f29d283e.js => stop-028796ed.js} | 2 +- .../{trash-ca0eb8f0.js => trash-40fecd4a.js} | 2 +- ...angle-6572f504.js => triangle-5644bafa.js} | 2 +- ...n-a46c175b.js => unfullscreen-bf1b34e4.js} | 2 +- ...arrow-24665650.js => up-arrow-8053177d.js} | 2 +- ...d-9ae045e2.js => upload-cloud-5bac4102.js} | 2 +- .../{user-690c1004.js => user-73831f8e.js} | 2 +- ...r-cog-c3be44ba.js => user-cog-e07cbff8.js} | 2 +- ...gh-2d5673be.js => volume-high-61ebfe68.js} | 2 +- ...low-1f6dfbf0.js => volume-low-9fb3aa11.js} | 2 +- ...-388c1627.js => volume-medium-267760fd.js} | 2 +- ...te-e5a998df.js => volume-mute-60511f65.js} | 2 +- ...{window-8624d9ca.js => window-10debaaa.js} | 2 +- ...s-d65c5d08.js => window-cross-4b0726a9.js} | 2 +- ...dwrap-6a772d8f.js => wordwrap-57ccda1a.js} | 2 +- ...{zoomin-a1c6edbd.js => zoomin-f3157dc9.js} | 2 +- ...oomout-21f32b89.js => zoomout-78193f58.js} | 2 +- cista/wwwroot/index.html | 6 +- 75 files changed, 205 insertions(+), 131 deletions(-) rename cista/wwwroot/assets/{add-file-2fc04ac1.js => add-file-860b0008.js} (80%) rename cista/wwwroot/assets/{add-folder-94f58a28.js => add-folder-46075955.js} (80%) rename cista/wwwroot/assets/{arrow-21a21451.js => arrow-d1d93a71.js} (88%) rename cista/wwwroot/assets/{arrows-h-b550237f.js => arrows-h-a25d1e88.js} (78%) rename cista/wwwroot/assets/{arrows-v-caecdc3b.js => arrows-v-84510588.js} (78%) rename cista/wwwroot/assets/{check-046415f8.js => check-314a71f1.js} (80%) rename cista/wwwroot/assets/{code-4bea7bf3.js => code-7ddd03ee.js} (82%) rename cista/wwwroot/assets/{cog-ecf051b6.js => cog-0600c910.js} (91%) rename cista/wwwroot/assets/{copy-5b170f54.js => copy-b2c1f092.js} (83%) rename cista/wwwroot/assets/{create-file-6e490c88.js => create-file-a0087f06.js} (85%) rename cista/wwwroot/assets/{create-folder-1568e94d.js => create-folder-ee73f2da.js} (86%) rename cista/wwwroot/assets/{cross-27a61986.js => cross-ee8a27f3.js} (82%) rename cista/wwwroot/assets/{disk-5653090a.js => disk-fb827eb0.js} (85%) rename cista/wwwroot/assets/{download-ec9f2727.js => download-9e198838.js} (92%) rename cista/wwwroot/assets/{exclamation-08d41d7b.js => exclamation-1bb88697.js} (87%) rename cista/wwwroot/assets/{eye-0e667df9.js => eye-ccbaef38.js} (92%) rename cista/wwwroot/assets/{find-30f89a67.js => find-c89145a7.js} (88%) rename cista/wwwroot/assets/{fullscreen-c6a4526c.js => fullscreen-f50b5fd6.js} (82%) rename cista/wwwroot/assets/{github-8848d98d.js => github-89189e12.js} (92%) rename cista/wwwroot/assets/{home-dada510e.js => home-44e69561.js} (80%) create mode 100644 cista/wwwroot/assets/index-38f20193.js create mode 100644 cista/wwwroot/assets/index-7ec49b54.css delete mode 100644 cista/wwwroot/assets/index-7f877540.js delete mode 100644 cista/wwwroot/assets/index-f1593eb2.css rename cista/wwwroot/assets/{info-3df4ac5e.js => info-e0567137.js} (88%) rename cista/wwwroot/assets/{link-c46ae613.js => link-3aa23063.js} (90%) rename cista/wwwroot/assets/{logo-d85fdccc.js => logo-d2990a75.js} (84%) rename cista/wwwroot/assets/{loop-cc973f38.js => loop-d068db71.js} (86%) rename cista/wwwroot/assets/{menu-e55e97c7.js => menu-695d1201.js} (86%) rename cista/wwwroot/assets/{next-19846e48.js => next-a6561c6e.js} (76%) rename cista/wwwroot/assets/{open-f15f038e.js => open-d708c568.js} (91%) rename cista/wwwroot/assets/{paste-1a4eb209.js => paste-472b462e.js} (85%) rename cista/wwwroot/assets/{pause-6a903b0a.js => pause-0977a845.js} (76%) rename cista/wwwroot/assets/{pencil-8d9c2a53.js => pencil-c1143bcd.js} (88%) rename cista/wwwroot/assets/{play-36147315.js => play-127b97fe.js} (75%) rename cista/wwwroot/assets/{plus-e1eb8193.js => plus-af1460f6.js} (83%) rename cista/wwwroot/assets/{previous-b395fe95.js => previous-aa9f1db1.js} (76%) rename cista/wwwroot/assets/{reload-f2a93360.js => reload-bad5d91e.js} (88%) rename cista/wwwroot/assets/{rename-08cee169.js => rename-e3e7c6aa.js} (93%) rename cista/wwwroot/assets/{scissors-307de9f3.js => scissors-a9893c7e.js} (94%) rename cista/wwwroot/assets/{shuffle-fc22ffda.js => shuffle-b7e0bde0.js} (88%) rename cista/wwwroot/assets/{signin-48d65111.js => signin-24d369e8.js} (91%) rename cista/wwwroot/assets/{signout-25062183.js => signout-f1b0e166.js} (91%) rename cista/wwwroot/assets/{skip-9f8471f2.js => skip-14475311.js} (77%) rename cista/wwwroot/assets/{spinner-cdd81338.js => spinner-ddd43494.js} (95%) rename cista/wwwroot/assets/{stop-f29d283e.js => stop-028796ed.js} (75%) rename cista/wwwroot/assets/{trash-ca0eb8f0.js => trash-40fecd4a.js} (92%) rename cista/wwwroot/assets/{triangle-6572f504.js => triangle-5644bafa.js} (75%) rename cista/wwwroot/assets/{unfullscreen-a46c175b.js => unfullscreen-bf1b34e4.js} (82%) rename cista/wwwroot/assets/{up-arrow-24665650.js => up-arrow-8053177d.js} (76%) rename cista/wwwroot/assets/{upload-cloud-9ae045e2.js => upload-cloud-5bac4102.js} (90%) rename cista/wwwroot/assets/{user-690c1004.js => user-73831f8e.js} (85%) rename cista/wwwroot/assets/{user-cog-c3be44ba.js => user-cog-e07cbff8.js} (94%) rename cista/wwwroot/assets/{volume-high-2d5673be.js => volume-high-61ebfe68.js} (92%) rename cista/wwwroot/assets/{volume-low-1f6dfbf0.js => volume-low-9fb3aa11.js} (87%) rename cista/wwwroot/assets/{volume-medium-388c1627.js => volume-medium-267760fd.js} (90%) rename cista/wwwroot/assets/{volume-mute-e5a998df.js => volume-mute-60511f65.js} (85%) rename cista/wwwroot/assets/{window-8624d9ca.js => window-10debaaa.js} (90%) rename cista/wwwroot/assets/{window-cross-d65c5d08.js => window-cross-4b0726a9.js} (92%) rename cista/wwwroot/assets/{wordwrap-6a772d8f.js => wordwrap-57ccda1a.js} (85%) rename cista/wwwroot/assets/{zoomin-a1c6edbd.js => zoomin-f3157dc9.js} (90%) rename cista/wwwroot/assets/{zoomout-21f32b89.js => zoomout-78193f58.js} (90%) 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 @@ - +