forked from NYANDEV/forgejo
19993d8814
There was some recent discussion about this in Discord `ui-design` channel and the conclusion was that https://github.com/go-gitea/gitea/issues/24305 should have fixed their OS font installation to have semibold weights. I have now tested this 601 weight on a Windows 10 machine on Firefox myself, and I immediately noticed that bold was excessivly bold and rendering as 700 because browsers are biased towards bolder fonts. So revert this back to the previous value.
63 lines
2.3 KiB
Vue
63 lines
2.3 KiB
Vue
<template>
|
|
<ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="fileListIsVisible">
|
|
<li v-for="file in files" :key="file.NameHash">
|
|
<div class="gt-font-semibold gt-df gt-ac pull-right">
|
|
<span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
|
|
{{ file.IsBin ? '' : file.Addition + file.Deletion }}
|
|
<span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
|
|
<div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }" />
|
|
</span>
|
|
</div>
|
|
<!-- todo finish all file status, now modify, add, delete and rename -->
|
|
<span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)"> </span>
|
|
<a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
|
|
</li>
|
|
<li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
|
|
<span class="file gt-df gt-ac gt-sb">{{ tooManyFilesMessage }}
|
|
<a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
|
|
</span>
|
|
</li>
|
|
</ol>
|
|
</template>
|
|
|
|
<script>
|
|
import {doLoadMoreFiles} from '../features/repo-diff.js';
|
|
|
|
const {pageData} = window.config;
|
|
|
|
export default {
|
|
data: () => {
|
|
return pageData.diffFileInfo;
|
|
},
|
|
mounted() {
|
|
document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
|
|
},
|
|
unmounted() {
|
|
document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
|
|
},
|
|
methods: {
|
|
toggleFileList() {
|
|
this.fileListIsVisible = !this.fileListIsVisible;
|
|
},
|
|
diffTypeToString(pType) {
|
|
const diffTypes = {
|
|
1: 'add',
|
|
2: 'modify',
|
|
3: 'del',
|
|
4: 'rename',
|
|
5: 'copy',
|
|
};
|
|
return diffTypes[pType];
|
|
},
|
|
diffStatsWidth(adds, dels) {
|
|
return `${adds / (adds + dels) * 100}%`;
|
|
},
|
|
loadMoreData() {
|
|
this.isLoadingNewData = true;
|
|
doLoadMoreFiles(this.link, this.diffEnd, () => {
|
|
this.isLoadingNewData = false;
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|