2018-03-20 14:12:48 +00:00
|
|
|
<script>
|
2018-11-16 19:29:11 +00:00
|
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
2018-04-18 11:59:37 +00:00
|
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
2020-05-20 09:08:11 +00:00
|
|
|
import getCommitIconMap from '~/ide/commit_icon';
|
2020-03-17 06:09:21 +00:00
|
|
|
import { __ } from '~/locale';
|
2018-03-20 14:12:48 +00:00
|
|
|
|
2018-03-22 10:14:27 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
2018-04-18 11:59:37 +00:00
|
|
|
Icon,
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
|
|
|
directives: {
|
2018-11-08 15:02:49 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
file: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
2018-03-20 14:12:48 +00:00
|
|
|
},
|
2018-03-22 10:14:27 +00:00
|
|
|
showTooltip: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
2018-03-20 14:12:48 +00:00
|
|
|
},
|
2018-04-09 15:05:21 +00:00
|
|
|
showStagedIcon: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
2019-08-28 10:20:30 +00:00
|
|
|
default: true,
|
2018-04-09 15:05:21 +00:00
|
|
|
},
|
2018-10-03 09:05:43 +00:00
|
|
|
size: {
|
|
|
|
type: Number,
|
|
|
|
required: false,
|
|
|
|
default: 12,
|
|
|
|
},
|
2019-02-13 16:01:32 +00:00
|
|
|
isCentered: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
changedIcon() {
|
2019-08-08 06:29:24 +00:00
|
|
|
// False positive i18n lint: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26
|
2020-03-18 15:09:45 +00:00
|
|
|
// eslint-disable-next-line @gitlab/require-i18n-strings
|
2020-01-29 18:08:47 +00:00
|
|
|
const suffix = this.file.staged && this.showStagedIcon ? '-solid' : '';
|
2018-07-26 14:56:56 +00:00
|
|
|
|
|
|
|
return `${getCommitIconMap(this.file).icon}${suffix}`;
|
2018-03-20 14:12:48 +00:00
|
|
|
},
|
2018-03-22 10:14:27 +00:00
|
|
|
changedIconClass() {
|
2018-10-03 09:05:43 +00:00
|
|
|
return `${this.changedIcon} float-left d-block`;
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
|
|
|
tooltipTitle() {
|
2020-03-17 06:09:21 +00:00
|
|
|
if (!this.showTooltip) {
|
|
|
|
return undefined;
|
|
|
|
} else if (this.file.deleted) {
|
|
|
|
return __('Deleted');
|
|
|
|
} else if (this.file.tempFile) {
|
|
|
|
return __('Added');
|
|
|
|
} else if (this.file.changed) {
|
|
|
|
return __('Modified');
|
|
|
|
}
|
2018-03-22 10:14:27 +00:00
|
|
|
|
2020-03-17 06:09:21 +00:00
|
|
|
return undefined;
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
2018-07-26 14:56:56 +00:00
|
|
|
showIcon() {
|
2019-10-04 15:06:38 +00:00
|
|
|
return (
|
|
|
|
this.file.changed ||
|
|
|
|
this.file.tempFile ||
|
|
|
|
this.file.staged ||
|
|
|
|
this.file.deleted ||
|
|
|
|
this.file.prevPath
|
|
|
|
);
|
2018-07-26 14:56:56 +00:00
|
|
|
},
|
2018-03-22 10:14:27 +00:00
|
|
|
},
|
|
|
|
};
|
2018-03-20 14:12:48 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2019-02-13 16:01:32 +00:00
|
|
|
<span
|
|
|
|
v-gl-tooltip.right
|
|
|
|
:title="tooltipTitle"
|
2020-01-21 21:08:54 +00:00
|
|
|
:class="{ 'ml-auto': isCentered }"
|
|
|
|
class="file-changed-icon d-inline-block"
|
2019-02-13 16:01:32 +00:00
|
|
|
>
|
2019-10-02 21:06:22 +00:00
|
|
|
<icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
|
2018-03-22 10:14:27 +00:00
|
|
|
</span>
|
2018-03-20 14:12:48 +00:00
|
|
|
</template>
|
2018-10-03 09:05:43 +00:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.file-addition,
|
|
|
|
.file-addition-solid {
|
|
|
|
color: #1aaa55;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-modified,
|
|
|
|
.file-modified-solid {
|
|
|
|
color: #fc9403;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-deletion,
|
|
|
|
.file-deletion-solid {
|
|
|
|
color: #db3b21;
|
|
|
|
}
|
|
|
|
</style>
|