enh(ui): Remove DiffFileList component (#6619)

-1

options/locale/locale_en-US.ini

··· 2643 2643 diff.git-notes.remove-body = This note will be removed. 2644 2644 diff.data_not_available = Diff content is not available 2645 2645 diff.options_button = Diff options 2646 - diff.show_diff_stats = Show stats 2647 2646 diff.download_patch = Download patch file 2648 2647 diff.download_diff = Download diff file 2649 2648 diff.show_split_view = Split view

-1

templates/repo/diff/box.tmpl

··· 85 85 diffFileInfo.files.push(...diffDataFiles); 86 86 window.config.pageData.diffFileInfo = diffFileInfo; 87 87 </script> 88 - <div id="diff-file-list"></div> 89 88 {{end}} 90 89 <div id="diff-container"> 91 90 {{if $showFileTree}}

-1

templates/repo/diff/options_dropdown.tmpl

··· 1 1 <div class="ui dropdown tiny basic button" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.options_button"}}"> 2 2 {{svg "octicon-kebab-horizontal"}} 3 3 <div class="menu"> 4 - <a class="item" id="show-file-list-btn">{{ctx.Locale.Tr "repo.diff.show_diff_stats"}}</a> 5 4 {{if .Issue.Index}} 6 5 <a class="item" href="{{$.RepoLink}}/pulls/{{.Issue.Index}}.patch" download="{{.Issue.Index}}.patch">{{ctx.Locale.Tr "repo.diff.download_patch"}}</a> 7 6 <a class="item" href="{{$.RepoLink}}/pulls/{{.Issue.Index}}.diff" download="{{.Issue.Index}}.diff">{{ctx.Locale.Tr "repo.diff.download_diff"}}</a>

-24

web_src/css/repo.css

··· 1709 1709 max-width: initial; /* remove fomantic over 100% width */ 1710 1710 } 1711 1711 1712 - .repository .diff-stats { 1713 - clear: both; 1714 - margin-bottom: 5px; 1715 - max-height: 200px; 1716 - height: fit-content; 1717 - overflow: auto; 1718 - padding-left: 0; 1719 - } 1720 - 1721 - .repository .diff-stats li { 1722 - list-style: none; 1723 - padding-bottom: 4px; 1724 - margin-bottom: 4px; 1725 - padding-left: 6px; 1726 - } 1727 - 1728 - .repository .diff-stats li + li { 1729 - border-top: 1px solid var(--color-secondary); 1730 - } 1731 - 1732 1712 .repository .repo-search-result { 1733 1713 padding-top: 10px; 1734 1714 padding-bottom: 10px; ··· 1837 1817 box-shadow: none; 1838 1818 background-color: var(--color-success-bg); 1839 1819 color: var(--color-success-text); 1840 - } 1841 - 1842 - .repository .ui.attached.isSigned.isVerified.message .pull-right { 1843 - color: var(--color-text); 1844 1820 } 1845 1821 1846 1822 .repository .ui.attached.isSigned.isVerified.message .ui.text {

-58

web_src/js/components/DiffFileList.vue

··· 1 - <script> 2 - import {loadMoreFiles} from '../features/repo-diff.js'; 3 - import {diffTreeStore} from '../modules/stores.js'; 4 - 5 - export default { 6 - data: () => { 7 - return {store: diffTreeStore()}; 8 - }, 9 - mounted() { 10 - document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList); 11 - }, 12 - unmounted() { 13 - document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList); 14 - }, 15 - methods: { 16 - toggleFileList() { 17 - this.store.fileListIsVisible = !this.store.fileListIsVisible; 18 - }, 19 - diffTypeToString(pType) { 20 - const diffTypes = { 21 - 1: 'add', 22 - 2: 'modify', 23 - 3: 'del', 24 - 4: 'rename', 25 - 5: 'copy', 26 - }; 27 - return diffTypes[pType]; 28 - }, 29 - diffStatsWidth(adds, dels) { 30 - return `${adds / (adds + dels) * 100}%`; 31 - }, 32 - loadMoreData() { 33 - loadMoreFiles(this.store.linkLoadMore); 34 - }, 35 - }, 36 - }; 37 - </script> 38 - <template> 39 - <ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible"> 40 - <li v-for="file in store.files" :key="file.NameHash"> 41 - <div class="tw-font-semibold tw-flex tw-items-center pull-right"> 42 - <span v-if="file.IsBin" class="tw-ml-0.5 tw-mr-2">{{ store.binaryFileMessage }}</span> 43 - {{ file.IsBin ? '' : file.Addition + file.Deletion }} 44 - <span v-if="!file.IsBin" class="diff-stats-bar tw-mx-2" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)"> 45 - <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/> 46 - </span> 47 - </div> 48 -  49 - <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)"> </span> 50 - <a class="file tw-font-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a> 51 - </li> 52 - <li v-if="store.isIncomplete" class="tw-pt-1"> 53 - <span class="file tw-flex tw-items-center tw-justify-between">{{ store.tooManyFilesMessage }} 54 - <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a> 55 - </span> 56 - </li> 57 - </ol> 58 - </template>

-9

web_src/js/features/repo-diff-filetree.js

··· 1 1 import {createApp} from 'vue'; 2 2 import DiffFileTree from '../components/DiffFileTree.vue'; 3 - import DiffFileList from '../components/DiffFileList.vue'; 4 3 5 4 export function initDiffFileTree() { 6 5 const el = document.getElementById('diff-file-tree'); ··· 9 8 const fileTreeView = createApp(DiffFileTree); 10 9 fileTreeView.mount(el); 11 10 } 12 - 13 - export function initDiffFileList() { 14 - const fileListElement = document.getElementById('diff-file-list'); 15 - if (!fileListElement) return; 16 - 17 - const fileListView = createApp(DiffFileList); 18 - fileListView.mount(fileListElement); 19 - }

+2 -3

web_src/js/features/repo-diff.js

··· 1 1 import $ from 'jquery'; 2 2 import {initCompReactionSelector} from './comp/ReactionSelector.js'; 3 3 import {initRepoIssueContentHistory} from './repo-issue-content.js'; 4 - import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.js'; 4 + import {initDiffFileTree} from './repo-diff-filetree.js'; 5 5 import {initDiffCommitSelect} from './repo-diff-commitselect.js'; 6 6 import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; 7 7 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js'; ··· 221 221 222 222 export function initRepoDiffView() { 223 223 initRepoDiffConversationForm(); 224 - if (!$('#diff-file-list').length) return; 224 + if (!$('#diff-file-boxes').length) return; 225 225 initDiffFileTree(); 226 - initDiffFileList(); 227 226 initDiffCommitSelect(); 228 227 initRepoDiffShowMore(); 229 228 initRepoDiffReviewButton();

Configure Feed

Configure Feed