fix(files_trashbin): previews crop support

Signed-off-by: John Molakvoæ <[email protected]>

apps/files/src/components/BreadCrumbs.vue

@@ -4,7 +4,8 @@
 		<NcBreadcrumb v-for="section in sections"
 			:key="section.dir"
 			:aria-label="t('files', `Go to the '{dir}' directory`, section)"
-			v-bind="section" />
+			v-bind="section"
+			@click="onClick(section.to)" />
 	</NcBreadcrumbs>
 </template>
 
@@ -32,7 +33,9 @@ export default Vue.extend({
 	computed: {
 		dirs() {
 			const cumulativePath = (acc) => (value) => (acc += `${value}/`)
-			return ['/', ...this.path.split('/').filter(Boolean).map(cumulativePath('/'))]
+			const paths = this.path.split('/').filter(Boolean).map(cumulativePath('/'))
+			// Strip away trailing slash
+			return ['/', ...paths.map(path => path.replace(/^(.+)\/$/, '$1'))]
 		},
 
 		sections() {
@@ -46,6 +49,15 @@ export default Vue.extend({
 			})
 		},
 	},
+
+	methods: {
+		onClick(to) {
+			debugger
+			if (to?.query?.dir === this.$route.query.dir) {
+				alert('You are already here!')
+			}
+		},
+	},
 })
 </script>
 
