mirror of
https://github.com/nextcloud/server.git
synced 2026-04-23 23:27:46 -04:00
57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<!--
|
|
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<span
|
|
v-if="isSupported || isFeatured"
|
|
class="app-level-badge"
|
|
:class="{ 'app-level-badge--supported': isSupported }"
|
|
:title="badgeTitle">
|
|
<NcIconSvgWrapper :path="badgeIcon" :size="20" inline />
|
|
{{ badgeText }}
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mdiCheck, mdiStarShootingOutline } from '@mdi/js'
|
|
import { translate as t } from '@nextcloud/l10n'
|
|
import { computed } from 'vue'
|
|
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
|
|
|
|
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 ? mdiStarShootingOutline : 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 {
|
|
background-color: var(--color-success);
|
|
border-color: var(--color-border-success);
|
|
color: var(--color-success-text);
|
|
}
|
|
}
|
|
</style>
|