mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-23 15:53:07 -05:00
1f501dae9e
This should be the easiest fix. While other solutions might be possible that exterminate the root cause, they will not be as trivial.
301 lines
11 KiB
Vue
301 lines
11 KiB
Vue
<script>
|
|
import {SvgIcon} from '../svg.js';
|
|
import {GET} from '../modules/fetch.js';
|
|
|
|
export default {
|
|
components: {SvgIcon},
|
|
data: () => {
|
|
const el = document.getElementById('diff-commit-select');
|
|
return {
|
|
menuVisible: false,
|
|
isLoading: false,
|
|
locale: {
|
|
filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'),
|
|
},
|
|
commits: [],
|
|
hoverActivated: false,
|
|
lastReviewCommitSha: null
|
|
};
|
|
},
|
|
computed: {
|
|
commitsSinceLastReview() {
|
|
if (this.lastReviewCommitSha) {
|
|
return this.commits.length - this.commits.findIndex((x) => x.id === this.lastReviewCommitSha) - 1;
|
|
}
|
|
return 0;
|
|
},
|
|
queryParams() {
|
|
return this.$el.parentNode.getAttribute('data-queryparams');
|
|
},
|
|
issueLink() {
|
|
return this.$el.parentNode.getAttribute('data-issuelink');
|
|
}
|
|
},
|
|
mounted() {
|
|
document.body.addEventListener('click', this.onBodyClick);
|
|
this.$el.addEventListener('keydown', this.onKeyDown);
|
|
this.$el.addEventListener('keyup', this.onKeyUp);
|
|
},
|
|
unmounted() {
|
|
document.body.removeEventListener('click', this.onBodyClick);
|
|
this.$el.removeEventListener('keydown', this.onKeyDown);
|
|
this.$el.removeEventListener('keyup', this.onKeyUp);
|
|
},
|
|
methods: {
|
|
onBodyClick(event) {
|
|
// close this menu on click outside of this element when the dropdown is currently visible opened
|
|
if (this.$el.contains(event.target)) return;
|
|
if (this.menuVisible) {
|
|
this.toggleMenu();
|
|
}
|
|
},
|
|
onKeyDown(event) {
|
|
if (!this.menuVisible) return;
|
|
const item = document.activeElement;
|
|
if (!this.$el.contains(item)) return;
|
|
switch (event.key) {
|
|
case 'ArrowDown': // select next element
|
|
event.preventDefault();
|
|
this.focusElem(item.nextElementSibling, item);
|
|
break;
|
|
case 'ArrowUp': // select previous element
|
|
event.preventDefault();
|
|
this.focusElem(item.previousElementSibling, item);
|
|
break;
|
|
case 'Escape': // close menu
|
|
event.preventDefault();
|
|
item.tabIndex = -1;
|
|
this.toggleMenu();
|
|
break;
|
|
}
|
|
},
|
|
onKeyUp(event) {
|
|
if (!this.menuVisible) return;
|
|
const item = document.activeElement;
|
|
if (!this.$el.contains(item)) return;
|
|
if (event.key === 'Shift' && this.hoverActivated) {
|
|
// shift is not pressed anymore -> deactivate hovering and reset hovered and selected
|
|
this.hoverActivated = false;
|
|
for (const commit of this.commits) {
|
|
commit.hovered = false;
|
|
commit.selected = false;
|
|
}
|
|
}
|
|
},
|
|
highlight(commit) {
|
|
if (!this.hoverActivated) return;
|
|
const indexSelected = this.commits.findIndex((x) => x.selected);
|
|
const indexCurrentElem = this.commits.findIndex((x) => x.id === commit.id);
|
|
for (const [idx, commit] of this.commits.entries()) {
|
|
commit.hovered = Math.min(indexSelected, indexCurrentElem) <= idx && idx <= Math.max(indexSelected, indexCurrentElem);
|
|
}
|
|
},
|
|
/** Focus given element */
|
|
focusElem(elem, prevElem) {
|
|
if (elem) {
|
|
elem.tabIndex = 0;
|
|
if (prevElem) prevElem.tabIndex = -1;
|
|
elem.focus();
|
|
}
|
|
},
|
|
/** Opens our menu, loads commits before opening */
|
|
async toggleMenu() {
|
|
this.menuVisible = !this.menuVisible;
|
|
// load our commits when the menu is not yet visible (it'll be toggled after loading)
|
|
// and we got no commits
|
|
if (this.commits.length === 0 && this.menuVisible && !this.isLoading) {
|
|
this.isLoading = true;
|
|
try {
|
|
await this.fetchCommits();
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
// set correct tabindex to allow easier navigation
|
|
this.$nextTick(() => {
|
|
const expandBtn = this.$el.querySelector('#diff-commit-list-expand');
|
|
const showAllChanges = this.$el.querySelector('#diff-commit-list-show-all');
|
|
if (this.menuVisible) {
|
|
this.focusElem(showAllChanges, expandBtn);
|
|
} else {
|
|
this.focusElem(expandBtn, showAllChanges);
|
|
}
|
|
});
|
|
},
|
|
/** Load the commits to show in this dropdown */
|
|
async fetchCommits() {
|
|
const resp = await GET(`${this.issueLink}/commits/list`);
|
|
const results = await resp.json();
|
|
this.commits.push(...results.commits.map((x) => {
|
|
x.hovered = false;
|
|
return x;
|
|
}));
|
|
this.commits.reverse();
|
|
this.lastReviewCommitSha = results.last_review_commit_sha || null;
|
|
if (this.lastReviewCommitSha && this.commits.findIndex((x) => x.id === this.lastReviewCommitSha) === -1) {
|
|
// the lastReviewCommit is not available (probably due to a force push)
|
|
// reset the last review commit sha
|
|
this.lastReviewCommitSha = null;
|
|
}
|
|
Object.assign(this.locale, results.locale);
|
|
},
|
|
showAllChanges() {
|
|
window.location = `${this.issueLink}/files${this.queryParams}`;
|
|
},
|
|
/** Called when user clicks on since last review */
|
|
changesSinceLastReviewClick() {
|
|
window.location = `${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`;
|
|
},
|
|
/** Clicking on a single commit opens this specific commit */
|
|
commitClicked(commitId, newWindow = false) {
|
|
const url = `${this.issueLink}/commits/${commitId}${this.queryParams}`;
|
|
if (newWindow) {
|
|
window.open(url);
|
|
} else {
|
|
window.location = url;
|
|
}
|
|
},
|
|
/**
|
|
* When a commit is clicked with shift this enables the range
|
|
* selection. Second click (with shift) defines the end of the
|
|
* range. This opens the diff of this range
|
|
* Exception: first commit is the first commit of this PR. Then
|
|
* the diff from beginning of PR up to the second clicked commit is
|
|
* opened
|
|
*/
|
|
commitClickedShift(commit) {
|
|
this.hoverActivated = !this.hoverActivated;
|
|
commit.selected = true;
|
|
// Second click -> determine our range and open links accordingly
|
|
if (!this.hoverActivated) {
|
|
// find all selected commits and generate a link
|
|
if (this.commits[0].selected) {
|
|
// first commit is selected - generate a short url with only target sha
|
|
const lastCommitIdx = this.commits.findLastIndex((x) => x.selected);
|
|
if (lastCommitIdx === this.commits.length - 1) {
|
|
// user selected all commits - just show the normal diff page
|
|
window.location = `${this.issueLink}/files${this.queryParams}`;
|
|
} else {
|
|
window.location = `${this.issueLink}/files/${this.commits[lastCommitIdx].id}${this.queryParams}`;
|
|
}
|
|
} else {
|
|
const start = this.commits[this.commits.findIndex((x) => x.selected) - 1].id;
|
|
const end = this.commits.findLast((x) => x.selected).id;
|
|
window.location = `${this.issueLink}/files/${start}..${end}${this.queryParams}`;
|
|
}
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="ui scrolling dropdown custom">
|
|
<button
|
|
class="ui basic button"
|
|
id="diff-commit-list-expand"
|
|
@click.stop="toggleMenu()"
|
|
:data-tooltip-content="locale.filter_changes_by_commit"
|
|
aria-haspopup="true"
|
|
aria-controls="diff-commit-selector-menu"
|
|
:aria-label="locale.filter_changes_by_commit"
|
|
aria-activedescendant="diff-commit-list-show-all"
|
|
>
|
|
<svg-icon name="octicon-git-commit"/>
|
|
</button>
|
|
<div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
|
|
<div class="loading-indicator is-loading" v-if="isLoading"/>
|
|
<div v-if="!isLoading" class="vertical item gt-df gt-fc gt-gap-2" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
|
|
<div class="gt-ellipsis">
|
|
{{ locale.show_all_commits }}
|
|
</div>
|
|
<div class="gt-ellipsis text light-2 gt-mb-0">
|
|
{{ locale.stats_num_commits }}
|
|
</div>
|
|
</div>
|
|
<!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
|
|
<div
|
|
v-if="lastReviewCommitSha != null" role="menuitem"
|
|
class="vertical item gt-df gt-fc gt-gap-2 gt-border-secondary-top"
|
|
:class="{disabled: commitsSinceLastReview === 0}"
|
|
@keydown.enter="changesSinceLastReviewClick()"
|
|
@click="changesSinceLastReviewClick()"
|
|
>
|
|
<div class="gt-ellipsis">
|
|
{{ locale.show_changes_since_your_last_review }}
|
|
</div>
|
|
<div class="gt-ellipsis text light-2">
|
|
{{ commitsSinceLastReview }} commits
|
|
</div>
|
|
</div>
|
|
<span v-if="!isLoading" class="info gt-border-secondary-top text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
|
|
<template v-for="commit in commits" :key="commit.id">
|
|
<div
|
|
class="vertical item gt-df gt-gap-2 gt-border-secondary-top" role="menuitem"
|
|
:class="{selection: commit.selected, hovered: commit.hovered}"
|
|
@keydown.enter.exact="commitClicked(commit.id)"
|
|
@keydown.enter.shift.exact="commitClickedShift(commit)"
|
|
@mouseover.shift="highlight(commit)"
|
|
@click.exact="commitClicked(commit.id)"
|
|
@click.ctrl.exact="commitClicked(commit.id, true)"
|
|
@click.meta.exact="commitClicked(commit.id, true)"
|
|
@click.shift.exact.stop.prevent="commitClickedShift(commit)"
|
|
>
|
|
<div class="gt-f1 gt-df gt-fc gt-gap-2">
|
|
<div class="gt-ellipsis commit-list-summary">
|
|
{{ commit.summary }}
|
|
</div>
|
|
<div class="gt-ellipsis text light-2">
|
|
{{ commit.committer_or_author_name }}
|
|
<span class="text right">
|
|
<relative-time class="time-since" prefix="" :datetime="commit.time" data-tooltip-content data-tooltip-interactive="true">{{ commit.time }}</relative-time>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="gt-mono">
|
|
{{ commit.short_sha }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.hovered:not(.selection) {
|
|
background-color: var(--color-small-accent) !important;
|
|
}
|
|
.selection {
|
|
background-color: var(--color-accent) !important;
|
|
}
|
|
|
|
.info {
|
|
display: inline-block;
|
|
padding: 7px 14px !important;
|
|
line-height: 1.4;
|
|
width: 100%;
|
|
}
|
|
|
|
#diff-commit-selector-menu {
|
|
overflow-x: hidden;
|
|
max-height: 450px;
|
|
}
|
|
|
|
#diff-commit-selector-menu .loading-indicator {
|
|
height: 200px;
|
|
width: 350px;
|
|
}
|
|
|
|
#diff-commit-selector-menu .item {
|
|
flex-direction: row;
|
|
line-height: 1.4;
|
|
padding: 7px 14px !important;
|
|
}
|
|
|
|
#diff-commit-selector-menu .item:focus {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
#diff-commit-selector-menu .commit-list-summary {
|
|
max-width: min(380px, 96vw);
|
|
}
|
|
</style>
|