Fix "Filter by commit" Dropdown (#31695)

Regression of #31281
Fix #31673
This commit is contained in:
wxiaoguang 2024-07-25 09:48:51 +08:00 committed by GitHub
parent 7bd127522f
commit 169031b7cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 48 additions and 46 deletions

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import {SvgIcon} from '../svg.ts'; import {SvgIcon} from '../svg.ts';
import {GET} from '../modules/fetch.ts'; import {GET} from '../modules/fetch.ts';
import {generateAriaId} from '../modules/fomantic/base.ts';
export default { export default {
components: {SvgIcon}, components: {SvgIcon},
@ -9,12 +10,16 @@ export default {
return { return {
menuVisible: false, menuVisible: false,
isLoading: false, isLoading: false,
queryParams: el.getAttribute('data-queryparams'),
issueLink: el.getAttribute('data-issuelink'),
locale: { locale: {
filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'), filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'),
}, },
commits: [], commits: [],
hoverActivated: false, hoverActivated: false,
lastReviewCommitSha: null, lastReviewCommitSha: null,
uniqueIdMenu: generateAriaId(),
uniqueIdShowAll: generateAriaId(),
}; };
}, },
computed: { computed: {
@ -24,12 +29,6 @@ export default {
} }
return 0; return 0;
}, },
queryParams() {
return this.$el.parentNode.getAttribute('data-queryparams');
},
issueLink() {
return this.$el.parentNode.getAttribute('data-issuelink');
},
}, },
mounted() { mounted() {
document.body.addEventListener('click', this.onBodyClick); document.body.addEventListener('click', this.onBodyClick);
@ -68,6 +67,11 @@ export default {
this.toggleMenu(); this.toggleMenu();
break; break;
} }
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
const item = document.activeElement; // try to highlight the selected commits
const commitIdx = item?.matches('.item') ? item.getAttribute('data-commit-idx') : null;
if (commitIdx) this.highlight(this.commits[commitIdx]);
}
}, },
onKeyUp(event) { onKeyUp(event) {
if (!this.menuVisible) return; if (!this.menuVisible) return;
@ -113,12 +117,10 @@ export default {
} }
// set correct tabindex to allow easier navigation // set correct tabindex to allow easier navigation
this.$nextTick(() => { this.$nextTick(() => {
const expandBtn = this.$el.querySelector('#diff-commit-list-expand');
const showAllChanges = this.$el.querySelector('#diff-commit-list-show-all');
if (this.menuVisible) { if (this.menuVisible) {
this.focusElem(showAllChanges, expandBtn); this.focusElem(this.$refs.showAllChanges, this.$refs.expandBtn);
} else { } else {
this.focusElem(expandBtn, showAllChanges); this.focusElem(this.$refs.expandBtn, this.$refs.showAllChanges);
} }
}); });
}, },
@ -189,22 +191,23 @@ export default {
}; };
</script> </script>
<template> <template>
<div class="ui scrolling dropdown custom"> <div class="ui scrolling dropdown custom diff-commit-selector">
<button <button
ref="expandBtn"
class="ui basic button" class="ui basic button"
id="diff-commit-list-expand"
@click.stop="toggleMenu()" @click.stop="toggleMenu()"
:data-tooltip-content="locale.filter_changes_by_commit" :data-tooltip-content="locale.filter_changes_by_commit"
aria-haspopup="true" aria-haspopup="true"
aria-controls="diff-commit-selector-menu"
:aria-label="locale.filter_changes_by_commit" :aria-label="locale.filter_changes_by_commit"
aria-activedescendant="diff-commit-list-show-all" :aria-controls="uniqueIdMenu"
:aria-activedescendant="uniqueIdShowAll"
> >
<svg-icon name="octicon-git-commit"/> <svg-icon name="octicon-git-commit"/>
</button> </button>
<div class="left menu" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'"> <!-- this dropdown is not managed by Fomantic UI, so it needs some classes like "transition" explicitly -->
<div class="left menu transition" :id="uniqueIdMenu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
<div class="loading-indicator is-loading" v-if="isLoading"/> <div class="loading-indicator is-loading" v-if="isLoading"/>
<div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()"> <div v-if="!isLoading" class="item" :id="uniqueIdShowAll" ref="showAllChanges" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
<div class="gt-ellipsis"> <div class="gt-ellipsis">
{{ locale.show_all_commits }} {{ locale.show_all_commits }}
</div> </div>
@ -214,8 +217,8 @@ export default {
</div> </div>
<!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review --> <!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
<div <div
v-if="lastReviewCommitSha != null" role="menuitem" v-if="lastReviewCommitSha != null"
class="vertical item" class="item" role="menuitem"
:class="{disabled: !commitsSinceLastReview}" :class="{disabled: !commitsSinceLastReview}"
@keydown.enter="changesSinceLastReviewClick()" @keydown.enter="changesSinceLastReviewClick()"
@click="changesSinceLastReviewClick()" @click="changesSinceLastReviewClick()"
@ -228,10 +231,11 @@ export default {
</div> </div>
</div> </div>
<span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span> <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
<template v-for="commit in commits" :key="commit.id"> <template v-for="(commit, idx) in commits" :key="commit.id">
<div <div
class="vertical item" role="menuitem" class="item" role="menuitem"
:class="{selection: commit.selected, hovered: commit.hovered}" :class="{selected: commit.selected, hovered: commit.hovered}"
:data-commit-idx="idx"
@keydown.enter.exact="commitClicked(commit.id)" @keydown.enter.exact="commitClicked(commit.id)"
@keydown.enter.shift.exact="commitClickedShift(commit)" @keydown.enter.shift.exact="commitClickedShift(commit)"
@mouseover.shift="highlight(commit)" @mouseover.shift="highlight(commit)"
@ -261,46 +265,44 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style scoped>
.hovered:not(.selection) { .ui.dropdown.diff-commit-selector .menu {
background-color: var(--color-small-accent) !important; margin-top: 0.25em;
}
.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; overflow-x: hidden;
max-height: 450px; max-height: 450px;
} }
#diff-commit-selector-menu .loading-indicator { .ui.dropdown.diff-commit-selector .menu .loading-indicator {
height: 200px; height: 200px;
width: 350px; width: 350px;
} }
#diff-commit-selector-menu .item, .ui.dropdown.diff-commit-selector .menu > .item,
#diff-commit-selector-menu .info { .ui.dropdown.diff-commit-selector .menu > .info {
display: flex !important; display: flex;
flex-direction: row; flex-direction: row;
line-height: 1.4; line-height: 1.4;
padding: 7px 14px !important;
border-top: 1px solid var(--color-secondary) !important;
gap: 0.25em; gap: 0.25em;
padding: 7px 14px !important;
} }
#diff-commit-selector-menu .item:focus { .ui.dropdown.diff-commit-selector .menu > .item:not(:first-child),
color: var(--color-text); .ui.dropdown.diff-commit-selector .menu > .info:not(:first-child) {
background: var(--color-hover); border-top: 1px solid var(--color-secondary) !important;
} }
#diff-commit-selector-menu .commit-list-summary { .ui.dropdown.diff-commit-selector .menu > .item:focus {
background: var(--color-active);
}
.ui.dropdown.diff-commit-selector .menu > .item.hovered {
background-color: var(--color-small-accent);
}
.ui.dropdown.diff-commit-selector .menu > .item.selected {
background-color: var(--color-accent);
}
.ui.dropdown.diff-commit-selector .menu .commit-list-summary {
max-width: min(380px, 96vw); max-width: min(380px, 96vw);
} }
</style> </style>