upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-22 01:55:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 37

refactor(appstore): migrate app level badge to css modules

Browse source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2026-04-07 04:05:07 +02:00
parent 26ef27bfb1
commit 3b1ed578c5
No known key found for this signature in database
GPG key ID: 7E849AE05218500F
1 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
apps/appstore/src/components/AppLevelBadge.vue
View file

@ -2,19 +2,9 @@
- 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 { mdiStar, mdiStarShootingOutline } from '@mdi/js'
import { translate as t } from '@nextcloud/l10n'
import { computed } from 'vue'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@ -28,15 +18,27 @@ const props = defineProps<{
const isSupported = computed(() => props.level === 300)
const isFeatured = computed(() => props.level === 200)
const badgeIcon = computed(() => isSupported.value ? mdiStarShootingOutline : mdiCheck)
const badgeIcon = computed(() => isSupported.value
? mdiStarShootingOutline
: mdiStar)
const badgeText = computed(() => isSupported.value ? t('appstore', 'Supported') : t('appstore', 'Featured'))
const badgeTitle = computed(() => isSupported.value
? t('appstore', 'This app is supported via your current Nextcloud subscription.')
: t('appstore', '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 {
<template>
<span
v-if="isSupported || isFeatured"
:class="[ $style.appLevelBadge, { [$style.appLevelBadge__supported]: isSupported } ]"
:title="badgeTitle">
<NcIconSvgWrapper :path="badgeIcon" :size="20" inline />
{{ badgeText }}
</span>
</template>
<style module>
.appLevelBadge {
color: var(--color-text-maxcontrast);
background-color: transparent;
border: 1px solid var(--color-text-maxcontrast);
@ -44,14 +46,14 @@ const badgeTitle = computed(() => isSupported.value
display: flex;
flex-direction: row;
gap: 6px;
gap: var(--default-grid-baseline);
padding: 3px 6px;
width: fit-content;
}
&--supported {
background-color: var(--color-success);
border-color: var(--color-border-success);
color: var(--color-success-text);
}
.appLevelBadge__supported {
background-color: var(--color-success);
border-color: var(--color-border-success);
color: var(--color-success-text);
}
</style>