From 951fb572a769acc965ec74b7152334e55b26de80 Mon Sep 17 00:00:00 2001 From: Morlinest Date: Thu, 17 Aug 2017 03:31:34 +0200 Subject: [PATCH] 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 --- options/locale/locale_en-US.ini | 5 ++ public/css/index.css | 11 +++ public/js/index.js | 102 +++++++++++++++++----- public/less/_base.less | 14 +++ routers/api/v1/repo/repo.go | 2 + routers/user/home.go | 1 + templates/base/footer.tmpl | 8 +- templates/base/head.tmpl | 3 + templates/user/dashboard/dashboard.tmpl | 99 +-------------------- templates/user/dashboard/repo-search.tmpl | 81 +++++++++++++++++ 10 files changed, 205 insertions(+), 121 deletions(-) create mode 100644 templates/user/dashboard/repo-search.tmpl diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 7fee0c2a9..b81da2bb2 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -46,6 +46,11 @@ your_profile = Your Profile your_starred = Your Starred your_settings = Your Settings +all = All +sources = Sources +mirrors = Mirrors +collaborative = Collaborative + activities = Activities pull_requests = Pull Requests issues = Issues diff --git a/public/css/index.css b/public/css/index.css index 774b55962..133af2690 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -471,6 +471,17 @@ footer .ui.language .menu { padding-right: 30px !important; } } +[v-cloak] { + display: none !important; +} +.repos-search { + padding-bottom: 0 !important; +} +.repos-filter { + margin-top: 0 !important; + border-bottom-width: 0 !important; + margin-bottom: 2px !important; +} .markdown:not(code) { overflow: hidden; font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; diff --git a/public/js/index.js b/public/js/index.js index d79b94b92..3152b2a5a 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1655,29 +1655,45 @@ $(function () { }); }); -function initDashboardSearch() { - var el = document.getElementById('dashboard-repo-search'); - if (!el) { - return; - } +function initVueComponents(){ + var vueDelimeters = ['${', '}']; - new Vue({ - delimiters: ['${', '}'], - el: el, + Vue.component('repo-search', { + delimiters: vueDelimeters, + template: '#repo-search-template', - data: { - tab: 'repos', - repos: [], - searchQuery: '', - suburl: document.querySelector('meta[name=_suburl]').content, - uid: document.querySelector('meta[name=_context_uid]').content + props: { + searchLimit: { + type: Number, + default: 10 + }, + suburl: { + type: String, + required: true + }, + uid: { + type: Number, + required: true + }, + }, + + data: function() { + return { + tab: 'repos', + repos: [], + reposTotal: 0, + reposFilter: 'all', + searchQuery: '', + isLoading: false + } }, mounted: function() { this.searchRepos(); + var self = this; Vue.nextTick(function() { - document.querySelector('#search_repo').focus(); + self.$refs.search.focus(); }); }, @@ -1686,19 +1702,45 @@ function initDashboardSearch() { this.tab = t; }, - searchKeyUp: function() { - this.searchRepos(); + changeReposFilter: function(filter) { + this.reposFilter = filter; + }, + + showRepo: function(repo, filter) { + switch (filter) { + case 'sources': + return repo.owner.id == this.uid && !repo.mirror && !repo.fork; + case 'forks': + return repo.owner.id == this.uid && !repo.mirror && repo.fork; + case 'mirrors': + return repo.mirror; + case 'collaborative': + return repo.owner.id != this.uid; + default: + return true; + } }, searchRepos: function() { var self = this; - $.getJSON(this.searchURL(), function(result) { - self.repos = result.data; + this.isLoading = true; + var searchedQuery = this.searchQuery; + $.getJSON(this.searchURL(), function(result, textStatus, request) { + if (searchedQuery == self.searchQuery) { + self.repos = result.data; + if (searchedQuery == "") { + self.reposTotal = request.getResponseHeader('X-Total-Count'); + } + } + }).always(function() { + if (searchedQuery == self.searchQuery) { + self.isLoading = false; + } }); }, searchURL: function() { - return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery; + return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery + '&limit=' + this.searchLimit; }, repoClass: function(repo) { @@ -1713,5 +1755,25 @@ function initDashboardSearch() { } } } + }) +} + +function initDashboardSearch() { + var el = document.getElementById('dashboard-repo-search'); + if (!el) { + return; + } + + initVueComponents(); + + new Vue({ + delimiters: ['${', '}'], + el: el, + + data: { + searchLimit: document.querySelector('meta[name=_search_limit]').content, + suburl: document.querySelector('meta[name=_suburl]').content, + uid: document.querySelector('meta[name=_context_uid]').content, + }, }); } diff --git a/public/less/_base.less b/public/less/_base.less index ba4821035..572cec870 100644 --- a/public/less/_base.less +++ b/public/less/_base.less @@ -464,3 +464,17 @@ footer { padding-right: 30px !important; } } + +[v-cloak] { + display: none !important; +} + +.repos-search { + padding-bottom: 0 !important; +} + +.repos-filter { + margin-top: 0 !important; + border-bottom-width: 0 !important; + margin-bottom: 2px !important; +} \ No newline at end of file diff --git a/routers/api/v1/repo/repo.go b/routers/api/v1/repo/repo.go index edd6a7263..e44159817 100644 --- a/routers/api/v1/repo/repo.go +++ b/routers/api/v1/repo/repo.go @@ -5,6 +5,7 @@ package repo import ( + "fmt" "strings" api "code.gitea.io/sdk/gitea" @@ -91,6 +92,7 @@ func Search(ctx *context.APIContext) { } ctx.SetLinkHeader(int(count), setting.API.MaxResponseItems) + ctx.Header().Set("X-Total-Count", fmt.Sprintf("%d", count)) ctx.JSON(200, api.SearchResults{ OK: true, Data: results, diff --git a/routers/user/home.go b/routers/user/home.go index b2096bc2c..1707d9d09 100644 --- a/routers/user/home.go +++ b/routers/user/home.go @@ -131,6 +131,7 @@ func Dashboard(ctx *context.Context) { ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard") ctx.Data["PageIsDashboard"] = true ctx.Data["PageIsNews"] = true + ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum // Only user can have collaborative repositories. if !ctxUser.IsOrganization() { diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl index 923f39e85..a0c14db21 100644 --- a/templates/base/footer.tmpl +++ b/templates/base/footer.tmpl @@ -45,10 +45,6 @@ {{end}} - - - - {{if .RequireHighlightJS}} @@ -66,5 +62,9 @@ + + + + diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index bb6f1ecaf..88d2b14a4 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -17,6 +17,9 @@ {{if .ContextUser}} {{end}} + {{if .SearchLimit}} + + {{end}} {{if .GoGetImport}} diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl index 48d6966e1..01619ff4e 100644 --- a/templates/user/dashboard/dashboard.tmpl +++ b/templates/user/dashboard/dashboard.tmpl @@ -8,105 +8,10 @@ {{template "user/dashboard/feeds" .}} +{{template "user/dashboard/repo-search" .}} {{template "base/footer" .}} diff --git a/templates/user/dashboard/repo-search.tmpl b/templates/user/dashboard/repo-search.tmpl new file mode 100644 index 000000000..6b8bde586 --- /dev/null +++ b/templates/user/dashboard/repo-search.tmpl @@ -0,0 +1,81 @@ + \ No newline at end of file