From 8c6690ea9817ea2df6a6c2895f912595fcba1724 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Sat, 4 Nov 2023 14:10:18 +0000 Subject: [PATCH] Major changes: - File selections working - CSS more responsive, more consistent use of colors and variables - Keyboard navigation - Added context menu buttons and handler, the menu is still missing - Added download and settings buttons (no functions yet) - Various minor fixes everywhere --- cista-front/index.html | 2 +- cista-front/src/App.vue | 53 +++- cista-front/src/assets/main.css | 75 ++++- cista-front/src/assets/svg/cog.svg | 2 +- cista-front/src/assets/svg/trash.svg | 2 +- cista-front/src/assets/svg/upload-cloud.svg | 2 +- cista-front/src/components/BreadCrumb.vue | 4 +- cista-front/src/components/FileExplorer.vue | 279 +++++++++++------- .../src/components/FileRenameInput.vue | 1 + cista-front/src/components/HeaderMain.vue | 34 ++- cista-front/src/components/LoginModal.vue | 2 +- cista-front/src/components/SvgButton.vue | 7 +- cista-front/src/main.ts | 1 - cista-front/src/stores/documents.ts | 1 + cista-front/src/views/ExplorerView.vue | 4 +- ...-file-c1dc862b.js => add-file-11465a08.js} | 2 +- ...der-1890c14b.js => add-folder-9c5b4841.js} | 2 +- .../{arrow-5f1a1780.js => arrow-e499dca5.js} | 2 +- ...ows-h-83f2091e.js => arrows-h-8faa57ad.js} | 2 +- ...ows-v-870c28d7.js => arrows-v-e10a95cb.js} | 2 +- .../{check-21c1e2a8.js => check-772a998d.js} | 2 +- .../{code-f73d8201.js => code-2862018a.js} | 2 +- cista/wwwroot/assets/cog-1cca4dc4.js | 1 - cista/wwwroot/assets/cog-64ef50a2.js | 1 + .../{copy-13b6dc7b.js => copy-2c077962.js} | 2 +- ...le-72e41f89.js => create-file-b81351f1.js} | 2 +- ...-28dc6758.js => create-folder-16f6c658.js} | 2 +- .../{cross-940c4cbc.js => cross-acfa5e74.js} | 2 +- .../{disk-bda788c7.js => disk-569de811.js} | 2 +- ...nload-d282552d.js => download-5d96f406.js} | 2 +- ...on-cdd77cc4.js => exclamation-8f020a0a.js} | 2 +- .../{eye-eddedb10.js => eye-63dcf403.js} | 2 +- .../{find-489fc51f.js => find-5c2ade58.js} | 2 +- ...een-0f4ad24a.js => fullscreen-46a2566a.js} | 2 +- ...{github-9352f0a9.js => github-81dce3f2.js} | 2 +- .../{home-1901b45c.js => home-7dc4bab9.js} | 2 +- cista/wwwroot/assets/index-1792692d.css | 1 - cista/wwwroot/assets/index-99371460.js | 9 - cista/wwwroot/assets/index-b403b9e8.js | 9 + cista/wwwroot/assets/index-e2fef821.css | 1 + .../{info-29e64023.js => info-c202f876.js} | 2 +- .../{link-b4550873.js => link-c4978c6c.js} | 2 +- .../{logo-50ea46da.js => logo-1da56ea0.js} | 2 +- .../{loop-e74fbb02.js => loop-5bc8349b.js} | 2 +- .../{menu-b4509762.js => menu-61fccc0e.js} | 2 +- .../{next-2b363dea.js => next-477de089.js} | 2 +- .../{open-8f21d663.js => open-bb96a7cd.js} | 2 +- .../{paste-e2c9d5b7.js => paste-3a29f252.js} | 2 +- .../{pause-a55b9fa3.js => pause-ec2079ff.js} | 2 +- ...{pencil-e8178944.js => pencil-86564060.js} | 2 +- .../{play-5f601c71.js => play-93031965.js} | 2 +- .../{plus-00a24e70.js => plus-a85f2a41.js} | 2 +- ...vious-f9bff34a.js => previous-bab629ce.js} | 2 +- ...{reload-0c63d6de.js => reload-cb83dbc6.js} | 2 +- ...{rename-14667f8b.js => rename-dce2d0c0.js} | 2 +- ...ssors-512a7a49.js => scissors-2041a9a3.js} | 2 +- ...huffle-3515727f.js => shuffle-703964ca.js} | 2 +- ...{signin-5905a6f1.js => signin-6d243006.js} | 2 +- ...ignout-4339ecb8.js => signout-f9624576.js} | 2 +- .../{skip-7fdb6511.js => skip-45f0ec0f.js} | 2 +- ...pinner-f26013f8.js => spinner-b0b2075e.js} | 2 +- .../{stop-955a4bfe.js => stop-a1dfebee.js} | 2 +- .../{trash-48bda628.js => trash-2588306a.js} | 2 +- ...angle-990c4c68.js => triangle-034f2bfd.js} | 2 +- ...n-a877f032.js => unfullscreen-c6a8154e.js} | 2 +- ...arrow-ad3e7de7.js => up-arrow-21259b3c.js} | 2 +- ...d-321e061d.js => upload-cloud-9a22e898.js} | 2 +- .../{user-68ab65a3.js => user-0fc13e0d.js} | 2 +- ...r-cog-ad2d3a1b.js => user-cog-46ecb15f.js} | 2 +- ...gh-6e8d7aa8.js => volume-high-a48b779b.js} | 2 +- ...low-24ac07a3.js => volume-low-d181aa34.js} | 2 +- ...-f08529a9.js => volume-medium-c9d62b72.js} | 2 +- ...te-2d12bab7.js => volume-mute-a1199b71.js} | 2 +- ...{window-1d9b6b6a.js => window-8c650b83.js} | 2 +- ...s-9064c0d0.js => window-cross-a75961a0.js} | 2 +- ...dwrap-8fa96edb.js => wordwrap-21b0d75b.js} | 2 +- ...{zoomin-af24dfe9.js => zoomin-8b52e558.js} | 2 +- ...oomout-d01b9374.js => zoomout-7b0a12ad.js} | 2 +- cista/wwwroot/index.html | 6 +- 79 files changed, 381 insertions(+), 230 deletions(-) rename cista/wwwroot/assets/{add-file-c1dc862b.js => add-file-11465a08.js} (80%) rename cista/wwwroot/assets/{add-folder-1890c14b.js => add-folder-9c5b4841.js} (81%) rename cista/wwwroot/assets/{arrow-5f1a1780.js => arrow-e499dca5.js} (88%) rename cista/wwwroot/assets/{arrows-h-83f2091e.js => arrows-h-8faa57ad.js} (79%) rename cista/wwwroot/assets/{arrows-v-870c28d7.js => arrows-v-e10a95cb.js} (79%) rename cista/wwwroot/assets/{check-21c1e2a8.js => check-772a998d.js} (80%) rename cista/wwwroot/assets/{code-f73d8201.js => code-2862018a.js} (82%) delete mode 100644 cista/wwwroot/assets/cog-1cca4dc4.js create mode 100644 cista/wwwroot/assets/cog-64ef50a2.js rename cista/wwwroot/assets/{copy-13b6dc7b.js => copy-2c077962.js} (84%) rename cista/wwwroot/assets/{create-file-72e41f89.js => create-file-b81351f1.js} (86%) rename cista/wwwroot/assets/{create-folder-28dc6758.js => create-folder-16f6c658.js} (86%) rename cista/wwwroot/assets/{cross-940c4cbc.js => cross-acfa5e74.js} (82%) rename cista/wwwroot/assets/{disk-bda788c7.js => disk-569de811.js} (85%) rename cista/wwwroot/assets/{download-d282552d.js => download-5d96f406.js} (92%) rename cista/wwwroot/assets/{exclamation-cdd77cc4.js => exclamation-8f020a0a.js} (87%) rename cista/wwwroot/assets/{eye-eddedb10.js => eye-63dcf403.js} (92%) rename cista/wwwroot/assets/{find-489fc51f.js => find-5c2ade58.js} (88%) rename cista/wwwroot/assets/{fullscreen-0f4ad24a.js => fullscreen-46a2566a.js} (82%) rename cista/wwwroot/assets/{github-9352f0a9.js => github-81dce3f2.js} (92%) rename cista/wwwroot/assets/{home-1901b45c.js => home-7dc4bab9.js} (80%) delete mode 100644 cista/wwwroot/assets/index-1792692d.css delete mode 100644 cista/wwwroot/assets/index-99371460.js create mode 100644 cista/wwwroot/assets/index-b403b9e8.js create mode 100644 cista/wwwroot/assets/index-e2fef821.css rename cista/wwwroot/assets/{info-29e64023.js => info-c202f876.js} (89%) rename cista/wwwroot/assets/{link-b4550873.js => link-c4978c6c.js} (90%) rename cista/wwwroot/assets/{logo-50ea46da.js => logo-1da56ea0.js} (84%) rename cista/wwwroot/assets/{loop-e74fbb02.js => loop-5bc8349b.js} (86%) rename cista/wwwroot/assets/{menu-b4509762.js => menu-61fccc0e.js} (87%) rename cista/wwwroot/assets/{next-2b363dea.js => next-477de089.js} (78%) rename cista/wwwroot/assets/{open-8f21d663.js => open-bb96a7cd.js} (91%) rename cista/wwwroot/assets/{paste-e2c9d5b7.js => paste-3a29f252.js} (85%) rename cista/wwwroot/assets/{pause-a55b9fa3.js => pause-ec2079ff.js} (76%) rename cista/wwwroot/assets/{pencil-e8178944.js => pencil-86564060.js} (89%) rename cista/wwwroot/assets/{play-5f601c71.js => play-93031965.js} (75%) rename cista/wwwroot/assets/{plus-00a24e70.js => plus-a85f2a41.js} (83%) rename cista/wwwroot/assets/{previous-f9bff34a.js => previous-bab629ce.js} (76%) rename cista/wwwroot/assets/{reload-0c63d6de.js => reload-cb83dbc6.js} (88%) rename cista/wwwroot/assets/{rename-14667f8b.js => rename-dce2d0c0.js} (93%) rename cista/wwwroot/assets/{scissors-512a7a49.js => scissors-2041a9a3.js} (94%) rename cista/wwwroot/assets/{shuffle-3515727f.js => shuffle-703964ca.js} (89%) rename cista/wwwroot/assets/{signin-5905a6f1.js => signin-6d243006.js} (91%) rename cista/wwwroot/assets/{signout-4339ecb8.js => signout-f9624576.js} (91%) rename cista/wwwroot/assets/{skip-7fdb6511.js => skip-45f0ec0f.js} (78%) rename cista/wwwroot/assets/{spinner-f26013f8.js => spinner-b0b2075e.js} (95%) rename cista/wwwroot/assets/{stop-955a4bfe.js => stop-a1dfebee.js} (75%) rename cista/wwwroot/assets/{trash-48bda628.js => trash-2588306a.js} (84%) rename cista/wwwroot/assets/{triangle-990c4c68.js => triangle-034f2bfd.js} (77%) rename cista/wwwroot/assets/{unfullscreen-a877f032.js => unfullscreen-c6a8154e.js} (83%) rename cista/wwwroot/assets/{up-arrow-ad3e7de7.js => up-arrow-21259b3c.js} (76%) rename cista/wwwroot/assets/{upload-cloud-321e061d.js => upload-cloud-9a22e898.js} (90%) rename cista/wwwroot/assets/{user-68ab65a3.js => user-0fc13e0d.js} (85%) rename cista/wwwroot/assets/{user-cog-ad2d3a1b.js => user-cog-46ecb15f.js} (94%) rename cista/wwwroot/assets/{volume-high-6e8d7aa8.js => volume-high-a48b779b.js} (92%) rename cista/wwwroot/assets/{volume-low-24ac07a3.js => volume-low-d181aa34.js} (87%) rename cista/wwwroot/assets/{volume-medium-f08529a9.js => volume-medium-c9d62b72.js} (90%) rename cista/wwwroot/assets/{volume-mute-2d12bab7.js => volume-mute-a1199b71.js} (85%) rename cista/wwwroot/assets/{window-1d9b6b6a.js => window-8c650b83.js} (90%) rename cista/wwwroot/assets/{window-cross-9064c0d0.js => window-cross-a75961a0.js} (92%) rename cista/wwwroot/assets/{wordwrap-8fa96edb.js => wordwrap-21b0d75b.js} (85%) rename cista/wwwroot/assets/{zoomin-af24dfe9.js => zoomin-8b52e558.js} (90%) rename cista/wwwroot/assets/{zoomout-d01b9374.js => zoomout-7b0a12ad.js} (90%) diff --git a/cista-front/index.html b/cista-front/index.html index 94b028b..02d3a51 100644 --- a/cista-front/index.html +++ b/cista-front/index.html @@ -2,11 +2,11 @@ Cista + -
diff --git a/cista-front/src/App.vue b/cista-front/src/App.vue index fab8177..56f2021 100644 --- a/cista-front/src/App.vue +++ b/cista-front/src/App.vue @@ -1,7 +1,8 @@ diff --git a/cista-front/src/components/FileRenameInput.vue b/cista-front/src/components/FileRenameInput.vue index 89b8f03..19d4064 100644 --- a/cista-front/src/components/FileRenameInput.vue +++ b/cista-front/src/components/FileRenameInput.vue @@ -43,5 +43,6 @@ input#FileRenameInput { width: 90%; outline: none; background: transparent; + font: inherit; } diff --git a/cista-front/src/components/HeaderMain.vue b/cista-front/src/components/HeaderMain.vue index ec875ac..15323f2 100644 --- a/cista-front/src/components/HeaderMain.vue +++ b/cista-front/src/components/HeaderMain.vue @@ -1,30 +1,27 @@ diff --git a/cista-front/src/components/SvgButton.vue b/cista-front/src/components/SvgButton.vue index 7d0385f..4c3d05c 100644 --- a/cista-front/src/components/SvgButton.vue +++ b/cista-front/src/components/SvgButton.vue @@ -24,14 +24,17 @@ button { transition: all 0.2s ease; padding: 0.5rem; } -button:hover { +button:hover, button:focus { color: #fff; + transform: scale(1.1); } svg { fill: #ccc; transform: fill 0.2s ease; + width: 1rem; + height: 1rem; } -button:hover svg { +button:hover svg, button:focus svg { fill: #fff; } diff --git a/cista-front/src/main.ts b/cista-front/src/main.ts index 211a315..69b7ce0 100644 --- a/cista-front/src/main.ts +++ b/cista-front/src/main.ts @@ -14,5 +14,4 @@ app.config.errorHandler = err => { app.use(createPinia()) app.use(router) - app.mount('#app') diff --git a/cista-front/src/stores/documents.ts b/cista-front/src/stores/documents.ts index 84801f2..a5d7956 100644 --- a/cista-front/src/stores/documents.ts +++ b/cista-front/src/stores/documents.ts @@ -78,6 +78,7 @@ export const useDocumentStore = defineStore({ this.document = dataMapped }, setFilter(filter: string) { + if (filter === '') return this.updateTable({}) function traverseDir(data: DirEntry | FileEntry, path: string) { if (!('dir' in data)) return for (const [name, attr] of Object.entries(data.dir)) { diff --git a/cista-front/src/views/ExplorerView.vue b/cista-front/src/views/ExplorerView.vue index aa54dfa..27d8cff 100644 --- a/cista-front/src/views/ExplorerView.vue +++ b/cista-front/src/views/ExplorerView.vue @@ -43,14 +43,14 @@ function enter(el: Element, done: () => void) { function leave(el: Element, done: () => void) { const elem = el as HTMLElement elem.style.transform = 'translateX(-100%)' - setTimeout(done, 300) // Assuming 300ms is your transition duration + setTimeout(done, 200) // Should match --transition-time }