finish issue list ui draft

public/ng/css/gogs.css

@@ -1067,7 +1067,7 @@ The register and sign-in page style
   padding: 18px 0;
 }
 .repo-wide-wrapper {
-  padding: 18px 0;
+  padding: 18px;
   position: relative;
 }
 #repo-clone-url {
@@ -1992,6 +1992,60 @@ textarea#issue-add-content {
 #issue-new > a button {
   height: 34px;
 }
+#issue-list-menu {
+  padding: 16px 0 12px 0;
+  border-bottom: 1px solid #BBB;
+  margin-bottom: 12px;
+}
+#issue-list-menu .mark a {
+  color: #AAA;
+}
+#issue-list-menu .mark a:hover {
+  color: #444;
+}
+#issue-list-menu .mark.hover a {
+  color: #222;
+  font-weight: bold;
+}
+#issue-list-menu > .left .mark {
+  margin-right: 12px;
+}
+#issue-list-menu > .right .mark {
+  margin-left: 12px;
+}
+#issue-list .item {
+  position: relative;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px dashed #AAA;
+}
+#issue-list .item .title > .title-text {
+  color: #444;
+  font-size: 15px;
+  margin: 0 6px;
+}
+#issue-list .comment {
+  color: #666;
+  position: absolute;
+  top: 6px;
+  right: 0;
+}
+#issue-list .issue-label a {
+  color: #FFF;
+}
+#issue-list .desc {
+  color: #999;
+}
+#issue-list .desc a {
+  color: #999;
+}
+#issue-list .desc a:hover {
+  color: #03a2ef;
+}
+#issue-list-pager {
+  margin: 18px 0 24px 0;
+  font-size: 14px;
+}
 .org-header-alert .alert {
   margin-top: 10px;
 }

public/ng/css/ui.css

@@ -881,3 +881,30 @@ table td {
 .table-radius tbody tr:last-child > td:last-child {
   border-bottom-right-radius: .3em;
 }
+.pager .page {
+  padding: 2px 6px;
+  margin: 0 3px;
+  background-color: #cccccc;
+  color: #444444;
+}
+.pager .page:hover,
+.pager .page.hover {
+  background-color: #428bca;
+  color: #ffffff;
+}
+.pager .prev,
+.pager .next {
+  padding: 2px 8px;
+  margin: 0 4px;
+  background-color: #505050;
+  color: #fafafa;
+}
+.pager .prev.invalid,
+.pager .next.invalid {
+  background-color: #eeeeee;
+  color: #aaaaaa;
+  cursor: not-allowed;
+}
+.pager .page-radius {
+  border-radius: .2em;
+}

public/ng/less/gogs/issue.less

@@ -250,4 +250,73 @@ textarea#issue-add-content {
       height: 34px;
     }
   }
+}
+// issue list menu
+#issue-list-menu {
+  padding: 16px 0 12px 0;
+  border-bottom: 1px solid #BBB;
+  margin-bottom: 12px;
+  .mark {
+    a {
+      color: #AAA;
+      &:hover {
+        color: #444;
+      }
+    }
+    &.hover {
+      a {
+        color: #222;
+        font-weight: bold;
+      }
+    }
+  }
+  > .left {
+    .mark {
+      margin-right: 12px;
+    }
+  }
+  > .right {
+    .mark {
+      margin-left: 12px;
+    }
+  }
+}
+// each issue list item
+#issue-list {
+  .item {
+    position: relative;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+    border-bottom: 1px dashed #AAA;
+    .title > .title-text {
+      color: #444;
+      font-size: 15px;
+      margin: 0 6px;
+    }
+  }
+  .comment {
+    color: #666;
+    position: absolute;
+    top: 6px;
+    right: 0;
+  }
+  .issue-label {
+    a {
+      color: #FFF;
+    }
+  }
+  .desc {
+    color: #999;
+    a {
+      color: #999;
+      &:hover {
+        color: #03a2ef;
+      }
+    }
+  }
+}
+// issue list pager
+#issue-list-pager {
+  margin: 18px 0 24px 0;
+  font-size: 14px;
 }

