ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor comment component to just use one content viewer

Browse Source
This commit is contained in:
Alina Beck 2019-10-15 14:52:02 +03:00
parent cd9f2633d7
commit 6318ced7a0
2 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/components/Comment/Comment.vue
View File

@ -43,36 +43,13 @@
/> />
</div> </div>
<div v-else> <div v-else>
<content-viewer <content-viewer :content="commentContent" class="padding-left text-align-left" />
v-if="$filters.removeHtml(comment.content).length < 180" <span v-if="isLongComment" class="show-more-or-less">
:content="comment.content" <a class="padding-left" @click="isCollapsed = !isCollapsed">
class="padding-left" {{ isCollapsed ? $t('comment.show.more') : $t('comment.show.less') }}
/>
<div v-else class="show-more-or-less-div">
<content-viewer
v-if="isCollapsed"
:content="$filters.truncate(comment.content, 180)"
class="padding-left text-align-left"
/>
<span class="show-more-or-less">
<a v-if="isCollapsed" class="padding-left" @click="isCollapsed = !isCollapsed">
{{ $t('comment.show.more') }}
</a> </a>
</span> </span>
</div> </div>
<content-viewer
v-if="!isCollapsed"
:content="comment.content"
class="padding-left text-align-left"
/>
<div class="show-more-or-less-div">
<span class="show-more-or-less">
<a v-if="!isCollapsed" class="padding-left" @click="isCollapsed = !isCollapsed">
{{ $t('comment.show.less') }}
</a>
</span>
</div>
</div>
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
</ds-card> </ds-card>
</div> </div>
@ -119,6 +96,16 @@ export default {
isTarget() { isTarget() {
return this.$route.hash === `#${this.anchor}` return this.$route.hash === `#${this.anchor}`
}, },
isLongComment() {
return this.$filters.removeHtml(this.comment.content).length > 180
},
commentContent() {
if (this.isLongComment && this.isCollapsed) {
return this.$filters.truncate(this.comment.content, 180)
}
return this.comment.content
},
anchor() { anchor() {
return `commentId-${this.comment.id}` return `commentId-${this.comment.id}`
}, },

5
webapp/components/Editor/ContentViewer.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<editor-content :editor="editor" /> <editor-content :editor="editor" :key="content" />
</template> </template>
<script> <script>
@ -31,6 +31,9 @@ export default {
}), }),
} }
}, },
beforeUpdate() {
this.editor.setContent(this.content)
},
beforeDestroy() { beforeDestroy() {
this.editor.destroy() this.editor.destroy()
}, },