Merge pull request #933 from nextcloud-libraries/backport/2c33eb2e479…

…40b6342222475a9410da698453d60 [stable4] feat(FilePicker): Always show file extension as a trailing text part
nextcloud-libraries · Aug 23, 2023 · a107996 · a107996
2 parents c761e33 + e52f21d
commit a107996
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -90,7 +90,7 @@ msgstr ""
 msgid "Undo"
 msgstr ""
 
-#: lib/components/FilePicker/FileListRow.vue:22
+#: lib/components/FilePicker/FileListRow.vue:23
 msgid "Unset"
 msgstr ""
 

diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue
@@ -12,6 +12,7 @@
 			<div class="file-picker__name-container">
 				<div class="file-picker__file-icon" :style="{ backgroundImage }" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
+				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
 		</td>
 		<td class="row-size">
@@ -50,9 +51,14 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The displayname of the current node
+ * The displayname of the current node (excluding file extension)
  */
-const displayName = computed(() => props.node.attributes?.displayname || props.node.basename)
+const displayName = computed(() => props.node.attributes?.displayName || props.node.basename.slice(0, props.node.extension ? -props.node.extension.length : undefined))
+
+/**
+ * The file extension of the file
+ */
+const fileExtension = computed(() => props.node.extension)
 
 /**
  * If this node can be picked, basically just check if picking a directory is allowed
@@ -119,5 +125,10 @@ function handleKeyDown(event: KeyboardEvent) {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	&__file-extension {
+		color: var(--color-text-maxcontrast);
+		min-width: fit-content;
+	}
 }
 </style>