|
| 1 | +<!-- |
| 2 | + - @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de> |
| 3 | + - |
| 4 | + - @author Ferdinand Thiessen <opensource@fthiessen.de> |
| 5 | + - |
| 6 | + - @license AGPL-3.0-or-later |
| 7 | + - |
| 8 | + - This program is free software: you can redistribute it and/or modify |
| 9 | + - it under the terms of the GNU Affero General Public License as |
| 10 | + - published by the Free Software Foundation, either version 3 of the |
| 11 | + - License, or (at your option) any later version. |
| 12 | + - |
| 13 | + - This program is distributed in the hope that it will be useful, |
| 14 | + - but WITHOUT ANY WARRANTY; without even the implied warranty of |
| 15 | + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
| 16 | + - GNU Affero General Public License for more details. |
| 17 | + - |
| 18 | + - You should have received a copy of the GNU Affero General Public License |
| 19 | + - along with this program. If not, see <http://www.gnu.org/licenses/>. |
| 20 | + - |
| 21 | + --> |
| 22 | +<template> |
| 23 | + <span v-if="isSupported || isFeatured" |
| 24 | + class="app-level-badge" |
| 25 | + :class="{ 'app-level-badge--supported': isSupported }" |
| 26 | + :title="badgeTitle"> |
| 27 | + <NcIconSvgWrapper :path="badgeIcon" :size="20" /> |
| 28 | + {{ badgeText }} |
| 29 | + </span> |
| 30 | +</template> |
| 31 | + |
| 32 | +<script setup lang="ts"> |
| 33 | +import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' |
| 34 | +
|
| 35 | +import { mdiCheck, mdiStarShooting } from '@mdi/js' |
| 36 | +import { translate as t } from '@nextcloud/l10n' |
| 37 | +import { computed } from 'vue' |
| 38 | +
|
| 39 | +const props = defineProps<{ |
| 40 | + /** |
| 41 | + * The app level |
| 42 | + */ |
| 43 | + level?: number |
| 44 | +}>() |
| 45 | +
|
| 46 | +const isSupported = computed(() => props.level === 300) |
| 47 | +const isFeatured = computed(() => props.level === 200) |
| 48 | +const badgeIcon = computed(() => isSupported.value ? mdiStarShooting : mdiCheck) |
| 49 | +const badgeText = computed(() => isSupported.value ? t('settings', 'Supported') : t('settings', 'Featured')) |
| 50 | +const badgeTitle = computed(() => isSupported.value |
| 51 | + ? t('settings', 'This app is supported via your current Nextcloud subscription.') |
| 52 | + : t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')) |
| 53 | +</script> |
| 54 | + |
| 55 | +<style scoped lang="scss"> |
| 56 | +.app-level-badge { |
| 57 | + color: var(--color-text-maxcontrast); |
| 58 | + background-color: transparent; |
| 59 | + border: 1px solid var(--color-text-maxcontrast); |
| 60 | + border-radius: var(--border-radius); |
| 61 | +
|
| 62 | + display: flex; |
| 63 | + flex-direction: row; |
| 64 | + gap: 6px; |
| 65 | + padding: 3px 6px; |
| 66 | +
|
| 67 | + &--supported { |
| 68 | + border-color: var(--color-success); |
| 69 | + color: var(--color-success); |
| 70 | + } |
| 71 | +
|
| 72 | + // Fix the svg wrapper TODO: Remove with @nextcloud/vue 8.8.0 release |
| 73 | + :deep(.icon-vue) { |
| 74 | + min-width: unset; |
| 75 | + min-height: unset; |
| 76 | + } |
| 77 | +} |
| 78 | +</style> |
0 commit comments