Implement file reference wiget

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/files/src/reference-files.js

@@ -0,0 +1,35 @@
+/*
+ * @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @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/>.
+ */
+
+import { registerWidget } from '@nextcloud/vue-richtext'
+
+import FileWidget from './views/ReferenceFileWidget.vue'
+
+registerWidget('file', (el, { richObjectType, richObject, accessible }) => {
+	const Widget = Vue.extend(FileWidget)
+	new Widget({
+		propsData: {
+			richObjectType,
+			richObject,
+			accessible,
+		},
+	}).$mount(el)
+})

apps/files/src/views/ReferenceFileWidget.vue

@@ -0,0 +1,149 @@
+<!--
+  - @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<div v-if="!accessible" class="widget-file widget-file--no-access">
+		<div class="widget-file--image widget-file--image--icon icon-folder" />
+		<div class="widget-file--details">
+			<p class="widget-file--title">
+				File can't be accessed
+			</p>
+			<p class="widget-file--description">
+				You might not have have permissions to view it, ask the sender to share it
+			</p>
+		</div>
+	</div>
+	<div v-else class="widget-file">
+		<div class="widget-file--image" :class="filePreviewClass" :style="filePreview" />
+		<div class="widget-file--details">
+			<p class="widget-file--title">
+				{{ richObject.name }}
+			</p>
+			<p class="widget-file--description">
+				{{ fileSize }} {{ fileMtime }}
+			</p>
+		</div>
+		<div class="widget-file--actions">
+			<button class="icon-more" />
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'ReferenceFileWidget',
+	props: {
+		richObject: {
+			type: Object,
+			required: true,
+		},
+		accessible: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		fileSize() {
+			return window.OC.Util.humanFileSize(this.richObject.size)
+		},
+		filePreview() {
+			if (this.richObject.hasPreview) {
+				/* return {
+					backgroundImage: 'url(' + this.richObject.preview + ')'
+				} */
+			}
+			return {
+				backgroundImage: 'url(' + window.OC.MimeType.getIconUrl(this.richObject.mimetype) + ')'
+			}
+
+		},
+		filePreviewClass() {
+			if (this.richObject.hasPreview) {
+				return 'widget-file--image--preview'
+			}
+			return 'widget-file--image--icon'
+
+		},
+	},
+	methods: {
+		openViewer() {
+			window.OCA.Viewer.open({ path: this.richObject.path })
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+.widget-file {
+	display: flex;
+
+	&--image {
+		width: 40%;
+		background-position: center;
+		background-size: cover;
+		background-repeat: no-repeat;
+
+		&.widget-file--image--icon {
+			width: 88px;
+			background-size: 44px;
+		}
+	}
+
+	&--title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: bold;
+	}
+
+	&--details {
+		padding: 12px;
+		width: 60%;
+
+		p {
+			margin: 0;
+			padding: 0;
+		}
+	}
+
+	&--description {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+	&--link a {
+		color: var(--color-text-maxcontrast);
+	}
+
+	&.widget-file--no-access {
+		padding: 12px;
+
+		.widget-file--details {
+			padding: 0;
+		}
+	}
+}
+</style>

lib/public/RichObjectStrings/Definitions.php

@@ -347,6 +347,12 @@ class Definitions {
 					'description' => 'Whether or not a preview is available. If `no` the mimetype icon should be used',
 					'example' => 'yes',
 				],
+				'mtime' => [
+					'since' => '25.0.0',
+					'required' => false,
+					'description' => 'The mtime of the file/folder as unix timestamp',
+					'example' => '1661854213',
+				],
 			],
 		],
 		'forms-form' => [

package.json

@@ -48,6 +48,7 @@
     "@nextcloud/sharing": "^0.1.0",
     "@nextcloud/vue": "^6.0.0-beta.4",
     "@nextcloud/vue-dashboard": "^2.0.1",
+    "@nextcloud/vue-richtext": "^2.0.0-dev.1",
     "@vue/cli-plugin-unit-jest": "^4.5.15",
     "autosize": "^5.0.1",
     "backbone": "^1.4.1",

webpack.modules.js

@@ -50,6 +50,7 @@ module.exports = {
 		sidebar: path.join(__dirname, 'apps/files/src', 'sidebar.js'),
 		main: path.join(__dirname, 'apps/files/src', 'main.js'),
 		'personal-settings': path.join(__dirname, 'apps/files/src', 'main-personal-settings.js'),
+		'reference-files': path.join(__dirname, 'apps/files/src', 'reference-files.js'),
 	},
 	files_sharing: {
 		additionalScripts: path.join(__dirname, 'apps/files_sharing/src', 'additionalScripts.js'),