mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-12 17:44:31 +00:00
Update Profile.vue component
This commit is contained in:
Daniel Supernault
parent
9195ba45b9
commit
f736070b91
1 changed files with 158 additions and 153 deletions
|
|
@ -346,176 +346,176 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<b-modal ref="followingModal"
|
<b-modal ref="followingModal"
|
||||||
id="following-modal"
|
id="following-modal"
|
||||||
hide-footer
|
hide-footer
|
||||||
centered
|
centered
|
||||||
title="Following"
|
title="Following"
|
||||||
body-class="list-group-flush p-0">
|
body-class="list-group-flush p-0">
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
|
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<a :href="user.url">
|
<a :href="user.url">
|
||||||
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
||||||
</a>
|
</a>
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<p class="mb-0" style="font-size: 14px">
|
<p class="mb-0" style="font-size: 14px">
|
||||||
<a :href="user.url" class="font-weight-bold text-dark">
|
<a :href="user.url" class="font-weight-bold text-dark">
|
||||||
{{user.username}}
|
{{user.username}}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="text-muted mb-0" style="font-size: 14px">
|
<p class="text-muted mb-0" style="font-size: 14px">
|
||||||
{{user.display_name}}
|
{{user.display_name}}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="owner">
|
<div v-if="owner">
|
||||||
<a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
|
<a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-if="following.length == 0" class="list-group-item border-0">
|
||||||
<div v-if="following.length == 0" class="list-group-item border-0">
|
<div class="list-group-item border-0">
|
||||||
<div class="list-group-item border-0">
|
<p class="p-3 text-center mb-0 lead"></p>
|
||||||
<p class="p-3 text-center mb-0 lead"></p>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
|
||||||
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
|
|
||||||
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
</b-modal>
|
||||||
<b-modal ref="followerModal"
|
<b-modal ref="followerModal"
|
||||||
id="follower-modal"
|
id="follower-modal"
|
||||||
hide-footer
|
hide-footer
|
||||||
centered
|
centered
|
||||||
title="Followers"
|
title="Followers"
|
||||||
body-class="list-group-flush p-0">
|
body-class="list-group-flush p-0">
|
||||||
<div class="list-group">
|
<div class="list-group">
|
||||||
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<a :href="user.url">
|
<a :href="user.url">
|
||||||
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
||||||
</a>
|
</a>
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
<p class="mb-0" style="font-size: 14px">
|
<p class="mb-0" style="font-size: 14px">
|
||||||
<a :href="user.url" class="font-weight-bold text-dark">
|
<a :href="user.url" class="font-weight-bold text-dark">
|
||||||
{{user.username}}
|
{{user.username}}
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="text-muted mb-0" style="font-size: 14px">
|
<p class="text-muted mb-0" style="font-size: 14px">
|
||||||
{{user.display_name}}
|
{{user.display_name}}
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
|
||||||
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
|
|
||||||
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
</b-modal>
|
||||||
<b-modal ref="visitorContextMenu"
|
<b-modal ref="visitorContextMenu"
|
||||||
id="visitor-context-menu"
|
id="visitor-context-menu"
|
||||||
hide-footer
|
hide-footer
|
||||||
hide-header
|
hide-header
|
||||||
centered
|
centered
|
||||||
size="sm"
|
size="sm"
|
||||||
body-class="list-group-flush p-0">
|
body-class="list-group-flush p-0">
|
||||||
<div class="list-group" v-if="relationship">
|
<div class="list-group" v-if="relationship">
|
||||||
<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
|
<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
|
||||||
Copy Link
|
Copy Link
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
|
||||||
|
Follow
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
|
||||||
|
Unfollow
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
|
||||||
|
Mute
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
|
||||||
|
Unmute
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
|
||||||
|
Report User
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
|
||||||
|
Block
|
||||||
|
</div>
|
||||||
|
<div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
|
||||||
|
Unblock
|
||||||
|
</div>
|
||||||
|
<div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
|
||||||
|
Settings
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
||||||
|
Close
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
|
|
||||||
Follow
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
|
|
||||||
Unfollow
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
|
|
||||||
Mute
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
|
|
||||||
Unmute
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
|
|
||||||
Report User
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
|
|
||||||
Block
|
|
||||||
</div>
|
|
||||||
<div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
|
|
||||||
Unblock
|
|
||||||
</div>
|
|
||||||
<div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
|
|
||||||
Settings
|
|
||||||
</div>
|
|
||||||
<div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
||||||
Close
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
</b-modal>
|
||||||
<b-modal ref="sponsorModal"
|
<b-modal ref="sponsorModal"
|
||||||
id="sponsor-modal"
|
id="sponsor-modal"
|
||||||
hide-footer
|
hide-footer
|
||||||
:title="'Sponsor ' + profileUsername"
|
:title="'Sponsor ' + profileUsername"
|
||||||
centered
|
centered
|
||||||
size="md"
|
size="md"
|
||||||
body-class="px-5">
|
body-class="px-5">
|
||||||
<div>
|
<div>
|
||||||
<p class="font-weight-bold">External Links</p>
|
<p class="font-weight-bold">External Links</p>
|
||||||
<p v-if="sponsorList.patreon" class="pt-2">
|
<p v-if="sponsorList.patreon" class="pt-2">
|
||||||
<a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
|
<a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
|
||||||
</p>
|
</p>
|
||||||
<p v-if="sponsorList.liberapay" class="pt-2">
|
<p v-if="sponsorList.liberapay" class="pt-2">
|
||||||
<a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
|
<a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
|
||||||
</p>
|
</p>
|
||||||
<p v-if="sponsorList.opencollective" class="pt-2">
|
<p v-if="sponsorList.opencollective" class="pt-2">
|
||||||
<a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
|
<a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</b-modal>
|
</b-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style type="text/css" scoped>
|
<style type="text/css" scoped>
|
||||||
.o-square {
|
.o-square {
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
.o-portrait {
|
.o-portrait {
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
.o-landscape {
|
.o-landscape {
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
}
|
}
|
||||||
.post-icon {
|
.post-icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position:relative;
|
position:relative;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
text-shadow: 3px 3px 16px #272634;
|
text-shadow: 3px 3px 16px #272634;
|
||||||
}
|
}
|
||||||
.font-size-16px {
|
.font-size-16px {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.profile-website {
|
.profile-website {
|
||||||
color: #003569;
|
color: #003569;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.nav-topbar .nav-link {
|
.nav-topbar .nav-link {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
.nav-topbar .nav-link .small {
|
.nav-topbar .nav-link .small {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
import VueMasonry from 'vue-masonry-css'
|
import VueMasonry from 'vue-masonry-css'
|
||||||
|
|
||||||
Vue.use(VueMasonry);
|
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
'profile-id',
|
'profile-id',
|
||||||
'profile-layout',
|
'profile-layout',
|
||||||
'profile-settings',
|
'profile-settings',
|
||||||
'profile-username'
|
'profile-username'
|
||||||
],
|
],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -557,6 +557,7 @@
|
||||||
this.fetchProfile();
|
this.fetchProfile();
|
||||||
let u = new URLSearchParams(window.location.search);
|
let u = new URLSearchParams(window.location.search);
|
||||||
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
||||||
|
Vue.use(VueMasonry);
|
||||||
this.layout = 'moment';
|
this.layout = 'moment';
|
||||||
}
|
}
|
||||||
if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
||||||
|
|
@ -581,6 +582,11 @@
|
||||||
if(u.has('md') && u.get('md') == 'following') {
|
if(u.has('md') && u.get('md') == 'following') {
|
||||||
this.followingModal();
|
this.followingModal();
|
||||||
}
|
}
|
||||||
|
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
||||||
|
axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
||||||
|
this.user = res.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
updated() {
|
updated() {
|
||||||
|
|
@ -591,12 +597,12 @@
|
||||||
fetchProfile() {
|
fetchProfile() {
|
||||||
axios.get('/api/v1/accounts/' + this.profileId).then(res => {
|
axios.get('/api/v1/accounts/' + this.profileId).then(res => {
|
||||||
this.profile = res.data;
|
this.profile = res.data;
|
||||||
|
}).then(res => {
|
||||||
|
this.fetchPosts();
|
||||||
});
|
});
|
||||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
},
|
||||||
axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
|
||||||
this.user = res.data;
|
fetchPosts() {
|
||||||
});
|
|
||||||
}
|
|
||||||
let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
|
let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
|
||||||
axios.get(apiUrl, {
|
axios.get(apiUrl, {
|
||||||
params: {
|
params: {
|
||||||
|
|
@ -614,7 +620,7 @@
|
||||||
this.timeline = data;
|
this.timeline = data;
|
||||||
this.ownerCheck();
|
this.ownerCheck();
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.loadSponsor();
|
//this.loadSponsor();
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
swal('Oops, something went wrong',
|
swal('Oops, something went wrong',
|
||||||
'Please release the page.',
|
'Please release the page.',
|
||||||
|
|
@ -825,7 +831,6 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
unmuteProfile(status = null) {
|
unmuteProfile(status = null) {
|
||||||
if($('body').hasClass('loggedIn') == false) {
|
if($('body').hasClass('loggedIn') == false) {
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue