From 0af3a5b60327f9784f17bf5a4691c948a0f271e5 Mon Sep 17 00:00:00 2001
From: fuxiaohei <fuxiaohei@vip.qq.com>
Date: Thu, 4 Dec 2014 23:22:16 +0800
Subject: [PATCH] add issue list filter ui

---
 public/ng/css/gogs.css          | 55 ++++++++++++++++++++++++++-----
 public/ng/less/gogs/issue.less  | 58 ++++++++++++++++++++++++++++++---
 templates/repo/issue2/list.tmpl | 32 +++++++++++++++++-
 3 files changed, 132 insertions(+), 13 deletions(-)

diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 53ce72602b..dad84583d7 100644
--- a/public/ng/css/gogs.css
+++ b/public/ng/css/gogs.css
@@ -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;
diff --git a/public/ng/less/gogs/issue.less b/public/ng/less/gogs/issue.less
index e03f79e34e..15f3a32d30 100644
--- a/public/ng/less/gogs/issue.less
+++ b/public/ng/less/gogs/issue.less
@@ -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;
diff --git a/templates/repo/issue2/list.tmpl b/templates/repo/issue2/list.tmpl
index db69afb7aa..c7a271d14a 100644
--- a/templates/repo/issue2/list.tmpl
+++ b/templates/repo/issue2/list.tmpl
@@ -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">