mirror of
https://github.com/nextcloud/server.git
synced 2026-04-15 22:11:17 -04:00
feat: Make the app-level a component (AppLevelBadge)
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
parent
c651e06a6d
commit
8e53a882a5
4 changed files with 102 additions and 70 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,6 +122,7 @@
|
|||
|
||||
<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'
|
||||
|
|
@ -131,12 +130,16 @@ 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
|
||||
|
|
|
|||
79
apps/settings/src/components/AppList/AppLevelBadge.vue
Normal file
79
apps/settings/src/components/AppList/AppLevelBadge.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue