From b0257be20efbf3a6f7c79c379124406a3a1a1a89 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Wed, 21 Jul 2021 01:16:37 -0600 Subject: [PATCH] Update RemotePost.vue, improve text only post UI --- resources/assets/js/components/RemotePost.vue | 119 ++++++++++++++++-- .../js/components/partials/CommentCard.vue | 50 ++++++-- 2 files changed, 153 insertions(+), 16 deletions(-) diff --git a/resources/assets/js/components/RemotePost.vue b/resources/assets/js/components/RemotePost.vue index d653c6f68..5acefefcd 100644 --- a/resources/assets/js/components/RemotePost.vue +++ b/resources/assets/js/components/RemotePost.vue @@ -9,9 +9,20 @@

View Status

-
+
-
+ +
+ + + +
+ +
@@ -242,6 +253,7 @@
+

More posts from {{this.statusUsername}}

@@ -275,6 +287,14 @@
+ + { + this.profile = res.data; + }); this.fetchRelationships(); if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') { this.showReadMore = false; @@ -625,9 +659,9 @@ export default { } self.profileUrl = '/i/web/profile/_/' + response.data.status.account.id; this.loaded = true; - setTimeout(function() { - self.fetchProfilePosts(); - }, 3000); + // setTimeout(function() { + // self.fetchProfilePosts(); + // }, 3000); setTimeout(function() { self.fetchState(); document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { @@ -1198,9 +1232,9 @@ export default { status.sensitive == false }); let ids = data.map(status => status.id); - if(data.length >= 3) { - self.showProfileMorePosts = true; - } + // if(data.length >= 3) { + // self.showProfileMorePosts = true; + // } self.profileMorePosts = data.slice(0,6); }) }, @@ -1405,6 +1439,75 @@ export default { }); }, + setCurrentLayout(layout) { + this.currentLayout = layout; + }, + + commentFocus(status, $event) { + if(status.comments_disabled) { + return; + } + + this.replies = {}; + this.replyStatus = {}; + this.replyText = ''; + this.replyId = status.id; + this.replyStatus = status; + // this.$refs.replyModal.show(); + this.fetchStatusComments(status, ''); + + $('nav').hide(); + $('footer').hide(); + $('.mobile-footer-spacer').attr('style', 'display:none !important'); + $('.mobile-footer').attr('style', 'display:none !important'); + $('.mt-md-4').hide(); + this.currentLayout = 'comments'; + window.history.pushState({}, '', this.getStatusUrl(status)); + return; + }, + + fetchStatusComments(status, card) { + let url = '/api/v2/comments/'+status.account.id+'/status/'+status.id; + axios.get(url) + .then(response => { + let self = this; + this.replies = _.reverse(response.data.data); + this.pagination = response.data.meta.pagination; + if(this.replies.length > 0) { + $('.load-more-link').removeClass('d-none'); + } + $('.postCommentsLoader').addClass('d-none'); + $('.postCommentsContainer').removeClass('d-none'); + // setTimeout(function() { + // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { + // i.href = App.util.format.rewriteLinks(i); + // }); + // }, 500); + }).catch(error => { + if(!error.response) { + $('.postCommentsLoader .lds-ring') + .attr('style','width:100%') + .addClass('pt-4 font-weight-bold text-muted') + .text('An error occurred, cannot fetch comments. Please try again later.'); + } else { + switch(error.response.status) { + case 401: + $('.postCommentsLoader .lds-ring') + .attr('style','width:100%') + .addClass('pt-4 font-weight-bold text-muted') + .text('Please login to view.'); + break; + default: + $('.postCommentsLoader .lds-ring') + .attr('style','width:100%') + .addClass('pt-4 font-weight-bold text-muted') + .text('An error occurred, cannot fetch comments. Please try again later.'); + break; + } + } + }); + }, + }, } diff --git a/resources/assets/js/components/partials/CommentCard.vue b/resources/assets/js/components/partials/CommentCard.vue index e601f7862..1ba25bbfa 100644 --- a/resources/assets/js/components/partials/CommentCard.vue +++ b/resources/assets/js/components/partials/CommentCard.vue @@ -24,7 +24,7 @@

- {{trimCaption(status.account.username,15)}} + {{trimCaption(status.account.username,15)}}

@@ -52,7 +52,7 @@
- {{trimCaption(reply.account.username,15)}} + {{trimCaption(reply.account.username,15)}} This comment may contain sensitive material Show @@ -62,7 +62,7 @@

- {{trimCaption(reply.account.username,15)}} + {{trimCaption(reply.account.username,15)}} @@ -73,7 +73,7 @@

- + {{reply.favourites_count == 1 ? '1 like' : reply.favourites_count + ' likes'}} Reply

@@ -87,7 +87,7 @@

- {{s.account.username}} + {{s.account.username}} @@ -95,7 +95,7 @@

- + {{s.favourites_count == 1 ? '1 like' : s.favourites_count + ' likes'}}

@@ -190,7 +190,20 @@ import ContextMenu from './ContextMenu.vue'; export default { - props: ['status', 'profile'], + props: { + 'status': { + type: Object + }, + + 'profile': { + type: Object + }, + + 'backToStatus': { + type: Boolean, + default: false + } + }, components: { "context-menu": ContextMenu @@ -249,6 +262,11 @@ methods: { commentNavigateBack(id) { + if(this.backToStatus) { + window.location.href = this.statusUrl(this.status); + return; + } + $('nav').show(); $('footer').show(); $('.mobile-footer-spacer').attr('style', 'display:block'); @@ -393,7 +411,23 @@ ctxMenu(status) { this.ctxMenuStatus = status; this.$refs.cMenu.open(); - } + }, + + statusUrl(status) { + if(status.local == true) { + return status.url; + } + + return '/i/web/post/_/' + status.account.id + '/' + status.id; + }, + + profileUrl(status) { + if(status.local == true) { + return status.account.url; + } + + return '/i/web/profile/_/' + status.account.id; + }, } }