fix(FilePicker): Do not show checkboxes on single select mode

Selected file is only displayed by background color and checkboxes are hidden if `multiselect` is `false`.

Signed-off-by: Ferdinand Thiessen <[email protected]>

lib/components/FilePicker/FileList.vue

@@ -3,11 +3,11 @@
 		<table>
 			<thead>
 				<tr>
-					<th class="row-checkbox">
+					<th class="row-checkbox" v-if="multiselect">
 						<span class="hidden-visually">
 							{{ t('Select entry') }}
 						</span>
-						<NcCheckboxRadioSwitch v-if="props.multiselect" :aria-label="t('Select all entries')" :checked="allSelected" @update:checked="onSelectAll" />
+						<NcCheckboxRadioSwitch v-if="multiselect" :aria-label="t('Select all entries')" :checked="allSelected" @update:checked="onSelectAll" />
 					</th>
 					<th :aria-sort="sortByName" class="row-name">
 						<NcButton :wide="true" type="tertiary" @click="toggleSortByName">
@@ -49,6 +49,7 @@
 					<FileListRow v-for="file in sortedFiles"
 						:key="file.fileid || file.path"
 						:allow-pick-directory="allowPickDirectory"
+						:show-checkbox="multiselect"
 						:can-pick="multiselect || selectedFiles.length === 0 || selectedFiles.includes(file)"
 						:selected="selectedFiles.includes(file)"
 						:node="file"
@@ -156,11 +157,16 @@ function onSelectAll() {
 	}
 }
 
-function onNodeSelected(file: Node){
+function onNodeSelected(file: Node) {
 	if (props.selectedFiles.includes(file)) {
 		emit('update:selectedFiles', props.selectedFiles.filter((f) => f.path !== file.path))
 	} else {
-		emit('update:selectedFiles', [...props.selectedFiles, file])
+		if (props.multiselect) {
+			emit('update:selectedFiles', [...props.selectedFiles, file])
+		} else {
+			// no multi select so only this file is selected
+			emit('update:selectedFiles', [file])
+		}
 	}
 }
 

lib/components/FilePicker/FileListRow.vue

@@ -1,8 +1,10 @@
 <template>
 	<tr tabindex="0"
-		class="file-picker__row"
+		:class="['file-picker__row', {
+			'file-picker__row--selected': selected && !showCheckbox
+		}]"
 		@key-down="handleKeyDown">
-		<td class="row-checkbox">
+		<td v-if="showCheckbox" class="row-checkbox">
 			<NcCheckboxRadioSwitch :disabled="!isPickable"
 				:checked="selected"
 				:aria-label="t('Select the row for {nodename}', { nodename: displayName })"
@@ -33,6 +35,8 @@ const props = defineProps<{
 	allowPickDirectory: boolean
 	/** Is this node currently selected */
 	selected: boolean
+	/** Whether to show the checkbox in first column */
+	showCheckbox: boolean
 	/** Whether the node can be picked */
 	canPick: boolean
 	/** The current node */
@@ -94,6 +98,15 @@ function handleKeyDown(event: KeyboardEvent) {
 @use './FileList.scss';
 
 .file-picker {
+	&__row {
+		&--selected {
+			background-color: var(--color-background-dark);
+		}
+		&:hover {
+			background-color: var(--color-background-hover);
+		}
+	}
+
 	&__name-container {
 		display: flex;
 		justify-content: start;