chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update Timeline.vue component

Browse source
This commit is contained in:
Daniel Supernault 2019-11-10 18:20:43 -07:00
parent 420131a1ad
commit bb929ac346
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 65 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
resources/assets/js/components/Timeline.vue
View file

@ -2,6 +2,7 @@
<div class="container" style="">
<div class="row">
<div :class="[modes.distractionFree ? 'col-md-8 col-lg-8 offset-md-2 px-0 my-sm-3 timeline order-2 order-md-1':'col-md-8 col-lg-8 px-0 my-sm-3 timeline order-2 order-md-1']">
<div class="d-none" data-id="StoryTimelineComponent"></div>
<div style="padding-top:10px;">
<div v-if="loading" class="text-center">
<div class="spinner-border" role="status">
@ -69,11 +70,11 @@
<div class="card mb-sm-4 status-card card-md-rounded-0 shadow-none border">
<div v-if="!modes.distractionFree" class="card-header d-inline-flex align-items-center bg-white">
<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
<img v-bind:src="status.account.avatar" width="32px" height="32px" class="cursor-pointer" style="border-radius: 32px;" @click="profileUrl(status)">
<div class="pl-2">
<!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> -->
<a class="username font-weight-bold text-dark text-decoration-none" v-bind:href="status.account.url">
{{status.account.username}}
<a class="username font-weight-bold text-dark text-decoration-none" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
Loading...
</a>
<span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
<i class="fas fa-certificate text-danger fa-stack-1x"></i>
@ -158,7 +159,7 @@
<h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn text-lighter cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
<h3 v-if="!status.comments_disabled" class="far fa-comment text-lighter pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
<h3 v-if="status.visibility == 'public'" v-bind:class="[status.reblogged ? 'fas fa-retweet pr-3 m-0 text-primary cursor-pointer' : 'fas fa-retweet pr-3 m-0 text-lighter share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
<span class="float-right">
<span v-if="status.pf_type == 'photo'" class="float-right">
<h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-lighter" v-on:click="lightbox(status)"></h3>
</span>
</div>
@ -169,15 +170,15 @@
<div class="caption">
<p class="mb-2 read-more" style="overflow: hidden;">
<span class="username font-weight-bold">
<bdi><a class="text-dark" :href="status.account.url">{{status.account.username}}</a></bdi>
<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
</span>
<span v-html="status.content"></span>
<span class="status-content" v-html="status.content"></span>
</p>
</div>
<div class="comments" v-if="status.id == replyId && !status.comments_disabled">
<p class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;" v-for="(reply, index) in replies">
<span>
<a class="text-dark font-weight-bold mr-1" :href="reply.account.url">{{reply.account.username}}</a>
<a class="text-dark font-weight-bold mr-1" :href="profileUrl(reply)">{{reply.account.username}}</a>
<span v-html="reply.content"></span>
</span>
<span class="mb-0" style="min-width:38px">
@ -191,7 +192,7 @@
</div>
<div class="timestamp mt-2">
<p class="small text-uppercase mb-0">
<a :href="status.url" class="text-muted">
<a :href="statusUrl(status)" class="text-muted">
<timeago :datetime="status.created_at" :auto-update="60" :converter-options="{includeSeconds:true}" :title="timestampFormat(status.created_at)" v-b-tooltip.hover.bottom></timeago>
</a>
<a v-if="modes.distractionFree" class="float-right" :href="status.url">
@ -467,7 +468,6 @@
profile: {},
min_id: 0,
max_id: 0,
stories: {},
suggestions: {},
loading: true,
replies: [],
@ -579,7 +579,7 @@
axios.get(apiUrl, {
params: {
max_id: this.max_id,
limit: 5
limit: 3
}
}).then(res => {
let data = res.data;
@ -596,6 +596,7 @@
if(this.hashtagPosts.length == 0) {
this.fetchHashtagPosts();
}
// this.fetchStories();
}).catch(err => {
swal(
'Oops, something went wrong',
@ -1159,14 +1160,14 @@
if(tags.length == 0) {
return;
}
let hashtag = tags[0];
let hashtag = tags[Math.floor(Math.random(), tags.length)];
this.hashtagPostsName = hashtag;
axios.get('/api/v2/discover/tag', {
params: {
hashtag: hashtag
}
}).then(res => {
if(res.data.tags.length) {
if(res.data.tags.length > 3) {
this.showHashtagPosts = true;
this.hashtagPosts = res.data.tags.splice(0,3);
}
@ -1210,7 +1211,7 @@
ctxMenuGoToPost() {
let status = this.ctxMenuStatus;
window.location.href = status.url;
window.location.href = this.statusUrl(status);
this.closeCtxMenu();
return;
},
@ -1302,8 +1303,57 @@
formatCount(count) {
return App.util.format.count(count);
}
},
statusUrl(status) {
return status.url;
// if(status.local == true) {
// return status.url;
// }
// return '/i/web/post/_/' + status.account.id + '/' + status.id;
},
profileUrl(status) {
return status.account.url;
// if(status.local == true) {
// return status.account.url;
// }
// return '/i/web/profile/_/' + status.account.id;
},
statusCardUsernameFormat(status) {
if(status.account.local == true) {
return status.account.username;
}
let fmt = window.App.config.username.remote.format;
let txt = window.App.config.username.remote.custom;
let usr = status.account.username;
let dom = document.createElement('a');
dom.href = status.account.url;
dom = dom.hostname;
switch(fmt) {
case '@':
return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
break;
case 'from':
return usr + '<span class="text-lighter font-weight-bold"> <span class="font-weight-normal">from</span> ' + dom + '</span>';
break;
case 'custom':
return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
break;
default:
return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
break;
}
},
}
}
</script>
</script>