From b866dc92d77c37c12982609b641c159d9eb109bf Mon Sep 17 00:00:00 2001
From: fuxiaohei <fuxiaohei@vip.qq.com>
Date: Tue, 4 Nov 2014 21:58:28 +0800
Subject: [PATCH] finish issue list ui draft
---
public/ng/css/gogs.css | 56 +++++++++++++++++++++++++-
public/ng/css/ui.css | 27 +++++++++++++
public/ng/less/gogs/issue.less | 69 +++++++++++++++++++++++++++++++++
public/ng/less/ui.less | 3 +-
public/ng/less/ui/pager.less | 28 +++++++++++++
public/ng/less/ui/var.less | 9 +++++
templates/repo/issue2/list.tmpl | 55 ++++++++++++++++++++++++++
7 files changed, 245 insertions(+), 2 deletions(-)
create mode 100644 public/ng/less/ui/pager.less
diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 8e5b590c00..91588d9916 100644
--- a/public/ng/css/gogs.css
+++ b/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;
}
diff --git a/public/ng/css/ui.css b/public/ng/css/ui.css
index a6c218ad89..8d562485ba 100644
--- a/public/ng/css/ui.css
+++ b/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;
+}
diff --git a/public/ng/less/gogs/issue.less b/public/ng/less/gogs/issue.less
index 12cc59fc69..1ab54ee370 100644
--- a/public/ng/less/gogs/issue.less
+++ b/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;
}
\ No newline at end of file
diff --git a/public/ng/less/ui.less b/public/ng/less/ui.less
index 3db8b12cb6..fc7ad3c2fb 100644
--- a/public/ng/less/ui.less
+++ b/public/ng/less/ui.less
@@ -7,4 +7,5 @@
@import "ui/label";
@import "ui/bread";
@import "ui/alert";
-@import "ui/table";
\ No newline at end of file
+@import "ui/table";
+@import "ui/pager";
\ No newline at end of file
diff --git a/public/ng/less/ui/pager.less b/public/ng/less/ui/pager.less
new file mode 100644
index 0000000000..18e24cd132
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/public/ng/less/ui/var.less b/public/ng/less/ui/var.less
index e3c5ada633..c9eb162930 100644
--- a/public/ng/less/ui/var.less
+++ b/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;
diff --git a/templates/repo/issue2/list.tmpl b/templates/repo/issue2/list.tmpl
index d2440a3c5e..384371eb04 100644
--- a/templates/repo/issue2/list.tmpl
+++ b/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" .}}
\ No newline at end of file