diff options
author | dartcafe <github@dartcafe.de> | 2022-03-25 15:06:39 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2022-03-27 13:09:39 +0300 |
commit | 5d8a71fb77431fcc49385a2aeaa33bdc7885ec3d (patch) | |
tree | 1ccf78833ce55322672d0c3b0851849377cb6c06 /src | |
parent | a8e18b4ecabddcd4b95bf325c00064ff485f8231 (diff) |
group comments by user and posting time
Signed-off-by: dartcafe <github@dartcafe.de>
Diffstat (limited to 'src')
-rw-r--r-- | src/js/components/Actions/ActionDelete.vue | 49 | ||||
-rw-r--r-- | src/js/components/Comments/CommentItem.vue | 13 |
2 files changed, 50 insertions, 12 deletions
diff --git a/src/js/components/Actions/ActionDelete.vue b/src/js/components/Actions/ActionDelete.vue index 7d45e3e6..52563d53 100644 --- a/src/js/components/Actions/ActionDelete.vue +++ b/src/js/components/Actions/ActionDelete.vue @@ -21,36 +21,53 @@ --> <template> - <Actions> - <ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()"> - {{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }} - </ActionButton> - <ActionButton v-else icon="icon-delete" @click="deleteItem()"> - {{ title }} - </ActionButton> - </Actions> + <div class=""> + <DeleteIcon v-if="iconMode && !deleteTimeout" :size="iconSize" @click="deleteItem()" /> + <UndoIcon v-if="iconMode && deleteTimeout" :size="iconSize" @click="cancelDelete()" /> + + <Actions v-if="!iconMode"> + <ActionButton v-if="deleteTimeout" icon="icon-history" @click="cancelDelete()"> + {{ n('polls', 'Deleting in {countdown} second', 'Deleting in {countdown} seconds', countdown, { countdown }) }} + </ActionButton> + <ActionButton v-else icon="icon-delete" @click="deleteItem()"> + {{ title }} + </ActionButton> + </Actions> + </div> </template> <script> import { Actions, ActionButton } from '@nextcloud/vue' +import DeleteIcon from 'vue-material-design-icons/Delete.vue' +import UndoIcon from 'vue-material-design-icons/ArrowULeftTop.vue' export default { name: 'ActionDelete', components: { Actions, ActionButton, + DeleteIcon, + UndoIcon, }, props: { // timeout in seconds timeout: { type: Number, - default: 7, + default: 4, }, title: { type: String, default: t('polls', 'Delete'), }, + iconMode: { + type: Boolean, + default: false, + }, + iconSize: { + type: Number, + default: 20, + }, }, data() { @@ -88,3 +105,17 @@ export default { }, } </script> + +<style lang ="scss"> +.material-design-icon { + + &.delete-icon, + &.undo-icon { + cursor: pointer; + } + + &.delete-icon:hover { + color: var(--color-error-hover); + } +} +</style> diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue index 3da126ed..5e0107f2 100644 --- a/src/js/components/Comments/CommentItem.vue +++ b/src/js/components/Comments/CommentItem.vue @@ -26,11 +26,14 @@ <div class="comment-item__content"> <span class="comment-item__user">{{ comment.user.displayName }}</span> <span class="comment-item__date">{{ dateCommentedRelative }}</span> - <div class="comment-item__comment"> - {{ comment.comment }} - </div> + <p v-for="(subComment) in comment.subComments" + :key="subComment.id" + class="comment-item__comment"> + {{ subComment.comment }} + </p> </div> <ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner" + icon-mode :title="t('polls', 'Delete comment')" @delete="deleteComment()" /> </div> @@ -97,6 +100,10 @@ export default { } } + .comment-item__comment { + hyphens: auto; + } + .comment-item__content { margin-left: 8px; flex: 1 1; |