Open result repository on search enter

Author: lukas

templates/user/dashboard/repolist.tmpl

@@ -41,7 +41,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="{{.locale.Tr "home.search_repos"}}">
+					<input @input="changeReposFilter(reposFilter)" v-on:keyup.enter="onSearchEnter" v-on:keyup.down="onSearchDown" v-on:keyup.up="onSearchUp" v-model="searchQuery" ref="search" placeholder="{{.locale.Tr "home.search_repos"}}">
 					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
 					<div class="ui dropdown icon button" title="{{.locale.Tr "home.filter"}}">
 						<i class="icon df ac jc m-0">{{svg "octicon-filter" 16}}</i>

web_src/js/components/DashboardRepoList.js

@@ -189,12 +189,41 @@ function initVueComponents(app) {
         }
       },
 
+      onSearchEnter() {
+        if (this.searchQuery.length > 0) {
+          const items = document.getElementsByClassName('repo-list-link');
+          items[this.repoIndex].click();
+        }
+      },
+
+      onSearchDown() {
+        if (this.repoIndex + 1 < this.repos.length) {
+          const items = document.getElementsByClassName('repo-list-link');
+          items[this.repoIndex].classList.remove('selected');
+          this.repoIndex++;
+          items[this.repoIndex].classList.add('selected');
+        }
+      },
+
+      onSearchUp() {
+        if (this.repoIndex > 0) {
+          const items = document.getElementsByClassName('repo-list-link');
+          items[this.repoIndex].classList.remove('selected');
+          this.repoIndex--;
+          items[this.repoIndex].classList.add('selected');
+        }
+      },
+
       changeReposFilter(filter) {
         this.reposFilter = filter;
         this.repos = [];
         this.page = 1;
         this.counts[`${filter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
+        setTimeout(() => {
+          const items = document.getElementsByClassName('repo-list-link');
+          items[0].classList.add('selected');
+        }, 100);
       },
 
       updateHistory() {

web_src/less/_dashboard.less

@@ -178,6 +178,10 @@
           .star-num {
             font-size: 12px;
           }
+
+          &.selected {
+            outline: solid 1px grey;
+          }
         }
       }
     }