diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diff_stats.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_stats.vue | 53 |
1 files changed, 35 insertions, 18 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_stats.vue b/app/assets/javascripts/diffs/components/diff_stats.vue index 0303700f42a..05d4fbe7c20 100644 --- a/app/assets/javascripts/diffs/components/diff_stats.vue +++ b/app/assets/javascripts/diffs/components/diff_stats.vue @@ -2,10 +2,16 @@ import { GlIcon } from '@gitlab/ui'; import { isNumber } from 'lodash'; import { n__ } from '~/locale'; +import { isNotDiffable, stats } from '../utils/diff_file'; export default { components: { GlIcon }, props: { + diffFile: { + type: Object, + required: false, + default: () => null, + }, addedLines: { type: Number, required: true, @@ -33,6 +39,12 @@ export default { hasDiffFiles() { return isNumber(this.diffFilesLength) && this.diffFilesLength >= 0; }, + notDiffable() { + return isNotDiffable(this.diffFile); + }, + fileStats() { + return stats(this.diffFile); + }, }, }; </script> @@ -41,27 +53,32 @@ export default { <div class="diff-stats" :class="{ - 'is-compare-versions-header d-none d-lg-inline-flex': isCompareVersionsHeader, - 'd-none d-sm-inline-flex': !isCompareVersionsHeader, + 'is-compare-versions-header gl-display-none gl-lg-display-inline-flex': isCompareVersionsHeader, + 'gl-display-none gl-sm-display-inline-flex': !isCompareVersionsHeader, }" > - <div v-if="hasDiffFiles" class="diff-stats-group"> - <gl-icon name="doc-code" class="diff-stats-icon text-secondary" /> - <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span> - </div> - <div - class="diff-stats-group cgreen d-flex align-items-center" - :class="{ bold: isCompareVersionsHeader }" - > - <span>+</span> - <span class="js-file-addition-line">{{ addedLines }}</span> + <div v-if="notDiffable" :class="fileStats.classes"> + {{ fileStats.text }} </div> - <div - class="diff-stats-group cred d-flex align-items-center" - :class="{ bold: isCompareVersionsHeader }" - > - <span>-</span> - <span class="js-file-deletion-line">{{ removedLines }}</span> + <div v-else class="diff-stats-contents"> + <div v-if="hasDiffFiles" class="diff-stats-group"> + <gl-icon name="doc-code" class="diff-stats-icon text-secondary" /> + <span class="text-secondary bold">{{ diffFilesCountText }} {{ filesText }}</span> + </div> + <div + class="diff-stats-group gl-text-green-600 gl-display-flex gl-align-items-center" + :class="{ bold: isCompareVersionsHeader }" + > + <span>+</span> + <span data-testid="js-file-addition-line">{{ addedLines }}</span> + </div> + <div + class="diff-stats-group gl-text-red-500 gl-display-flex gl-align-items-center" + :class="{ bold: isCompareVersionsHeader }" + > + <span>-</span> + <span data-testid="js-file-deletion-line">{{ removedLines }}</span> + </div> </div> </div> </template> |