diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-26 09:07:52 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-26 09:07:52 +0000 |
commit | 7e019504f5ac6decde690565857238e7e59aa034 (patch) | |
tree | fab8832b40e25fc9bc1ae54b9303b95ea146b5d5 /app/assets/javascripts/notes/components | |
parent | 116d4e56e83a1f408afe710ce070e699ba206475 (diff) | |
download | gitlab-ce-7e019504f5ac6decde690565857238e7e59aa034.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/notes/components')
-rw-r--r-- | app/assets/javascripts/notes/components/notes_app.vue | 93 | ||||
-rw-r--r-- | app/assets/javascripts/notes/components/sort_discussion.vue | 64 |
2 files changed, 120 insertions, 37 deletions
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 762228dd138..c1dd56aedf2 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -12,6 +12,7 @@ import commentForm from './comment_form.vue'; import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; +import OrderedLayout from '~/vue_shared/components/ordered_layout.vue'; import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; import { __ } from '~/locale'; import initUserPopovers from '~/user_popovers'; @@ -27,6 +28,7 @@ export default { placeholderSystemNote, skeletonLoadingContainer, discussionFilterNote, + OrderedLayout, }, props: { noteableData: { @@ -70,7 +72,11 @@ export default { 'getNoteableData', 'userCanReply', 'discussionTabCounter', + 'sortDirection', ]), + sortDirDesc() { + return this.sortDirection === constants.DESC; + }, discussionTabCounterText() { return this.isLoading ? '' : this.discussionTabCounter; }, @@ -91,6 +97,9 @@ export default { canReply() { return this.userCanReply && !this.commentsDisabled; }, + slotKeys() { + return this.sortDirDesc ? ['form', 'comments'] : ['comments', 'form']; + }, }, watch: { shouldShow() { @@ -156,6 +165,9 @@ export default { 'convertToDiscussion', 'stopPolling', ]), + discussionIsIndividualNoteAndNotConverted(discussion) { + return discussion.individual_note && !this.convertedDisscussionIds.includes(discussion.id); + }, handleHashChanged() { const noteId = this.checkLocationHash(); @@ -232,44 +244,51 @@ export default { <template> <div v-show="shouldShow" id="notes"> - <ul id="notes-list" class="notes main-notes-list timeline"> - <template v-for="discussion in allDiscussions"> - <skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" /> - <template v-else-if="discussion.isPlaceholderNote"> - <placeholder-system-note - v-if="discussion.placeholderType === $options.systemNote" - :key="discussion.id" - :note="discussion.notes[0]" - /> - <placeholder-note v-else :key="discussion.id" :note="discussion.notes[0]" /> - </template> - <template - v-else-if="discussion.individual_note && !convertedDisscussionIds.includes(discussion.id)" - > - <system-note - v-if="discussion.notes[0].system" - :key="discussion.id" - :note="discussion.notes[0]" - /> - <noteable-note - v-else - :key="discussion.id" - :note="discussion.notes[0]" - :show-reply-button="canReply" - @startReplying="startReplying(discussion.id)" - /> - </template> - <noteable-discussion - v-else - :key="discussion.id" - :discussion="discussion" - :render-diff-file="true" - :help-page-path="helpPagePath" + <ordered-layout :slot-keys="slotKeys"> + <template #form> + <comment-form + v-if="!commentsDisabled" + class="js-comment-form" + :noteable-type="noteableType" /> </template> - <discussion-filter-note v-show="commentsDisabled" /> - </ul> - - <comment-form v-if="!commentsDisabled" :noteable-type="noteableType" /> + <template #comments> + <ul id="notes-list" class="notes main-notes-list timeline"> + <template v-for="discussion in allDiscussions"> + <skeleton-loading-container v-if="discussion.isSkeletonNote" :key="discussion.id" /> + <template v-else-if="discussion.isPlaceholderNote"> + <placeholder-system-note + v-if="discussion.placeholderType === $options.systemNote" + :key="discussion.id" + :note="discussion.notes[0]" + /> + <placeholder-note v-else :key="discussion.id" :note="discussion.notes[0]" /> + </template> + <template v-else-if="discussionIsIndividualNoteAndNotConverted(discussion)"> + <system-note + v-if="discussion.notes[0].system" + :key="discussion.id" + :note="discussion.notes[0]" + /> + <noteable-note + v-else + :key="discussion.id" + :note="discussion.notes[0]" + :show-reply-button="canReply" + @startReplying="startReplying(discussion.id)" + /> + </template> + <noteable-discussion + v-else + :key="discussion.id" + :discussion="discussion" + :render-diff-file="true" + :help-page-path="helpPagePath" + /> + </template> + <discussion-filter-note v-show="commentsDisabled" /> + </ul> + </template> + </ordered-layout> </div> </template> diff --git a/app/assets/javascripts/notes/components/sort_discussion.vue b/app/assets/javascripts/notes/components/sort_discussion.vue new file mode 100644 index 00000000000..16eded52763 --- /dev/null +++ b/app/assets/javascripts/notes/components/sort_discussion.vue @@ -0,0 +1,64 @@ +<script> +import { GlIcon } from '@gitlab/ui'; +import { mapActions, mapGetters } from 'vuex'; +import { __ } from '~/locale'; +import { ASC, DESC } from '../constants'; + +const SORT_OPTIONS = [ + { key: DESC, text: __('Newest first'), cls: 'js-newest-first' }, + { key: ASC, text: __('Oldest first'), cls: 'js-oldest-first' }, +]; + +export default { + SORT_OPTIONS, + components: { + GlIcon, + }, + computed: { + ...mapGetters(['sortDirection']), + selectedOption() { + return SORT_OPTIONS.find(({ key }) => this.sortDirection === key); + }, + dropdownText() { + return this.selectedOption.text; + }, + }, + methods: { + ...mapActions(['setDiscussionSortDirection']), + fetchSortedDiscussions(direction) { + if (this.isDropdownItemActive(direction)) { + return; + } + + this.setDiscussionSortDirection(direction); + }, + isDropdownItemActive(sortDir) { + return sortDir === this.sortDirection; + }, + }, +}; +</script> + +<template> + <div class="mr-2 d-inline-block align-bottom full-width-mobile"> + <button class="btn btn-sm js-dropdown-text" data-toggle="dropdown" aria-expanded="false"> + {{ dropdownText }} + <gl-icon name="chevron-down" /> + </button> + <div ref="dropdownMenu" class="dropdown-menu dropdown-menu-selectable dropdown-menu-right"> + <div class="dropdown-content"> + <ul> + <li v-for="{ text, key, cls } in $options.SORT_OPTIONS" :key="key"> + <button + :class="[cls, { 'is-active': isDropdownItemActive(key) }]" + type="button" + @click="fetchSortedDiscussions(key)" + > + {{ text }} + </button> + </li> + </ul> + </div> + </div> + </div> +</template> |