Improve style after vue update
This commit is contained in:
parent
dc1d189510
commit
44db2066aa
@ -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>
|
|
@ -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))
|
||||||
|
@ -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) {
|
||||||
|
@ -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"
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user