Skip to content

Add up and down arrows to selected lookup repositories #24727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 31 commits into from
Jun 2, 2023
Merged

Add up and down arrows to selected lookup repositories #24727

Changes from 28 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
83f5f77
Add up and down arrows to selected lookup repositories
tyroneyeh May 15, 2023
d602c6c
Fix lint problem and add right and left arrow for page switch
tyroneyeh May 15, 2023
d04c4fb
Improve class define
tyroneyeh May 15, 2023
fb5143e
Improve up and down arrow key if last item to next page
tyroneyeh May 15, 2023
6b5d183
Improve up and down arrow function with vuejs
tyroneyeh May 16, 2023
af4c6b2
Improve enter key click define
tyroneyeh May 16, 2023
9f26fdf
Improve code
tyroneyeh May 18, 2023
c30a1a1
Merge branch 'main' into find_repos_arrowdown_select
tyroneyeh May 19, 2023
cc9d98b
Modify of proposed
tyroneyeh May 21, 2023
9c203ec
keydown change to Vue define
tyroneyeh May 22, 2023
322f332
Fix tab indent issue
tyroneyeh May 22, 2023
da32e35
Modify call click to querySelector
tyroneyeh May 22, 2023
fc2bc73
Remove ref define
tyroneyeh May 22, 2023
b4f6cea
Add ?
tyroneyeh May 24, 2023
6bd2ee7
Change page to the previous page to select the last repository
tyroneyeh May 24, 2023
e4bf1b3
Merge branch 'main' into find_repos_arrowdown_select
tyroneyeh May 30, 2023
bc30faf
Fix merge css wrong
tyroneyeh May 30, 2023
8c7df4e
Fixed the problem that the selection area is not full after merged
tyroneyeh May 30, 2023
8623e21
Move css define to vue file
tyroneyeh May 30, 2023
be77c05
fix hover style
silverwind May 30, 2023
46be9c6
set initial activeIndex to -1 on page load
silverwind May 30, 2023
ed96e55
fix commit status icon
silverwind May 30, 2023
6c28d1f
Fix enter key no effect
tyroneyeh May 31, 2023
18b126e
Add default case for search result to select first item
tyroneyeh May 31, 2023
ddb6279
Improve active select for missing item to first
tyroneyeh May 31, 2023
bb08e53
Change active item style
tyroneyeh May 31, 2023
40d0248
Remove left icon style define
tyroneyeh May 31, 2023
d576728
Fix goto previous page to first issue
tyroneyeh May 31, 2023
34c55ab
new style
silverwind May 31, 2023
e424f76
Fix get repo count issue
tyroneyeh Jun 1, 2023
107710e
Merge branch 'main' into find_repos_arrowdown_select
GiteaBot Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 49 additions & 2 deletions web_src/js/components/DashboardRepoList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -215,6 +215,7 @@ const sfc = {

subUrl: appSubUrl,
...pageData.dashboardRepoList,
activeIndex: -1, // don't select anything at load, first cursor down will select
};
},

Expand Down Expand Up @@ -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.repoTypeCount > 0 && this.activeIndex > this.repoTypeCount - 1)) {
this.activeIndex = 0;
}
}
},
};
Expand Down Expand Up @@ -480,4 +518,13 @@ ul li:not(:last-child) {
margin-left: 1px;
margin-right: 3px;
}

.feeds .list ul li.active,
.feeds .list ul li.active .commit-status {
background: var(--color-active);
}

.feeds .list ul li.active .octicon-check {
background: transparent;
}
</style>