mirror of
https://github.com/nextcloud/server.git
synced 2026-05-28 04:32:30 -04:00
feat(settings): Implement app type for AppDiscover section
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen
parent
a735e7dea3
commit
9bed64394c
3 changed files with 139 additions and 12 deletions
|
|
@ -21,7 +21,7 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<component :is="listView ? `tr` : `li`"
|
||||
<component :is="listView ? 'tr' : (inline ? 'article' : 'li')"
|
||||
class="app-item"
|
||||
:class="{
|
||||
'app-item--list-view': listView,
|
||||
|
|
@ -82,7 +82,10 @@
|
|||
<AppLevelBadge :level="app.level" />
|
||||
<AppScore v-if="hasRating && !listView" :score="app.score" />
|
||||
</component>
|
||||
<component :is="dataItemTag" :headers="getDataItemHeaders(`app-table-col-actions`)" class="app-actions">
|
||||
<component :is="dataItemTag"
|
||||
v-if="!inline"
|
||||
:headers="getDataItemHeaders(`app-table-col-actions`)"
|
||||
class="app-actions">
|
||||
<div v-if="app.error" class="warning">
|
||||
{{ app.error }}
|
||||
</div>
|
||||
|
|
@ -145,7 +148,10 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
category: {},
|
||||
category: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
listView: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
|
@ -158,6 +164,10 @@ export default {
|
|||
type: String,
|
||||
default: null,
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
117
apps/settings/src/components/AppStoreDiscover/AppType.vue
Normal file
117
apps/settings/src/components/AppStoreDiscover/AppType.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<!--
|
||||
- @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>
|
||||
<AppItem v-if="app"
|
||||
:app="app"
|
||||
category="discover"
|
||||
class="app-discover-app"
|
||||
inline
|
||||
:list-view="false" />
|
||||
<a v-else
|
||||
class="app-discover-app app-discover-app__skeleton"
|
||||
:href="appStoreLink"
|
||||
target="_blank"
|
||||
:title="modelValue.appId"
|
||||
rel="noopener noreferrer">
|
||||
<!-- This is a fallback skeleton -->
|
||||
<span class="skeleton-element" />
|
||||
<span class="skeleton-element" />
|
||||
<span class="skeleton-element" />
|
||||
<span class="skeleton-element" />
|
||||
<span class="skeleton-element" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IAppDiscoverApp } from '../../constants/AppDiscoverTypes'
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { useAppsStore } from '../../store/apps-store.ts'
|
||||
|
||||
import AppItem from '../AppList/AppItem.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: IAppDiscoverApp
|
||||
}>()
|
||||
|
||||
const store = useAppsStore()
|
||||
const app = computed(() => store.getAppById(props.modelValue.appId))
|
||||
|
||||
const appStoreLink = computed(() => props.modelValue.appId ? `https://apps.nextcloud.com/apps/${props.modelValue.appId}` : '#')
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-discover-app {
|
||||
width: 100% !important; // full with of the showcase item
|
||||
|
||||
&:hover {
|
||||
background: var(--color-background-hover);
|
||||
border-radius: var(--border-radius-rounded);
|
||||
}
|
||||
|
||||
&__skeleton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
padding: 30px; // Same as AppItem
|
||||
|
||||
> :first-child {
|
||||
height: 50%;
|
||||
min-height: 130px;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
> :nth-child(5) {
|
||||
height: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
> :not(:first-child) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-element {
|
||||
min-height: var(--default-font-size, 15px);
|
||||
|
||||
background: linear-gradient(90deg, var(--color-background-dark), var(--color-background-darker), var(--color-background-dark));
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 6s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -90,15 +90,6 @@ interface IAppDiscoverMediaContent {
|
|||
link?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* An app element only used for the showcase type
|
||||
*/
|
||||
interface IAppDiscoverApp {
|
||||
/** The App ID */
|
||||
type: 'app'
|
||||
app: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper for post media
|
||||
*/
|
||||
|
|
@ -114,6 +105,15 @@ interface IAppDiscoverMedia {
|
|||
content: ILocalizedValue<IAppDiscoverMediaContent>
|
||||
}
|
||||
|
||||
/**
|
||||
* An app element only used for the showcase type
|
||||
*/
|
||||
export interface IAppDiscoverApp {
|
||||
/** The App ID */
|
||||
type: 'app'
|
||||
appId: string
|
||||
}
|
||||
|
||||
export interface IAppDiscoverPost extends IAppDiscoverElement {
|
||||
type: 'post'
|
||||
text?: ILocalizedValue<string>
|
||||
|
|
|
|||
Loading…
Reference in a new issue