Loading to Atoms
This commit is contained in:
parent
ea0bfcc532
commit
893f3acaed
20
src/components/Atoms/Loading.vue
Normal file
20
src/components/Atoms/Loading.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<NcLoadingIcon class="loading" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcLoadingIcon } from '@nextcloud/vue'
|
||||
|
||||
export default {
|
||||
name: 'Loading',
|
||||
components: {
|
||||
NcLoadingIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<NcLoadingIcon v-if="loading" />
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading">
|
||||
<NcListItem v-for="feed in feeds"
|
||||
:key="feed.link"
|
||||
@ -21,7 +21,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
|
||||
import { NcAvatar, NcListItem } from '@nextcloud/vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { debounce } from '../../utils/debounce.js'
|
||||
import { formatTimeAgo } from '../../utils/time.js'
|
||||
@ -31,9 +32,9 @@ import { showError } from '@nextcloud/dialogs'
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: {
|
||||
Loading,
|
||||
NcAvatar,
|
||||
NcListItem,
|
||||
NcLoadingIcon,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<NcLoadingIcon v-if="loading" />
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading" class="tops">
|
||||
<li v-for="top in tops" :key="top.link">
|
||||
<TopItem :author="top.author"
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcLoadingIcon } from '@nextcloud/vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import TopItem from './TopItem.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
@ -25,7 +25,7 @@ import { showError } from '@nextcloud/dialogs'
|
||||
export default {
|
||||
name: 'TopList',
|
||||
components: {
|
||||
NcLoadingIcon,
|
||||
Loading,
|
||||
TopItem,
|
||||
},
|
||||
data() {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div :class="currentEpisode ? 'margin' : ''">
|
||||
<NcLoadingIcon v-if="loading" class="loading" />
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading">
|
||||
<NcListItem v-for="episode in episodes"
|
||||
:key="episode.episodeGuid"
|
||||
@ -38,8 +38,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
|
||||
import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
|
||||
import { formatTimeAgo, formatTimer } from '../../utils/time.js'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import PlayButton from 'vue-material-design-icons/Play.vue'
|
||||
import StopButton from 'vue-material-design-icons/Stop.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
@ -49,10 +50,10 @@ import { showError } from '@nextcloud/dialogs'
|
||||
export default {
|
||||
name: 'Episodes',
|
||||
components: {
|
||||
Loading,
|
||||
NcActionButton,
|
||||
NcAvatar,
|
||||
NcListItem,
|
||||
NcLoadingIcon,
|
||||
PlayButton,
|
||||
StopButton,
|
||||
},
|
||||
@ -100,10 +101,6 @@ export default {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-if="player.episode" class="footer">
|
||||
<NcLoadingIcon v-if="!player.loaded" class="loading" />
|
||||
<Loading v-if="!player.loaded" />
|
||||
<ProgressBar v-if="player.loaded" />
|
||||
<div v-if="player.loaded" class="player">
|
||||
<img :src="player.episode.episodeImage">
|
||||
@ -15,7 +15,7 @@
|
||||
<script>
|
||||
import Controls from './Controls.vue'
|
||||
import Infos from './Infos.vue'
|
||||
import { NcLoadingIcon } from '@nextcloud/vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import ProgressBar from './ProgressBar.vue'
|
||||
import Timer from './Timer.vue'
|
||||
import Volume from './Volume.vue'
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
components: {
|
||||
Controls,
|
||||
Infos,
|
||||
NcLoadingIcon,
|
||||
Loading,
|
||||
ProgressBar,
|
||||
Timer,
|
||||
Volume,
|
||||
@ -63,8 +63,4 @@ export default {
|
||||
.volume {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
|
@ -8,7 +8,7 @@
|
||||
</template>
|
||||
</NcAppNavigationNew>
|
||||
</router-link>
|
||||
<NcLoadingIcon v-if="loading" />
|
||||
<Loading v-if="loading" />
|
||||
<ul v-if="!loading">
|
||||
<Item v-for="subscriptionUrl of subscriptions"
|
||||
:key="subscriptionUrl"
|
||||
@ -19,13 +19,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
NcAppContentList,
|
||||
NcAppNavigation,
|
||||
NcAppNavigationNew,
|
||||
NcLoadingIcon,
|
||||
} from '@nextcloud/vue'
|
||||
import { NcAppContentList, NcAppNavigation, NcAppNavigationNew } from '@nextcloud/vue'
|
||||
import Item from './Item.vue'
|
||||
import Loading from '../Atoms/Loading.vue'
|
||||
import Plus from 'vue-material-design-icons/Plus.vue'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
|
||||
@ -33,10 +29,10 @@ export default {
|
||||
name: 'Subscriptions',
|
||||
components: {
|
||||
Item,
|
||||
Loading,
|
||||
NcAppContentList,
|
||||
NcAppNavigation,
|
||||
NcAppNavigationNew,
|
||||
NcLoadingIcon,
|
||||
Plus,
|
||||
},
|
||||
data() {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<NcAppContent>
|
||||
<NcLoadingIcon v-if="loading" class="loading" />
|
||||
<Loading v-if="loading" />
|
||||
<NcEmptyContent v-if="failed" :name="t('Error loading feed')">
|
||||
<template #icon>
|
||||
<Alert />
|
||||
@ -17,10 +17,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
|
||||
import { NcAppContent, NcEmptyContent } from '@nextcloud/vue'
|
||||
import Alert from 'vue-material-design-icons/Alert.vue'
|
||||
import Banner from '../components/Feed/Banner.vue'
|
||||
import Episodes from '../components/Feed/Episodes.vue'
|
||||
import Loading from '../components/Atoms/Loading.vue'
|
||||
import axios from '@nextcloud/axios'
|
||||
import { generateUrl } from '@nextcloud/router'
|
||||
|
||||
@ -30,9 +31,9 @@ export default {
|
||||
Alert,
|
||||
Banner,
|
||||
Episodes,
|
||||
Loading,
|
||||
NcAppContent,
|
||||
NcEmptyContent,
|
||||
NcLoadingIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -59,9 +60,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user