Show name on hover

Signed-off-by: Gary Kim <gary@garykim.dev>
nextcloud · May 26, 2021 · 8c84532 · 8c84532
1 parent 4e32771
commit 8c84532
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 61 deletions.
diff --git a/js/dashboard.js b/js/dashboard.js
diff --git a/js/dashboard.js.map b/js/dashboard.js.map
diff --git a/js/main.js b/js/main.js
diff --git a/js/main.js.map b/js/main.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@nextcloud/vue-dashboard": "^1.0.1",
     "babel-eslint": "^10.1.0",
     "nextcloud-server": "^0.15.10",
+    "v-tooltip": "^2.1.3",
     "vue": "^2.6.12",
     "vuex": "^3.6.2"
   },

diff --git a/src/components/RecommendedFile.vue b/src/components/RecommendedFile.vue
@@ -20,7 +20,8 @@
   -->
 
 <template>
-	<a class="recommendation"
+	<a v-tooltip="tooltip"
+		class="recommendation"
 		tabindex="0"
 		@click.prevent="navigate"
 		@keyup.enter.prevent="navigate">
@@ -47,9 +48,13 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
+import { VTooltip } from 'v-tooltip'
 
 export default {
 	name: 'RecommendedFile',
+	directives: {
+		tooltip: VTooltip,
+	},
 	props: {
 		id: {
 			type: String,
@@ -96,6 +101,17 @@ export default {
 		isFileListAvailable() {
 			return OCA.Files.App.fileList.changeDirectory && OCA.Files.App.fileList.scrollTo
 		},
+		path() {
+			return (this.directory === '/' ? '' : this.directory) + '/' + this.name
+		},
+		tooltip() {
+			return {
+				content: this.path,
+				html: false,
+				placement: 'bottom',
+				delay: { show: 500, hide: 0 },
+			}
+		},
 	},
 	mounted() {
 		if (this.hasPreview) {
@@ -123,7 +139,7 @@ export default {
 		},
 		navigate() {
 			if (OCA.Viewer && OCA.Viewer.mimetypes.indexOf(this.mimeType) !== -1) {
-				OCA.Viewer.open(this.directory + '/' + this.name)
+				OCA.Viewer.open(this.path)
 				return
 			}
 			if (this.isFileListAvailable) {