2019-01-24 14:48:03 +00:00
|
|
|
<script>
|
|
|
|
import { mapActions, mapGetters, mapState } from 'vuex';
|
2020-12-02 21:09:44 +00:00
|
|
|
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';
|
2019-01-24 14:48:03 +00:00
|
|
|
|
|
|
|
export default {
|
2020-12-02 21:09:44 +00:00
|
|
|
i18n: SETTINGS_DROPDOWN,
|
2019-01-24 14:48:03 +00:00
|
|
|
components: {
|
2020-09-02 09:10:23 +00:00
|
|
|
GlButtonGroup,
|
|
|
|
GlButton,
|
|
|
|
GlDropdown,
|
2020-12-02 21:09:44 +00:00
|
|
|
GlFormCheckbox,
|
|
|
|
},
|
2019-01-24 14:48:03 +00:00
|
|
|
computed: {
|
|
|
|
...mapGetters('diffs', ['isInlineView', 'isParallelView']),
|
2020-12-02 21:09:44 +00:00
|
|
|
...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']),
|
|
|
|
},
|
2019-01-24 14:48:03 +00:00
|
|
|
methods: {
|
|
|
|
...mapActions('diffs', [
|
|
|
|
'setInlineDiffViewType',
|
|
|
|
'setParallelDiffViewType',
|
|
|
|
'setRenderTreeList',
|
|
|
|
'setShowWhitespace',
|
|
|
|
]),
|
2020-12-02 21:09:44 +00:00
|
|
|
toggleFileByFile() {
|
|
|
|
eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile });
|
|
|
|
},
|
2019-01-24 14:48:03 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2020-11-30 12:09:21 +00:00
|
|
|
<gl-dropdown
|
|
|
|
icon="settings"
|
|
|
|
:text="__('Diff view settings')"
|
|
|
|
:text-sr-only="true"
|
|
|
|
toggle-class="js-show-diff-settings"
|
|
|
|
right
|
|
|
|
>
|
2020-09-02 09:10:23 +00:00
|
|
|
<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">
|
|
|
|
<gl-button
|
|
|
|
:class="{ selected: !renderTreeList }"
|
|
|
|
class="gl-w-half js-list-view"
|
|
|
|
@click="setRenderTreeList(false)"
|
|
|
|
>
|
|
|
|
{{ __('List view') }}
|
|
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
|
|
:class="{ selected: renderTreeList }"
|
|
|
|
class="gl-w-half js-tree-view"
|
|
|
|
@click="setRenderTreeList(true)"
|
|
|
|
>
|
|
|
|
{{ __('Tree view') }}
|
|
|
|
</gl-button>
|
|
|
|
</gl-button-group>
|
|
|
|
</div>
|
|
|
|
<div class="gl-mt-3 gl-px-3">
|
|
|
|
<span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('Compare changes') }}</span>
|
|
|
|
<gl-button-group class="gl-display-flex js-diff-view-buttons">
|
|
|
|
<gl-button
|
|
|
|
id="inline-diff-btn"
|
|
|
|
:class="{ selected: isInlineView }"
|
|
|
|
class="gl-w-half js-inline-diff-button"
|
|
|
|
data-view-type="inline"
|
|
|
|
@click="setInlineDiffViewType"
|
|
|
|
>
|
|
|
|
{{ __('Inline') }}
|
|
|
|
</gl-button>
|
|
|
|
<gl-button
|
|
|
|
id="parallel-diff-btn"
|
|
|
|
:class="{ selected: isParallelView }"
|
|
|
|
class="gl-w-half js-parallel-diff-button"
|
|
|
|
data-view-type="parallel"
|
|
|
|
@click="setParallelDiffViewType"
|
|
|
|
>
|
|
|
|
{{ __('Side-by-side') }}
|
|
|
|
</gl-button>
|
|
|
|
</gl-button-group>
|
|
|
|
</div>
|
|
|
|
<div class="gl-mt-3 gl-px-3">
|
|
|
|
<label class="gl-mb-0">
|
|
|
|
<input
|
|
|
|
id="show-whitespace"
|
|
|
|
type="checkbox"
|
|
|
|
:checked="showWhitespace"
|
|
|
|
@change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
|
|
|
|
/>
|
|
|
|
{{ __('Show whitespace changes') }}
|
|
|
|
</label>
|
2019-01-24 14:48:03 +00:00
|
|
|
</div>
|
2020-12-02 21:09:44 +00:00
|
|
|
<div class="gl-mt-3 gl-px-3">
|
2020-12-04 18:09:55 +00:00
|
|
|
<gl-form-checkbox
|
|
|
|
data-testid="file-by-file"
|
|
|
|
class="gl-mb-0"
|
|
|
|
:checked="viewDiffsFileByFile"
|
|
|
|
@input="toggleFileByFile"
|
|
|
|
>
|
2020-12-02 21:09:44 +00:00
|
|
|
{{ $options.i18n.fileByFile }}
|
|
|
|
</gl-form-checkbox>
|
|
|
|
</div>
|
2020-09-02 09:10:23 +00:00
|
|
|
</gl-dropdown>
|
2019-01-24 14:48:03 +00:00
|
|
|
</template>
|