diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_expansion_cell.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_expansion_cell.vue | 52 |
1 files changed, 28 insertions, 24 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue index e5e63bdcb43..0094b4f8707 100644 --- a/app/assets/javascripts/diffs/components/diff_expansion_cell.vue +++ b/app/assets/javascripts/diffs/components/diff_expansion_cell.vue @@ -1,8 +1,9 @@ <script> import { mapState, mapActions } from 'vuex'; +import { GlIcon } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; -import { s__ } from '~/locale'; -import Icon from '~/vue_shared/components/icon.vue'; +import { s__, sprintf } from '~/locale'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { UNFOLD_COUNT, INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants'; import * as utils from '../store/utils'; import tooltip from '../../vue_shared/directives/tooltip'; @@ -17,17 +18,23 @@ const lineNumberByViewType = (viewType, diffLine) => { [PARALLEL_DIFF_VIEW_TYPE]: line => (line?.right || line?.left)?.new_line, }; const numberGetter = numberGetters[viewType]; - return numberGetter && numberGetter(diffLine); }; +const i18n = { + showMore: sprintf(s__('Diffs|Show %{unfoldCount} lines'), { unfoldCount: UNFOLD_COUNT }), + showAll: s__('Diffs|Show all unchanged lines'), +}; + export default { + i18n, directives: { tooltip, }, components: { - Icon, + GlIcon, }, + mixins: [glFeatureFlagsMixin()], props: { fileHash: { type: String, @@ -59,7 +66,9 @@ export default { }, computed: { ...mapState({ - diffViewType: state => state.diffs.diffViewType, + diffViewType(state) { + return this.glFeatures.unifiedDiffLines ? INLINE_DIFF_VIEW_TYPE : state.diffs.diffViewType; + }, diffFiles: state => state.diffs.diffFiles, }), canExpandUp() { @@ -226,32 +235,27 @@ export default { </script> <template> - <td :colspan="colspan" class="text-center"> + <td :colspan="colspan" class="text-center gl-font-regular"> <div class="content js-line-expansion-content"> <a - v-if="canExpandUp" - v-tooltip - class="cursor-pointer js-unfold unfold-icon d-inline-block pt-2 pb-2" - data-placement="top" - data-container="body" - :title="__('Expand up')" - @click="handleExpandLines(EXPAND_UP)" + v-if="canExpandDown" + class="gl-mx-2 gl-cursor-pointer js-unfold-down gl-display-inline-block gl-py-4" + @click="handleExpandLines(EXPAND_DOWN)" > - <icon :size="12" name="expand-up" aria-hidden="true" /> + <gl-icon :size="12" name="expand-down" aria-hidden="true" /> + <span>{{ $options.i18n.showMore }}</span> </a> - <a class="mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()"> - <span>{{ s__('Diffs|Show unchanged lines') }}</span> + <a class="gl-mx-2 cursor-pointer js-unfold-all" @click="handleExpandLines()"> + <gl-icon :size="12" name="expand" aria-hidden="true" /> + <span>{{ $options.i18n.showAll }}</span> </a> <a - v-if="canExpandDown" - v-tooltip - class="cursor-pointer js-unfold-down has-tooltip unfold-icon d-inline-block pt-2 pb-2" - data-placement="top" - data-container="body" - :title="__('Expand down')" - @click="handleExpandLines(EXPAND_DOWN)" + v-if="canExpandUp" + class="gl-mx-2 gl-cursor-pointer js-unfold gl-display-inline-block gl-py-4" + @click="handleExpandLines(EXPAND_UP)" > - <icon :size="12" name="expand-down" aria-hidden="true" /> + <gl-icon :size="12" name="expand-up" aria-hidden="true" /> + <span>{{ $options.i18n.showMore }}</span> </a> </div> </td> |