Apply ng to issue dashboard

This commit is contained in:
Antoine GIRARD 2015-03-19 00:35:17 +01:00
parent e9c599b48a
commit 96a71aaed8
9 changed files with 184 additions and 60 deletions

View file

@ -2413,6 +2413,35 @@ textarea#issue-add-content {
#milestone-list .action-bar a { #milestone-list .action-bar a {
margin-left: 12px; margin-left: 12px;
} }
.issues.list-group {
margin: 10px 0 20px 0;
}
.issues.list-group > .list-group-item {
background-color: #FFF;
border: 1px solid #e5e5e5;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
}
.issues.list-group > .list-group-item:hover {
background-color: rgba(19, 95, 215, 0.03);
}
.issues.list-group > .list-group-item > .title {
margin-bottom: 16px;
font-weight: bold;
font-size: 1.2em;
}
.issues.list-group > .list-group-item > .title > a {
color: #444;
}
.issues.list-group > .list-group-item > .info span {
margin-right: 12px;
color: #888;
line-height: 20px;
}
.issues.list-group > .list-group-item > .info span > a {
color: #444;
}
.org-header-alert .alert { .org-header-alert .alert {
margin-top: 10px; margin-top: 10px;
} }

View file

@ -188,7 +188,8 @@ input:focus,
background-color: #f2fffc; background-color: #f2fffc;
outline: none; outline: none;
} }
button { button,
.btn {
overflow: visible; overflow: visible;
padding: .6em 1.2em; padding: .6em 1.2em;
} }
@ -431,6 +432,19 @@ dt {
background-color: #fafafa; background-color: #fafafa;
color: #444444; color: #444444;
} }
.btn-white {
background-color: #ffffff;
color: #444444;
border: 1px solid #c6c6c6;
}
.btn-white:hover {
background-color: #e8e8e8;
color: #444444;
}
.btn-white.active {
background-color: #e8e8e8;
color: #444444;
}
.btn-active { .btn-active {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0 4px rgba(0, 0, 0, 0.15) inset;
} }
@ -475,6 +489,22 @@ dt {
background-image: none !important; background-image: none !important;
color: #ffffff; color: #ffffff;
} }
.btn-group {
display: inline-block;
}
.btn-group > .btn {
position: relative;
float: left;
margin-right: -1px;
}
.btn-group > .btn:first-child {
border-bottom-left-radius: .25em;
border-top-left-radius: .25em;
}
.btn-group > .btn:last-child {
border-bottom-right-radius: .25em;
border-top-right-radius: .25em;
}
.ipt:focus { .ipt:focus {
border-color: #428bca; border-color: #428bca;
} }
@ -550,6 +580,10 @@ ul.menu > li > a:hover {
background-color: #eaeaea; background-color: #eaeaea;
color: #444444; color: #444444;
} }
ul.menu > li > a.active {
background-color: #4183c4;
color: #FFF;
}
ul.menu > li.current > a, ul.menu > li.current > a,
ul.menu > li.hover > a { ul.menu > li.hover > a {
color: #444444; color: #444444;
@ -597,6 +631,7 @@ ul.menu-vertical > li.head,
ul.menu-down > li.head { ul.menu-down > li.head {
display: block; display: block;
padding: .4em 1.2em; padding: .4em 1.2em;
margin-bottom: 4px;
} }
ul.menu-vertical > li.down, ul.menu-vertical > li.down,
ul.menu-down > li.down { ul.menu-down > li.down {

View file

@ -512,3 +512,29 @@ textarea#issue-add-content {
} }
} }
} }
.issues.list-group {
margin: 10px 0 20px 0;
> .list-group-item {
background-color: #FFF;
border: 1px solid #e5e5e5;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
&:hover {
background-color: rgba(19, 95, 215, 0.03);
}
> .title {
margin-bottom: 16px;
font-weight: bold;
font-size: 1.2em;
> a { color: #444; }
}
> .info span {
margin-right: 12px;
color: #888;
line-height: 20px;
> a { color: #444; }
}
}
}

View file

@ -70,6 +70,19 @@
} }
} }
.btn-white {
background-color: @btnWhiteColor;
color: @baseFontColor;
border: 1px solid @btnWhiteBorderColor;
&:hover {
background-color: @btnWhiteHoverColor;
color: @baseFontColor;
}
&.active {
background-color: @btnWhiteHoverColor;
color: @baseFontColor;
}
}
// status buttons // status buttons
.btn-active { .btn-active {
@ -118,6 +131,22 @@
} }
} }
.btn-group {
display: inline-block;
> .btn {
position: relative;
float: left;
margin-right: -1px;
&:first-child{
border-bottom-left-radius: .25em;
border-top-left-radius: .25em;
}
&:last-child{
border-bottom-right-radius: .25em;
border-top-right-radius: .25em;
}
}
}
// input form elements // input form elements
.ipt { .ipt {
&:focus { &:focus {

View file

@ -11,6 +11,10 @@ ul.menu {
background-color: @lineMenuHoverBgColor; background-color: @lineMenuHoverBgColor;
color: @lineMenuHoverFontColor; color: @lineMenuHoverFontColor;
} }
&.active {
background-color: #4183c4;
color: #FFF;
}
} }
&.current > a, &.current > a,
&.hover > a { &.hover > a {
@ -67,6 +71,7 @@ ul.menu-down {
> li.head { > li.head {
display: block; display: block;
padding: .4em 1.2em; padding: .4em 1.2em;
margin-bottom: 4px;
} }
> li.down { > li.down {
position: relative; position: relative;

View file

@ -238,7 +238,7 @@ input,
} }
} }
button { button,.btn {
overflow: visible; overflow: visible;
padding: .6em 1.2em; padding: .6em 1.2em;
} }

View file

@ -45,6 +45,10 @@
@btnGrayHoverColor: #FAFAFA; @btnGrayHoverColor: #FAFAFA;
@btnGrayBorderColor: #D0D0D0; @btnGrayBorderColor: #D0D0D0;
@btnWhiteColor: #FFF;
@btnWhiteHoverColor: #e8e8e8;
@btnWhiteBorderColor: #c6c6c6;
@lineMenuHoverBgColor: #EAEAEA; @lineMenuHoverBgColor: #EAEAEA;
@lineMenuHoverFontColor: #444; @lineMenuHoverFontColor: #444;

View file

@ -262,7 +262,9 @@ func Email2User(ctx *middleware.Context) {
} }
func Issues(ctx *middleware.Context) { func Issues(ctx *middleware.Context) {
ctx.Data["Title"] = "Your Issues" ctx.Data["Title"] = ctx.Tr("issues")
ctx.Data["PageIsDashboard"] = true
ctx.Data["PageIsIssues"] = true
viewType := ctx.Query("type") viewType := ctx.Query("type")
types := []string{"assigned", "created_by"} types := []string{"assigned", "created_by"}
@ -386,5 +388,8 @@ func Issues(ctx *middleware.Context) {
} else { } else {
ctx.Data["ShowCount"] = issueStats.OpenCount ctx.Data["ShowCount"] = issueStats.OpenCount
} }
ctx.Data["ContextUser"] = ctx.User
ctx.HTML(200, ISSUES) ctx.HTML(200, ISSUES)
} }

