Merge pull request #1921 from nextcloud/artonge/backport/stable27/1895

[stable27] Add unselect all

src/components/Collection/CollectionContent.vue

@@ -32,7 +32,10 @@
 
 	<div v-else class="collection">
 		<!-- Header -->
-		<slot class="collection__header" name="header" :selected-file-ids="selectedFileIds" />
+		<slot class="collection__header"
+			name="header"
+			:selected-file-ids="selectedFileIds"
+			:reset-selection="resetSelection" />
 
 		<!-- No content -->
 		<slot v-if="collectionFileIds.length === 0 && !loading" name="empty-content" />
@@ -46,7 +49,7 @@
 			:loading="loading">
 			<File slot-scope="{file, distance}"
 				:file="files[file.id]"
-				:allow-selection="true"
+				:allow-selection="allowSelection"
 				:selected="selection[file.id] === true"
 				:distance="distance"
 				@click="openViewer"
@@ -99,6 +102,11 @@ export default {
 			default: false,
 		},
 
+		allowSelection: {
+			type: Boolean,
+			default: true,
+		},
+
 		error: {
 			type: [Error, Number],
 			default: null,

src/views/AlbumContent.vue

@@ -30,7 +30,7 @@
 			<!-- Header -->
 			<HeaderNavigation key="navigation"
 				slot="header"
-				slot-scope="{selectedFileIds}"
+				slot-scope="{selectedFileIds, resetSelection}"
 				:class="{'photos-navigation--uploading': uploader.queue?.length > 0}"
 				:loading="loadingFiles"
 				:params="{ albumName }"
@@ -40,8 +40,19 @@
 				<div v-if="album.location !== ''" slot="subtitle" class="album__location">
 					<MapMarker />{{ album.location }}
 				</div>
-				<template v-if="album !== undefined"
-					slot="right">
+
+				<template slot="default">
+					<NcButton v-if="selectedFileIds.length > 0"
+						:aria-label="t('photos', 'Unselect all')"
+						@click="resetSelection">
+						<template #icon>
+							<Close />
+						</template>
+						{{ t('photos', 'Unselect all') }}
+					</NcButton>
+				</template>
+
+				<template v-if="album !== undefined" slot="right">
 					<UploadPicker v-if="album.nbItems !== 0"
 						:accept="allowedMimes"
 						:context="uploadContext"

src/views/PlaceContent.vue

@@ -24,6 +24,7 @@
 		<CollectionContent ref="collectionContent"
 			:collection="place"
 			:collection-file-ids="placeFileIds"
+			:allow-selection="false"
 			:loading="loadingCollection || loadingCollectionFiles"
 			:error="errorFetchingCollection || errorFetchingCollectionFiles">
 			<!-- Header -->

src/views/PublicAlbumContent.vue

@@ -25,6 +25,7 @@
 		<CollectionContent ref="collectionContent"
 			:collection="album"
 			:collection-file-ids="albumFileIds"
+			:allow-selection="false"
 			:loading="loadingAlbum || loadingFiles"
 			:error="errorFetchingAlbum || errorFetchingFiles">
 			<!-- Header -->

src/views/SharedAlbumContent.vue

@@ -30,7 +30,7 @@
 			<!-- Header -->
 			<HeaderNavigation key="navigation"
 				slot="header"
-				slot-scope="{selectedFileIds}"
+				slot-scope="{selectedFileIds, resetSelection}"
 				:loading="loadingFiles"
 				:params="{ albumName }"
 				:path="'/' + albumName"
@@ -44,6 +44,18 @@
 				<div v-if="album.location !== ''" slot="subtitle" class="album__location">
 					<MapMarker />{{ album.location }} ⸱ {{ t('photos', 'Shared by') }}&nbsp;<NcUserBubble :display-name="album.collaborators[0].label" :user="album.collaborators[0].id" />
 				</div>
+
+				<template slot="default">
+					<NcButton v-if="selectedFileIds.length > 0"
+						:aria-label="t('photos', 'Unselect all')"
+						@click="resetSelection">
+						<template #icon>
+							<Close />
+						</template>
+						{{ t('photos', 'Unselect all') }}
+					</NcButton>
+				</template>
+
 				<template v-if="album !== undefined" slot="right">
 					<NcButton v-if="album.nbItems !== 0"
 						type="tertiary"

src/views/Timeline.vue

@@ -39,15 +39,18 @@
 			<div class="timeline__header__left">
 				<!-- TODO: UploadPicker -->
 				<NcActions v-if="selectedFileIds.length === 0"
-					:force-title="true"
 					:force-menu="true"
 					:menu-title="t('photos', 'Add')">
-					<Plus slot="icon" />
+					<template #icon>
+						<Plus />
+					</template>
 					<NcActionButton :close-after-click="true"
 						:aria-label="t('photos', 'Create a new album')"
 						@click="showAlbumCreationForm = true">
 						{{ t('photos', 'Create new album') }}
-						<PlusBoxMultiple slot="icon" />
+						<template #icon>
+							<PlusBoxMultiple />
+						</template>
 					</NcActionButton>
 				</NcActions>
 
@@ -57,11 +60,20 @@
 						:aria-label="t('photos', 'Add selection to an album')"
 						@click="showAlbumPicker = true">
 						<template #icon>
-							<Plus slot="icon" />
+							<Plus />
 						</template>
 						{{ t('photos', 'Add to album') }}
 					</NcButton>
 
+					<NcButton v-if="selectedFileIds.length > 0"
+						:aria-label="t('photos', 'Unselect all')"
+						@click="resetSelection">
+						<template #icon>
+							<Close />
+						</template>
+						{{ t('photos', 'Unselect all') }}
+					</NcButton>
+
 					<NcActions :aria-label="t('photos', 'Open actions menu')">
 						<ActionDownload :selected-file-ids="selectedFileIds" :title="t('photos', 'Download selected files')">
 							<Download slot="icon" />
@@ -73,7 +85,9 @@
 							:aria-label="t('photos', 'Delete selection')"
 							@click="deleteSelection">
 							{{ t('photos', 'Delete selection') }}
-							<Delete slot="icon" />
+							<template #icon>
+								<Delete />
+							</template>
 						</NcActionButton>
 					</NcActions>
 				</template>
@@ -130,6 +144,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import PlusBoxMultiple from 'vue-material-design-icons/PlusBoxMultiple.vue'
 import Download from 'vue-material-design-icons/Download.vue'
+import Close from 'vue-material-design-icons/Close.vue'
 
 import { NcModal, NcActions, NcActionButton, NcButton, NcEmptyContent, isMobile } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
@@ -153,6 +168,7 @@ export default {
 		Delete,
 		PlusBoxMultiple,
 		Download,
+		Close,
 		Plus,
 		NcEmptyContent,
 		NcModal,
@@ -279,6 +295,7 @@ export default {
 	&__header {
 		&__left {
 			display: flex;
+			gap: 4px;
 		}
 	}