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