diff options
author | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-04 18:19:17 +0200 |
---|---|---|
committer | John Molakvoæ <skjnldsv@protonmail.com> | 2023-04-06 15:31:37 +0200 |
commit | 13611824395d1a187b28f153e933b5ff56a4e566 (patch) | |
tree | 0462ac61ff40e3b976b536bdd9bbdbe266c2f86b /apps/files/src/components | |
parent | 904348b8c75aef856984e7c24a9b666ad8d257fd (diff) | |
download | nextcloud-server-13611824395d1a187b28f153e933b5ff56a4e566.tar.gz nextcloud-server-13611824395d1a187b28f153e933b5ff56a4e566.zip |
chore(eslint): clean and fix
Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Diffstat (limited to 'apps/files/src/components')
-rw-r--r-- | apps/files/src/components/CustomElementRender.vue | 6 | ||||
-rw-r--r-- | apps/files/src/components/FileEntry.vue | 36 | ||||
-rw-r--r-- | apps/files/src/components/FilesListFooter.vue | 5 | ||||
-rw-r--r-- | apps/files/src/components/FilesListHeader.vue | 8 | ||||
-rw-r--r-- | apps/files/src/components/FilesListHeaderActions.vue | 6 | ||||
-rw-r--r-- | apps/files/src/components/FilesListHeaderButton.vue | 2 | ||||
-rw-r--r-- | apps/files/src/components/FilesListNotVirtual.vue | 167 |
7 files changed, 30 insertions, 200 deletions
diff --git a/apps/files/src/components/CustomElementRender.vue b/apps/files/src/components/CustomElementRender.vue index bb6df3fd854..93cf91f78f3 100644 --- a/apps/files/src/components/CustomElementRender.vue +++ b/apps/files/src/components/CustomElementRender.vue @@ -24,6 +24,12 @@ </template> <script> +/** + * This component is used to render custom + * elements provided by an API. Vue doesn't allow + * to directly render an HTMLElement, so we can do + * this magic here. + */ export default { name: 'CustomElementRender', props: { diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue index 33e8438156b..260294e1a36 100644 --- a/apps/files/src/components/FileEntry.vue +++ b/apps/files/src/components/FileEntry.vue @@ -43,9 +43,9 @@ class="files-list__row-icon-preview" :style="{ backgroundImage }" /> - <span v-else-if="mimeUrl" + <span v-else-if="mimeIconUrl" class="files-list__row-icon-preview files-list__row-icon-preview--mime" - :style="{ backgroundImage: mimeUrl }" /> + :style="{ backgroundImage: mimeIconUrl }" /> <FileIcon v-else /> </span> @@ -100,7 +100,7 @@ <script lang='ts'> import { debounce } from 'debounce' -import { Folder, File, formatFileSize } from '@nextcloud/files' +import { formatFileSize } from '@nextcloud/files' import { Fragment } from 'vue-fragment' import { join } from 'path' import { showError } from '@nextcloud/dialogs' @@ -114,12 +114,11 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import Vue from 'vue' -import { isCachedPreview } from '../services/PreviewService' -import { getFileActions } from '../services/FileAction' -import { useFilesStore } from '../store/files' -import { UserConfig } from '../types' -import { useSelectionStore } from '../store/selection' -import { useUserConfigStore } from '../store/userconfig' +import { isCachedPreview } from '../services/PreviewService.ts' +import { getFileActions } from '../services/FileAction.ts' +import { useFilesStore } from '../store/files.ts' +import { useSelectionStore } from '../store/selection.ts' +import { useUserConfigStore } from '../store/userconfig.ts' import CustomElementRender from './CustomElementRender.vue' import CustomSvgIconRender from './CustomSvgIconRender.vue' import logger from '../logger.js' @@ -181,12 +180,10 @@ export default Vue.extend({ }, computed: { - /** @return {UserConfig} */ userConfig() { return this.userConfigStore.userConfig }, - /** @return {Navigation} */ currentView() { return this.$navigation.active }, @@ -272,11 +269,11 @@ export default Vue.extend({ } }, - mimeUrl() { + mimeIconUrl() { const mimeType = this.source.mime || 'application/octet-stream' - const mimeUrl = window.OC?.MimeType?.getIconUrl?.(mimeType) - if (mimeUrl) { - return `url(${mimeUrl})` + const mimeIconUrl = window.OC?.MimeType?.getIconUrl?.(mimeType) + if (mimeIconUrl) { + return `url(${mimeIconUrl})` } return '' }, @@ -309,7 +306,8 @@ export default Vue.extend({ this.resetState() // When the row is not active anymore - // remove the tabindex from the row + // remove the display from the row to prevent + // keyboard interaction with it. this.$el.parentNode.style.display = 'none' return } @@ -376,9 +374,6 @@ export default Vue.extend({ this.clearImg() } - // Ensure max 5 previews are being fetched at the same time - const controller = new AbortController() - // Store the promise to be able to cancel it this.previewPromise = new CancelablePromise((resolve, reject, onCancel) => { const img = new Image() @@ -400,7 +395,6 @@ export default Vue.extend({ img.onerror = null img.onload = null img.src = '' - controller.abort() }) }) }, @@ -413,7 +407,7 @@ export default Vue.extend({ this.clearImg() // Close menu - this.$refs.actionsMenu.closeMenu() + this.$refs?.actionsMenu?.closeMenu?.() }, clearImg() { diff --git a/apps/files/src/components/FilesListFooter.vue b/apps/files/src/components/FilesListFooter.vue index 6f2cad358b1..a2b12b5771d 100644 --- a/apps/files/src/components/FilesListFooter.vue +++ b/apps/files/src/components/FilesListFooter.vue @@ -56,9 +56,8 @@ import { formatFileSize } from '@nextcloud/files' import { translate } from '@nextcloud/l10n' import Vue from 'vue' -import Navigation from '../services/Navigation' -import { useFilesStore } from '../store/files' -import { usePathsStore } from '../store/paths' +import { useFilesStore } from '../store/files.ts' +import { usePathsStore } from '../store/paths.ts' export default Vue.extend({ name: 'FilesListFooter', diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue index f0af8c531dc..288154e3c91 100644 --- a/apps/files/src/components/FilesListHeader.vue +++ b/apps/files/src/components/FilesListHeader.vue @@ -71,13 +71,12 @@ import { translate } from '@nextcloud/l10n' import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' import Vue from 'vue' -import { useFilesStore } from '../store/files' -import { useSelectionStore } from '../store/selection' -import { useSortingStore } from '../store/sorting' +import { useFilesStore } from '../store/files.ts' +import { useSelectionStore } from '../store/selection.ts' +import { useSortingStore } from '../store/sorting.ts' import FilesListHeaderActions from './FilesListHeaderActions.vue' import FilesListHeaderButton from './FilesListHeaderButton.vue' import logger from '../logger.js' -import Navigation from '../services/Navigation' export default Vue.extend({ name: 'FilesListHeader', @@ -119,7 +118,6 @@ export default Vue.extend({ computed: { ...mapState(useSortingStore, ['filesSortingConfig']), - /** @return {Navigation} */ currentView() { return this.$navigation.active }, diff --git a/apps/files/src/components/FilesListHeaderActions.vue b/apps/files/src/components/FilesListHeaderActions.vue index 77302b92d6a..5cf0fdbe373 100644 --- a/apps/files/src/components/FilesListHeaderActions.vue +++ b/apps/files/src/components/FilesListHeaderActions.vue @@ -47,9 +47,9 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js' import Vue from 'vue' -import { getFileActions } from '../services/FileAction' -import { useFilesStore } from '../store/files' -import { useSelectionStore } from '../store/selection' +import { getFileActions } from '../services/FileAction.ts' +import { useFilesStore } from '../store/files.ts' +import { useSelectionStore } from '../store/selection.ts' import CustomSvgIconRender from './CustomSvgIconRender.vue' import logger from '../logger.js' diff --git a/apps/files/src/components/FilesListHeaderButton.vue b/apps/files/src/components/FilesListHeaderButton.vue index fc9b7330956..3e034bd608d 100644 --- a/apps/files/src/components/FilesListHeaderButton.vue +++ b/apps/files/src/components/FilesListHeaderButton.vue @@ -40,7 +40,7 @@ import MenuUp from 'vue-material-design-icons/MenuUp.vue' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Vue from 'vue' -import { useSortingStore } from '../store/sorting' +import { useSortingStore } from '../store/sorting.ts' export default Vue.extend({ name: 'FilesListHeaderButton', diff --git a/apps/files/src/components/FilesListNotVirtual.vue b/apps/files/src/components/FilesListNotVirtual.vue deleted file mode 100644 index edfb2bd820a..00000000000 --- a/apps/files/src/components/FilesListNotVirtual.vue +++ /dev/null @@ -1,167 +0,0 @@ -<!-- - - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev> - - - - @author Gary Kim <gary@garykim.dev> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> -<template> - <table class="files-list"> - <!-- Accessibility description --> - <caption class="hidden-visually"> - {{ currentView.caption || '' }} - {{ t('files', 'This list is not fully rendered for performances reasons. The files will be rendered as you navigate through the list.') }} - </caption> - - <!-- Header--> - <thead> - <FilesListHeader :is-size-available="isSizeAvailable" :nodes="nodes" /> - </thead> - - <!-- Body--> - <tbody class="files-list__body"> - <tr v-for="item in nodes" - :key="item.source" - class="files-list__row"> - <FileEntry :active="true" - :is-size-available="isSizeAvailable" - :source="item" /> - </tr> - </tbody> - - <!-- Footer--> - <tfoot> - <FilesListFooter :is-size-available="isSizeAvailable" :nodes="nodes" :summary="summary" /> - </tfoot> - </table> -</template> - -<script lang="ts"> -import { RecycleScroller } from 'vue-virtual-scroller' -import { translate, translatePlural } from '@nextcloud/l10n' -import Vue from 'vue' - -import FileEntry from './FileEntry.vue' -import FilesListHeader from './FilesListHeader.vue' -import FilesListFooter from './FilesListFooter.vue' - -export default Vue.extend({ - name: 'FilesListVirtual', - - components: { - RecycleScroller, - FileEntry, - FilesListHeader, - FilesListFooter, - }, - - props: { - currentView: { - type: Object, - required: true, - }, - nodes: { - type: Array, - required: true, - }, - }, - - data() { - return { - FileEntry, - } - }, - computed: { - files() { - return this.nodes.filter(node => node.type === 'file') - }, - - summaryFile() { - const count = this.files.length - return translatePlural('files', '{count} file', '{count} files', count, { count }) - }, - summaryFolder() { - const count = this.nodes.length - this.files.length - return translatePlural('files', '{count} folder', '{count} folders', count, { count }) - }, - summary() { - return translate('files', '{summaryFile} and {summaryFolder}', this) - }, - isSizeAvailable() { - return this.nodes.some(node => node.attributes.size !== undefined) - }, - }, - - methods: { - getFileId(node) { - return node.attributes.fileid - }, - - t: translate, - }, -}) -</script> - -<style scoped lang="scss"> -.files-list { - --row-height: 55px; - --cell-margin: 14px; - - --checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2); - --checkbox-size: 24px; - --clickable-area: 44px; - --icon-preview-size: 32px; - - display: block; - overflow: auto; - height: 100%; - - &::v-deep { - // Table head, body and footer - tbody, .vue-recycle-scroller__slot { - display: flex; - flex-direction: column; - width: 100%; - // Necessary for virtual scrolling absolute - position: relative; - } - - // Table header - .vue-recycle-scroller__slot[role='thead'] { - // Pinned on top when scrolling - position: sticky; - z-index: 10; - top: 0; - height: var(--row-height); - background-color: var(--color-main-background); - } - - /** - * Common row styling. tr are handled by - * vue-virtual-scroller, so we need to - * have those rules in here. - */ - tr { - display: flex; - align-items: center; - width: 100%; - border-bottom: 1px solid var(--color-border); - } - } -} - -</style> |