Improve style after vue update
All checks were successful
repod / nextcloud (push) Successful in 1m17s
repod / xml (push) Successful in 24s
repod / nodejs (push) Successful in 2m9s

This commit is contained in:
Michel Roux 2023-12-23 21:36:20 +01:00
parent dc1d189510
commit 44db2066aa
8 changed files with 52 additions and 60 deletions

View File

@ -1,22 +0,0 @@
<template>
<ul :class="episode ? 'margin' : ''">
<slot />
</ul>
</template>
<script>
export default {
name: 'List',
computed: {
episode() {
return this.$store.state.player.episode
},
},
}
</script>
<style scoped>
.margin {
margin-bottom: 6rem;
}
</style>

View File

@ -1,7 +1,6 @@
<template> <template>
<ul> <ul>
<NcAppNavigationNewItem :loading="loading" <NcAppNavigationNewItem :name="t('Add a RSS link')"
:name="t('Add a RSS link')"
@new-item="addSubscription"> @new-item="addSubscription">
<template #icon> <template #icon>
<Plus :size="20" /> <Plus :size="20" />
@ -20,12 +19,6 @@ export default {
NcAppNavigationNewItem, NcAppNavigationNewItem,
Plus, Plus,
}, },
data() {
return {
loading: false,
feedUrl: '',
}
},
methods: { methods: {
addSubscription(feedUrl) { addSubscription(feedUrl) {
this.$router.push(btoa(feedUrl)) this.$router.push(btoa(feedUrl))

View File

@ -1,25 +1,27 @@
<template> <template>
<List> <div>
<NcListItem v-for="feed in feeds" <NcLoadingIcon v-if="loading" />
:key="feed.link" <ul v-if="!loading">
:details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))" <NcListItem v-for="feed in feeds"
:name="feed.title" :key="feed.link"
:to="toUrl(feed.link)"> :details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))"
<template #icon> :name="feed.title"
<NcAvatar :display-name="feed.author" :to="toUrl(feed.link)">
:is-no-user="true" <template #icon>
:url="feed.imageUrl" /> <NcAvatar :display-name="feed.author"
</template> :is-no-user="true"
<template #subname> :url="feed.imageUrl" />
{{ feed.author }} </template>
</template> <template #subname>
</NcListItem> {{ feed.author }}
</List> </template>
</NcListItem>
</ul>
</div>
</template> </template>
<script> <script>
import { NcAvatar, NcListItem } from '@nextcloud/vue' import { NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import List from '../Atoms/List.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { debounce } from '../../utils/debounce.js' import { debounce } from '../../utils/debounce.js'
import { formatTimeAgo } from '../../utils/time.js' import { formatTimeAgo } from '../../utils/time.js'
@ -29,9 +31,9 @@ import { showError } from '@nextcloud/dialogs'
export default { export default {
name: 'Search', name: 'Search',
components: { components: {
List,
NcAvatar, NcAvatar,
NcListItem, NcListItem,
NcLoadingIcon,
}, },
props: { props: {
value: { value: {
@ -42,6 +44,7 @@ export default {
data() { data() {
return { return {
feeds: [], feeds: [],
loading: false,
} }
}, },
watch: { watch: {
@ -53,6 +56,7 @@ export default {
formatTimeAgo, formatTimeAgo,
search: debounce(async function value() { search: debounce(async function value() {
try { try {
this.loading = true
const currentSearch = this.value const currentSearch = this.value
const feeds = await axios.get(generateUrl('/apps/repod/search?value={value}', { value: currentSearch })) const feeds = await axios.get(generateUrl('/apps/repod/search?value={value}', { value: currentSearch }))
if (currentSearch === this.value) { if (currentSearch === this.value) {
@ -61,6 +65,10 @@ export default {
} catch (e) { } catch (e) {
console.error(e) console.error(e)
showError(t('Could not fetch search results')) showError(t('Could not fetch search results'))
} finally {
if (this.feeds) {
this.loading = false
}
} }
}, 200), }, 200),
toUrl(url) { toUrl(url) {

View File

@ -5,6 +5,7 @@
<NcAvatar class="avatar" <NcAvatar class="avatar"
:display-name="author" :display-name="author"
:is-no-user="true" :is-no-user="true"
:size="128"
:url="imageUrl" /> :url="imageUrl" />
<div class="infos"> <div class="infos">
<h2>{{ title }}</h2> <h2>{{ title }}</h2>
@ -13,7 +14,7 @@
</a> </a>
<br><br> <br><br>
<p> <p>
<small>{{ description }}</small> <small>{{ description | stripHTML }}</small>
</p> </p>
</div> </div>
<NcAppNavigationNew v-if="!isSubscribed" <NcAppNavigationNew v-if="!isSubscribed"

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<NcLoadingIcon v-if="loading" /> <NcLoadingIcon v-if="loading" class="loading" />
<List v-if="!loading"> <ul v-if="!loading">
<NcListItem v-for="episode in episodes" <NcListItem v-for="episode in episodes"
:key="episode.episodeGuid" :key="episode.episodeGuid"
:active="isCurrentEpisode(episode)" :active="isCurrentEpisode(episode)"
@ -33,14 +33,13 @@
</NcActionButton> </NcActionButton>
</template> </template>
</NcListItem> </NcListItem>
</List> </ul>
</div> </div>
</template> </template>
<script> <script>
import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue' import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
import { formatTimeAgo, formatTimer } from '../../utils/time.js' import { formatTimeAgo, formatTimer } from '../../utils/time.js'
import List from '../Atoms/List.vue'
import PlayButton from 'vue-material-design-icons/Play.vue' import PlayButton from 'vue-material-design-icons/Play.vue'
import StopButton from 'vue-material-design-icons/Stop.vue' import StopButton from 'vue-material-design-icons/Stop.vue'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
@ -50,7 +49,6 @@ import { showError } from '@nextcloud/dialogs'
export default { export default {
name: 'Episodes', name: 'Episodes',
components: { components: {
List,
NcActionButton, NcActionButton,
NcAvatar, NcAvatar,
NcListItem, NcListItem,
@ -101,4 +99,8 @@ export default {
.ended { .ended {
opacity: .5; opacity: .5;
} }
.loading {
margin: 2rem 0;
}
</style> </style>

View File

@ -9,11 +9,11 @@
</NcAppNavigationNew> </NcAppNavigationNew>
</router-link> </router-link>
<NcLoadingIcon v-if="loading" /> <NcLoadingIcon v-if="loading" />
<List v-if="!loading"> <ul v-if="!loading">
<Item v-for="subscriptionUrl of subscriptions" <Item v-for="subscriptionUrl of subscriptions"
:key="subscriptionUrl" :key="subscriptionUrl"
:url="subscriptionUrl" /> :url="subscriptionUrl" />
</List> </ul>
</NcAppContentList> </NcAppContentList>
</NcAppNavigation> </NcAppNavigation>
</template> </template>
@ -26,7 +26,6 @@ import {
NcLoadingIcon, NcLoadingIcon,
} from '@nextcloud/vue' } from '@nextcloud/vue'
import Item from './Item.vue' import Item from './Item.vue'
import List from '../Atoms/List.vue'
import Plus from 'vue-material-design-icons/Plus.vue' import Plus from 'vue-material-design-icons/Plus.vue'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
@ -34,7 +33,6 @@ export default {
name: 'Subscriptions', name: 'Subscriptions',
components: { components: {
Item, Item,
List,
NcAppContentList, NcAppContentList,
NcAppNavigation, NcAppNavigation,
NcAppNavigationNew, NcAppNavigationNew,

View File

@ -15,6 +15,12 @@ Vue.mixin({ methods: { t, n } })
Vue.prototype.AppConfig = window.oc_appconfig Vue.prototype.AppConfig = window.oc_appconfig
Vue.filter('stripHTML', (value) => {
const div = document.createElement('div')
div.innerHTML = value
return div.textContent || div.innerText || ''
})
export default new Vue({ export default new Vue({
el: '#content', el: '#content',
router, router,

View File

@ -1,6 +1,6 @@
<template> <template>
<NcAppContent> <NcAppContent>
<NcLoadingIcon v-if="loading" /> <NcLoadingIcon v-if="loading" class="loading" />
<NcEmptyContent v-if="failed" :name="t('Error loading feed')"> <NcEmptyContent v-if="failed" :name="t('Error loading feed')">
<template #icon> <template #icon>
<Alert /> <Alert />
@ -59,3 +59,9 @@ export default {
}, },
} }
</script> </script>
<style scoped>
.loading {
margin: 2rem 0;
}
</style>