coolaj86
/
gitroast
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Morlinest 2017-08-17 03:31:34 +02:00 committed by Lunny Xiao
parent 722bcefbbf
commit 951fb572a7
10 changed files with 205 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
options/locale/locale_en-US.ini
View File

@ -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

11
public/css/index.css
View File

@ -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;

94
public/js/index.js
View File

@ -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: {
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: '',
suburl: document.querySelector('meta[name=_suburl]').content,
uid: document.querySelector('meta[name=_context_uid]').content
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) {
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,
},
});
}

14
public/less/_base.less
View File

@ -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;
}

2
routers/api/v1/repo/repo.go
View File

@ -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,

1
routers/user/home.go
View File

@ -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() {

8
templates/base/footer.tmpl
View File

@ -45,10 +45,6 @@
<script src="{{AppSubUrl}}/js/draw.js"></script>
{{end}}
<!-- JavaScript -->
<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
<!-- Third-party libraries -->
{{if .RequireHighlightJS}}
<script src="{{AppSubUrl}}/plugins/highlight-9.11.0/highlight.pack.js"></script>
@ -66,5 +62,9 @@
<script src="{{AppSubUrl}}/js/libs/emojify-1.1.0.min.js"></script>
<script src="{{AppSubUrl}}/js/libs/clipboard-1.5.9.min.js"></script>
<script src="{{AppSubUrl}}/js/libs/vue.min.js"></script>
<!-- JavaScript -->
<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
</body>
</html>

3
templates/base/head.tmpl
View File

@ -17,6 +17,9 @@
{{if .ContextUser}}
<meta name="_context_uid" content="{{.ContextUser.ID}}" />
{{end}}
{{if .SearchLimit}}
<meta name="_search_limit" content="{{.SearchLimit}}" />
{{end}}
{{if .GoGetImport}}
<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">

99
templates/user/dashboard/dashboard.tmpl
View File

@ -8,105 +8,10 @@
{{template "user/dashboard/feeds" .}}
</div>
<div id="dashboard-repo-search" class="six wide column">
<div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item stackable tabable menu">
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
{{if not .ContextUser.IsOrganization}}
<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
{{end}}
<a :class="{item: true, active: tab === 'mirrors'}" @click="changeTab('mirrors')">{{.i18n.Tr "mirror"}}</a>
</div>
<div v-if="tab === 'repos'" class="ui tab active list">
<div class="ui fluid input">
<input @keyUp="searchKeyUp" v-model="searchQuery" id="search_repo" placeholder="{{.i18n.Tr "home.search_repos"}}">
</div>
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">{{.ContextUser.NumRepos}}</span>
<div class="ui right">
<a class="poping up" href="{{AppSubUrl}}/repo/create" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
</a>
</div>
</h4>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private}">
<a :href="'{{AppSubUrl}}/' + repo.full_name">
<i :class="repoClass(repo)"></i>
<strong class="text truncate item-name">${ repo.full_name }</strong>
<span class="ui right text light grey">
${ repo.stars_count } <i class="octicon octicon-star rear"></i>
</span>
</a>
</li>
{{if gt .ContextUser.NumRepos .MaxShowRepoNum}}
<li>
<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
</li>
{{end}}
</ul>
</div>
</div>
{{if not .ContextUser.IsOrganization}}
<div v-if="tab === 'orgs'" class="ui tab active list">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
<div class="ui right">
{{if .SignedUser.CanCreateOrganization}}
<a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
</a>
{{end}}
</div>
</h4>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
{{range .ContextUser.Orgs}}
<li>
<a href="{{AppSubUrl}}/{{.Name}}">
<i class="octicon octicon-organization"></i>
<strong class="text truncate item-name">{{.Name}}</strong>
<span class="ui right text light grey">
{{.NumRepos}} <i class="octicon octicon-repo rear"></i>
</span>
</a>
</li>
{{end}}
</ul>
</div>
</div>
{{end}}
<div v-if="tab === 'mirrors'" class="ui tab active list">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_mirrors"}} <span class="ui grey label">{{.MirrorCount}}</span>
<div class="ui right">
<a class="poping up" href="{{AppSubUrl}}/repo/migrate?mirror=1" data-content="{{.i18n.Tr "new_mirror"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_mirror"}}</span>
</a>
</div>
</h4>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
{{range .Mirrors}}
<li {{if .IsPrivate}}class="private"{{end}}>
<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
<i class="octicon octicon-repo-clone"></i>
<strong class="text truncate item-name">{{.Name}}</strong>
<span class="ui right text light grey">
{{.Interval}}H <i class="octicon octicon-sync rear"></i>
</span>
</a>
</li>
{{end}}
</ul>
</div>
</div>
<repo-search :search-limit="searchLimit" :suburl="suburl" :uid="uid"><i class="fa fa-spinner fa-spin"></i></repo-search>
</div>
</div>
</div>
</div>
{{template "user/dashboard/repo-search" .}}
{{template "base/footer" .}}

81
templates/user/dashboard/repo-search.tmpl Normal file
View File

@ -0,0 +1,81 @@
<script type="text/x-template" id="repo-search-template">
<div>
{{if not .ContextUser.IsOrganization}}
<div class="ui two item stackable tabable menu">
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
</div>
{{end}}
<div v-if="tab === 'repos'" class="ui tab active list">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${ reposTotal }</span>
<div class="ui right">
<a class="poping up" href="{{AppSubUrl}}/repo/create" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
</a>
</div>
</h4>
<div class="ui attached secondary segment repos-search">
<div class="ui fluid icon input" :class="{loading: isLoading}">
<input @input="searchRepos" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
<i class="search icon"></i>
</div>
<div class="ui secondary tiny pointing borderless menu center aligned grid repos-filter">
<a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">{{.i18n.Tr "all"}}</a>
<a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">{{.i18n.Tr "sources"}}</a>
<a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">{{.i18n.Tr "forks"}}</a>
<a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">{{.i18n.Tr "mirrors"}}</a>
<a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">{{.i18n.Tr "collaborative"}}</a>
</div>
</div>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
<a :href="'{{AppSubUrl}}/' + repo.full_name">
<i :class="repoClass(repo)"></i>
<strong class="text truncate item-name">${ repo.full_name }</strong>
<span class="ui right text light grey">
${ repo.stars_count } <i class="octicon octicon-star rear"></i>
</span>
</a>
</li>
<li v-if="repos.length < reposTotal">
<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
</li>
</ul>
</div>
</div>
{{if not .ContextUser.IsOrganization}}
<div v-if="tab === 'orgs'" class="ui tab active list">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
<div class="ui right">
{{if .SignedUser.CanCreateOrganization}}
<a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
</a>
{{end}}
</div>
</h4>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
{{range .ContextUser.Orgs}}
<li>
<a href="{{AppSubUrl}}/{{.Name}}">
<i class="octicon octicon-organization"></i>
<strong class="text truncate item-name">{{.Name}}</strong>
<span class="ui right text light grey">
{{.NumRepos}} <i class="octicon octicon-repo rear"></i>
</span>
</a>
</li>
{{end}}
</ul>
</div>
</div>
{{end}}
</div>
</script>