diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-07-09 20:13:41 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-07-10 14:03:00 +0300 |
commit | ac71675d3096ac9317ea230a408d69029bdadc73 (patch) | |
tree | 25ac9376545ed94915f38cd05c4ec5d0b6af2e42 /app/assets/javascripts/diffs/components/diff_file_header.vue | |
parent | cb6bc902ed1f89e7f94caa86b75e756b9163af51 (diff) |
Fixes toggle discussion button not expanding collapsed discussions
Discussions were being toggled by jquery DOM querying them and toggling
visibility but in vue, only the open discussions will be in the DOM
Fix includes:
- Adds a getter to the store to get the expanded discussions
- Adds an action to collapse a discussion
- When the user clicks the button, all data needed is now accessible
through a getter and we can dispatch an action to toggle the discussion
within the state, instead of showing/hiding with jQuery
- Removes hardcoded properties
Resolves #48237
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_file_header.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 1957698c6c1..ac4f37512ec 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -1,5 +1,6 @@ <script> import _ from 'underscore'; +import { mapActions, mapGetters } from 'vuex'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import Icon from '~/vue_shared/components/icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; @@ -54,6 +55,10 @@ export default { }; }, computed: { + ...mapGetters('diffs', ['diffHasExpandedDiscussions']), + hasExpandedDiscussions() { + return this.diffHasExpandedDiscussions(this.diffFile); + }, icon() { if (this.diffFile.submodule) { return 'archive'; @@ -88,9 +93,6 @@ export default { collapseIcon() { return this.expanded ? 'chevron-down' : 'chevron-right'; }, - isDiscussionsExpanded() { - return this.discussionsExpanded && this.expanded; - }, viewFileButtonText() { const truncatedContentSha = _.escape(truncateSha(this.diffFile.contentSha)); return sprintf( @@ -113,6 +115,7 @@ export default { }, }, methods: { + ...mapActions('diffs', ['toggleFileDiscussions']), handleToggle(e, checkTarget) { if ( !checkTarget || @@ -125,6 +128,9 @@ export default { showForkMessage() { this.$emit('showForkMessage'); }, + handleToggleDiscussions(){ + this.toggleFileDiscussions(this.diffFile); + }, }, }; </script> @@ -216,9 +222,10 @@ export default { v-if="diffFile.blob && diffFile.blob.readableText" > <button - :class="{ active: isDiscussionsExpanded }" + :class="{ active: hasExpandedDiscussions }" :title="s__('MergeRequests|Toggle comments for this file')" - class="btn js-toggle-diff-comments" + @click="handleToggleDiscussions" + class="btn" type="button" > <icon name="comment" /> |