- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
+
+<template>
+ <Fragment>
+ <td class="files-list__row-checkbox">
+ <NcCheckboxRadioSwitch :aria-label="t('files', 'Select the row for {displayName}', { displayName })"
+ :checked.sync="selectedFiles"
+ :value="fileid.toString()"
+ name="selectedFiles" />
+ </td>
+
+ <!-- Link to file -->
+ <td class="files-list__row-name">
+ <a v-bind="linkTo">
+ <!-- Icon or preview -->
+ <span class="files-list__row-icon">
+ <FolderIcon v-if="source.type === 'folder'" />
+
+ <!-- Decorative image, should not be aria documented -->
+ <span v-else-if="previewUrl && !backgroundFailed"
+ ref="previewImg"
+ class="files-list__row-icon-preview"
+ :style="{ backgroundImage }" />
+
+ <span v-else-if="mimeUrl"
+ class="files-list__row-icon-preview files-list__row-icon-preview--mime"
+ :style="{ backgroundImage: mimeUrl }" />
+
+ <FileIcon v-else />
+ </span>
+
+ <!-- File name -->
+ {{ displayName }}
+ </a>
+ </td>
+
+ <!-- Actions -->
+ <td :class="`files-list__row-actions-${uniqueId}`" class="files-list__row-actions">
+ <!-- Inline actions -->
+ <template v-for="action in enabledInlineActions">
+ <CustomElementRender v-if="action.renderInline"
+ :key="action.id"
+ :element="action.renderInline(source, currentView)" />
+ <NcButton v-else
+ :key="action.id"
+ type="tertiary"
+ @click="onActionClick(action)">
+ <template #icon>
+ <NcLoadingIcon v-if="loading === action.id" :size="18" />
+ <CustomSvgIconRender v-else :svg="action.iconSvgInline([source], currentView)" />
+ </template>
+ {{ action.displayName([source], currentView) }}
+ </NcButton>
+ </template>
+
+ <!-- Menu actions -->
+ <NcActions ref="actionsMenu" :force-menu="true">
+ <NcActionButton v-for="action in enabledMenuActions"
+ :key="action.id"
+ :class="'files-list__row-action-' + action.id"
+ @click="onActionClick(action)">
+ <template #icon>
+ <NcLoadingIcon v-if="loading === action.id" :size="18" />
+ <CustomSvgIconRender v-else :svg="action.iconSvgInline([source], currentView)" />
+ </template>
+ {{ action.displayName([source], currentView) }}
+ </NcActionButton>
+ </NcActions>
+ </td>
+
+ <!-- Size -->
+ <th v-if="isSizeAvailable"
+ :style="{ opacity: sizeOpacity }"
+ class="files-list__row-size">
+ <span>{{ size }}</span>
+ </th>
+
+ <!-- View columns -->
+ <td v-for="column in columns"
+ :key="column.id"
+ :class="`files-list__row-${currentView?.id}-${column.id}`"
+ class="files-list__row-column--custom">
+ <CustomElementRender :element="column.render(source)" />
+ </td>
+ </Fragment>
+</template>
+
<script lang='ts'>
import { debounce } from 'debounce'
-import { Folder, File } from '@nextcloud/files'
+import { Folder, File, getFileActions, formatFileSize } from '@nextcloud/files'
import { Fragment } from 'vue-fragment'
import { join } from 'path'
import { loadState } from '@nextcloud/initial-state'
import FolderIcon from 'vue-material-design-icons/Folder.vue'
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import TrashCan from 'vue-material-design-icons/TrashCan.vue'
-import Vue from 'vue'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import Vue, { CreateElement } from 'vue'
+import { showError } from '@nextcloud/dialogs'
import { useFilesStore } from '../store/files'
import { useSelectionStore } from '../store/selection'
import CustomElementRender from './CustomElementRender.vue'
+import CustomSvgIconRender from './CustomSvgIconRender.vue'
import logger from '../logger.js'
// TODO: move to store
// The preview service worker cache name (see webpack config)
const SWCacheName = 'previews'
+// The registered actions list
+const actions = getFileActions()
+
export default Vue.extend({
name: 'FileEntry',
components: {
CustomElementRender,
+ CustomSvgIconRender,
FileIcon,
FolderIcon,
Fragment,
NcActionButton,
NcActions,
+ NcButton,
NcCheckboxRadioSwitch,
- Pencil,
- TrashCan,
+ NcLoadingIcon,
},
props: {
+ isSizeAvailable: {
+ type: Boolean,
+ default: false,
+ },
source: {
- type: [File, Folder],
+ type: Object,
required: true,
},
},
data() {
return {
- userConfig,
- backgroundImage: '',
backgroundFailed: false,
+ backgroundImage: '',
+ loading: '',
+ userConfig,
}
},
return this.source.attributes.displayName
|| this.source.basename
},
+ size() {
+ const size = parseInt(this.source.size, 10) || 0
+ if (!size || size < 0) {
+ return this.t('files', 'Pending')
+ }
+ return formatFileSize(size, true)
+ },
+
+ sizeOpacity() {
+ const size = parseInt(this.source.size, 10) || 0
+ if (!size || size < 0) {
+ return 1
+ }
+
+ // Whatever theme is active, the contrast will pass WCAG AA
+ // with color main text over main background and an opacity of 0.7
+ const minOpacity = 0.7
+ const maxOpacitySize = 10 * 1024 * 1024
+ return minOpacity + (1 - minOpacity) * Math.pow((this.source.size / maxOpacitySize), 2)
+ },
linkTo() {
if (this.source.type === 'folder') {
return this.selectionStore.selected
},
set(selection) {
- logger.debug('Added node to selection', { selection })
+ logger.debug('Changed nodes selection', { selection })
this.selectionStore.set(selection)
},
},
}
return ''
},
+
+ enabledActions() {
+ return actions
+ .filter(action => !action.enabled || action.enabled([this.source], this.currentView))
+ .sort((a, b) => (a.order || 0) - (b.order || 0))
+ },
+
+ enabledMenuActions() {
+ return actions
+ .filter(action => !action.inline)
+ },
+
+ enabledInlineActions() {
+ return this.enabledActions.filter(action => action?.inline?.(this.source, this.currentView))
+ },
+
+ uniqueId() {
+ return this.hashCode(this.source.source)
+ },
},
watch: {
+ /**
+ * When the source changes, reset the preview
+ * and fetch the new one.
+ */
source() {
- this.resetPreview()
+ this.resetState()
this.debounceIfNotCached()
},
},
+ /**
+ * The row is mounted once and reused as we scroll.
+ */
mounted() {
// Init the debounce function on mount and
// not when the module is imported ⚠
this.debounceIfNotCached()
},
+ beforeDestroy() {
+ this.resetState()
+ },
+
methods: {
/**
* Get a cached note from the store
this.debounceGetPreview()
},
- fetchAndApplyPreview() {
+ fetchAndApplyPreview() {
logger.debug('Fetching preview', { fileId: this.source.attributes.fileid })
this.img = new Image()
this.img.onload = () => {
this.img.src = this.previewUrl
},
- resetPreview() {
+ resetState() {
+ // Reset loading state
+ this.loading = ''
+
// Reset the preview
this.backgroundImage = ''
this.backgroundFailed = false
this.img.src = ''
delete this.img
}
+
+ // Close menu
+ this.$refs.actionsMenu.closeMenu()
},
isCachedPreview(previewUrl) {
})
},
- t: translate,
- },
-
- /**
- * While a bit more complex, this component is pretty straightforward.
- * For performance reasons, we're using a render function instead of a template.
- */
- render(createElement) {
- // Checkbox
- const checkbox = createElement('td', {
- staticClass: 'files-list__row-checkbox',
- }, [createElement('NcCheckboxRadioSwitch', {
- attrs: {
- 'aria-label': this.t('files', 'Select the row for {displayName}', {
- displayName: this.displayName,
- }),
- checked: this.selectedFiles,
- value: this.fileid.toString(),
- name: 'selectedFiles',
- },
- on: {
- 'update:checked': ($event) => {
- this.selectedFiles = $event
- },
- },
- })])
-
- // Icon
- const iconContent = () => {
- // Folder icon
- if (this.source.type === 'folder') {
- return createElement('FolderIcon')
+ hashCode(str) {
+ let hash = 0
+ for (let i = 0, len = str.length; i < len; i++) {
+ const chr = str.charCodeAt(i)
+ hash = (hash << 5) - hash + chr
+ hash |= 0 // Convert to 32bit integer
}
- // Render cached preview or fallback to mime icon if defined
- const renderPreview = this.previewUrl && !this.backgroundFailed
- if (renderPreview || this.mimeUrl) {
- return createElement('span', {
- ref: 'previewImg',
- class: {
- 'files-list__row-icon-preview': true,
- 'files-list__row-icon-preview--mime': !renderPreview,
- },
- style: {
- backgroundImage: renderPreview
- ? this.backgroundImage
- : this.mimeUrl,
- },
- })
+ return hash
+ },
+
+ async onActionClick(action) {
+ const displayName = action.displayName([this.source], this.currentView)
+ try {
+ this.loading = action.id
+ await action.exec(this.source, this.currentView)
+ } catch (e) {
+ logger.error('Error while executing action', { action, e })
+ showError(this.t('files', 'Error while executing action "{displayName}"', { displayName }))
+ } finally {
+ this.loading = ''
}
- // Empty file icon
- return createElement('FileIcon')
- }
- const icon = createElement('td', {
- staticClass: 'files-list__row-icon',
- }, [iconContent()])
-
- // Name
- const name = createElement('td', {
- staticClass: 'files-list__row-name',
- }, [
- createElement(this.linkTo?.is || 'a', {
- attrs: this.linkTo,
- }, this.displayName),
- ])
-
- // Actions
- const actions = createElement('td', {
- staticClass: 'files-list__row-actions',
- }, [createElement('NcActions', [
- createElement('NcActionButton', [
- this.t('files', 'Rename'),
- createElement('Pencil', {
- slot: 'icon',
- }),
- ]),
- createElement('NcActionButton', [
- this.t('files', 'Delete'),
- createElement('TrashCan', {
- slot: 'icon',
- }),
- ]),
- ])])
-
- // Columns
- const columns = this.columns.map(column => {
- return createElement('td', {
- class: {
- [`files-list__row-${this.currentView?.id}-${column.id}`]: true,
- 'files-list__row-column--custom': true,
- },
- key: column.id,
- }, [createElement('CustomElementRender', {
- props: {
- element: column.render(this.source),
- },
- })])
- })
-
- return createElement('Fragment', [
- checkbox,
- icon,
- name,
- actions,
- ...columns,
- ])
+ },
+
+ t: translate,
+ formatFileSize,
},
})
</script>
td, th {
display: flex;
align-items: center;
- flex: 0 0 var(--row-height);
- justify-content: center;
+ flex: 0 0 auto;
+ justify-content: left;
width: var(--row-height);
height: var(--row-height);
+ margin: 0;
padding: 0;
+ color: var(--color-text-maxcontrast);
border: none;
+
+ span {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
}
.files-list__row {
}
.files-list__row-checkbox {
- width: var(--row-height);
+ justify-content: center;
&::v-deep .checkbox-radio-switch {
display: flex;
justify-content: center;
}
.files-list__row-icon {
- flex: 0 0 var(--icon-preview-size);
- justify-content: left;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--icon-preview-size);
+ height: 100%;
// Show same padding as the checkbox right padding for visual balance
margin-right: var(--checkbox-padding);
color: var(--color-primary-element);
}
&-preview {
+ overflow: hidden;
width: var(--icon-preview-size);
height: var(--icon-preview-size);
+ border-radius: var(--border-radius);
+ background-repeat: no-repeat;
// Center and contain the preview
background-position: center;
- background-repeat: no-repeat;
background-size: contain;
- border-radius: var(--border-radius);
- overflow: hidden;
}
}
.files-list__row-name {
- flex: 1 1 100%;
- justify-content: left;
+ // Prevent link from overflowing
+ overflow: hidden;
+ // Take as much space as possible
+ flex: 1 1 auto;
+
+ a {
+ display: flex;
+ align-items: center;
+ // Fill cell height and width
+ width: 100%;
+ height: 100%;
+ }
}
-.files-list__row-column--custom {
- overflow: hidden;
- flex: 1 1 calc(var(--row-height) * 3);
+.files-list__row-actions {
width: auto;
- min-width: var(--row-height);
- justify-content: normal;
+
+ & ~ td,
+ & ~ th {
+ // Add margin to all cells after the actions
+ margin: 0 var(--cell-margin);
+ }
+}
+
+.files-list__row-size {
+ justify-content: right;
+ width: calc(var(--row-height) * 1.5);
+ // opacity varies with the size
+ color: var(--color-main-text);
+}
+
+.files-list__row-column--custom {
+ width: calc(var(--row-height) * 2);
}
projects / nextcloud-server.git / commitdiff