diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/settings_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/settings_dropdown.vue | 41 |
1 files changed, 27 insertions, 14 deletions
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 78647065c8e..2fe2fd6b3d8 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,23 +1,22 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui'; + +import eventHub from '../event_hub'; +import { EVT_VIEW_FILE_BY_FILE } from '../constants'; +import { SETTINGS_DROPDOWN } from '../i18n'; export default { + i18n: SETTINGS_DROPDOWN, components: { GlButtonGroup, GlButton, GlDropdown, + GlFormCheckbox, }, computed: { ...mapGetters('diffs', ['isInlineView', 'isParallelView']), - ...mapState('diffs', ['renderTreeList', 'showWhitespace']), - }, - mounted() { - this.patchAriaLabel(); - }, - updated() { - this.patchAriaLabel(); + ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']), }, methods: { ...mapActions('diffs', [ @@ -26,17 +25,21 @@ export default { 'setRenderTreeList', 'setShowWhitespace', ]), - patchAriaLabel() { - this.$el - .querySelector('.js-show-diff-settings') - .setAttribute('aria-label', __('Diff view settings')); + toggleFileByFile() { + eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile }); }, }, }; </script> <template> - <gl-dropdown icon="settings" toggle-class="js-show-diff-settings" right> + <gl-dropdown + icon="settings" + :text="__('Diff view settings')" + :text-sr-only="true" + toggle-class="js-show-diff-settings" + right + > <div class="gl-px-3"> <span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('File browser') }}</span> <gl-button-group class="gl-display-flex"> @@ -90,5 +93,15 @@ export default { {{ __('Show whitespace changes') }} </label> </div> + <div class="gl-mt-3 gl-px-3"> + <gl-form-checkbox + data-testid="file-by-file" + class="gl-mb-0" + :checked="viewDiffsFileByFile" + @input="toggleFileByFile" + > + {{ $options.i18n.fileByFile }} + </gl-form-checkbox> + </div> </gl-dropdown> </template> |