gitlab-org--gitlab-foss/app/assets/javascripts/diffs/components/settings_dropdown.vue

<script>
import { GlButtonGroup, GlButton, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
import { mapActions, mapGetters, mapState } from 'vuex';

import { EVT_VIEW_FILE_BY_FILE } from '../constants';
import eventHub from '../event_hub';
import { SETTINGS_DROPDOWN } from '../i18n';

export default {
  i18n: SETTINGS_DROPDOWN,
  components: {
    GlButtonGroup,
    GlButton,
    GlDropdown,
    GlFormCheckbox,
  },
  computed: {
    ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
    ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']),
  },
  methods: {
    ...mapActions('diffs', [
      'setInlineDiffViewType',
      'setParallelDiffViewType',
      'setRenderTreeList',
      'setShowWhitespace',
    ]),
    toggleFileByFile() {
      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: !this.viewDiffsFileByFile });
    },
  },
};
</script>

<template>
  <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">
        <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>
    </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>