Update PostPresenter component

This commit is contained in:
Daniel Supernault 2019-02-12 22:46:05 -07:00
parent 46e2cece94
commit 42c02aa273
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 38 additions and 16 deletions

View file

@ -3,7 +3,6 @@
</template> </template>
<style type="text/css" scoped> <style type="text/css" scoped>
@import '~quill/dist/quill.snow.css';
body { body {
background-color: #ECECEC; background-color: #ECECEC;
} }
@ -19,7 +18,6 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
import Quill from 'quill';
export default { export default {
data() { data() {

View file

@ -19,10 +19,10 @@
<div class="comments" data-min-id="0" data-max-id="0"> <div class="comments" data-min-id="0" data-max-id="0">
<p v-for="(reply, index) in results" class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;"> <p v-for="(reply, index) in results" class="mb-0 d-flex justify-content-between align-items-top read-more" style="overflow-y: hidden;">
<span> <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="reply.account.url" v-bind:title="reply.account.username">{{truncate(reply.account.username,15)}}</a>
<span v-html="reply.content" class=""></span> <span class="text-break" v-html="reply.content"></span>
</span> </span>
<span class="" style="min-width:38px"> <span class="pl-2" style="min-width:38px">
<span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span> <span v-on:click="likeStatus(reply, $event)"><i v-bind:class="[reply.favourited ? 'fas fa-heart fa-sm text-danger':'far fa-heart fa-sm text-lighter']"></i></span>
<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2"></post-menu> <post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block pl-2"></post-menu>
</span> </span>
@ -36,9 +36,13 @@
.text-lighter { .text-lighter {
color:#B8C2CC !important; color:#B8C2CC !important;
} }
.text-break {
word-break: break-all !important;
}
</style> </style>
<script> <script>
export default { export default {
props: ['post-id', 'post-username', 'user'], props: ['post-id', 'post-username', 'user'],
data() { data() {
@ -153,7 +157,13 @@ export default {
}).catch(err => { }).catch(err => {
swal('Error', 'Something went wrong, please try again later.', 'error'); swal('Error', 'Something went wrong, please try again later.', 'error');
}); });
},
truncate(str,lim) {
return _.truncate(str,{
length: lim
});
} }
}, },
} }
</script> </script>

View file

@ -27,23 +27,23 @@
<span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span> <span class="username-link font-weight-bold text-dark">{{ statusUsername }}</span>
</div> </div>
</a> </a>
<div class="float-right"> <div v-if="user != false" class="float-right">
<div class="post-actions"> <div class="post-actions">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options"> <button class="btn btn-link text-dark no-caret dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Post options">
<span class="fas fa-ellipsis-v text-muted"></span> <span class="fas fa-ellipsis-v text-muted"></span>
</button> </button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<span class="menu-user d-none"> <div v-if="!owner()">
<a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a> <a class="dropdown-item font-weight-bold" :href="reportUrl()">Report</a>
<a class="dropdown-item font-weight-bold" v-on:click="muteProfile">Mute Profile</a> <a class="dropdown-item font-weight-bold" v-on:click="muteProfile()">Mute Profile</a>
<a class="dropdown-item font-weight-bold" v-on:click="blockProfile">Block Profile</a> <a class="dropdown-item font-weight-bold" v-on:click="blockProfile()">Block Profile</a>
</span> </div>
<span class="menu-author d-none"> <div v-if="ownerOrAdmin()">
<!-- <a class="dropdown-item font-weight-bold" :href="editUrl()">Disable Comments</a> --> <!-- <a class="dropdown-item font-weight-bold" :href="editUrl()">Disable Comments</a> -->
<a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a> <a class="dropdown-item font-weight-bold" :href="editUrl()">Edit</a>
<a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a> <a class="dropdown-item font-weight-bold text-danger" v-on:click="deletePost(status)">Delete</a>
</span> </div>
</div> </div>
</div> </div>
</div> </div>
@ -238,9 +238,9 @@ export default {
props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'], props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar'],
data() { data() {
return { return {
status: {}, status: false,
media: {}, media: {},
user: {}, user: false,
reactions: { reactions: {
liked: false, liked: false,
shared: false shared: false
@ -517,14 +517,28 @@ export default {
} }
axios.post('/i/delete', { axios.post('/i/delete', {
type: 'status', type: 'status',
item: status.id item: this.status.id
}).then(res => { }).then(res => {
swal('Success', 'You have successfully deleted this post', 'success'); swal('Success', 'You have successfully deleted this post', 'success');
window.location.href = '/';
}).catch(err => { }).catch(err => {
swal('Error', 'Something went wrong. Please try again later.', 'error'); swal('Error', 'Something went wrong. Please try again later.', 'error');
}); });
} }
},
owner() {
return this.user.id === this.status.account.id;
},
admin() {
return this.user.is_admin == true;
},
ownerOrAdmin() {
return this.owner() || this.admin();
} }
}
},
} }
</script> </script>