public/ng/less/ui.less

@@ -7,4 +7,5 @@
 @import "ui/label";
 @import "ui/bread";
 @import "ui/alert";
-@import "ui/table";
+@import "ui/table";
+@import "ui/pager";

public/ng/less/ui/pager.less

@@ -0,0 +1,28 @@
+@import "var";
+
+.pager{
+  .page{
+    padding: 2px 6px;
+    margin: 0 3px;
+    background-color: @pagerPageBgColor;
+    color: @pagerPageColor;
+    &:hover,&.hover{
+      background-color: @pagerHoverBgColor;
+      color: @pagerHoverColor;
+    }
+  }
+  .prev,.next{
+    padding: 2px 8px;
+    margin: 0 4px;
+    background-color: @pagerDirectionBgColor;
+    color: @pagerDirectionColor;
+    &.invalid{
+      background-color: @pagerInvalidBgColor;
+      color: @pagerInvalidColor;
+      cursor: not-allowed;
+    }
+  }
+  .page-radius{
+    border-radius: .2em;
+  }
+}

public/ng/less/ui/var.less

@@ -81,3 +81,12 @@
 
 @preBgColor:#444;
 @preFontColor:#FFF;
+
+@pagerPageColor:#444;
+@pagerPageBgColor:#CCC;
+@pagerHoverBgColor:#428BCA;
+@pagerHoverColor:#FFF;
+@pagerInvalidColor:#AAA;
+@pagerInvalidBgColor:#EEE;
+@pagerDirectionBgColor:#505050;
+@pagerDirectionColor:#FAFAFA;

templates/repo/issue2/list.tmpl

@@ -11,6 +11,61 @@
             <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green btn-radius text-bold">New Issue</button></a></li>
             <li class="right"><a href="#">Filter</a></li>
         </ul>
+        <div id="issue-list-container">
+            <div id="issue-list-menu">
+                <div class="left">
+                    <span class="mark open hover"><a href="#">
+                        <i class="octicon octicon-issue-opened"></i> 88 Open
+                    </a></span>
+                    <span class="mark close"><a href="">
+                        <i class="octicon octicon-issue-closed"></i> 12 Close
+                    </a></span>
+                </div>
+                <div class="clear"></div>
+            </div>
+            <ul id="issue-list" class="list-no-style">
+                <li class="item" id="issue-id">
+                    <a class="comment" href="#">
+                        <i class="octicon octicon-comment"></i> 7
+                    </a>
+                    <p class="title text-bold">
+                        <span class="label label-black label-radius index-num">#588</span>
+                        <a href="#" class="title-text">Delete account text and/or translations missing</a>
+                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                    </p>
+                    <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
+                </li>
+                <li class="item" id="issue-id2">
+                    <a class="comment" href="#">
+                        <i class="octicon octicon-comment"></i> 7
+                    </a>
+                    <p class="title text-bold">
+                        <span class="label label-black label-radius index-num">#588</span>
+                        <a href="#" class="title-text">Delete account text and/or translations missing</a>
+                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                    </p>
+                    <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
+                </li>
+                <li class="item" id="issue-id3">
+                    <a class="comment" href="#">
+                        <i class="octicon octicon-comment"></i> 7
+                    </a>
+                    <p class="title text-bold">
+                        <span class="label label-black label-radius index-num">#588</span>
+                        <a href="#" class="title-text">Disabling attachments breaks issues and comments ajax submit</a>
+                        <span class="label label-radius label-red issue-label"><a href="#">bug</a></span>
+                    </p>
+                    <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
+                </li>
+            </ul>
+            <div id="issue-list-pager" class="pager text-center">
+                <a class="prev page-radius invalid" href="#">Prev</a>
+                <a class="page page-radius" href="#">1</a>
+                <a class="page page-radius hover" href="#">2</a>
+                <a class="page page-radius" href="#">3</a>
+                <a class="next page-radius" href="#">Next</a>
+            </div>
+        </div>
     </div>
 </div>
 {{template "ng/base/footer" .}}