fix(Albums): Consistent (aria-)label and make icon only on small devices

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 16 insertions, 5 deletions

diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 70fa5629..2c5463c4 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -31,12 +31,14 @@
 				:title="t('photos', 'Albums')"
 				:root-title="t('photos', 'Albums')"
 				@refresh="fetchAlbums">
-				<NcButton :aria-label="t('photos', 'Create a new album.')"
+				<NcButton :aria-label="isMobile ? t('photos', 'New album') : undefined"
 					@click="showAlbumCreationForm = true">
 					<template #icon>
-						<Plus />
+						<Plus :size="20" />
+					</template>
+					<template v-if="!isMobile" #default>
+						{{ t('photos', 'New album') }}
 					</template>
-					{{ t('photos', 'New album') }}
 				</NcButton>
 			</HeaderNavigation>
 
@@ -61,7 +63,9 @@
 
 		<NcModal v-if="showAlbumCreationForm"
 			@close="showAlbumCreationForm = false">
-			<h2 class="album-creation__heading">{{ t('photos', 'New album') }}</h2>
+			<h2 class="album-creation__heading">
+				{{ t('photos', 'New album') }}
+			</h2>
 			<AlbumForm @done="handleAlbumCreated" />
 		</NcModal>
 	</div>
@@ -72,7 +76,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 
 import { generateUrl } from '@nextcloud/router'
-import { NcModal, NcButton, NcEmptyContent } from '@nextcloud/vue'
+import { NcModal, NcButton, NcEmptyContent, useIsSmallMobile } from '@nextcloud/vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -113,6 +117,13 @@ export default {
 		FetchCollectionsMixin,
 	],
 
+	setup() {
+		const isMobile = useIsSmallMobile()
+		return {
+			isMobile,
+		}
+	},
+
 	data() {
 		return {
 			showAlbumCreationForm: false,