fix(files_trashbin): previews crop support

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

1 files changed, 48 insertions, 0 deletions

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: {