Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>pull/43770/head
Ferdinand Thiessen
2 years ago
parent
c651e06a6d
commit
8e53a882a5
@ -0,0 +1,79 @@ |
||||
<!-- |
||||
- @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de> |
||||
- |
||||
- @author Ferdinand Thiessen <opensource@fthiessen.de> |
||||
- |
||||
- @license AGPL-3.0-or-later |
||||
- |
||||
- This program is free software: you can redistribute it and/or modify |
||||
- it under the terms of the GNU Affero General Public License as |
||||
- published by the Free Software Foundation, either version 3 of the |
||||
- License, or (at your option) any later version. |
||||
- |
||||
- This program is distributed in the hope that it will be useful, |
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
- GNU Affero General Public License for more details. |
||||
- |
||||
- You should have received a copy of the GNU Affero General Public License |
||||
- along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
- |
||||
--> |
||||
<template> |
||||
<span v-if="isSupported || isFeatured" |
||||
class="app-level-badge" |
||||
:class="{ 'app-level-badge--supported': isSupported }" |
||||
:title="badgeTitle"> |
||||
<NcIconSvgWrapper :path="badgeIcon" :size="20" /> |
||||
{{ badgeText }} |
||||
</span> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' |
||||
|
||||
import { mdiCheck, mdiStarShooting } from '@mdi/js' |
||||
import { translate as t } from '@nextcloud/l10n' |
||||
import { computed } from 'vue' |
||||
|
||||
const props = defineProps<{ |
||||
/** |
||||
* The app level |
||||
*/ |
||||
level?: number |
||||
}>() |
||||
|
||||
const isSupported = computed(() => props.level === 300) |
||||
const isFeatured = computed(() => props.level === 200) |
||||
const badgeIcon = computed(() => isSupported.value ? mdiStarShooting : mdiCheck) |
||||
const badgeText = computed(() => isSupported.value ? t('settings', 'Supported') : t('settings', 'Featured')) |
||||
const badgeTitle = computed(() => isSupported.value |
||||
? t('settings', 'This app is supported via your current Nextcloud subscription.') |
||||
: t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')) |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.app-level-badge { |
||||
color: var(--color-text-maxcontrast); |
||||
background-color: transparent; |
||||
border: 1px solid var(--color-text-maxcontrast); |
||||
border-radius: var(--border-radius); |
||||
|
||||
display: flex; |
||||
flex-direction: row; |
||||
gap: 6px; |
||||
padding: 3px 6px; |
||||
width: fit-content; |
||||
|
||||
&--supported { |
||||
border-color: var(--color-success); |
||||
color: var(--color-success); |
||||
} |
||||
|
||||
// Fix the svg wrapper TODO: Remove with @nextcloud/vue 8.8.0 release |
||||
:deep(.icon-vue) { |
||||
min-width: unset; |
||||
min-height: unset; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue