add issue list filter ui

This commit is contained in:
fuxiaohei 2014-12-04 23:22:16 +08:00
parent cb6be94358
commit 0af3a5b603
3 changed files with 132 additions and 13 deletions

View File

@ -2061,10 +2061,6 @@ textarea#issue-add-content {
font-size: 15px;
margin: 0 6px;
}
#issue-list .item .index-num,
#pull-list .item .index-num {
padding: .25em .6em;
}
#issue-list .comment,
#pull-list .comment {
color: #666;
@ -2072,10 +2068,6 @@ textarea#issue-add-content {
top: 6px;
right: 0;
}
#issue-list .issue-label,
#pull-list .issue-label {
padding: .25em .6em;
}
#issue-list .issue-label a,
#pull-list .issue-label a {
color: #FFF;
@ -2092,6 +2084,53 @@ textarea#issue-add-content {
#pull-list .desc a:hover {
color: #03a2ef;
}
#issue-list-filter .drop > a {
width: 90px;
padding: 0;
margin-left: 12px;
text-align: center;
}
#issue-list-filter .drop-down {
z-index: 999;
width: 236px;
left: -158px;
top: 22px;
padding: 0 12px;
}
#issue-list-filter .drop-down h4 {
line-height: 40px;
border-bottom: 1px solid #CCC;
margin-bottom: 0;
}
#issue-list-filter .drop-down li {
line-height: 30px;
border-bottom: 1px dashed #EEE;
padding-left: 9px;
}
#issue-list-filter .drop-down li:hover {
background-color: #fcffec;
}
#issue-list-filter .drop-down > ul > li > a {
display: block;
}
#issue-list-filter .labels .color {
margin-top: 8px;
display: inline-block;
width: 12px;
height: 12px;
background-color: red;
margin-right: 9px;
margin-left: 9px;
}
#issue-list-filter .labels .name {
vertical-align: top;
display: inline-block;
color: #444;
}
#issue-list-filter .milestones a {
color: #444;
font-weight: bold;
}
#issue-list-pager {
margin: 18px 0 24px 0;
font-size: 14px;

View File

@ -295,9 +295,6 @@ textarea#issue-add-content {
font-size: 15px;
margin: 0 6px;
}
.index-num {
padding: .25em .6em;
}
}
.comment {
color: #666;
@ -306,7 +303,6 @@ textarea#issue-add-content {
right: 0;
}
.issue-label {
padding: .25em .6em;
a {
color: #FFF;
}
@ -321,6 +317,60 @@ textarea#issue-add-content {
}
}
}
// issue list filter
#issue-list-filter{
.drop > a{
width: 90px;
padding: 0;
margin-left: 12px;
text-align: center;
}
.drop-down{
z-index: 999;
width: 236px;
left:-158px; // 260 - 90 - 12
top:22px;
padding: 0 12px;
h4{
line-height: 40px;
border-bottom: 1px solid #CCC;
margin-bottom: 0;
}
li{
line-height: 30px;
border-bottom: 1px dashed #EEE;
padding-left: 9px;
&:hover{
background-color: #fcffec;
}
}
> ul > li > a{
display: block;
}
}
.labels{
.color{
margin-top: 8px;
display: inline-block;
width: 12px;
height: 12px;
background-color: red;
margin-right: 9px;
margin-left: 9px;
}
.name{
vertical-align: top;
display: inline-block;
color: #444;
}
}
.milestones{
a{
color: #444;
font-weight: bold;
}
}
}
// issue list pager
#issue-list-pager {
margin: 18px 0 24px 0;

View File

@ -9,7 +9,7 @@
<li><a href="#">Labels</a></li>
<li><a href="#">Milestones</a></li>
<li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
<li class="right"><a href="#">Filter</a></li>
<!--<li class="right"><a href="#">Filter</a></li>-->
</ul>
<div id="issue-list-container">
<div id="issue-list-menu">
@ -21,6 +21,36 @@
<i class="octicon octicon-issue-closed"></i> 12 Close
</a></span>
</div>
<ul id="issue-list-filter" class="right menu menu-line">
<li class="down drop label-filter">
<a href="#">Labels</a>
<div class="drop-down">
<h4>Labels</h4>
<ul class="labels list-no-style">
<li class="no-label"><strong>no label</strong></li>
<li><a href="#"><span class="color"></span><span class="name">bug</span></a></li>
<li><a href="#"><span class="color"></span><span class="name">feature</span></a></li>
<li><a href="#"><span class="color"></span><span class="name">roadmap</span></a></li>
</ul>
</div>
</li>
<li class="down drop milestone-filter">
<a href="#">Milestones</a>
<div class="drop-down">
<h4>Milestones</h4>
<ul class="milestones list-no-style">
<li class="no-label"><strong>no milestone</strong></li>
<li><a href="#">v1</a></li>
</ul>
</div>
</li>
<li class="down drop assignee-list">
<a href="#">Assignee</a>
<div class="drop-down">
aabbcc
</div>
</li>
</ul>
<div class="clear"></div>
</div>
<ul id="issue-list" class="list-no-style">