feat: Make the app-level a component (AppLevelBadge)

apps/settings/css/settings.scss

@@ -594,36 +594,6 @@ span.version {
  color: var(--color-text-maxcontrast);
 }
 
-.app-level {
- span {
- color: var(--color-text-maxcontrast);
- background-color: transparent;
- border: 1px solid var(--color-text-maxcontrast);
- border-radius: var(--border-radius);
- padding: 3px 6px;
- }
-
- a {
- padding: 10px;
- margin: -6px;
- white-space: nowrap;
- }
-
- .official {
- background-position: left center;
- background-position: 5px center;
- padding-left: 25px;
- }
-
- .supported {
- border-color: var(--color-success);
- background-position: left center;
- background-position: 5px center;
- padding-left: 25px;
- color: var(--color-success);
- }
-}
-
 .app-score {
  position: relative;
  top: 4px;
@@ -679,20 +649,6 @@ span.version {
  }
  }
 
- .app-level {
- clear: right;
- width: 100%;
-
- .supported,
- .official {
- vertical-align: top;
- }
-
- .app-score-image {
- float: right;
- }
- }
-
  .app-author, .app-licence {
  color: var(--color-text-maxcontrast);
  }

apps/settings/src/components/AppList/AppItem.vue

@@ -47,7 +47,14 @@
  <component :is="dataItemTag"
  class="app-name"
  :headers="getDataItemHeaders(`app-table-col-name`)">
- <router-link class="app-name--link" :to="{ name: 'apps-details', params: { category: category, id: app.id }}"
+ <router-link class="app-name--link"
+ :to="{
+ name: 'apps-details',
+ params: {
+ category: category,
+ id: app.id
+ },
+ }"
  :aria-label="t('settings', 'Show details for {appName} app', { appName:app.name })">
  {{ app.name }}
  </router-link>
@@ -66,17 +73,8 @@
  <span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
  </component>
 
- <component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)" class="app-level">
- <span v-if="app.level === 300"
- :title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
- :aria-label="t('settings', 'This app is supported via your current Nextcloud subscription.')"
- class="supported icon-checkmark-color">
- {{ t('settings', 'Supported') }}</span>
- <span v-if="app.level === 200"
- :title="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
- :aria-label="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
- class="official icon-checkmark">
- {{ t('settings', 'Featured') }}</span>
+ <component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-level`)">
+ <AppLevelBadge :level="app.level" />
  <AppScore v-if="hasRating && !listView" :score="app.score" />
  </component>
  <component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="actions">
@@ -124,19 +122,24 @@
 
 <script>
 import AppScore from './AppScore.vue'
+import AppLevelBadge from './AppLevelBadge.vue'
 import AppManagement from '../../mixins/AppManagement.js'
 import SvgFilterMixin from '../SvgFilterMixin.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
  name: 'AppItem',
  components: {
+ AppLevelBadge,
  AppScore,
  NcButton,
  },
  mixins: [AppManagement, SvgFilterMixin],
  props: {
- app: {},
+ app: {
+ type: Object,
+ required: true,
+ },
  category: {},
  listView: {
  type: Boolean,
@@ -175,7 +178,7 @@ export default {
  this.isSelected = (this.app.id === this.$route.params.id)
  if (this.app.releases && this.app.screenshot) {
  const image = new Image()
- image.onload = (e) => {
+ image.onload = () => {
  this.screenshotLoaded = true
  }
  image.src = this.app.screenshot

apps/settings/src/components/AppList/AppLevelBadge.vue

@@ -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>

apps/settings/src/views/Apps.vue

@@ -105,17 +105,9 @@
 
  <template #description>
  <!-- Featured/Supported badges -->
- <div v-if="app.level === 300 || app.level === 200 || hasRating" class="app-level">
- <span v-if="app.level === 300"
- :title="t('settings', 'This app is supported via your current Nextcloud subscription.')"
- class="supported icon-checkmark-color">
- {{ t('settings', 'Supported') }}</span>
- <span v-if="app.level === 200"
- :title="t('settings', 'Featured apps are developed by and within the community. They offer central functionality and are ready for production use.')"
- class="official icon-checkmark">
- {{ t('settings', 'Featured') }}</span>
- <AppScore v-if="hasRating" :score="app.appstoreData.ratingOverall" />
- </div>
+ <AppLevelBadge :level="app.level" />
+ <AppScore v-if="hasRating" :score="app.appstoreData.ratingOverall" />
+
  <div class="app-version">
  <p>{{ app.version }}</p>
  </div>
@@ -161,6 +153,7 @@ import IconStarShooting from 'vue-material-design-icons/StarShooting.vue'
 import AppList from '../components/AppList.vue'
 import AppDetails from '../components/AppDetails.vue'
 import AppManagement from '../mixins/AppManagement.js'
+import AppLevelBadge from '../components/AppList/AppLevelBadge.vue'
 import AppScore from '../components/AppList/AppScore.vue'
 import Markdown from '../components/Markdown.vue'
 
@@ -179,6 +172,7 @@ export default {
  NcAppContent,
  AppDetails,
  AppList,
+ AppLevelBadge,
  IconStarShooting,
  NcAppNavigation,
  NcAppNavigationItem,
@@ -294,7 +288,7 @@ export default {
  this.screenshotLoaded = false
  if (this.app?.releases && this.app?.screenshot) {
  const image = new Image()
- image.onload = (e) => {
+ image.onload = () => {
  this.screenshotLoaded = true
  }
  image.src = this.app.screenshot