View file

@ -1,53 +1,44 @@
{{template "base/head" .}} {{template "ng/base/head" .}}
{{template "base/navbar" .}} {{template "ng/base/header" .}}
<div id="body-nav"> {{template "user/dashboard/nav" .}}
<div class="container"> <div id="dashboard-wrapper">
<ul class="nav nav-pills pull-right"> <div id="dashboard" class="container" data-page="user">
<li><a href="{{AppSubUrl}}/">News Feed</a></li> {{if .HasInfo}}<div class="alert alert-info">{{.InfoMsg}}</div>{{end}}
<li class="active"><a href="{{AppSubUrl}}/issues">Issues</a></li> <div id="issue">
<!-- <li><a href="{{AppSubUrl}}/pulls">Pull Requests</a></li> <div class="left grid-1-5 filter-list">
<li><a href="{{AppSubUrl}}/stars">Stars</a></li> --> <ul class="list-unstyled menu menu-vertical">
</ul> <li><a href="{{AppSubUrl}}/issues?state={{.State}}&repoid={{.RepoId}}" class="radius{{if eq .ViewType "all"}} active{{end}}" >In your repositories <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
<h3>Your Issues</h3> <li><a href="{{AppSubUrl}}/issues?type=assigned&repoid={{.RepoId}}&state={{.State}}" class="radius{{if eq .ViewType "assigned"}} active{{end}}">Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
</div> <li><a href="{{AppSubUrl}}/issues?type=created_by&repoid={{.RepoId}}&state={{.State}}" class="radius{{if eq .ViewType "created_by"}} active{{end}}">Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
<li><hr/></li>
{{range .Repos}}
<li><a href="{{AppSubUrl}}/issues?type={{$.ViewType}}{{if eq $.RepoId .Id}}{{else}}&repoid={{.Id}}{{end}}&state={{$.State}}" class="radius{{if eq $.RepoId .Id}} active{{end}}">{{$.SignedUser.Name}}/{{.Name}} <strong class="pull-right">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</strong></a></li>
{{end}}
</ul>
</div>
<div class="right grid-3-4">
<div class="filter-option">
<div class="btn-group">
<a class="btn btn-white btn-small issue-open{{if not .IsShowClosed}} active{{end}}" href="{{AppSubUrl}}/issues?type={{.ViewType}}&repoid={{.RepoId}}">Open</a>
<a class="btn btn-white btn-small issue-close{{if .IsShowClosed}} active{{end}}" href="{{AppSubUrl}}/issues?type={{.ViewType}}&repoid={{.RepoId}}&state=closed">Closed</a>
</div>
</div>
<div class="issues list-group">
{{range .Issues}}{{if .}}
<div class="list-group-item issue-item" id="issue-{{.Id}}" onclick="window.location.href='{{AppSubUrl}}/{{.Repo.Owner.Name}}/{{.Repo.Name}}/issues/{{.Index}}'">
<span class="number pull-right">#{{.Index}}</span>
<h5 class="title"><a href="{{AppSubUrl}}/{{.Repo.Owner.Name}}/{{.Repo.Name}}/issues/{{.Index}}">{{.Name}}</a></h5>
<p class="info">
<span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
<a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
<span class="time">{{TimeSince .Created $.Lang}}</span>
<span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
</p>
</div>
{{end}}{{end}}
</div>
</div>
</div>
</div>
</div> </div>
{{template "ng/base/footer" .}}
<div id="body" class="container" data-page="user">
{{if .HasInfo}}<div class="alert alert-info">{{.InfoMsg}}</div>{{end}}
<div id="issue">
<div class="col-md-3 filter-list">
<ul class="list-unstyled">
<li><a href="{{AppSubUrl}}/issues?state={{.State}}&repoid={{.RepoId}}"{{if eq .ViewType "all"}} class="active"{{end}}>In your repositories <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
<li><a href="{{AppSubUrl}}/issues?type=assigned&repoid={{.RepoId}}&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
<li><a href="{{AppSubUrl}}/issues?type=created_by&repoid={{.RepoId}}&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
<li><hr/></li>
{{range .Repos}}
<li><a href="{{AppSubUrl}}/issues?type={{$.ViewType}}{{if eq $.RepoId .Id}}{{else}}&repoid={{.Id}}{{end}}&state={{$.State}}" class="sm{{if eq $.RepoId .Id}} active{{end}}">{{$.SignedUser.Name}}/{{.Name}} <strong class="pull-right">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</strong></a></li>
{{end}}
</ul>
</div>
<div class="col-md-9">
<div class="filter-option">
<div class="btn-group">
<a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{AppSubUrl}}/issues?type={{.ViewType}}&repoid={{.RepoId}}">Open</a>
<a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{AppSubUrl}}/issues?type={{.ViewType}}&repoid={{.RepoId}}&state=closed">Closed</a>
</div>
</div>
<div class="issues list-group">
{{range .Issues}}{{if .}}
<div class="list-group-item issue-item" id="issue-{{.Id}}">
<span class="number pull-right">#{{.Index}}</span>
<h5 class="title"><a href="{{AppSubUrl}}/{{.Repo.Owner.Name}}/{{.Repo.Name}}/issues/{{.Index}}">{{.Name}}</a></h5>
<p class="info">
<span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
<a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
<span class="time">{{TimeSince .Created $.Lang}}</span>
<span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
</p>
</div>
{{end}}{{end}}
</div>
</div>
</div>
</div>
{{template "base/footer" .}}