mirror of
https://github.com/nextcloud/server.git
synced 2026-03-10 18:31:16 -04:00
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<!--
|
|
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<template>
|
|
<span
|
|
class="app-menu-icon"
|
|
role="img"
|
|
:aria-hidden="ariaHidden"
|
|
:aria-label="ariaLabel">
|
|
<img class="app-menu-icon__icon" :src="app.icon" alt="">
|
|
<IconDot v-if="app.unread" class="app-menu-icon__unread" :size="10" />
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { INavigationEntry } from '../types/navigation.ts'
|
|
|
|
import { n } from '@nextcloud/l10n'
|
|
import { computed } from 'vue'
|
|
import IconDot from 'vue-material-design-icons/CircleOutline.vue'
|
|
|
|
const props = defineProps<{
|
|
app: INavigationEntry
|
|
}>()
|
|
|
|
// only hide if there are no unread notifications
|
|
const ariaHidden = computed(() => !props.app.unread ? 'true' : undefined)
|
|
|
|
const ariaLabel = computed(() => {
|
|
if (!props.app.unread) {
|
|
return undefined
|
|
}
|
|
|
|
return `${props.app.name} (${n('core', '{count} notification', '{count} notifications', props.app.unread, { count: props.app.unread })})`
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$icon-size: 20px;
|
|
$unread-indicator-size: 10px;
|
|
|
|
.app-menu-icon {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
height: $icon-size;
|
|
width: $icon-size;
|
|
|
|
&__icon {
|
|
transition: margin 0.1s ease-in-out;
|
|
height: $icon-size;
|
|
width: $icon-size;
|
|
filter: var(--background-image-invert-if-bright);
|
|
mask: var(--header-menu-icon-mask);
|
|
}
|
|
|
|
&__unread {
|
|
color: var(--color-text-error);
|
|
position: absolute;
|
|
// Align the dot to the top right corner of the icon
|
|
inset-block-end: calc($icon-size + ($unread-indicator-size / -2));
|
|
inset-inline-end: calc($unread-indicator-size / -2);
|
|
transition: all 0.1s ease-in-out;
|
|
}
|
|
}
|
|
</style>
|