community
/
gitea
3
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Add up and down arrows to selected lookup repositories (#24727) 

Use up and down arrow key to select repositories


![image](https://github.com/go-gitea/gitea/assets/1255041/3f3bce64-86d9-4b37-994b-3d129ebf48d9)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Tyrone Yeh 2023-06-03 02:39:07 +08:00 committed by GitHub
parent 72eedfb915
commit b6d8d695da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web_src/js/components/DashboardRepoList.vue
View File

@ -17,7 +17,7 @@
</h4>
<div class="ui attached segment repos-search">
<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" :placeholder="textSearchRepos">
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
<div class="ui dropdown icon button" :title="textFilter">
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
@ -70,7 +70,7 @@
</div>
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
<ul class="repo-owner-name-list">
<li class="gt-df gt-ac" v-for="repo in repos" :key="repo.id">
<li class="gt-df gt-ac" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
<a class="repo-list-link muted gt-df gt-ac gt-f1" :href="repo.link">
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
<div class="text truncate">{{ repo.full_name }}</div>
@ -215,6 +215,7 @@ const sfc = {
subUrl: appSubUrl,
...pageData.dashboardRepoList,
activeIndex: -1, // don't select anything at load, first cursor down will select
};
},
@ -429,6 +430,43 @@ const sfc = {
statusColor(status) {
return commitStatus[status].color;
},
reposFilterKeyControl(e) {
switch (e.key) {
case 'Enter':
document.querySelector('.repo-owner-name-list li.active a')?.click();
break;
case 'ArrowUp':
if (this.activeIndex > 0) {
this.activeIndex--;
} else if (this.page > 1) {
this.changePage(this.page - 1);
this.activeIndex = this.searchLimit - 1;
}
break;
case 'ArrowDown':
if (this.activeIndex < this.repos.length - 1) {
this.activeIndex++;
} else if (this.page < this.finalPage) {
this.activeIndex = 0;
this.changePage(this.page + 1);
}
break;
case 'ArrowRight':
if (this.page < this.finalPage) {
this.changePage(this.page + 1);
}
break;
case 'ArrowLeft':
if (this.page > 1) {
this.changePage(this.page - 1);
}
break;
}
if (this.activeIndex === -1 || this.activeIndex > this.repos.length - 1) {
this.activeIndex = 0;
}
}
},
};
@ -480,4 +518,8 @@ ul li:not(:last-child) {
margin-left: 1px;
margin-right: 3px;
}
.repo-owner-name-list li.active {
background: var(--color-hover);
}
</style>