Skip to content

Commit

Permalink
feat(FilePicker): Always show file extension as a trailing text part
Browse files Browse the repository at this point in the history
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Aug 23, 2023
1 parent c761e33 commit 6c84835
Showing 1 changed file with 13 additions and 2 deletions.
15 changes: 13 additions & 2 deletions lib/components/FilePicker/FileListRow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>

0 comments on commit 6c84835

Please sign in to comment.