diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/settings_dropdown.vue')
| -rw-r--r-- | app/assets/javascripts/diffs/components/settings_dropdown.vue | 162 |
1 files changed, 87 insertions, 75 deletions
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 2d9ac76b3e4..a705f29ff65 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -2,23 +2,22 @@ import { GlButtonGroup, GlButton, - GlDropdown, + GlDisclosureDropdown, GlFormCheckbox, - GlTooltipDirective, + GlTooltip, } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { SETTINGS_DROPDOWN } from '../i18n'; export default { i18n: SETTINGS_DROPDOWN, - directives: { - GlTooltip: GlTooltipDirective, - }, + toggleId: 'js-show-diff-settings', components: { GlButtonGroup, GlButton, - GlDropdown, + GlDisclosureDropdown, GlFormCheckbox, + GlTooltip, }, computed: { ...mapGetters('diffs', ['isInlineView', 'isParallelView']), @@ -43,74 +42,87 @@ export default { </script> <template> - <gl-dropdown - v-gl-tooltip - icon="settings" - :title="$options.i18n.preferences" - :text="$options.i18n.preferences" - :text-sr-only="true" - :aria-label="$options.i18n.preferences" - :header-text="$options.i18n.preferences" - 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({ renderTreeList: false })" - > - {{ __('List view') }} - </gl-button> - <gl-button - :class="{ selected: renderTreeList }" - class="gl-w-half js-tree-view" - @click="setRenderTreeList({ renderTreeList: 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> - <gl-form-checkbox - data-testid="show-whitespace" - class="gl-mt-3 gl-ml-3" - :checked="showWhitespace" - @input="toggleWhitespace" - > - {{ $options.i18n.whitespace }} - </gl-form-checkbox> - <gl-form-checkbox - data-testid="file-by-file" - class="gl-ml-3 gl-mb-0" - :checked="viewDiffsFileByFile" - @input="toggleFileByFile" + <div> + <gl-disclosure-dropdown + :toggle-class="$options.toggleId" + :toggle-id="$options.toggleId" + icon="settings" + :text="$options.i18n.preferences" + text-sr-only + :aria-label="$options.i18n.preferences" + placement="right" + :auto-close="false" > - {{ $options.i18n.fileByFile }} - </gl-form-checkbox> - </gl-dropdown> + <slot name="header"> + <span + class="gl-font-weight-bold gl-display-block gl-mb-3 gl-pb-2 gl-text-center gl-border-b" + >{{ $options.i18n.preferences }}</span + > + </slot> + <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({ renderTreeList: false })" + > + {{ __('List view') }} + </gl-button> + <gl-button + :class="{ selected: renderTreeList }" + class="gl-w-half js-tree-view" + @click="setRenderTreeList({ renderTreeList: 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> + <gl-form-checkbox + data-testid="show-whitespace" + class="gl-mt-3 gl-ml-3" + :checked="showWhitespace" + @input="toggleWhitespace" + > + {{ $options.i18n.whitespace }} + </gl-form-checkbox> + <gl-form-checkbox + data-testid="file-by-file" + class="gl-ml-3 gl-mb-0" + :checked="viewDiffsFileByFile" + @input="toggleFileByFile" + > + {{ $options.i18n.fileByFile }} + </gl-form-checkbox> + </gl-disclosure-dropdown> + + <gl-tooltip :target="$options.toggleId" triggers="hover">{{ + $options.i18n.preferences + }}</gl-tooltip> + </div> </template> |