Skip to content

Commit 951fb57

Browse files
Morlinestlunny
Morlinest
authored and
lunny
committed
Fix and improve dashboard repo UI (#2285)
* Fix and improve dashboard repo UI * Change order of scripts loading * Remove "mirror" tab * Remove single tab panel for "org user" * Add localization strings * Create vue component and change event for search * Add "mirrors" filter
1 parent 722bcef commit 951fb57

File tree

10 files changed

+205
-121
lines changed

10 files changed

+205
-121
lines changed

‎options/locale/locale_en-US.ini

+5
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ your_profile = Your Profile
4646
your_starred = Your Starred
4747
your_settings = Your Settings
4848

49+
all = All
50+
sources = Sources
51+
mirrors = Mirrors
52+
collaborative = Collaborative
53+
4954
activities = Activities
5055
pull_requests = Pull Requests
5156
issues = Issues

‎public/css/index.css

+11
Original file line numberDiff line numberDiff line change
@@ -471,6 +471,17 @@ footer .ui.language .menu {
471471
padding-right: 30px !important;
472472
}
473473
}
474+
[v-cloak] {
475+
display: none !important;
476+
}
477+
.repos-search {
478+
padding-bottom: 0 !important;
479+
}
480+
.repos-filter {
481+
margin-top: 0 !important;
482+
border-bottom-width: 0 !important;
483+
margin-bottom: 2px !important;
484+
}
474485
.markdown:not(code) {
475486
overflow: hidden;
476487
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;

‎public/js/index.js

+82-20
Original file line numberDiff line numberDiff line change
@@ -1655,29 +1655,45 @@ $(function () {
16551655
});
16561656
});
16571657

