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

Update vue components

Browse source
This commit is contained in:
Daniel Supernault 2020-08-11 19:11:12 -06:00
parent 68d3c40345
commit c238b82ed1
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 130 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/assets/js/components/PostComponent.vue
View file

@ -859,7 +859,9 @@ export default {
}
}
this.loaded = true;
this.fetchProfilePosts();
setTimeout(function() {
self.fetchProfilePosts();
}, 3000);
setTimeout(function() {
document.querySelectorAll('.status-comment .comment-text a').forEach(function(i, e) {
if(i.href.startsWith(window.location.origin)) {
@ -947,12 +949,16 @@ export default {
} else {
this.reactions.liked = true;
let user = this.user;
this.likes.push(user);
this.likes.unshift(user);
setTimeout(function() {
event.target.classList.add('animate__animated', 'animate__bounce');
},100);
}
}).catch(err => {
console.error(err);
swal('Error', 'Something went wrong, please try again later.', 'error');
});
window.navigator.vibrate(200);
},
shareStatus() {
@ -1383,6 +1389,9 @@ export default {
},
fetchProfilePosts() {
if(!$('body').hasClass('loggedIn') && this.loaded) {
return;
}
let self = this;
let apiUrl = '/api/pixelfed/v1/accounts/' + this.statusProfileId + '/statuses';
axios.get(apiUrl, {
@ -1426,6 +1435,9 @@ export default {
},
showTaggedPeopleModal() {
if(!$('body').hasClass('loggedIn') && this.loaded) {
return;
}
this.$refs.taggedModal.show();
},

108
resources/assets/js/components/SearchResults.vue
View file

@ -11,10 +11,57 @@
<div v-if="!loading && !networkError" class="mt-5">
<div v-if="analysis == 'all'" class="row">
<div class="col-12 mb-5">
<div class="col-12 d-flex justify-content-between align-items-center">
<p class="h5 font-weight-bold text-dark">Showing results for <i>{{query}}</i></p>
<div v-if="placesSearchEnabled" title="Show Places" data-toggle="tooltip">
<span v-if="results.placesPagination.total > 0" class="badge badge-light mr-2 p-1 border" style="margin-top:-5px;">{{formatCount(results.placesPagination.total)}}</span>
<div class="d-inline custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="placesSwitch" v-model="showPlaces">
<label class="custom-control-label font-weight-bold text-sm text-lighter" for="placesSwitch"><i class="fas fa-map-marker-alt"></i></label>
</div>
</div>
</div>
<div class="col-12 mb-5">
<hr>
</div>
<div v-if="placesSearchEnabled && showPlaces" class="col-12">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">PLACES <span class="pl-1 text-lighter">({{results.placesPagination.total}})</span></p>
</div>
<div v-if="results.places.length" class="mb-5">
<a v-for="(hashtag, index) in results.places" class="mr-3 pr-4 d-inline-block text-decoration-none" :href="buildUrl('places', hashtag)">
<div class="pb-2">
<div class="media align-items-center py-2">
<div class="media-body text-truncate">
<p class="mb-0 text-truncate text-dark font-weight-bold" data-toggle="tooltip" :title="hashtag.value">
<i class="fas fa-map-marker-alt text-lighter mr-2"></i> {{hashtag.value}}
</p>
</div>
</div>
</div>
</a>
<p v-if="results.places.length == 20 || placesCursor > 0" class="text-center mt-3">
<a v-if="placesCursor == 1" href="#" class="btn btn-outline-secondary btn-sm font-weight-bold py-0 disabled" disabled>
<i class="fas fa-chevron-left mr-2"></i> Previous
</a>
<a v-else href="#" @click.prevent="placesPrevPage()" class="btn btn-outline-secondary btn-sm font-weight-bold py-0">
<i class="fas fa-chevron-left mr-2"></i> Previous
</a>
<span class="mx-4 small text-lighter">{{placesCursor}}/{{results.placesPagination.last_page}}</span>
<a v-if="placesCursor !== results.placesPagination.last_page" @click.prevent="placesNextPage()" href="#" class="btn btn-primary btn-sm font-weight-bold py-0">
Next <i class="fas fa-chevron-right ml-2"></i>
</a>
<a v-else href="#" class="btn btn-primary btn-sm font-weight-bold py-0 disabled" disabled>
Next <i class="fas fa-chevron-right ml-2"></i>
</a>
</p>
</div>
<div v-else>
<div class="border py-3 text-center font-weight-bold">No results found</div>
</div>
</div>
<div class="col-md-3">
<div class="mb-4">
<p class="text-secondary small font-weight-bold">HASHTAGS <span class="pl-1 text-lighter">({{results.hashtags.length}})</span></p>
@ -284,7 +331,8 @@ export default {
results: {
hashtags: [],
profiles: [],
statuses: []
statuses: [],
places: [],
},
filters: {
hashtags: true,
@ -292,6 +340,10 @@ export default {
statuses: true
},
analysis: 'profile',
showPlaces: false,
placesCursor: 1,
placesCache: [],
placesSearchEnabled: false
}
},
beforeMount() {
@ -300,6 +352,9 @@ export default {
mounted() {
$('.search-bar input').val(this.query);
},
updated() {
$('[data-toggle="tooltip"]').tooltip();
},
methods: {
bootSearch() {
let lexer = this.searchLexer();
@ -388,7 +443,7 @@ export default {
params: {
'q': this.query,
'src': 'metro',
'v': 1,
'v': 2,
'scope': 'all'
}
}).then(res => {
@ -396,6 +451,9 @@ export default {
this.results.hashtags = results.hashtags ? results.hashtags : [];
this.results.profiles = results.profiles ? results.profiles : [];
this.results.statuses = results.posts ? results.posts : [];
this.results.places = results.places ? results.places : [];
this.placesCache = results.places;
this.results.placesPagination = results.placesPagination ? results.placesPagination : [];
this.loading = false;
}).catch(err => {
this.loading = false;
@ -500,6 +558,50 @@ export default {
this.networkError = true;
break;
}
},
placesPrevPage() {
this.placesCursor--;
if(this.placesCursor == 1) {
this.results.places = this.placesCache.slice(0, 20);
return;
}
let plc = this.placesCursor * 20;
this.results.places = this.placesCache.slice(plc, 20);
return;
},
placesNextPage() {
this.placesCursor++;
let plc = this.placesCursor * 20;
if(this.placesCache.length > 20) {
this.results.places = this.placesCache.slice(this.placesCursor == 1 ? 0 : plc, 20);
return;
}
axios.get('/api/search', {
params: {
'q': this.query,
'src': 'metro',
'v': 2,
'scope': 'all',
'page': this.placesCursor
}
}).then(res => {
let results = res.data;
this.results.places = results.places ? results.places : [];
this.placesCache.push(...results.places);
this.loading = false;
}).catch(err => {
this.loading = false;
console.log(err);
this.networkError = true;
});
},
formatCount(num) {
let count = window.App.util.format.count(num);
return count;
}
}

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

@ -162,7 +162,8 @@
<div class="card-body">
<div v-if="!modes.distractionFree" class="reactions my-1 pb-2">
<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.favourited" class="fas fa-heart text-danger pr-3 m-0 cursor-pointer" title="Like" v-on:click="likeStatus(status, $event);"></h3>
<h3 v-else class="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>
<h3 class="fas fa-expand pr-3 m-0 cursor-pointer text-lighter" v-on:click="lightbox(status)"></h3>
@ -196,7 +197,7 @@
<span v-html="reply.content" style="word-break: break-all;" class="comment-body"></span>
</span>
<span class="mb-0" style="min-width:38px">
<span v-on:click="likeStatus(reply, $event)">
<span v-on:click="likeStatus(reply, $event);">
<i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger cursor-pointer':'far fa-heart fa-sm text-lighter cursor-pointer']"></i>
</span>
<!-- <post-menu :status="reply" :profile="profile" size="sm" :modal="'true'" :feed="feed" class="d-inline-flex pl-2"></post-menu> -->
@ -411,7 +412,7 @@
<div class="ml-3">
<p class="mb-0">
<span v-if="statusOwner(s)" class="font-weight-bold small">{{s.favourites_count == 1 ? '1 like' : s.favourites_count+' likes'}}</span>
<span class="px-2"><i v-bind:class="[s.favourited ? 'fas fa-heart text-danger cursor-pointer' : 'far fa-heart like-btn text-lighter cursor-pointer']" v-on:click="likeStatus(s, $event)"></i></span>
<span class="px-2"><i v-bind:class="[s.favourited ? 'fas fa-heart text-danger cursor-pointer' : 'far fa-heart like-btn text-lighter cursor-pointer']" v-on:click="likeStatus(s, $event);"></i></span>
<span class="mr-2 cursor-pointer"><i class="fas fa-ellipsis-v" @click="ctxMenu(s)"></i></span>
</p>
</div>
@ -922,7 +923,7 @@
},
likeStatus(status) {
likeStatus(status, event) {
if($('body').hasClass('loggedIn') == false) {
return;
}
@ -937,6 +938,12 @@
status.favourites_count = count;
swal('Error', 'Something went wrong, please try again later.', 'error');
});
window.navigator.vibrate(200);
if(status.favourited) {
setTimeout(function() {
event.target.classList.add('animate__animated', 'animate__bounce');
},100);
}
},
shareStatus(status, $event) {