2018-10-23 13:38:03 +00:00
|
|
|
<template>
|
2018-12-04 15:42:04 +00:00
|
|
|
<div class="social__wrapper">
|
2018-12-03 08:57:26 +00:00
|
|
|
<transition name="slide-fade">
|
2023-03-17 13:47:12 +00:00
|
|
|
<div v-if="showInfo" class="social__welcome">
|
2019-01-02 23:25:44 +00:00
|
|
|
<a class="close icon-close" href="#" @click="hideInfo()">
|
|
|
|
<span class="hidden-visually">
|
2023-01-16 09:14:51 +00:00
|
|
|
{{ t('social', 'Close') }}
|
2019-01-02 23:25:44 +00:00
|
|
|
</span>
|
|
|
|
</a>
|
2018-12-03 08:57:26 +00:00
|
|
|
<h2>🎉 {{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h2>
|
2023-03-17 09:11:30 +00:00
|
|
|
<p>{{ t('social', 'This application is currently in beta stage.') }}</p>
|
|
|
|
<br>
|
2018-12-03 08:57:26 +00:00
|
|
|
<p>
|
2020-10-24 16:21:56 +00:00
|
|
|
{{ t('social', 'We automatically created a Social account for you. Your Social ID is the same as your Federated Cloud ID:') }}
|
2019-01-02 23:25:44 +00:00
|
|
|
<span class="social-id">
|
|
|
|
{{ socialId }}
|
|
|
|
</span>
|
2018-12-03 08:57:26 +00:00
|
|
|
</p>
|
2018-12-21 16:33:29 +00:00
|
|
|
<div v-show="!isFollowingNextcloudAccount" class="follow-nextcloud">
|
2018-12-05 11:33:41 +00:00
|
|
|
<p>{{ t('social', 'Since you are new to Social, start by following the official Nextcloud account so you don\'t miss any news') }}</p>
|
2022-10-27 13:07:12 +00:00
|
|
|
<input :value="t('social', 'Follow Nextcloud on mastodon.xyz')"
|
|
|
|
type="button"
|
|
|
|
class="primary"
|
2019-01-09 14:59:59 +00:00
|
|
|
@click="followNextcloud">
|
2018-12-05 10:42:52 +00:00
|
|
|
</div>
|
2018-10-23 13:38:03 +00:00
|
|
|
</div>
|
2018-12-03 08:57:26 +00:00
|
|
|
</transition>
|
2023-04-11 16:47:28 +00:00
|
|
|
|
2023-03-21 13:47:48 +00:00
|
|
|
<Composer v-if="type !== 'notifications' && type !== 'single-post'" :default-visibility="type === 'direct' ? 'direct' : undefined" />
|
2023-04-11 16:47:28 +00:00
|
|
|
|
2019-01-11 08:36:49 +00:00
|
|
|
<h2 v-if="type === 'tags'">
|
2022-10-27 13:07:12 +00:00
|
|
|
#{{ $route.params.tag }}
|
2019-01-11 08:36:49 +00:00
|
|
|
</h2>
|
2023-04-11 16:47:28 +00:00
|
|
|
|
|
|
|
<h2 v-if="type === 'notifications'">
|
|
|
|
{{ t('social', 'Notifications') }}
|
|
|
|
</h2>
|
|
|
|
|
2022-10-27 13:07:12 +00:00
|
|
|
<TimelineList :type="type" />
|
2018-10-23 13:38:03 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2022-10-27 13:07:12 +00:00
|
|
|
<script>
|
|
|
|
import Composer from './../components/Composer/Composer.vue'
|
|
|
|
import CurrentUserMixin from './../mixins/currentUserMixin.js'
|
|
|
|
import TimelineList from './../components/TimelineList.vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'Timeline',
|
|
|
|
components: {
|
|
|
|
Composer,
|
|
|
|
TimelineList,
|
|
|
|
},
|
|
|
|
mixins: [
|
|
|
|
CurrentUserMixin,
|
|
|
|
],
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
infoHidden: false,
|
|
|
|
nextcloudAccount: 'nextcloud@mastodon.xyz',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
params() {
|
|
|
|
if (this.$route.name === 'tags') {
|
|
|
|
return { tag: this.$route.params.tag }
|
|
|
|
} else if (this.$route.name === 'single-post') {
|
|
|
|
return this.$route.params
|
|
|
|
}
|
|
|
|
return {}
|
|
|
|
},
|
|
|
|
type() {
|
|
|
|
if (this.$route.name === 'tags') {
|
|
|
|
return 'tags'
|
|
|
|
}
|
|
|
|
if (this.$route.params.type) {
|
|
|
|
return this.$route.params.type
|
|
|
|
}
|
|
|
|
return 'home'
|
|
|
|
},
|
|
|
|
showInfo() {
|
|
|
|
return this.$store.getters.getServerData.firstrun && !this.infoHidden
|
|
|
|
},
|
|
|
|
isFollowingNextcloudAccount() {
|
|
|
|
if (!this.$store.getters.accountLoaded(this.nextcloudAccount)) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
return this.$store.getters.isFollowingUser(this.nextcloudAccount)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeMount() {
|
|
|
|
this.$store.dispatch('changeTimelineType', { type: this.type, params: this.params })
|
|
|
|
if (this.showInfo) {
|
|
|
|
this.$store.dispatch('fetchAccountInfo', this.nextcloudAccount)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
hideInfo() {
|
|
|
|
this.infoHidden = true
|
|
|
|
},
|
|
|
|
followNextcloud() {
|
|
|
|
this.$store.dispatch('followAccount', { accountToFollow: this.nextcloudAccount })
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2018-10-23 13:38:03 +00:00
|
|
|
<style scoped>
|
2018-12-04 15:42:04 +00:00
|
|
|
|
2018-10-23 13:38:03 +00:00
|
|
|
.social__welcome {
|
|
|
|
margin: 15px auto;
|
|
|
|
padding: 15px;
|
2018-11-01 03:48:51 +00:00
|
|
|
border-bottom: 1px solid var(--color-border);
|
2018-10-23 13:38:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.social__welcome h3 {
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.social__welcome .icon-close {
|
2018-11-01 03:48:51 +00:00
|
|
|
float: right;
|
|
|
|
padding: 22px;
|
|
|
|
margin: -15px;
|
|
|
|
opacity: .3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.social__welcome .icon-close:hover,
|
|
|
|
.social__welcome .icon-close:focus {
|
|
|
|
opacity: 1;
|
2018-10-23 13:38:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.social__welcome .social-id {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2018-12-05 10:42:52 +00:00
|
|
|
.social__welcome .follow-nextcloud {
|
|
|
|
overflow: hidden;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.social__welcome .follow-nextcloud input[type=button] {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
|
2018-10-23 13:38:03 +00:00
|
|
|
.social__timeline {
|
|
|
|
margin: 15px auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
#app-content {
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
2018-11-14 11:47:30 +00:00
|
|
|
.slide-fade-leave-active {
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
transition: all .5s ease-out;
|
|
|
|
max-height: 200px;
|
|
|
|
}
|
2023-01-16 10:02:05 +00:00
|
|
|
|
2018-11-14 11:47:30 +00:00
|
|
|
.slide-fade-leave-to {
|
|
|
|
max-height: 0;
|
|
|
|
opacity: 0;
|
|
|
|
padding-top: 0;
|
|
|
|
padding-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2018-10-23 13:38:03 +00:00
|
|
|
</style>
|