1658-
function initDashboardSearch() {
1659-
var el = document.getElementById('dashboard-repo-search');
1660-
if (!el) {
1661-
return;
1662-
}
1658+
function initVueComponents(){
1659+
var vueDelimeters = ['${', '}'];
16631660

1664-
new Vue({
1665-
delimiters: ['${', '}'],
1666-
el: el,
1661+
Vue.component('repo-search', {
1662+
delimiters: vueDelimeters,
1663+
template: '#repo-search-template',
16671664

1668-
data: {
1669-
tab: 'repos',
1670-
repos: [],
1671-
searchQuery: '',
1672-
suburl: document.querySelector('meta[name=_suburl]').content,
1673-
uid: document.querySelector('meta[name=_context_uid]').content
1665+
props: {
1666+
searchLimit: {
1667+
type: Number,
1668+
default: 10
1669+
},
1670+
suburl: {
1671+
type: String,
1672+
required: true
1673+
},
1674+
uid: {
1675+
type: Number,
1676+
required: true
1677+
},
1678+
},
1679+
1680+
data: function() {
1681+
return {
1682+
tab: 'repos',
1683+
repos: [],
1684+
reposTotal: 0,
1685+
reposFilter: 'all',
1686+
searchQuery: '',
1687+
isLoading: false
1688+
}
16741689
},
16751690

16761691
mounted: function() {
16771692
this.searchRepos();
16781693

1694+
var self = this;
16791695
Vue.nextTick(function() {
1680-
document.querySelector('#search_repo').focus();
1696+
self.$refs.search.focus();
16811697
});
16821698
},
16831699

@@ -1686,19 +1702,45 @@ function initDashboardSearch() {
16861702
this.tab = t;
16871703
},
16881704

1689-
searchKeyUp: function() {
1690-
this.searchRepos();
1705+
changeReposFilter: function(filter) {
1706+
this.reposFilter = filter;
1707+
},
1708+
1709+
showRepo: function(repo, filter) {
1710+
switch (filter) {
1711+
case 'sources':
1712+
return repo.owner.id == this.uid && !repo.mirror && !repo.fork;
1713+
case 'forks':
1714+
return repo.owner.id == this.uid && !repo.mirror && repo.fork;
1715+
case 'mirrors':
1716+
return repo.mirror;
1717+
case 'collaborative':
1718+
return repo.owner.id != this.uid;
1719+
default:
1720+
return true;
1721+
}
16911722
},
16921723

16931724
searchRepos: function() {
16941725
var self = this;
1695-
$.getJSON(this.searchURL(), function(result) {
1696-
self.repos = result.data;
1726+
this.isLoading = true;
1727+
var searchedQuery = this.searchQuery;
1728+
$.getJSON(this.searchURL(), function(result, textStatus, request) {
1729+
if (searchedQuery == self.searchQuery) {
1730+
self.repos = result.data;
1731+
if (searchedQuery == "") {
1732+
self.reposTotal = request.getResponseHeader('X-Total-Count');
1733+
}
1734+
}
1735+
}).always(function() {
1736+
if (searchedQuery == self.searchQuery) {
1737+
self.isLoading = false;
1738+
}
16971739
});
16981740
},
16991741

17001742
searchURL: function() {
1701-
return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery;
1743+
return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery + '&limit=' + this.searchLimit;
17021744
},
17031745

17041746
repoClass: function(repo) {
@@ -1713,5 +1755,25 @@ function initDashboardSearch() {
17131755
}
17141756
}
17151757
}
1758+
})
1759+
}
1760+
1761+
function initDashboardSearch() {
1762+
var el = document.getElementById('dashboard-repo-search');
1763+
if (!el) {
1764+
return;
1765+
}
1766+
1767+
initVueComponents();
1768+
1769+
new Vue({
1770+
delimiters: ['${', '}'],
1771+
el: el,
1772+
1773+
data: {
1774+
searchLimit: document.querySelector('meta[name=_search_limit]').content,
1775+
suburl: document.querySelector('meta[name=_suburl]').content,
1776+
uid: document.querySelector('meta[name=_context_uid]').content,
1777+
},
17161778
});
17171779
}

‎public/less/_base.less

+14
Original file line numberDiff line numberDiff line change
@@ -464,3 +464,17 @@ footer {
464464
padding-right: 30px !important;
465465
}
466466
}
467+
468+
[v-cloak] {
469+
display: none !important;
470+
}
471+
472+
.repos-search {
473+
padding-bottom: 0 !important;
474+
}
475+
476+
.repos-filter {
477+
margin-top: 0 !important;
478+
border-bottom-width: 0 !important;
479+
margin-bottom: 2px !important;
480+
}

‎routers/api/v1/repo/repo.go

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
package repo
66

77
import (
8+
"fmt"
89
"strings"
910

1011
api "code.gitea.io/sdk/gitea"
@@ -91,6 +92,7 @@ func Search(ctx *context.APIContext) {
9192
}
9293

9394
ctx.SetLinkHeader(int(count), setting.API.MaxResponseItems)
95+
ctx.Header().Set("X-Total-Count", fmt.Sprintf("%d", count))
9496
ctx.JSON(200, api.SearchResults{
9597
OK: true,
9698
Data: results,

‎routers/user/home.go

+1
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ func Dashboard(ctx *context.Context) {
131131
ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard")
132132
ctx.Data["PageIsDashboard"] = true
133133
ctx.Data["PageIsNews"] = true
134+
ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum
134135

135136
// Only user can have collaborative repositories.
136137
if !ctxUser.IsOrganization() {

‎templates/base/footer.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,6 @@
4545
<script src="{{AppSubUrl}}/js/draw.js"></script>
4646
{{end}}
4747

48-
<!-- JavaScript -->
49-
<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
50-
<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
51-
5248
<!-- Third-party libraries -->
5349
{{if .RequireHighlightJS}}
5450
<script src="{{AppSubUrl}}/plugins/highlight-9.11.0/highlight.pack.js"></script>
@@ -66,5 +62,9 @@
6662
<script src="{{AppSubUrl}}/js/libs/emojify-1.1.0.min.js"></script>
6763
<script src="{{AppSubUrl}}/js/libs/clipboard-1.5.9.min.js"></script>
6864
<script src="{{AppSubUrl}}/js/libs/vue.min.js"></script>
65+
66+
<!-- JavaScript -->
67+
<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
68+
<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
6969
</body>
7070
</html>

‎templates/base/head.tmpl

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
{{if .ContextUser}}
1818
<meta name="_context_uid" content="{{.ContextUser.ID}}" />
1919
{{end}}
20+
{{if .SearchLimit}}
21+
<meta name="_search_limit" content="{{.SearchLimit}}" />
22+
{{end}}
2023
{{if .GoGetImport}}
2124
<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
2225
<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">

‎templates/user/dashboard/dashboard.tmpl

+2-97
Original file line numberDiff line numberDiff line change
@@ -8,105 +8,10 @@
88
{{template "user/dashboard/feeds" .}}
99
</div>
1010
<div id="dashboard-repo-search" class="six wide column">
11-
<div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item stackable tabable menu">
12-
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
13-
{{if not .ContextUser.IsOrganization}}
14-
<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
15-
{{end}}
16-
<a :class="{item: true, active: tab === 'mirrors'}" @click="changeTab('mirrors')">{{.i18n.Tr "mirror"}}</a>
17-
</div>
18-
<div v-if="tab === 'repos'" class="ui tab active list">
19-
<div class="ui fluid input">
20-
<input @keyUp="searchKeyUp" v-model="searchQuery" id="search_repo" placeholder="{{.i18n.Tr "home.search_repos"}}">
21-
</div>
22-
<h4 class="ui top attached header">
23-
{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">{{.ContextUser.NumRepos}}</span>
24-
<div class="ui right">
25-
<a class="poping up" href="{{AppSubUrl}}/repo/create" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
26-
<i class="plus icon"></i>
27-
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
28-
</a>
29-
</div>
30-
</h4>
31-
<div class="ui attached table segment">
32-
<ul class="repo-owner-name-list">
33-
<li v-for="repo in repos" :class="{'private': repo.private}">
34-
<a :href="'{{AppSubUrl}}/' + repo.full_name">
35-
<i :class="repoClass(repo)"></i>
36-
<strong class="text truncate item-name">${ repo.full_name }</strong>
37-
<span class="ui right text light grey">
38-
${ repo.stars_count } <i class="octicon octicon-star rear"></i>
39-
</span>
40-
</a>
41-
</li>
42-
{{if gt .ContextUser.NumRepos .MaxShowRepoNum}}
43-
<li>
44-
<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
45-
</li>
46-
{{end}}
47-
</ul>
48-
</div>
49-
</div>
50-
51-
{{if not .ContextUser.IsOrganization}}
52-
<div v-if="tab === 'orgs'" class="ui tab active list">
53-
<h4 class="ui top attached header">
54-
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
55-
<div class="ui right">
56-
{{if .SignedUser.CanCreateOrganization}}
57-
<a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
58-
<i class="plus icon"></i>
59-
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
60-
</a>
61-
{{end}}
62-
</div>
63-
</h4>
64-
<div class="ui attached table segment">
65-
<ul class="repo-owner-name-list">
66-
{{range .ContextUser.Orgs}}
67-
<li>
68-
<a href="{{AppSubUrl}}/{{.Name}}">
69-
<i class="octicon octicon-organization"></i>
70-
<strong class="text truncate item-name">{{.Name}}</strong>
71-
<span class="ui right text light grey">
72-
{{.NumRepos}} <i class="octicon octicon-repo rear"></i>
73-
</span>
74-
</a>
75-
</li>
76-
{{end}}
77-
</ul>
78-
</div>
79-
</div>
80-
{{end}}
81-
82-
<div v-if="tab === 'mirrors'" class="ui tab active list">
83-
<h4 class="ui top attached header">
84-
{{.i18n.Tr "home.my_mirrors"}} <span class="ui grey label">{{.MirrorCount}}</span>
85-
<div class="ui right">
86-
<a class="poping up" href="{{AppSubUrl}}/repo/migrate?mirror=1" data-content="{{.i18n.Tr "new_mirror"}}" data-variation="tiny inverted" data-position="left center">
87-
<i class="plus icon"></i>
88-
<span class="sr-only">{{.i18n.Tr "new_mirror"}}</span>
89-
</a>
90-
</div>
91-
</h4>
92-
<div class="ui attached table segment">
93-
<ul class="repo-owner-name-list">
94-
{{range .Mirrors}}
95-
<li {{if .IsPrivate}}class="private"{{end}}>
96-
<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
97-
<i class="octicon octicon-repo-clone"></i>
98-
<strong class="text truncate item-name">{{.Name}}</strong>
99-
<span class="ui right text light grey">
100-
{{.Interval}}H <i class="octicon octicon-sync rear"></i>
101-
</span>
102-
</a>
103-
</li>
104-
{{end}}
105-
</ul>
106-
</div>
107-
</div>
11+
<repo-search :search-limit="searchLimit" :suburl="suburl" :uid="uid"><i class="fa fa-spinner fa-spin"></i></repo-search>
10812
</div>
10913
</div>
11014
</div>
11115
</div>
16+
{{template "user/dashboard/repo-search" .}}
11217
{{template "base/footer" .}}

0 commit comments

Comments
 (0)