diff options
author | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-01-26 17:47:38 +0100 |
---|---|---|
committer | Ferdinand Thiessen <opensource@fthiessen.de> | 2024-01-26 18:05:41 +0100 |
commit | 53970b657ea26101d67670fa7d356362994547c5 (patch) | |
tree | 7afc31c39c1fd16d0132eed05bef16552ff0389f | |
parent | d24c849c31bad2ba27f3d2624ce1a90bb0283954 (diff) |
fix(Albums): Consistent (aria-)label and make icon only on small devices
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
-rw-r--r-- | src/views/Albums.vue | 21 |
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, |