1
0
mirror of https://github.com/go-gitea/gitea.git synced 2024-05-11 05:55:29 +00:00

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

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>

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}}">

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" .}}

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>