@@ -54,6 +66,10 @@ export default Vue.extend({
 	// Take as much space as possible
 	flex: 1 1 100% !important;
 	width: 100%;
+
+	::v-deep a {
+		cursor: pointer !important;
+	}
 }
 
 </style>

apps/files/src/components/FileEntry.vue

@@ -31,6 +31,10 @@
 		<!-- Icon or preview -->
 		<td class="files-list__row-icon">
 			<FolderIcon v-if="source.type === 'folder'" />
+			<!-- Decorative image, should not be aria documented -->
+			<span v-else-if="previewUrl"
+				:style="{ backgroundImage: `url('${previewUrl}')` }"
+				class="files-list__row-icon-preview" />
 		</td>
 
 		<!-- Link to file and -->
@@ -39,6 +43,20 @@
 				{{ displayName }}
 			</a>
 		</td>
+
+		<!-- Actions -->
+		<td class="files-list__row-actions">
+			<NcActions>
+				<NcActionButton>
+					{{ t('files', 'Rename') }}
+					<Pencil slot="icon" />
+				</NcActionButton>
+				<NcActionButton>
+					{{ t('files', 'Delete') }}
+					<TrashCan slot="icon" />
+				</NcActionButton>
+			</NcActions>
+		</td>
 	</Fragment>
 </template>
 
@@ -48,20 +66,33 @@ import { Fragment } from 'vue-fragment'
 import { join } from 'path'
 import { translate } from '@nextcloud/l10n'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import TrashCan from 'vue-material-design-icons/TrashCan.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Vue from 'vue'
 
 import logger from '../logger'
 import { useSelectionStore } from '../store/selection'
 import { useFilesStore } from '../store/files'
+import { loadState } from '@nextcloud/initial-state'
+
+// TODO: move to store
+// TODO: watch 'files:config:updated' event
+const userConfig = loadState('files', 'config', {})
 
 export default Vue.extend({
 	name: 'FileEntry',
 
 	components: {
 		FolderIcon,
 		Fragment,
+		NcActionButton,
+		NcActions,
 		NcCheckboxRadioSwitch,
+		Pencil,
+		TrashCan,
 	},
 
 	props: {
@@ -84,6 +115,12 @@ export default Vue.extend({
 		}
 	},
 
+	data() {
+		return {
+			userConfig,
+		}
+	},
+
 	computed: {
 		dir() {
 			// Remove any trailing slash but leave root slash
@@ -123,6 +160,17 @@ export default Vue.extend({
 				this.selectionStore.set(selection)
 			},
 		},
+
+		previewUrl() {
+			try {
+				const url = new URL(window.location.origin + this.source.attributes.previewUrl)
+				const cropping = this.userConfig?.crop_image_previews === true
+				url.searchParams.set('a', cropping ? '1' : '0')
+				return url.href
+			} catch (e) {
+				return null
+			}
+		},
 	},
 
 	methods: {

apps/files/src/components/FilesListHeader.vue

@@ -32,6 +32,9 @@
 		<th class="files-list__row-name">
 			{{ t('files', 'Name') }}
 		</th>
+
+		<!-- Actions -->
+		<th class="files-list__row-actions" />
 	</tr>
 </template>
 

apps/files/src/components/FilesListVirtual.vue

@@ -125,7 +125,9 @@ export default Vue.extend({
 			background-color: var(--color-main-background);
 		}
 
-		thead, .files-list__row {
+		tr {
+			display: flex;
+			align-items: center;
 			border-bottom: 1px solid var(--color-border);
 		}
 	}

apps/files/src/mixins/fileslist-row.scss

@@ -20,25 +20,29 @@
  *
  */
 td, th {
+	display: flex;
+	align-items: center;
+	flex: 0 0 var(--row-height);
+	justify-content: center;
+	width: var(--row-height);
 	height: var(--row-height);
-	vertical-align: middle;
-	padding: 0px;
+	padding: 0;
 	border: none;
 }
 
 .files-list__row-checkbox {
 	width: var(--row-height);
 	&::v-deep .checkbox-radio-switch {
-		--icon-size: var(--checkbox-size);
-
 		display: flex;
 		justify-content: center;
 
+		--icon-size: var(--checkbox-size);
+
 		label.checkbox-radio-switch__label {
-			margin: 0;
-			height: var(--clickable-area);
 			width: var(--clickable-area);
-			padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2)
+			height: var(--clickable-area);
+			margin: 0;
+			padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
 		}
 
 		.checkbox-radio-switch__icon {
@@ -48,16 +52,34 @@ td, th {
 }
 
 .files-list__row-icon {
-	// Remove left padding to look nicer with the checkbox
-	// => ico preview size + one checkbox td padding
-	width: calc(var(--icon-preview-size) + var(--checkbox-padding));
-	padding-right: var(--checkbox-padding);
+	flex: 0 0 var(--icon-preview-size);
+	justify-content: left;
+	// Show same padding as the checkbox right padding for visual balance
+	margin-right: var(--checkbox-padding);
 	color: var(--color-primary-element);
+
 	& > span {
 		justify-content: flex-start;
 	}
+
 	&::v-deep svg {
 		width: var(--icon-preview-size);
 		height: var(--icon-preview-size);
 	}
+
+	&-preview {
+		width: var(--icon-preview-size);
+		height: var(--icon-preview-size);
+		// 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;
 }

apps/files_trashbin/lib/Controller/PreviewController.php

@@ -89,8 +89,9 @@ public function __construct(
 	 */
 	public function getPreview(
 		int $fileId = -1,
-		int $x = 128,
-		int $y = 128
+		int $x = 32,
+		int $y = 32,
+		bool $a = false,
 	) {
 		if ($fileId === -1 || $x === 0 || $y === 0) {
 			return new DataResponse([], Http::STATUS_BAD_REQUEST);
@@ -118,7 +119,7 @@ public function getPreview(
 				$mimeType = $this->mimeTypeDetector->detectPath($file->getName());
 			}
 
-			$f = $this->previewManager->getPreview($file, $x, $y, true, IPreview::MODE_FILL, $mimeType);
+			$f = $this->previewManager->getPreview($file, $x, $y, $a, IPreview::MODE_FILL, $mimeType);
 			$response = new Http\FileDisplayResponse($f, Http::STATUS_OK, ['Content-Type' => $f->getMimeType()]);
 
 			// Cache previews for 24H

apps/files_trashbin/src/services/trashbin.ts

@@ -22,7 +22,7 @@
 /* eslint-disable */
 import { getCurrentUser } from '@nextcloud/auth'
 import { File, Folder, parseWebdavPermissions } from '@nextcloud/files'
-import { generateRemoteUrl } from '@nextcloud/router'
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 
 import type { FileStat, ResponseDataDetailed } from 'webdav'
 import type { ContentsWithRoot } from '../../../files/src/services/Navigation'
@@ -49,9 +49,11 @@ const data = `<?xml version="1.0"?>
 	</d:prop>
 </d:propfind>`
 
+
 const resultToNode = function(node: FileStat): File | Folder {
 	const permissions = parseWebdavPermissions(node.props?.permissions)
 	const owner = getCurrentUser()?.uid as string
+	const previewUrl = generateUrl('/apps/files_trashbin/preview?fileId={fileid}', node.props)
 
 	const nodeData = {
 		id: node.props?.fileid as number || 0,
@@ -67,6 +69,7 @@ const resultToNode = function(node: FileStat): File | Folder {
 			...node.props,
 			// Override displayed name on the list
 			displayName: node.props?.['trashbin-filename'],
+			previewUrl,
 		},
 	}