playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

new dashboard ui

pull/1950/head
Unknwon 9 years ago
parent
a6c7716742
commit
0f438ef0b3
8 changed files with 353 additions and 267 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 68
      public/css/gogs.css
  2. 1
      public/js/gogs.js
  3. 10
      public/less/_base.less
  4. 64
      public/less/_dashboard.less
  5. 119
      templates/user/dashboard/dashboard.tmpl
  6. 38
      templates/user/dashboard/feeds.tmpl
  7. 46
      templates/user/dashboard/nav.tmpl
  8. 4
      templates/user/dashboard/navbar.tmpl

68
public/css/gogs.css
Unescape View File

@ -818,6 +818,9 @@ pre.raw {
.ui .text.grey a:hover {
color: #000 !important;
}
.ui .text.light.grey {
color: #888 !important;
}
.ui .text.green {
color: #6cc644 !important;
}
@ -836,6 +839,12 @@ pre.raw {
.ui .text.small {
font-size: 0.75em;
}
.ui .text.bold {
font-weight: bold;
}
.ui .text.italic {
font-style: italic;
}
.ui .text.truncate {
overflow: hidden;
text-overflow: ellipsis;
@ -2539,48 +2548,107 @@ ol.linenums {
padding-top: 15px;
padding-bottom: 80px;
}
.dashboard.feeds .context.user.menu,
.dashboard.issues .context.user.menu {
z-index: 101;
min-width: 200px;
}
.dashboard.feeds .context.user.menu .ui.header,
.dashboard.issues .context.user.menu .ui.header {
font-size: 1rem;
text-transform: none;
}
.dashboard.feeds .filter.menu .item,
.dashboard.issues .filter.menu .item {
text-align: left;
}
.dashboard.feeds .filter.menu .item .text,
.dashboard.issues .filter.menu .item .text {
height: 16px;
vertical-align: middle;
}
.dashboard.feeds .filter.menu .item .text.truncate,
.dashboard.issues .filter.menu .item .text.truncate {
width: 85%;
}
.dashboard.feeds .filter.menu .item .floating.label,
.dashboard.issues .filter.menu .item .floating.label {
top: 7px;
left: 90%;
width: 15%;
}
.dashboard.feeds .filter.menu .jump.item,
.dashboard.issues .filter.menu .jump.item {
margin: 1px;
padding-right: 0;
}
.dashboard.feeds .filter.menu .menu,
.dashboard.issues .filter.menu .menu {
max-height: 300px;
overflow-x: auto;
right: 0!important;
left: auto!important;
}
.dashboard.feeds .ui.right .head.menu,
.dashboard.issues .ui.right .head.menu {
margin-top: -5px;
}
.dashboard.feeds .ui.right .head.menu .item.active,
.dashboard.issues .ui.right .head.menu .item.active {
color: #d9453d;
}
.dashboard.feeds .head.menu .octicon,
.dashboard.issues .head.menu .octicon {
margin-right: 5px;
}
.feeds .news .ui.avatar {
margin-top: 13px;
}
.feeds .news p {
line-height: 1em;
}
.feeds .news .time-since {
font-size: 13px;
}
.feeds .news .issue.title {
line-height: 1em;
width: 80%;
}
.feeds .news .push.news .content ul {
font-size: 13px;
list-style: none;
padding-left: 10px;
}
.feeds .news .push.news .content ul img {
margin-bottom: -2px;
}
.feeds .news .push.news .content ul .text.truncate {
width: 80%;
margin-bottom: -5px;
}
.feeds .list .header {
padding-top: 10px;
padding-bottom: 5px;
}
.feeds .list ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.feeds .list ul li:not(:last-child) {
border-bottom: 1px solid #EAEAEA;
}
.feeds .list ul li.private {
background-color: #fcf8e9;
}
.feeds .list ul li a {
padding: 6px 1.2em;
display: block;
}
.feeds .list ul li a .octicon {
margin-right: 6px;
color: #888;
}
.admin {
padding-top: 15px;
padding-bottom: 80px;

1
public/js/gogs.js
Unescape View File

@ -583,6 +583,7 @@ $(document).ready(function () {
}
});
$('.tabular.menu .item').tab();
$('.tabable.menu .item').tab();
$('.toggle.button').click(function () {
$($(this).data('target')).slideToggle(100);

10
public/less/_base.less
Unescape View File

@ -84,6 +84,7 @@ pre {
}
}
}
.ui {
&.left {
float: left;
@ -120,6 +121,9 @@ pre {
}
}
}
&.light.grey {
color: #888 !important;
}
&.green {
color: #6cc644 !important;
}
@ -139,6 +143,12 @@ pre {
&.small {
font-size: 0.75em;
}
&.bold {
font-weight: bold;
}
&.italic {
font-style: italic;
}
&.truncate {
overflow: hidden;

64
public/less/_dashboard.less
Unescape View File

@ -2,6 +2,7 @@
padding-top: 15px;
padding-bottom: @footer-margin * 2;
&.feeds,
&.issues {
.context.user.menu {
z-index: 101;
@ -53,3 +54,66 @@
}
}
}
&.feeds {
.news {
.ui.avatar {
margin-top: 13px;
}
p {
line-height: 1em;
}
.time-since {
font-size: 13px;
}
.issue.title {
line-height: 1em;
width: 80%;
}
.push.news .content ul {
font-size: 13px;
list-style: none;
padding-left: 10px;
img {
margin-bottom: -2px;
}
.text.truncate {
width: 80%;
margin-bottom: -5px;
}
}
}
.list {
.header {
padding-top: 10px;
padding-bottom: 5px;
}
ul {
list-style: none;
margin: 0;
padding-left: 0;
li {
&:not(:last-child) {
border-bottom: 1px solid #EAEAEA;
}
&.private {
background-color: #fcf8e9;
}
a {
padding: 6px 1.2em;
display: block;
.octicon {
margin-right: 6px;
color: #888;
}
}
}
}
}
}

119
templates/user/dashboard/dashboard.tmpl
Unescape View File

@ -1,47 +1,34 @@
{{template "ng/base/head" .}}
{{template "ng/base/header" .}}
{{template "user/dashboard/nav" .}}
<div id="dashboard-wrapper">
<div id="dashboard" class="container">
{{template "ng/base/alert" .}}
<div id="dashboard-news" class="left grid-2-3">
{{template "base/head" .}}
<div class="dashboard feeds">
{{template "user/dashboard/navbar" .}}
<div class="ui container">
<div class="ui grid">
<div class="ten wide column">
{{template "user/dashboard/feeds" .}}
</div>
<div class="right grid-1-3" id="dashboard-sidebar">
<ul id="dashboard-sidebar-menu" class="menu menu-line">
<li class="js-tab-nav js-tab-nav-show first" data-tab-target="#dashboard-my-repo"><a href="#">{{.i18n.Tr "repository"}}</a></li>
<div class="six wide column">
<div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item tabable menu">
<a class="item active" data-tab="repos">{{.i18n.Tr "repository"}}</a>
{{if not .ContextUser.IsOrganization}}
<li class="js-tab-nav" data-tab-target="#dashboard-my-org"><a href="#">{{.i18n.Tr "organization"}}</a></li>
<a class="item" data-tab="orgs">{{.i18n.Tr "organization"}}</a>
{{end}}
<li class="js-tab-nav last" data-tab-target="#dashboard-my-mirror"><a href="#">{{.i18n.Tr "mirror"}}</a></li>
<li class="drop right">
<button class="btn btn-green text-bold" id="dashboard-new-repo">
<i class="octicon octicon-plus"></i>
</button>
<ul class="menu menu-vertical drop-down" id="dashboard-new-repo-menu">
<li><a href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
<li><a href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i>{{.i18n.Tr "new_migrate"}}</a></li>
<li><a href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i>{{.i18n.Tr "new_org"}}</a></li>
</ul>
</li>
</ul>
<div class="panel" id="dashboard-my-repo">
<div class="panel-header">
<h4 class="left">{{.i18n.Tr "home.my_repos"}}
<span class="repo-count label label-gray label-radius">{{.ContextUser.NumRepos}}</span>
</h4>
&nbsp;
<a class="item" data-tab="mirrors">{{.i18n.Tr "mirror"}}</a>
</div>
<div class="panel-body">
<ul class="list-no-style">
<div class="ui tab active list" data-tab="repos">
<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="ui blue tiny show-panel button" href="{{AppSubUrl}}/repo/create">{{.i18n.Tr "new_repo"}}</a>
</div>
</h4>
<div class="ui attached table segment">
<ul>
{{range .Repos}}
<li {{if .IsPrivate}}class="private"{{end}}>
<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
<i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
<span class="repo-name">
<strong class="repo">{{.Name}}</strong>
</span>
<span class="right repo-star">
<strong>{{.Name}}</strong>
<span class="ui right text light grey">
<i class="octicon octicon-star"></i>{{.NumStars}}
</span>
</a>
@ -49,23 +36,19 @@
{{end}}
</ul>
</div>
{{if not .ContextUser.IsOrganization}}
<div class="panel-header repo-contrib-header">
<h4 class="text-bold">{{.i18n.Tr "home.collaborative_repos"}}
<span class="repo-count label label-gray label-radius">{{.CollaborateCount}}</span>
<h4 class="ui top attached header">
{{.i18n.Tr "home.collaborative_repos"}} <span class="ui grey label">{{.CollaborateCount}}</span>
</h4>
</div>
<div class="panel-body">
<ul class="list-no-style">
<div class="ui attached table segment">
<ul>
{{range .CollaborativeRepos}}
<li {{if .IsPrivate}}class="private"{{end}}>
<a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">
<i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
<span class="repo-name">
<span class="repo-name-prefix">{{.Owner.Name}} / </span>
<strong class="repo">{{.Name}}</strong>
</span>
<span class="right repo-star">
{{.Owner.Name}} / <strong>{{.Name}}</strong>
<span class="ui right text light grey">
<i class="octicon octicon-star"></i>{{.NumStars}}
</span>
</a>
@ -75,23 +58,23 @@
</div>
{{end}}
</div>
{{if not .ContextUser.IsOrganization}}
<div class="panel" id="dashboard-my-org">
<div class="panel-header">
<h4 class="text-bold">{{.i18n.Tr "home.my_orgs"}}
<span class="repo-count label label-gray label-radius">{{.ContextUser.GetOrganizationCount}}</span>
</h4>
<div class="ui tab list" data-tab="orgs">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
<div class="ui right">
<a class="ui blue tiny show-panel button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "new_org"}}</a>
</div>
<div class="panel-body">
<ul class="list-no-style">
</h4>
<div class="ui attached table segment">
<ul>
{{range .ContextUser.Orgs}}
<li>
<a href="{{AppSubUrl}}/{{.Name}}">
<i class="octicon octicon-organization"></i>
<span class="repo-name">
<strong class="repo">{{.Name}}</strong>
</span>
<span class="right repo-star">
<strong>{{.Name}}</strong>
<span class="ui right text light grey">
<i class="octicon octicon-repo"></i>{{.NumRepos}}
</span>
</a>
@ -101,22 +84,19 @@
</div>
</div>
{{end}}
<div class="panel" id="dashboard-my-mirror">
<div class="panel-header">
<h4 class="text-bold">{{.i18n.Tr "home.my_mirrors"}}
<span class="repo-count label label-gray label-radius">{{.MirrorCount}}</span>
<div class="ui tab list" data-tab="mirrors">
<h4 class="ui top attached header">
{{.i18n.Tr "home.my_mirrors"}} <span class="ui grey label">{{.MirrorCount}}</span>
</h4>
</div>
<div class="panel-body">
<ul class="list-no-style">
<div class="ui attached table segment">
<ul>
{{range .Mirrors}}
<li {{if .IsPrivate}}class="private"{{end}}>
<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
<i class="octicon octicon-repo-clone"></i>
<span class="repo-name">
<strong class="repo">{{.Name}}</strong>
</span>
<span class="right repo-star">
<strong>{{.Name}}</strong>
<span class="ui right text light grey">
<i class="octicon octicon-sync"></i>{{.Interval}}H
</span>
</a>
@ -128,4 +108,5 @@
</div>
</div>
</div>
{{template "ng/base/footer" .}}
</div>
{{template "base/footer" .}}

38
templates/user/dashboard/feeds.tmpl
Unescape View File

@ -1,10 +1,12 @@
{{range .Feeds}}
<div class="news clear">
<div class="avatar left">
<img class="avatar-30" src="{{.ActAvatar}}" alt="">
<div class="news">
<div class="ui left">
<img class="ui avatar image" src="{{.ActAvatar}}" alt="">
</div>
<div class="content left {{if eq .GetOpType 5}}push-news{{end}} grid-4-5">
<p class="text-bold">
<div class="ui grid">
<div class="ui fifteen wide column">
<div class="{{if eq .GetOpType 5}}push news{{end}}">
<p>
<a href="{{AppSubUrl}}/{{.GetActUserName}}">{{.GetActUserName}}</a>
{{if eq .GetOpType 1}}
{{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoPath | Str2html}}
@ -24,36 +26,42 @@
{{$.i18n.Tr "action.push_tag" .GetRepoLink .GetBranch .GetRepoPath | Str2html}}
{{else if eq .GetOpType 10}}
{{ $index := index .GetIssueInfos 0}}
{{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}} – {{.GetIssueTitle}}
{{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}}
{{else if eq .GetOpType 11}}
{{ $index := index .GetIssueInfos 0}}
{{$.i18n.Tr "action.merge_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}}
{{end}}
</p>
{{if eq .GetOpType 5}}
<div class="news-content content">
<ul class="list-no-style">
<div class="content">
<ul>
{{ $push := ActionContent2Commits .}}
{{ $repoLink := .GetRepoLink}}
{{if $push.Commits}}
{{range $push.Commits}}
<li><img class="avatar-16" src="{{AvatarLink .AuthorEmail}}?s=16"> <a href="{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> <span class="text-truncate grid-4-5">{{.Message}}</span></li>
<li><img class="img-8" src="{{AvatarLink .AuthorEmail}}"> <a href="{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> <span class="text truncate light grey">{{.Message}}</span></li>
{{end}}
{{end}}
{{if $push.CompareUrl}}<li><a href="{{AppSubUrl}}/{{$push.CompareUrl}}">{{$.i18n.Tr "action.compare_2_commits"}} »</a></li>{{end}}
</ul>
</div>
{{else if eq .GetOpType 6}}
<p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
<p class="text light grey">{{index .GetIssueInfos 1}}</p>
{{else if eq .GetOpType 7}}
<p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
<p class="text light grey">{{index .GetIssueInfos 1}}</p>
{{else if eq .GetOpType 10}}
<p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
<span class="text truncate issue title">{{.GetIssueTitle}}</span>
<p class="text light grey">{{index .GetIssueInfos 1}}</p>
{{else if eq .GetOpType 11}}
<p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
<p class="text light grey">{{index .GetIssueInfos 1}}</p>
{{end}}
<p class="news-time text-italic">{{TimeSince .GetCreate $.i18n.Lang}}</p>
<p class="text italic light grey">{{TimeSince .GetCreate $.i18n.Lang}}</p>
</div>
<i class="mega-octicon octicon-{{ActionIcon .GetOpType}} right"></i>
</div>
<div class="ui one wide column">
<i class="text grey mega-octicon octicon-{{ActionIcon .GetOpType}}"></i>
</div>
</div>
<div class="ui divider"></div>
</div>
{{end}}

46
templates/user/dashboard/nav.tmpl
Unescape View File

@ -1,46 +0,0 @@
<div id="dashboard-header">
<ul class="menu menu-line container">
<li id="dashboard-selection-menu" class="down drop">
<a href="#" class="text-bold radius">
<img class="avatar-30" src="{{.ContextUser.AvatarLink}}" alt="user-avatar" />
{{.ContextUser.Name}}
</a>
<div class="drop-down panel panel-radius">
<p class="panel-header"><strong>{{.i18n.Tr "home.switch_dashboard_context"}}</strong></p>
<ul class="menu menu-vertical switching-list" id="dashboard-switch-menu">
<li class="org {{if eq .ContextUser.Id .SignedUser.Id}}checked{{end}}">
<a href="{{AppSubUrl}}/">
<i class="octicon octicon-check"></i>
<img class="avatar-24" src="{{.SignedUser.AvatarLink}}" alt="user-avatar" />
{{.SignedUser.Name}}
</a>
</li>
{{range .Orgs}}
<li class="org {{if eq $.ContextUser.Id .Id}}checked{{end}}">
<a href="{{.DashboardLink}}">
<i class="octicon octicon-check"></i>
<img class="avatar-24" src="{{.AvatarLink}}" alt="user-avatar" />
{{.Name}}
</a>
</li>
{{end}}
<!-- <li>
<a href="{{AppSubUrl}}/user/settings/orgs"><i class="octicon octicon-organization"></i>{{.i18n.Tr "manage_org"}}</a>
</li> -->
<li>
<a href="{{AppSubUrl}}/org/create"><i class="octicon octicon-plus"></i>{{.i18n.Tr "new_org"}}</a>
</li>
</ul>
</div>
</li>
<li class="right">
<a {{if $.PageIsIssues}}class="current"{{end}} href="{{AppSubUrl}}/{{if .ContextUser.IsOrganization}}org/{{.ContextUser.Name}}/{{end}}issues"><i class="octicon octicon-issue-opened"></i>{{.i18n.Tr "issues"}}</a>
</li>
<!-- <li class="right">
<a {{if .PageIsPulls}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}pulls"><i class="octicon octicon-git-pull-request"></i>{{.i18n.Tr "pull_requests"}}</a>
</li> -->
<li class="right">
<a {{if $.PageIsNews}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}"><i class="octicon octicon-rss"></i>{{.i18n.Tr "news_feed"}}</a>
</li>
</ul>
</div>

4
templates/user/dashboard/navbar.tmpl
Unescape View File

@ -10,12 +10,12 @@
{{.i18n.Tr "home.switch_dashboard_context"}}
</div>
<div class="items">
<a class="{{if eq .ContextUser.Id .SignedUser.Id}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else}}pulls{{end}}">
<a class="{{if eq .ContextUser.Id .SignedUser.Id}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{end}}">
<img class="ui avatar image" src="{{.SignedUser.AvatarLink}}">
{{.SignedUser.Name}}
</a>
{{range .Orgs}}
<a class="{{if eq $.ContextUser.Id .Id}}active selected{{end}} item" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else}}pulls{{end}}">
<a class="{{if eq $.ContextUser.Id .Id}}active selected{{end}} item" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else}}dashboard{{end}}">
<img class="ui avatar image" src="{{.AvatarLink}}">
{{.Name}}
</a>

Write Preview
Loading…
Cancel
Save