fix(files_trashbin): previews crop support

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

5 files changed, 105 insertions, 14 deletions

diff --git a/apps/files/src/components/BreadCrumbs.vue b/apps/files/src/components/BreadCrumbs.vue
index 7d7ebc7f1b3..8da486392f5 100644
--- a/apps/files/src/components/BreadCrumbs.vue
+++ b/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>
diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 204976061df..9f1df025e1f 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/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,12 +66,21 @@ 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',
@@ -61,7 +88,11 @@ export default Vue.extend({
 	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: {
diff --git a/apps/files/src/components/FilesListHeader.vue b/apps/files/src/components/FilesListHeader.vue
index c5593b90dfd..8376a30d55c 100644
--- a/apps/files/src/components/FilesListHeader.vue
+++ b/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>
 
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 081875ecf0d..8193c3bed1b 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/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);
 		}
 	}
diff --git a/apps/files/src/mixins/fileslist-row.scss b/apps/files/src/mixins/fileslist-row.scss
index 9b0c3197b76..9ebd8f00b36 100644
--- a/apps/files/src/mixins/fileslist-row.scss
+++ b/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;
 }